mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix mapping with special characters (#5837)

Browse source 
* fix: Fix mapping with special characters

* refactor: rename var

* test: update more unit tests

* test: update mapping test

* test: update mapping test
This commit is contained in:
Mutasem Aldmour 2023-03-30 15:50:47 +02:00 committed by GitHub
parent ddc8f30e6d
commit f8f584c136
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 53 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
cypress/e2e/14-mapping.cy.ts
View file

@ -56,7 +56,7 @@ describe('Data mapping', () => {
ndv.actions.mapDataFromHeader(2, 'value');
ndv.getters
.inlineExpressionEditorInput()
.should('have.text', '{{ $json.timestamp }} {{ $json["Readable date"] }}');
.should('have.text', "{{ $json.timestamp }} {{ $json['Readable date'] }}");
});
it('maps expressions from table json, and resolves value based on hover', () => {
@ -193,7 +193,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', `{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }}`);
ndv.getters.parameterExpressionPreview('value').should('not.exist');
ndv.actions.switchInputMode('Table');
@ -202,7 +202,7 @@ describe('Data mapping', () => {
.inlineExpressionEditorInput()
.should(
'have.text',
`{{ $node["${SCHEDULE_TRIGGER_NODE_NAME}"].json.input[0].count }} {{ $node["${SCHEDULE_TRIGGER_NODE_NAME}"].json.input }}`,
`{{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input[0].count }} {{ $node['${SCHEDULE_TRIGGER_NODE_NAME}'].json.input }}`,
);
ndv.getters.parameterExpressionPreview('value').should('not.exist');
@ -259,7 +259,7 @@ describe('Data mapping', () => {
ndv.getters
.parameterInput('fieldName')
.find('input')
.should('have.value', 'input[0]["hello.world"]["my count"]');
.should('have.value', "input[0]['hello.world']['my count']");
});
it('maps expressions to updated fields correctly', () => {

4
packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue
View file

@ -77,7 +77,9 @@ export default Vue.extend({
segment.kind === 'plaintext'
? segment.plaintext.length
: // eslint-disable-next-line @typescript-eslint/no-explicit-any
(segment.resolved as any).toString().length;
segment.resolved
? (segment.resolved as any).toString().length
: 0;
segment.to = cursor;

4
packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
View file

@ -68,7 +68,9 @@ export default Vue.extend({
segment.kind === 'plaintext'
? segment.plaintext.length
: // eslint-disable-next-line @typescript-eslint/no-explicit-any
(segment.resolved as any).toString().length;
segment.resolved
? (segment.resolved as any).toString().length
: 0;
segment.to = cursor;
return segment;
})

20
packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
View file

@ -301,9 +301,9 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
class="label"
data-depth="1"
data-name="hello world"
data-path="[\\"hello world\\"]"
data-path="['hello world']"
data-target="mappable"
data-value="{{ $json[\\"hello world\\"] }}"
data-value="{{ $json['hello world'] }}"
>
<font-awesome-icon-stub
icon="list"
@ -347,9 +347,9 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
class="label"
data-depth="2"
data-name="object[0]"
data-path="[\\"hello world\\"][0]"
data-path="['hello world'][0]"
data-target="mappable"
data-value="{{ $json[\\"hello world\\"][0] }}"
data-value="{{ $json['hello world'][0] }}"
>
<font-awesome-icon-stub
icon="cube"
@ -395,9 +395,9 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
class="label"
data-depth="3"
data-name="test"
data-path="[\\"hello world\\"][0].test"
data-path="['hello world'][0].test"
data-target="mappable"
data-value="{{ $json[\\"hello world\\"][0].test }}"
data-value="{{ $json['hello world'][0].test }}"
>
<font-awesome-icon-stub
icon="cube"
@ -441,9 +441,9 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
class="label"
data-depth="4"
data-name="more to think about"
data-path="[\\"hello world\\"][0].test[\\"more to think about\\"]"
data-path="['hello world'][0].test['more to think about']"
data-target="mappable"
data-value="{{ $json[\\"hello world\\"][0].test[\\"more to think about\\"] }}"
data-value="{{ $json['hello world'][0].test['more to think about'] }}"
>
<font-awesome-icon-stub
icon="hashtag"
@ -481,9 +481,9 @@ exports[`RunDataJsonSchema.vue > renders schema with spaces and dots 1`] = `
class="label"
data-depth="3"
data-name="test.how"
data-path="[\\"hello world\\"][0][\\"test.how\\"]"
data-path="['hello world'][0]['test.how']"
data-target="mappable"
data-value="{{ $json[\\"hello world\\"][0][\\"test.how\\"] }}"
data-value="{{ $json['hello world'][0]['test.how'] }}"
>
<font-awesome-icon-stub
icon="font"

29
packages/editor-ui/src/utils/__tests__/mappingUtils.test.ts
View file

@ -228,7 +228,30 @@ describe('Mapping Utils', () => {
};
const result = getMappedExpression(input);
expect(result).toBe(
'{{ $node.nodeName.json.sample["path with-space"]["path-with-hyphen"] }}',
"{{ $node.nodeName.json.sample['path with-space']['path-with-hyphen'] }}",
);
});
it('should handle paths with special characters', () => {
const input = {
nodeName: 'nodeName',
distanceFromActive: 2,
path: [
'sample',
'"Execute"',
'`Execute`',
"'Execute'",
'[Execute]',
'{Execute}',
'execute?',
'test,',
'test:',
'path.',
],
};
const result = getMappedExpression(input);
expect(result).toBe(
"{{ $node.nodeName.json.sample['\"Execute\"']['`Execute`']['\\'Execute\\'']['[Execute]']['{Execute}']['execute?']['test,']['test:']['path.'] }}",
);
});
@ -239,7 +262,7 @@ describe('Mapping Utils', () => {
path: ['propertyName', 'capitalizedName', 'hyphen-prop'],
};
const result = getMappedExpression(input);
expect(result).toBe('{{ $json.propertyName.capitalizedName["hyphen-prop"] }}');
expect(result).toBe("{{ $json.propertyName.capitalizedName['hyphen-prop'] }}");
});
it('should generate a mapped expression with a complex path', () => {
@ -250,7 +273,7 @@ describe('Mapping Utils', () => {
};
const result = getMappedExpression(input);
expect(result).toBe(
'{{ $json.propertyName.capitalizedName.stringVal["some-value"].capitalizedProp }}',
"{{ $json.propertyName.capitalizedName.stringVal['some-value'].capitalizedProp }}",
);
});
});

4
packages/editor-ui/src/utils/__tests__/typesUtils.test.ts
View file

@ -275,13 +275,13 @@ describe('Types Utils', () => {
type: 'array',
key: 'with space',
value: [],
path: '["with space"]',
path: "['with space']",
},
{
type: 'string',
key: 'with.dot',
value: 'test',
path: '["with.dot"]',
path: "['with.dot']",
},
],
path: '',

7
packages/editor-ui/src/utils/mappingUtils.ts
View file

@ -6,8 +6,11 @@ export function generatePath(root: string, path: Array<string | number>): string
return `${accu}[${part}]`;
}
if (part.includes('-') || part.includes(' ') || part.includes('.')) {
return `${accu}["${part}"]`;
const special = ['-', ' ', '.', "'", '"', '`', '[', ']', '{', '}', '(', ')', ':', ',', '?'];
const hasSpecial = !!special.find((s) => part.includes(s));
if (hasSpecial) {
const escaped = part.replaceAll("'", "\\'");
return `${accu}['${escaped}']`;
}
return `${accu}.${part}`;