From 13bcec1661e1da736ff9c93869bc49a3038bdf1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Fri, 12 May 2023 11:45:10 +0200 Subject: [PATCH] feat(editor): Updating node reference pattern in expression editor (#6228) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(editor): Updating node reference pattern in expression editor * ⚡ Updated node ref when dragging data, telemetry and some comments * ✔️ Updating tests * 🔨 Removing old telemetry code, updating the current one based on the review feedback * ✔️ Updating mapping e2e tests --- cypress/e2e/14-mapping.cy.ts | 8 ++--- .../src/components/ExpressionEdit.vue | 29 ++++++++++--------- .../src/components/VariableSelector.vue | 18 +++++------- .../__snapshots__/RunDataJson.test.ts.snap | 22 +++++++------- .../src/utils/__tests__/mappingUtils.test.ts | 8 ++--- packages/editor-ui/src/utils/mappingUtils.ts | 3 +- 6 files changed, 43 insertions(+), 45 deletions(-) diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts index 2a42998ec..134deeb9f 100644 --- a/cypress/e2e/14-mapping.cy.ts +++ b/cypress/e2e/14-mapping.cy.ts @@ -194,7 +194,7 @@ describe('Data mapping', () => { ndv.actions.mapToParameter('value'); ndv.getters .inlineExpressionEditorInput() - .should('have.text', `{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }}`); + .should('have.text', `{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }}`); ndv.getters.parameterExpressionPreview('value').should('not.exist'); ndv.actions.switchInputMode('Table'); @@ -203,7 +203,7 @@ describe('Data mapping', () => { .inlineExpressionEditorInput() .should( 'have.text', - `{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }} {{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input }}`, + `{{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input[0].count }} {{ $('${SCHEDULE_TRIGGER_NODE_NAME}').item.json.input }}`, ); ndv.actions.validateExpressionPreview('value', ' '); @@ -311,12 +311,12 @@ describe('Data mapping', () => { ndv.getters.parameterInput('keepOnlySet').find('input[type="text"]') .should('exist') .invoke('css', 'border') - .then((border) => expect(border).to.include('1.5px dashed rgb(90, 76, 194)')); + .then((border) => expect(border).to.include('dashed rgb(90, 76, 194)')); ndv.getters.parameterInput('value').find('input[type="text"]') .should('exist') .invoke('css', 'border') - .then((border) => expect(border).to.include('1.5px dashed rgb(90, 76, 194)')); + .then((border) => expect(border).to.include('dashed rgb(90, 76, 194)')); }); }); diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue index 0da57bbf2..3b1e308aa 100644 --- a/packages/editor-ui/src/components/ExpressionEdit.vue +++ b/packages/editor-ui/src/components/ExpressionEdit.vue @@ -181,21 +181,22 @@ export default mixins(externalHooks, genericHelpers, debounceHelper).extend({ trackProperties.variable_type = 'Raw value'; } - if (splitVar[0].startsWith('$node')) { - const sourceNodeName = splitVar[0].split('"')[1]; - trackProperties.node_type_source = - this.workflowsStore.getNodeByName(sourceNodeName)?.type; - const nodeConnections: Array> = - this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main; - trackProperties.is_immediate_input = - nodeConnections && - nodeConnections[0] && - !!nodeConnections[0].find(({ node }) => node === this.ndvStore.activeNode?.name || '') - ? true - : false; + if (splitVar[0].startsWith("$('")) { + const match = /\$\('(.*?)'\)/.exec(splitVar[0]); + if (match && match.length > 1) { + const sourceNodeName = match[1]; + trackProperties.node_type_source = + this.workflowsStore.getNodeByName(sourceNodeName)?.type; + const nodeConnections: Array> = + this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main; + trackProperties.is_immediate_input = + nodeConnections && + nodeConnections[0] && + nodeConnections[0].some(({ node }) => node === this.ndvStore.activeNode?.name || ''); - if (splitVar[1].startsWith('parameter')) { - trackProperties.parameter_name_source = splitVar[1].split('"')[1]; + if (splitVar[1].startsWith('parameter')) { + trackProperties.parameter_name_source = splitVar[1].split('"')[1]; + } } } else { trackProperties.is_immediate_input = true; diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue index 1c2fa1f9c..f200fc89d 100644 --- a/packages/editor-ui/src/components/VariableSelector.vue +++ b/packages/editor-ui/src/components/VariableSelector.vue @@ -290,7 +290,7 @@ export default mixins(workflowHelpers).extend({ * @param {number} [runIndex=0] The index of the run * @param {string} [inputName='main'] The name of the input * @param {number} [outputIndex=0] The index of the output - * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json + * @param {boolean} [useShort=false] Use short notation $json vs. $('NodeName').json */ getNodeRunDataOutput( nodeName: string, @@ -351,7 +351,7 @@ export default mixins(workflowHelpers).extend({ * @param {string} nodeName The name of the node to get the data of * @param {IPinData[string]} pinData The node's pin data * @param {string} filterText Filter text for parameters - * @param {boolean} [useShort=false] Use short notation $json vs. $node[NodeName].json + * @param {boolean} [useShort=false] Use short notation $json vs. $('NodeName').json */ getNodePinDataOutput( nodeName: string, @@ -382,7 +382,7 @@ export default mixins(workflowHelpers).extend({ // Get json data if (outputData.hasOwnProperty('json')) { - const jsonPropertyPrefix = useShort === true ? '$json' : `$node["${nodeName}"].json`; + const jsonPropertyPrefix = useShort === true ? '$json' : `$('${nodeName}').item.json`; const jsonDataOptions: IVariableSelectorOption[] = []; for (const propertyName of Object.keys(outputData.json)) { @@ -407,7 +407,7 @@ export default mixins(workflowHelpers).extend({ // Get binary data if (outputData.hasOwnProperty('binary')) { - const binaryPropertyPrefix = useShort === true ? '$binary' : `$node["${nodeName}"].binary`; + const binaryPropertyPrefix = useShort === true ? '$binary' : `$('${nodeName}').item.binary`; const binaryData = []; let binaryPropertyData = []; @@ -523,7 +523,7 @@ export default mixins(workflowHelpers).extend({ returnData.push({ name: key, - key: `$node["${nodeName}"].context["${key}"]`, + key: `$('${nodeName}').context["${key}"]`, // @ts-ignore value: nodeContext[key], }); @@ -604,6 +604,7 @@ export default mixins(workflowHelpers).extend({ const currentNodeData: IVariableSelectorOption[] = []; let tempOptions: IVariableSelectorOption[]; + if (executionData !== null && executionData.data !== undefined) { const runExecutionData: IRunExecutionData = executionData.data; @@ -774,12 +775,7 @@ export default mixins(workflowHelpers).extend({ { name: this.$locale.baseText('variableSelector.parameters'), options: this.sortOptions( - this.getNodeParameters( - nodeName, - `$node["${nodeName}"].parameter`, - undefined, - filterText, - ), + this.getNodeParameters(nodeName, `$('${nodeName}').params`, undefined, filterText), ), } as IVariableSelectorOption, ]; diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap index e7f97d567..a0116bd5e 100644 --- a/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap +++ b/packages/editor-ui/src/components/__tests__/__snapshots__/RunDataJson.test.ts.snap @@ -94,7 +94,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="list" data-path="[0].list" data-target="mappable" - data-value="{{ $node.Set.json.list }}" + data-value="{{ $('Set').item.json.list }}" > "list" @@ -143,7 +143,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="list[0]" data-path="[0].list[0]" data-target="mappable" - data-value="{{ $node.Set.json.list[0] }}" + data-value="{{ $('Set').item.json.list[0] }}" > 1 @@ -185,7 +185,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="list[1]" data-path="[0].list[1]" data-target="mappable" - data-value="{{ $node.Set.json.list[1] }}" + data-value="{{ $('Set').item.json.list[1] }}" > 2 @@ -227,7 +227,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="list[2]" data-path="[0].list[2]" data-target="mappable" - data-value="{{ $node.Set.json.list[2] }}" + data-value="{{ $('Set').item.json.list[2] }}" > 3 @@ -292,7 +292,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="record" data-path="[0].record" data-target="mappable" - data-value="{{ $node.Set.json.record }}" + data-value="{{ $('Set').item.json.record }}" > "record" @@ -339,7 +339,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="name" data-path="[0].record.name" data-target="mappable" - data-value="{{ $node.Set.json.record.name }}" + data-value="{{ $('Set').item.json.record.name }}" > "name" @@ -417,7 +417,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="myNumber" data-path="[0].myNumber" data-target="mappable" - data-value="{{ $node.Set.json.myNumber }}" + data-value="{{ $('Set').item.json.myNumber }}" > "myNumber" @@ -467,7 +467,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="myStringNumber" data-path="[0].myStringNumber" data-target="mappable" - data-value="{{ $node.Set.json.myStringNumber }}" + data-value="{{ $('Set').item.json.myStringNumber }}" > "myStringNumber" @@ -517,7 +517,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="myStringText" data-path="[0].myStringText" data-target="mappable" - data-value="{{ $node.Set.json.myStringText }}" + data-value="{{ $('Set').item.json.myStringText }}" > "myStringText" @@ -567,7 +567,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="nil" data-path="[0].nil" data-target="mappable" - data-value="{{ $node.Set.json.nil }}" + data-value="{{ $('Set').item.json.nil }}" > "nil" @@ -617,7 +617,7 @@ exports[`RunDataJson.vue > renders json values properly 1`] = ` data-name="d" data-path="[0].d" data-target="mappable" - data-value="{{ $node.Set.json.d }}" + data-value="{{ $('Set').item.json.d }}" > "d" diff --git a/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts b/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts index 51862efec..a46912c5e 100644 --- a/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts +++ b/packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts @@ -207,7 +207,7 @@ describe('Mapping Utils', () => { path: ['sample', 'path'], }; const result = getMappedExpression(input); - expect(result).toBe('{{ $node.nodeName.json.sample.path }}'); + expect(result).toBe("{{ $('nodeName').item.json.sample.path }}"); }); it('should generate a mapped expression with mixed array path', () => { @@ -217,7 +217,7 @@ describe('Mapping Utils', () => { path: ['sample', 0, 'path'], }; const result = getMappedExpression(input); - expect(result).toBe('{{ $node.nodeName.json.sample[0].path }}'); + expect(result).toBe("{{ $('nodeName').item.json.sample[0].path }}"); }); it('should generate a mapped expression with special characters in array path', () => { @@ -228,7 +228,7 @@ describe('Mapping Utils', () => { }; const result = getMappedExpression(input); expect(result).toBe( - "{{ $node.nodeName.json.sample['path with-space']['path-with-hyphen'] }}", + "{{ $('nodeName').item.json.sample['path with-space']['path-with-hyphen'] }}", ); }); @@ -251,7 +251,7 @@ describe('Mapping Utils', () => { }; const result = getMappedExpression(input); expect(result).toBe( - "{{ $node.nodeName.json.sample['\"Execute\"']['`Execute`']['\\'Execute\\'']['[Execute]']['{Execute}']['execute?']['test,']['test:']['path.'] }}", + "{{ $('nodeName').item.json.sample['\"Execute\"']['`Execute`']['\\'Execute\\'']['[Execute]']['{Execute}']['execute?']['test,']['test:']['path.'] }}", ); }); diff --git a/packages/editor-ui/src/utils/mappingUtils.ts b/packages/editor-ui/src/utils/mappingUtils.ts index 47adeffde..2591c3bf3 100644 --- a/packages/editor-ui/src/utils/mappingUtils.ts +++ b/packages/editor-ui/src/utils/mappingUtils.ts @@ -27,7 +27,8 @@ export function getMappedExpression({ distanceFromActive: number; path: Array | string; }) { - const root = distanceFromActive === 1 ? '$json' : generatePath('$node', [nodeName, 'json']); + const root = + distanceFromActive === 1 ? '$json' : generatePath(`$('${nodeName}')`, ['item', 'json']); if (typeof path === 'string') { return `{{ ${root}${path} }}`;