From 1b973dcd8dbce598e6ada490fd48fad52f7b4f3a Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 25 Sep 2024 14:33:49 +0200
Subject: [PATCH] fix(editor): Fix schema view pill highlighting (#10936)

---
 .../components/ExpressionParameterInput.vue   |  2 +
 .../components/FilterConditions/Condition.vue |  8 +--
 .../InlineExpressionTip.vue                   | 14 +++--
 .../__tests__/InlineExpressionTip.test.ts     |  9 +++-
 .../src/components/ParameterInput.vue         | 52 ++++++++++++++++++-
 .../src/components/ParameterInputFull.vue     | 38 +-------------
 .../__tests__/ParameterInput.test.ts          |  1 +
 7 files changed, 79 insertions(+), 45 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index cb0c22ec30..239178aa0a 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -121,6 +121,8 @@ async function onDrop(value: string, event: MouseEvent) {
 
 	const droppedSelection = await dropInEditor(toRaw(editor), event, value);
 
+	if (!ndvStore.isMappingOnboarded) ndvStore.setMappingOnboarded();
+
 	if (!ndvStore.isAutocompleteOnboarded) {
 		setCursorPosition((droppedSelection.ranges.at(0)?.head ?? 3) - 3);
 		setTimeout(() => {
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 00d83218c1..316b6827fa 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -90,8 +90,8 @@ const allIssues = computed(() => {
 const now = computed(() => DateTime.now().toISO());
 
 const leftParameter = computed<INodeProperties>(() => ({
-	name: '',
-	displayName: '',
+	name: 'left',
+	displayName: 'Left',
 	default: '',
 	placeholder:
 		operator.value.type === 'dateTime'
@@ -103,8 +103,8 @@ const leftParameter = computed<INodeProperties>(() => ({
 const rightParameter = computed<INodeProperties>(() => {
 	const type = operator.value.rightType ?? operator.value.type;
 	return {
-		name: '',
-		displayName: '',
+		name: 'right',
+		displayName: 'Right',
 		default: '',
 		placeholder:
 			type === 'dateTime' ? now.value : i18n.baseText('filter.condition.placeholderRight'),
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
index 73f12a0ec3..1ff90df190 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n';
 import { useNDVStore } from '@/stores/ndv.store';
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { EditorSelection, EditorState, type SelectionRange } from '@codemirror/state';
 import { type Completion, CompletionContext } from '@codemirror/autocomplete';
 import { datatypeCompletions } from '@/plugins/codemirror/completions/datatype.completions';
@@ -75,10 +75,18 @@ function getCompletionsWithDot(): readonly Completion[] {
 	return completionResult?.options ?? [];
 }
 
-watch(tip, (newTip) => {
-	ndvStore.setHighlightDraggables(!ndvStore.isMappingOnboarded && newTip === 'drag');
+onBeforeUnmount(() => {
+	ndvStore.setHighlightDraggables(false);
 });
 
+watch(
+	tip,
+	(newTip) => {
+		ndvStore.setHighlightDraggables(!ndvStore.isMappingOnboarded && newTip === 'drag');
+	},
+	{ immediate: true },
+);
+
 watchDebounced(
 	[() => props.selection, () => props.unresolvedExpression],
 	() => {
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionTip.test.ts b/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionTip.test.ts
index f3cdc81318..604152c29d 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionTip.test.ts
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionTip.test.ts
@@ -27,6 +27,7 @@ describe('InlineExpressionTip.vue', () => {
 		mockNdvState = {
 			hasInputData: true,
 			isNDVDataEmpty: vi.fn(() => true),
+			setHighlightDraggables: vi.fn(),
 		};
 	});
 
@@ -43,11 +44,16 @@ describe('InlineExpressionTip.vue', () => {
 				hasInputData: true,
 				isNDVDataEmpty: vi.fn(() => false),
 				focusedMappableInput: 'Some Input',
+				setHighlightDraggables: vi.fn(),
 			};
-			const { container } = renderComponent(InlineExpressionTip, {
+			const { container, unmount } = renderComponent(InlineExpressionTip, {
 				pinia: createTestingPinia(),
 			});
+			expect(mockNdvState.setHighlightDraggables).toHaveBeenCalledWith(true);
 			expect(container).toHaveTextContent('Tip: Drag aninput fieldfrom the left to use it here.');
+
+			unmount();
+			expect(mockNdvState.setHighlightDraggables).toHaveBeenCalledWith(false);
 		});
 	});
 
@@ -58,6 +64,7 @@ describe('InlineExpressionTip.vue', () => {
 				isInputParentOfActiveNode: true,
 				isNDVDataEmpty: vi.fn(() => false),
 				focusedMappableInput: 'Some Input',
+				setHighlightDraggables: vi.fn(),
 			};
 			const { container } = renderComponent(InlineExpressionTip, {
 				pinia: createTestingPinia(),
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 0345e5a749..80d0cd890b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -510,6 +510,28 @@ const isCodeNode = computed(
 
 const isHtmlNode = computed(() => !!node.value && node.value.type === HTML_NODE_TYPE);
 
+const isInputTypeString = computed(() => props.parameter.type === 'string');
+const isInputTypeNumber = computed(() => props.parameter.type === 'number');
+
+const isInputDataEmpty = computed(() => ndvStore.isNDVDataEmpty('input'));
+const isDropDisabled = computed(
+	() =>
+		props.parameter.noDataExpression ||
+		props.isReadOnly ||
+		isResourceLocatorParameter.value ||
+		isModelValueExpression.value,
+);
+const showDragnDropTip = computed(
+	() =>
+		isFocused.value &&
+		(isInputTypeString.value || isInputTypeNumber.value) &&
+		!isModelValueExpression.value &&
+		!isDropDisabled.value &&
+		(!ndvStore.hasInputData || !isInputDataEmpty.value) &&
+		!ndvStore.isMappingOnboarded &&
+		ndvStore.isInputParentOfActiveNode,
+);
+
 function isRemoteParameterOption(option: INodePropertyOptions) {
 	return remoteParameterOptionsKeys.value.includes(option.name);
 }
@@ -965,7 +987,11 @@ onUpdated(async () => {
 </script>
 
 <template>
-	<div ref="wrapper" :class="parameterInputClasses" @keydown.stop>
+	<div
+		ref="wrapper"
+		:class="[parameterInputClasses, { [$style.tipVisible]: showDragnDropTip }]"
+		@keydown.stop
+	>
 		<ExpressionEditModal
 			:dialog-visible="expressionEditDialogVisible"
 			:model-value="modelValueExpressionEdit"
@@ -1447,6 +1473,9 @@ onUpdated(async () => {
 				:disabled="isReadOnly"
 				@update:model-value="valueChanged"
 			/>
+			<div v-if="showDragnDropTip" :class="$style.tip">
+				<InlineExpressionTip />
+			</div>
 		</div>
 
 		<ParameterIssues
@@ -1477,6 +1506,7 @@ onUpdated(async () => {
 
 .parameter-input {
 	display: inline-block;
+	position: relative;
 
 	:deep(.color-input) {
 		display: flex;
@@ -1609,3 +1639,23 @@ onUpdated(async () => {
 	}
 }
 </style>
+
+<style lang="scss" module>
+.tipVisible {
+	--input-border-bottom-left-radius: 0;
+	--input-border-bottom-right-radius: 0;
+}
+
+.tip {
+	position: absolute;
+	z-index: 2;
+	top: 100%;
+	background: var(--color-code-background);
+	border: var(--border-base);
+	border-top: none;
+	width: 100%;
+	box-shadow: 0 2px 6px 0 rgba(#441c17, 0.1);
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+</style>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index f5e2999d7b..bd16fd6813 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -13,7 +13,6 @@ import { hasExpressionMapping, hasOnlyListMode, isValueExpression } from '@/util
 import { isResourceLocatorValue } from '@/utils/typeGuards';
 import { createEventBus } from 'n8n-design-system/utils';
 import type { INodeProperties, IParameterLabel, NodeParameterValueType } from 'n8n-workflow';
-import InlineExpressionTip from './InlineExpressionEditor/InlineExpressionTip.vue';
 
 type Props = {
 	parameter: INodeProperties;
@@ -57,8 +56,7 @@ const ndvStore = useNDVStore();
 
 const node = computed(() => ndvStore.activeNode);
 const hint = computed(() => i18n.nodeText().hint(props.parameter, props.path));
-const isInputTypeString = computed(() => props.parameter.type === 'string');
-const isInputTypeNumber = computed(() => props.parameter.type === 'number');
+
 const isResourceLocator = computed(
 	() => props.parameter.type === 'resourceLocator' || props.parameter.type === 'workflowSelector',
 );
@@ -73,17 +71,6 @@ const isExpression = computed(() => isValueExpression(props.parameter, props.val
 const showExpressionSelector = computed(() =>
 	isResourceLocator.value ? !hasOnlyListMode(props.parameter) : true,
 );
-const isInputDataEmpty = computed(() => ndvStore.isNDVDataEmpty('input'));
-const showDragnDropTip = computed(
-	() =>
-		focused.value &&
-		(isInputTypeString.value || isInputTypeNumber.value) &&
-		!isExpression.value &&
-		!isDropDisabled.value &&
-		(!ndvStore.hasInputData || !isInputDataEmpty.value) &&
-		!ndvStore.isMappingOnboarded &&
-		ndvStore.isInputParentOfActiveNode,
-);
 
 function onFocus() {
 	focused.value = true;
@@ -205,7 +192,7 @@ function onDrop(newParamValue: string) {
 
 <template>
 	<n8n-input-label
-		:class="[$style.wrapper, { [$style.tipVisible]: showDragnDropTip }]"
+		:class="[$style.wrapper]"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:show-tooltip="focused"
@@ -258,9 +245,6 @@ function onDrop(newParamValue: string) {
 				/>
 			</template>
 		</DraggableTarget>
-		<div v-if="showDragnDropTip" :class="$style.tip">
-			<InlineExpressionTip />
-		</div>
 		<div
 			:class="{
 				[$style.options]: true,
@@ -292,24 +276,6 @@ function onDrop(newParamValue: string) {
 	}
 }
 
-.tipVisible {
-	--input-border-bottom-left-radius: 0;
-	--input-border-bottom-right-radius: 0;
-}
-
-.tip {
-	position: absolute;
-	z-index: 2;
-	top: 100%;
-	background: var(--color-code-background);
-	border: var(--border-base);
-	border-top: none;
-	width: 100%;
-	box-shadow: 0 2px 6px 0 rgba(#441c17, 0.1);
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-}
-
 .options {
 	position: absolute;
 	bottom: -22px;
diff --git a/packages/editor-ui/src/components/__tests__/ParameterInput.test.ts b/packages/editor-ui/src/components/__tests__/ParameterInput.test.ts
index eebb70fb07..76f8c95951 100644
--- a/packages/editor-ui/src/components/__tests__/ParameterInput.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ParameterInput.test.ts
@@ -54,6 +54,7 @@ describe('ParameterInput.vue', () => {
 				type: 'test',
 				typeVersion: 1,
 			},
+			isNDVDataEmpty: vi.fn(() => false),
 		};
 		mockNodeTypesState = {
 			allNodeTypes: [],