From 1d2b403644278fa6158272edc4295d4565554e37 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Fri, 12 Jul 2024 10:11:59 +0200 Subject: [PATCH] fix(editor): Use selected input item for autocomplete (#10019) --- .../AssignmentCollection/Assignment.vue | 6 ++---- .../InlineExpressionEditorOutput.test.ts | 2 -- .../src/components/ParameterInputWrapper.vue | 2 +- .../src/composables/useExpressionEditor.ts | 17 +---------------- .../completions/bracketAccess.completions.ts | 5 ++--- .../completions/datatype.completions.ts | 6 +++--- .../plugins/codemirror/completions/utils.ts | 19 +++++++++++++++++-- packages/editor-ui/src/stores/ndv.store.ts | 19 ++++++++++++++++--- 8 files changed, 42 insertions(+), 34 deletions(-) diff --git a/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue b/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue index 41d87f3ff0..0984d9c7e4 100644 --- a/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue +++ b/packages/editor-ui/src/components/AssignmentCollection/Assignment.vue @@ -88,7 +88,7 @@ const hint = computed(() => { undefined, ndvStore.isInputParentOfActiveNode ? { - targetItem: ndvStore.hoveringItem ?? undefined, + targetItem: ndvStore.expressionTargetItem ?? undefined, inputNodeName: ndvStore.ndvInputNodeName, inputRunIndex: ndvStore.ndvInputRunIndex, inputBranchIndex: ndvStore.ndvInputBranchIndex, @@ -104,9 +104,7 @@ const hint = computed(() => { return stringifyExpressionResult(result); }); -const highlightHint = computed(() => - Boolean(hint.value && ndvStore.hoveringItem && ndvStore.isInputParentOfActiveNode), -); +const highlightHint = computed(() => Boolean(hint.value && ndvStore.getHoveringItem)); const valueIsExpression = computed(() => { const { value } = assignment.value; diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts b/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts index d996f4fa90..8728fecb8c 100644 --- a/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts +++ b/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts @@ -7,7 +7,6 @@ describe('InlineExpressionEditorOutput.vue', () => { const { getByTestId } = renderComponent(InlineExpressionEditorOutput, { pinia: createTestingPinia(), props: { - hoveringItemNumber: 0, visible: true, segments: [ { @@ -56,7 +55,6 @@ describe('InlineExpressionEditorOutput.vue', () => { const { getByTestId } = renderComponent(InlineExpressionEditorOutput, { pinia: createTestingPinia(), props: { - hoveringItemNumber: 0, visible: true, segments: [ { diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue index 50e35b1735..aebdcf2299 100644 --- a/packages/editor-ui/src/components/ParameterInputWrapper.vue +++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue @@ -149,7 +149,7 @@ const parameterHint = computed(() => { return props.hint; }); -const targetItem = computed(() => ndvStore.hoveringItem); +const targetItem = computed(() => ndvStore.expressionTargetItem); const isInputParentOfActiveNode = computed(() => ndvStore.isInputParentOfActiveNode); diff --git a/packages/editor-ui/src/composables/useExpressionEditor.ts b/packages/editor-ui/src/composables/useExpressionEditor.ts index c596fd12dc..da66887319 100644 --- a/packages/editor-ui/src/composables/useExpressionEditor.ts +++ b/packages/editor-ui/src/composables/useExpressionEditor.ts @@ -330,22 +330,7 @@ export const useExpressionEditor = ({ return result; } - const targetItem = computed(() => { - if (ndvStore.hoveringItem) { - return ndvStore.hoveringItem; - } - - if (ndvStore.expressionOutputItemIndex && ndvStore.ndvInputNodeName) { - return { - nodeName: ndvStore.ndvInputNodeName, - runIndex: ndvStore.ndvInputRunIndex ?? 0, - outputIndex: ndvStore.ndvInputBranchIndex ?? 0, - itemIndex: ndvStore.expressionOutputItemIndex, - }; - } - - return null; - }); + const targetItem = computed(() => ndvStore.expressionTargetItem); const resolvableSegments = computed(() => { return segments.value.filter((s): s is Resolvable => s.kind === 'resolvable'); diff --git a/packages/editor-ui/src/plugins/codemirror/completions/bracketAccess.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/bracketAccess.completions.ts index 6c018ef8e8..3f9e52b64a 100644 --- a/packages/editor-ui/src/plugins/codemirror/completions/bracketAccess.completions.ts +++ b/packages/editor-ui/src/plugins/codemirror/completions/bracketAccess.completions.ts @@ -1,5 +1,4 @@ -import { resolveParameter } from '@/composables/useWorkflowHelpers'; -import { prefixMatch, longestCommonPrefix } from './utils'; +import { prefixMatch, longestCommonPrefix, resolveAutocompleteExpression } from './utils'; import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete'; import type { Resolved } from './types'; import { escapeMappingString } from '@/utils/mappingUtils'; @@ -31,7 +30,7 @@ export function bracketAccessCompletions(context: CompletionContext): Completion let resolved: Resolved; try { - resolved = resolveParameter(`={{ ${base} }}`); + resolved = resolveAutocompleteExpression(`={{ ${base} }}`); } catch { return null; } diff --git a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts index 4eeb4457fa..60ba5c977b 100644 --- a/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts +++ b/packages/editor-ui/src/plugins/codemirror/completions/datatype.completions.ts @@ -1,4 +1,3 @@ -import { resolveParameter } from '@/composables/useWorkflowHelpers'; import { VALID_EMAIL_REGEX } from '@/constants'; import { i18n } from '@/plugins/i18n'; import { useEnvironmentsStore } from '@/stores/environments.ee.store'; @@ -48,6 +47,7 @@ import { isSplitInBatchesAbsent, longestCommonPrefix, prefixMatch, + resolveAutocompleteExpression, sortCompletionsAlpha, splitBaseTail, stripExcessParens, @@ -83,7 +83,7 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul let resolved: Resolved; try { - resolved = resolveParameter(`={{ ${base} }}`); + resolved = resolveAutocompleteExpression(`={{ ${base} }}`); } catch (error) { return null; } @@ -126,7 +126,7 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul function explicitDataTypeOptions(expression: string): Completion[] { try { - const resolved = resolveParameter(`={{ ${expression} }}`); + const resolved = resolveAutocompleteExpression(`={{ ${expression} }}`); return datatypeOptions({ resolved, base: expression, diff --git a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts index eb68b0170c..88aea8f0f5 100644 --- a/packages/editor-ui/src/plugins/codemirror/completions/utils.ts +++ b/packages/editor-ui/src/plugins/codemirror/completions/utils.ts @@ -82,7 +82,7 @@ export const isAllowedInDotNotation = (str: string) => { export function receivesNoBinaryData() { try { - return resolveParameter('={{ $binary }}')?.data === undefined; + return resolveAutocompleteExpression('={{ $binary }}')?.data === undefined; } catch { return true; } @@ -92,7 +92,7 @@ export function hasNoParams(toResolve: string) { let params; try { - params = resolveParameter(`={{ ${toResolve}.params }}`); + params = resolveAutocompleteExpression(`={{ ${toResolve}.params }}`); } catch { return true; } @@ -104,6 +104,21 @@ export function hasNoParams(toResolve: string) { return paramKeys.length === 1 && isPseudoParam(paramKeys[0]); } +export function resolveAutocompleteExpression(expression: string) { + const ndvStore = useNDVStore(); + return resolveParameter( + expression, + ndvStore.isInputParentOfActiveNode + ? { + targetItem: ndvStore.expressionTargetItem ?? undefined, + inputNodeName: ndvStore.ndvInputNodeName, + inputRunIndex: ndvStore.ndvInputRunIndex, + inputBranchIndex: ndvStore.ndvInputBranchIndex, + } + : {}, + ); +} + // ---------------------------------- // state-based utils // ---------------------------------- diff --git a/packages/editor-ui/src/stores/ndv.store.ts b/packages/editor-ui/src/stores/ndv.store.ts index 0c5ae38685..dbaf8c94a1 100644 --- a/packages/editor-ui/src/stores/ndv.store.ts +++ b/packages/editor-ui/src/stores/ndv.store.ts @@ -151,9 +151,6 @@ export const useNDVStore = defineStore(STORES.NDV, { const parentNodes = workflow.getParentNodes(this.activeNode.name, NodeConnectionType.Main, 1); return parentNodes.includes(inputNodeName); }, - hoveringItemNumber(): number { - return (this.hoveringItem?.itemIndex ?? 0) + 1; - }, getHoveringItem(): TargetItem | null { if (this.isInputParentOfActiveNode) { return this.hoveringItem; @@ -161,6 +158,22 @@ export const useNDVStore = defineStore(STORES.NDV, { return null; }, + expressionTargetItem(): TargetItem | null { + if (this.getHoveringItem) { + return this.getHoveringItem; + } + + if (this.expressionOutputItemIndex && this.ndvInputNodeName) { + return { + nodeName: this.ndvInputNodeName, + runIndex: this.ndvInputRunIndex ?? 0, + outputIndex: this.ndvInputBranchIndex ?? 0, + itemIndex: this.expressionOutputItemIndex, + }; + } + + return null; + }, isNDVOpen(): boolean { return this.activeNodeName !== null; },