feat(editor): Add examples for root expression methods (#9373)

n8n-io · May 22, 2024 · a591f63 · a591f63
1 parent 7cb431f
commit a591f63
Show file tree

Hide file tree

Showing 12 changed files with 800 additions and 263 deletions.
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts
@@ -1,5 +1,5 @@
 import { NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION } from '../constants';
-import { addVarType } from '../utils';
+import { addInfoRenderer, addVarType } from '../utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { INodeUi } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -128,7 +128,7 @@ export function useBaseCompletions(
 
 		return {
 			from: preCursor.from,
-			options,
+			options: options.map(addInfoRenderer),
 		};
 	};
 

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/execution.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/execution.completions.ts
@@ -1,4 +1,4 @@
-import { addVarType, escape } from '../utils';
+import { addInfoRenderer, addVarType, escape } from '../utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { useI18n } from '@/composables/useI18n';
 
@@ -18,15 +18,6 @@ export function useExecutionCompletions() {
 
 		if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
 
-		const buildLinkNode = (text: string) => {
-			const wrapper = document.createElement('span');
-			// This is being loaded from the locales file. This could
-			// cause an XSS of some kind but multiple other locales strings
-			// do the same thing.
-			wrapper.innerHTML = text;
-			return () => wrapper;
-		};
-
 		const options: Completion[] = [
 			{
 				label: `${matcher}.id`,
@@ -46,29 +37,25 @@ export function useExecutionCompletions() {
 			},
 			{
 				label: `${matcher}.customData.set("key", "value")`,
-				info: buildLinkNode(i18n.baseText('codeNodeEditor.completer.$execution.customData.set()')),
+				info: i18n.baseText('codeNodeEditor.completer.$execution.customData.set'),
 			},
 			{
 				label: `${matcher}.customData.get("key")`,
-				info: buildLinkNode(i18n.baseText('codeNodeEditor.completer.$execution.customData.get()')),
+				info: i18n.baseText('codeNodeEditor.completer.$execution.customData.get'),
 			},
 			{
 				label: `${matcher}.customData.setAll({})`,
-				info: buildLinkNode(
-					i18n.baseText('codeNodeEditor.completer.$execution.customData.setAll()'),
-				),
+				info: i18n.baseText('codeNodeEditor.completer.$execution.customData.setAll'),
 			},
 			{
 				label: `${matcher}.customData.getAll()`,
-				info: buildLinkNode(
-					i18n.baseText('codeNodeEditor.completer.$execution.customData.getAll()'),
-				),
+				info: i18n.baseText('codeNodeEditor.completer.$execution.customData.getAll'),
 			},
 		];
 
 		return {
 			from: preCursor.from,
-			options: options.map(addVarType),
+			options: options.map(addVarType).map(addInfoRenderer),
 		};
 	};
 

diff --git a/packages/editor-ui/src/components/CodeNodeEditor/utils.ts b/packages/editor-ui/src/components/CodeNodeEditor/utils.ts
@@ -2,6 +2,7 @@ import type * as esprima from 'esprima-next';
 import type { Completion } from '@codemirror/autocomplete';
 import type { Node } from 'estree';
 import type { RangeNode } from './types';
+import { sanitizeHtml } from '@/utils/htmlUtils';
 
 export function walk<T extends RangeNode>(
 	node: Node | esprima.Program,
@@ -40,3 +41,15 @@ export const escape = (str: string) =>
 export const toVariableOption = (label: string) => ({ label, type: 'variable' });
 
 export const addVarType = (option: Completion) => ({ ...option, type: 'variable' });
+
+export const addInfoRenderer = (option: Completion): Completion => {
+	const { info } = option;
+	if (typeof info === 'string') {
+		option.info = () => {
+			const wrapper = document.createElement('span');
+			wrapper.innerHTML = sanitizeHtml(info);
+			return wrapper;
+		};
+	}
+	return option;
+};
diff --git a/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts b/packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
@@ -772,11 +772,19 @@ describe('Resolution-based completions', () => {
 		test('should not display type information for other completions', () => {
 			vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue({
 				str: 'bar',
+				id: '123',
+				isExecuted: false,
 			});
 
-			expect(completions('{{ $execution.| }}')?.every((item) => !item.detail)).toBe(true);
-			expect(completions('{{ $input.params.| }}')?.every((item) => !item.detail)).toBe(true);
-			expect(completions('{{ $("My Node").| }}')?.every((item) => !item.detail)).toBe(true);
+			expect(completions('{{ $execution.| }}')).not.toContainEqual(
+				expect.objectContaining({ detail: expect.any(String) }),
+			);
+			expect(completions('{{ $input.params.| }}')).not.toContainEqual(
+				expect.objectContaining({ detail: expect.any(String) }),
+			);
+			expect(completions('{{ $("My Node").| }}')).not.toContainEqual(
+				expect.objectContaining({ detail: expect.any(String) }),
+			);
 		});
 	});
 });