feat: HTML node (#5107)

*  Create HTML templating node PoC

* ♻️ Apply feedback

* 🐛 Scope CSS selectors

* ✏️ Adjust description

* ✏️ Adjust placeholder

*  Replace two custom files with package output

*  Add `codemirror-lang-html-n8n`

* 👕 Appease linter

* 🧪 Skip event bus tests

*  Revert "Skip event bus tests"

This reverts commit 5702585d0de3b8465660567132e9003e78f1104c.

* ✏️ Update codex

* 🧹 Cleanup

* 🐛 Restore original for `continueOnFail`

*  Improve `getResolvables`
This commit is contained in:
Iván Ovejero
2023-01-26 10:03:13 +01:00
committed by GitHub
parent a1710fbd27
commit 74e6f5d190
25 changed files with 1049 additions and 12 deletions

View File

@@ -316,6 +316,11 @@
:totalRuns="maxRunIndex"
/>
<run-data-html
v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'"
:inputData="inputData"
/>
<run-data-schema
v-else-if="hasNodeRun && displayMode === 'schema'"
:data="jsonData"
@@ -475,6 +480,7 @@ import {
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_ITEMS_AUTO_ALL,
TEST_PIN_DATA,
HTML_NODE_TYPE,
} from '@/constants';
import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
@@ -497,6 +503,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes';
const RunDataTable = () => import('@/components/RunDataTable.vue');
const RunDataJson = () => import('@/components/RunDataJson.vue');
const RunDataSchema = () => import('@/components/RunDataSchema.vue');
const RunDataHtml = () => import('@/components/RunDataHtml.vue');
export type EnterEditModeArgs = {
origin: 'editIconButton' | 'insertTestDataLink';
@@ -512,6 +519,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
RunDataTable,
RunDataJson,
RunDataSchema,
RunDataHtml,
},
props: {
nodeUi: {
@@ -598,6 +606,8 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
pane: this.paneType as 'input' | 'output',
branchIndex: this.currentOutputIndex,
});
if (this.paneType === 'output') this.setDisplayMode();
},
destroyed() {
this.hidePinDataDiscoveryTooltip();
@@ -651,6 +661,14 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
defaults.unshift({ label: this.$locale.baseText('runData.schema'), value: 'schema' });
}
if (
this.isPaneTypeOutput &&
this.activeNode?.type === HTML_NODE_TYPE &&
this.activeNode.parameters.operation === 'generateHtmlTemplate'
) {
defaults.unshift({ label: 'HTML', value: 'html' });
}
return defaults;
},
hasNodeRun(): boolean {
@@ -833,6 +851,9 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
isPaneTypeInput(): boolean {
return this.paneType === 'input';
},
isPaneTypeOutput(): boolean {
return this.paneType === 'output';
},
},
methods: {
onItemHover(itemIndex: number | null) {
@@ -1275,11 +1296,26 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
this.ndvStore.activeNodeName = this.node.name;
}
},
setDisplayMode() {
if (!this.activeNode) return;
const shouldDisplayHtml =
this.activeNode.type === HTML_NODE_TYPE &&
this.activeNode.parameters.operation === 'generateHtmlTemplate';
this.ndvStore.setPanelDisplayMode({
pane: 'output',
mode: shouldDisplayHtml ? 'html' : 'table',
});
},
},
watch: {
node() {
this.init();
},
hasNodeRun() {
if (this.paneType === 'output') this.setDisplayMode();
},
inputData: {
handler(data: INodeExecutionData[]) {
if (this.paneType && data) {