Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): Add node name and version to NDV node settings #7731

Merged
merged 9 commits into from
Nov 23, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions cypress/e2e/5-ndv.cy.ts
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -368,4 +367,23 @@ 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.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 (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();
});
});
49 changes: 49 additions & 0 deletions cypress/fixtures/Test_workflow_ndv_version.json
Original file line number Diff line number Diff line change
@@ -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": {}
}
6 changes: 6 additions & 0 deletions cypress/pages/ndv.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -225,6 +227,10 @@ export class NDV extends BasePage {
});
this.actions.validateExpressionPreview(fieldName, `node doesn't exist`);
},

openSettings: () => {
this.getters.nodeSettingsTab().click();
},
};
}

Expand Down
1 change: 1 addition & 0 deletions packages/design-system/src/components/N8nTabs/Tabs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<div
v-else
:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
:data-test-id="`tab-${option.value}`"
@click="() => handleTabClick(option.value)"
>
<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
Expand Down
42 changes: 42 additions & 0 deletions packages/editor-ui/src/components/NodeSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,17 @@
@valueChanged="valueChanged"
@parameterBlur="onParameterBlur"
/>
<div class="node-version" data-test-id="node-version">
{{
$locale.baseText('nodeSettings.nodeVersion', {
interpolate: {
node: nodeType?.displayName as string,
version: node.typeVersion.toString(),
},
})
}}
<span>({{ nodeVersionTag }})</span>
</div>
</div>
</div>
<n8n-block-ui :show="blockUI" />
Expand Down Expand Up @@ -258,6 +269,29 @@ export default defineComponent({

return '';
},
nodeTypeVersions(): number[] {
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;
},
nodeVersionTag(): string {
if (!this.nodeType || this.nodeType.hidden) {
return this.$locale.baseText('nodeSettings.deprecated');
elsmr marked this conversation as resolved.
Show resolved Hide resolved
}

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) {
const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
Expand Down Expand Up @@ -1126,6 +1160,14 @@ export default defineComponent({
top: -25px;
}

.node-version {
border-top: var(--border-base);
font-size: var(--font-size-xs);
font-size: var(--font-size-2xs);
padding: var(--spacing-xs) 0 var(--spacing-2xs) 0;
color: var(--color-text-light);
}

.parameter-value {
input.expression {
border-style: dashed;
Expand Down
5 changes: 5 additions & 0 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -995,6 +995,11 @@
"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:<br/>a) Ask {owner} to share the credential with you, or<br/>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",
"nodeView.openNodesPanel": "Open nodes panel",
"nodeView.addATriggerNodeFirst": "Add a <a data-action='showNodeCreator'>Trigger Node</a> first",
"nodeView.addOrEnableTriggerNode": "<a data-action='showNodeCreator'>Add</a> or enable a Trigger node to execute the workflow",
Expand Down
5 changes: 5 additions & 0 deletions packages/editor-ui/src/stores/nodeTypes.store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,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);
Expand Down
Loading