From 56674b590c70e63824bc5e0ee65c2cf6c6beaab9 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Thu, 16 Nov 2023 11:50:23 +0100 Subject: [PATCH 1/8] Add node name and version to NDV node settings --- .../editor-ui/src/components/NodeSettings.vue | 35 +++++++++++++++++++ .../src/plugins/i18n/locales/en.json | 3 ++ 2 files changed, 38 insertions(+) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 7aca1f287d9f1..e84e1e0b9f012 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -152,6 +152,24 @@ @valueChanged="valueChanged" @parameterBlur="onParameterBlur" /> +
+ {{ + $locale.baseText('nodeSettings.nodeVersion', { + interpolate: { + node: nodeType?.displayName as string, + version: node.typeVersion.toString(), + }, + }) + }} + ({{ $locale.baseText('nodeSettings.latest') }}) + + ({{ + $locale.baseText('nodeSettings.latestVersion', { + interpolate: { version: latestVersion.toString() }, + }) + }}) + +
@@ -258,6 +276,16 @@ export default defineComponent({ return ''; }, + nodeTypeVersions(): number[] { + if (!this.nodeType) return []; + return Array.isArray(this.nodeType.version) ? this.nodeType.version : [this.nodeType.version]; + }, + latestVersion(): number { + return Math.max(...this.nodeTypeVersions); + }, + isLatestNodeVersion(): boolean { + return this.latestVersion === this.node.typeVersion; + }, nodeTypeDescription(): string { if (this.nodeType?.description) { const shortNodeType = this.$locale.shortNodeType(this.nodeType.name); @@ -1126,6 +1154,13 @@ export default defineComponent({ top: -25px; } +.node-meta { + border-top: var(--border-base); + font-size: var(--font-size-xs); + padding: var(--spacing-xs) var(--spacing-2xs); + color: var(--color-text-light); +} + .parameter-value { input.expression { border-style: dashed; diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index 872ba3d3cdd31..a3da6aea8407e 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/packages/editor-ui/src/plugins/i18n/locales/en.json @@ -997,6 +997,9 @@ "nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)", "nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)", "nodeSettings.hasForeignCredential": "To edit this node, either:
a) Ask {owner} to share the credential with you, or
b) Duplicate the node and add your own credential", + "nodeSettings.latest": "Latest", + "nodeSettings.latestVersion": "Latest version {version}", + "nodeSettings.nodeVersion": "{node} node: version {version}", "nodeView.addNode": "Add node", "nodeView.addATriggerNodeFirst": "Add a Trigger Node first", "nodeView.addOrEnableTriggerNode": "Add or enable a Trigger node to execute the workflow", From aafd6ede05874e9ba1a53762e14baf2fc0281e26 Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Fri, 17 Nov 2023 17:38:46 +0100 Subject: [PATCH 2/8] Smaller text and better size padding. --- packages/editor-ui/src/components/NodeSettings.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index e84e1e0b9f012..9205323d34330 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -1157,7 +1157,8 @@ export default defineComponent({ .node-meta { border-top: var(--border-base); font-size: var(--font-size-xs); - padding: var(--spacing-xs) var(--spacing-2xs); + font-size: var(--font-size-2xs); + padding: var(--spacing-xs) 0 var(--spacing-2xs) 0; color: var(--color-text-light); } From f1f28c93f7313fa2c07cb138e3c1c6fb4480f040 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Mon, 20 Nov 2023 09:44:42 +0100 Subject: [PATCH 3/8] Handle deprecated nodes, show latest only when there are no other versions --- .../editor-ui/src/components/NodeSettings.vue | 30 ++++++++++++------- .../src/plugins/i18n/locales/en.json | 1 + .../editor-ui/src/stores/nodeTypes.store.ts | 5 ++++ 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 9205323d34330..7cb7061b39e96 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -161,14 +161,7 @@ }, }) }} - ({{ $locale.baseText('nodeSettings.latest') }}) - - ({{ - $locale.baseText('nodeSettings.latestVersion', { - interpolate: { version: latestVersion.toString() }, - }) - }}) - + ({{ nodeVersionTag }}) @@ -277,14 +270,29 @@ export default defineComponent({ return ''; }, nodeTypeVersions(): number[] { - if (!this.nodeType) return []; - return Array.isArray(this.nodeType.version) ? this.nodeType.version : [this.nodeType.version]; + if (!this.node) return []; + return this.nodeTypesStore.getNodeVersions(this.node.type); }, latestVersion(): number { return Math.max(...this.nodeTypeVersions); }, isLatestNodeVersion(): boolean { - return this.latestVersion === this.node.typeVersion; + console.log(this.nodeType, this.nodeTypeVersions, this.latestVersion, this.node?.typeVersion); + return this.latestVersion === this.node?.typeVersion; + }, + nodeVersionTag(): string { + console.log(this.nodeType); + if (!this.nodeType || this.nodeType.hidden) { + return this.$locale.baseText('nodeSettings.deprecated'); + } + + if (this.isLatestNodeVersion) { + return this.$locale.baseText('nodeSettings.latest'); + } + + return this.$locale.baseText('nodeSettings.latestVersion', { + interpolate: { version: this.latestVersion.toString() }, + }); }, nodeTypeDescription(): string { if (this.nodeType?.description) { diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index a3da6aea8407e..344891b2c8cb6 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/packages/editor-ui/src/plugins/i18n/locales/en.json @@ -998,6 +998,7 @@ "nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)", "nodeSettings.hasForeignCredential": "To edit this node, either:
a) Ask {owner} to share the credential with you, or
b) Duplicate the node and add your own credential", "nodeSettings.latest": "Latest", + "nodeSettings.deprecated": "Deprecated", "nodeSettings.latestVersion": "Latest version {version}", "nodeSettings.nodeVersion": "{node} node: version {version}", "nodeView.addNode": "Add node", diff --git a/packages/editor-ui/src/stores/nodeTypes.store.ts b/packages/editor-ui/src/stores/nodeTypes.store.ts index 0eef1be98709f..e70b0bc5944b2 100644 --- a/packages/editor-ui/src/stores/nodeTypes.store.ts +++ b/packages/editor-ui/src/stores/nodeTypes.store.ts @@ -91,6 +91,11 @@ export const useNodeTypesStore = defineStore(STORES.NODE_TYPES, { return nodeType ?? null; }; }, + getNodeVersions() { + return (nodeTypeName: string): number[] => { + return Object.keys(this.nodeTypes[nodeTypeName] ?? {}).map(Number); + }; + }, getCredentialOnlyNodeType() { return (nodeTypeName: string, version?: number): INodeTypeDescription | null => { const credentialName = getCredentialTypeName(nodeTypeName); From d8073bab279c9284bdba0e09c934eea5b618390e Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Mon, 20 Nov 2023 11:43:58 +0100 Subject: [PATCH 4/8] Remove console.logs --- packages/editor-ui/src/components/NodeSettings.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 7cb7061b39e96..7cd74e72a2887 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -277,11 +277,9 @@ export default defineComponent({ return Math.max(...this.nodeTypeVersions); }, isLatestNodeVersion(): boolean { - console.log(this.nodeType, this.nodeTypeVersions, this.latestVersion, this.node?.typeVersion); return this.latestVersion === this.node?.typeVersion; }, nodeVersionTag(): string { - console.log(this.nodeType); if (!this.nodeType || this.nodeType.hidden) { return this.$locale.baseText('nodeSettings.deprecated'); } From 8cd6ad2978cb1d0377a1a2aaa9d65eb9382a30cd Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Thu, 23 Nov 2023 11:37:51 +0100 Subject: [PATCH 5/8] Minor text update. --- packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index 344891b2c8cb6..88afaf155c86b 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/packages/editor-ui/src/plugins/i18n/locales/en.json @@ -999,8 +999,8 @@ "nodeSettings.hasForeignCredential": "To edit this node, either:
a) Ask {owner} to share the credential with you, or
b) Duplicate the node and add your own credential", "nodeSettings.latest": "Latest", "nodeSettings.deprecated": "Deprecated", - "nodeSettings.latestVersion": "Latest version {version}", - "nodeSettings.nodeVersion": "{node} node: version {version}", + "nodeSettings.latestVersion": "Latest version: {version}", + "nodeSettings.nodeVersion": "{node} node version {version}", "nodeView.addNode": "Add node", "nodeView.addATriggerNodeFirst": "Add a Trigger Node first", "nodeView.addOrEnableTriggerNode": "Add or enable a Trigger node to execute the workflow", From 2c80dd40a2231b48821652be65934d2edba0c6d2 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Thu, 23 Nov 2023 14:28:08 +0100 Subject: [PATCH 6/8] Add e2e test for node version --- cypress/e2e/5-ndv.cy.ts | 27 ++++++++-- .../fixtures/Test_workflow_ndv_version.json | 49 +++++++++++++++++++ cypress/pages/ndv.ts | 6 +++ .../src/components/N8nTabs/Tabs.vue | 1 + .../editor-ui/src/components/NodeSettings.vue | 4 +- 5 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 cypress/fixtures/Test_workflow_ndv_version.json diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts index f86c61ae020f1..67d0947aa7fe8 100644 --- a/cypress/e2e/5-ndv.cy.ts +++ b/cypress/e2e/5-ndv.cy.ts @@ -1,7 +1,6 @@ -import { WorkflowPage, NDV } from '../pages'; import { v4 as uuid } from 'uuid'; -import { getPopper, getVisiblePopper, getVisibleSelect } from '../utils'; -import { META_KEY } from '../constants'; +import { NDV, WorkflowPage } from '../pages'; +import { getVisibleSelect } from '../utils'; const workflowPage = new WorkflowPage(); const ndv = new NDV(); @@ -368,4 +367,26 @@ describe('NDV', () => { // Should call the endpoint only once (on mount), not for every keystroke cy.get('@fetchParameterOptions').should('have.been.calledOnce'); }); + + it('should show node name and version in settings', () => { + cy.fixture('Test_workflow_ndv_version.json').then((data) => { + cy.get('body').paste(JSON.stringify(data)); + workflowPage.actions.zoomToFit(); + + workflowPage.actions.openNode('Edit Fields (old)'); + ndv.actions.openSettings(); + ndv.getters.nodeVersion().should('have.text', 'Set node version 2 (Latest version: 3.2)'); + ndv.actions.close(); + + workflowPage.actions.openNode('Edit Fields (latest)'); + ndv.actions.openSettings(); + ndv.getters.nodeVersion().should('have.text', 'Edit Fields (Set) node version 3.2 (Latest)'); + ndv.actions.close(); + + workflowPage.actions.openNode('Function'); + ndv.actions.openSettings(); + ndv.getters.nodeVersion().should('have.text', 'Function node version 1 (Deprecated)'); + ndv.actions.close(); + }); + }); }); diff --git a/cypress/fixtures/Test_workflow_ndv_version.json b/cypress/fixtures/Test_workflow_ndv_version.json new file mode 100644 index 0000000000000..36e0815bb2f30 --- /dev/null +++ b/cypress/fixtures/Test_workflow_ndv_version.json @@ -0,0 +1,49 @@ +{ + "name": "Node versions", + "nodes": [ + { + "parameters": {}, + "id": "aadaed66-84ed-4cf8-bf21-082e9a65db76", + "name": "When clicking \"Execute Workflow\"", + "type": "n8n-nodes-base.manualTrigger", + "typeVersion": 1, + "position": [ + 1540, + 780 + ] + }, + { + "parameters": {}, + "id": "93d73a85-82f0-4380-a032-713d5dc82b32", + "name": "Function", + "type": "n8n-nodes-base.function", + "typeVersion": 1, + "position": [ + 2040, + 780 + ] + }, + { + "id": "50f322d9-c622-4dd0-8d38-e851502739dd", + "name": "Edit Fields (old)", + "type": "n8n-nodes-base.set", + "typeVersion": 2, + "position": [ + 1880, + 780 + ] + }, + { + "id": "93aaadac-55fe-4618-b1eb-f63e61d1446a", + "name": "Edit Fields (latest)", + "type": "n8n-nodes-base.set", + "typeVersion": 3.2, + "position": [ + 1720, + 780 + ] + } + ], + "pinData": {}, + "connections": {} + } diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts index 1c950be08c3e0..58749721a4e02 100644 --- a/cypress/pages/ndv.ts +++ b/cypress/pages/ndv.ts @@ -81,6 +81,8 @@ export class NDV extends BasePage { sqlEditorContainer: () => cy.getByTestId('sql-editor-container'), searchInput: () => cy.getByTestId('ndv-search'), pagination: () => cy.getByTestId('ndv-data-pagination'), + nodeVersion: () => cy.getByTestId('node-version'), + nodeSettingsTab: () => cy.getByTestId('tab-settings'), }; actions = { @@ -225,6 +227,10 @@ export class NDV extends BasePage { }); this.actions.validateExpressionPreview(fieldName, `node doesn't exist`); }, + + openSettings: () => { + this.getters.nodeSettingsTab().click(); + }, }; } diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue index 5425e9e1e306d..84243ddd1f1ed 100644 --- a/packages/design-system/src/components/N8nTabs/Tabs.vue +++ b/packages/design-system/src/components/N8nTabs/Tabs.vue @@ -35,6 +35,7 @@
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 9c8b000e94e1b..bbe44b562e538 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -152,7 +152,7 @@ @valueChanged="valueChanged" @parameterBlur="onParameterBlur" /> -
+
{{ $locale.baseText('nodeSettings.nodeVersion', { interpolate: { @@ -1160,7 +1160,7 @@ export default defineComponent({ top: -25px; } -.node-meta { +.node-version { border-top: var(--border-base); font-size: var(--font-size-xs); font-size: var(--font-size-2xs); From 2b5eda9a1f3164e68b86b2fa111b5c3ac3123b80 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Thu, 23 Nov 2023 17:14:26 +0100 Subject: [PATCH 7/8] Use e2e createFixtureWorkflow helper --- cypress/e2e/5-ndv.cy.ts | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts index 67d0947aa7fe8..3ccde6a56b938 100644 --- a/cypress/e2e/5-ndv.cy.ts +++ b/cypress/e2e/5-ndv.cy.ts @@ -368,25 +368,22 @@ describe('NDV', () => { cy.get('@fetchParameterOptions').should('have.been.calledOnce'); }); - it('should show node name and version in settings', () => { - cy.fixture('Test_workflow_ndv_version.json').then((data) => { - cy.get('body').paste(JSON.stringify(data)); - workflowPage.actions.zoomToFit(); + it.only('should show node name and version in settings', () => { + cy.createFixtureWorkflow('Test_workflow_ndv_version.json', `NDV test version ${uuid()}`); - workflowPage.actions.openNode('Edit Fields (old)'); - ndv.actions.openSettings(); - ndv.getters.nodeVersion().should('have.text', 'Set node version 2 (Latest version: 3.2)'); - ndv.actions.close(); + workflowPage.actions.openNode('Edit Fields (old)'); + ndv.actions.openSettings(); + ndv.getters.nodeVersion().should('have.text', 'Set node version 2 (Latest version: 3.2)'); + ndv.actions.close(); - workflowPage.actions.openNode('Edit Fields (latest)'); - ndv.actions.openSettings(); - ndv.getters.nodeVersion().should('have.text', 'Edit Fields (Set) node version 3.2 (Latest)'); - ndv.actions.close(); + workflowPage.actions.openNode('Edit Fields (latest)'); + ndv.actions.openSettings(); + ndv.getters.nodeVersion().should('have.text', 'Edit Fields (Set) node version 3.2 (Latest)'); + ndv.actions.close(); - workflowPage.actions.openNode('Function'); - ndv.actions.openSettings(); - ndv.getters.nodeVersion().should('have.text', 'Function node version 1 (Deprecated)'); - ndv.actions.close(); - }); + workflowPage.actions.openNode('Function'); + ndv.actions.openSettings(); + ndv.getters.nodeVersion().should('have.text', 'Function node version 1 (Deprecated)'); + ndv.actions.close(); }); }); From 63c270ba483a9606bc61a895bef776740a991b57 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Thu, 23 Nov 2023 17:40:00 +0100 Subject: [PATCH 8/8] Remove .only --- cypress/e2e/5-ndv.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts index 3ccde6a56b938..6043f14d93e25 100644 --- a/cypress/e2e/5-ndv.cy.ts +++ b/cypress/e2e/5-ndv.cy.ts @@ -368,7 +368,7 @@ describe('NDV', () => { cy.get('@fetchParameterOptions').should('have.been.calledOnce'); }); - it.only('should show node name and version in settings', () => { + it('should show node name and version in settings', () => { cy.createFixtureWorkflow('Test_workflow_ndv_version.json', `NDV test version ${uuid()}`); workflowPage.actions.openNode('Edit Fields (old)');