mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Add type information to autocomplete dropdown (#8843)

Browse source
This commit is contained in:
Elias Meire 2024-03-19 18:10:14 +01:00 committed by GitHub
parent ff8dd4e604
commit d7bfd45333
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 99 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
packages/editor-ui/src/plugins/codemirror/completions/__tests__/completions.test.ts
View file

@ -63,10 +63,16 @@ describe('Top-level completions', () => {
expect(result).toHaveLength(dollarOptions().length);
expect(result?.[0]).toEqual(
expect.objectContaining({ label: '$json', section: RECOMMENDED_SECTION }),
expect.objectContaining({
label: '$json',
section: RECOMMENDED_SECTION,
}),
);
expect(result?.[4]).toEqual(
expect.objectContaining({ label: '$execution', section: METADATA_SECTION }),
expect.objectContaining({
label: '$execution',
section: METADATA_SECTION,
}),
);
expect(result?.[14]).toEqual(
expect.objectContaining({ label: '$max()', section: METHODS_SECTION }),
@ -614,6 +620,63 @@ describe('Resolution-based completions', () => {
);
});
});
describe('type information', () => {
test('should display type information for: {{ $json.obj.| }}', () => {
vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce({
str: 'bar',
empty: null,
arr: [],
obj: {},
});
const result = completions('{{ $json.obj.| }}');
expect(result).toContainEqual(expect.objectContaining({ label: 'str', detail: 'string' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'empty', detail: 'null' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'arr', detail: 'array' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'obj', detail: 'object' }));
});
test('should display type information for: {{ $input.item.json.| }}', () => {
vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce({
str: 'bar',
empty: null,
arr: [],
obj: {},
});
const result = completions('{{ $json.item.json.| }}');
expect(result).toContainEqual(expect.objectContaining({ label: 'str', detail: 'string' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'empty', detail: 'null' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'arr', detail: 'array' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'obj', detail: 'object' }));
});
test('should display type information for: {{ $("My Node").item.json.| }}', () => {
vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValueOnce({
str: 'bar',
empty: null,
arr: [],
obj: {},
});
const result = completions('{{ $("My Node").item.json.| }}');
expect(result).toContainEqual(expect.objectContaining({ label: 'str', detail: 'string' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'empty', detail: 'null' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'arr', detail: 'array' }));
expect(result).toContainEqual(expect.objectContaining({ label: 'obj', detail: 'object' }));
});
test('should not display type information for other completions', () => {
vi.spyOn(workflowHelpers, 'resolveParameter').mockReturnValue({
str: 'bar',
});
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);
});
});
});
export function completions(docWithCursor: string, explicit = false) {

23
packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts
View file

@ -212,6 +212,24 @@ export const extensions = (
return toOptions(fnToDoc, typeName, 'extension-function', includeHidden, transformLabel);
};
export const getType = (value: unknown): string => {
if (Array.isArray(value)) return 'array';
if (value === null) return 'null';
return (typeof value).toLocaleLowerCase();
};
export const isInputData = (base: string): boolean => {
return (
/^\$input\..*\.json]/.test(base) || /^\$json/.test(base) || /^\$\(.*\)\..*\.json/.test(base)
);
};
export const getDetail = (base: string, value: unknown): string | undefined => {
const type = getType(value);
if (!isInputData(base) || type === 'function') return undefined;
return type;
};
export const toOptions = (
fnToDoc: FnToDoc,
typeName: ExtensionTypeName,
@ -377,6 +395,7 @@ const objectOptions = (input: AutocompleteInput<IDataObject>): Completion[] => {
label: isFunction ? key + '()' : key,
type: isFunction ? 'function' : 'keyword',
section: getObjectPropertySection({ name, key, isFunction }),
detail: getDetail(name, resolvedProp),
apply: applyCompletion(hasArgs, transformLabel),
};
@ -388,7 +407,7 @@ const objectOptions = (input: AutocompleteInput<IDataObject>): Completion[] => {
{
doc: {
name: key,
returnType: typeof resolvedProp,
returnType: getType(resolvedProp),
description: i18n.proxyVars[infoKey],
},
},
@ -651,7 +670,7 @@ export const secretOptions = (base: string) => {
return [];
}
return Object.entries(resolved).map(([secret, value]) =>
createCompletionOption('Object', secret, 'keyword', {
createCompletionOption('', secret, 'keyword', {
doc: {
name: secret,
returnType: typeof value,

15
packages/editor-ui/src/styles/plugins/_codemirror.scss
View file

@ -30,15 +30,26 @@
li[role='option'] {
color: var(--color-text-base);
display: flex;
font-size: var(--font-size-2xs);
line-height: var(--font-line-height-xloose);
justify-content: space-between;
align-items: center;
padding: var(--spacing-5xs) var(--spacing-2xs);
gap: var(--spacing-2xs);
scroll-padding: 40px;
scroll-margin: 40px;
}
li .cm-completionLabel {
line-height: var(--font-line-height-xloose);
font-size: var(--font-size-2xs);
overflow: hidden;
text-overflow: ellipsis;
}
li .cm-completionDetail {
color: var(--color-text-light);
font-size: var(--font-size-3xs);
margin-left: 0;
font-style: normal;
}
li[aria-selected] {