feat(editor): Add item selector to expression output (#9281)

packages/editor-ui/src/components/ExpressionParameterInput.vue

@@ -48,9 +48,7 @@ const telemetry = useTelemetry();
 const ndvStore = useNDVStore();
 const workflowsStore = useWorkflowsStore();
 
-const hoveringItemNumber = computed(() => ndvStore.hoveringItemNumber);
 const isDragging = computed(() => ndvStore.isDraggableDragging);
-const noInputData = computed(() => ndvStore.hasInputData);
 
 function focus() {
 	if (inlineInput.value) {
@@ -166,9 +164,7 @@ defineExpose({ focus });
 			:editor-state="editorState"
 			:segments="segments"
 			:is-read-only="isReadOnly"
-			:no-input-data="noInputData"
 			:visible="isFocused"
-			:hovering-item-number="hoveringItemNumber"
 		/>
 	</div>
 </template>

packages/editor-ui/src/components/InlineExpressionEditor/ExpressionOutput.vue

@@ -103,6 +103,9 @@ onMounted(() => {
 			],
 		}),
 	});
+
+	highlighter.addColor(editor.value as EditorView, resolvedSegments.value);
+	highlighter.removeColor(editor.value as EditorView, plaintextSegments.value);
 });
 
 onBeforeUnmount(() => {

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue

@@ -6,20 +6,20 @@ import type { Segment } from '@/types/expressions';
 import ExpressionOutput from './ExpressionOutput.vue';
 import InlineExpressionTip from './InlineExpressionTip.vue';
 import { outputTheme } from './theme';
+import { computed, onBeforeUnmount } from 'vue';
+import { useNDVStore } from '@/stores/ndv.store';
+import { N8nTooltip } from 'n8n-design-system/components';
 
 interface InlineExpressionEditorOutputProps {
 	segments: Segment[];
-	hoveringItemNumber: number;
 	unresolvedExpression?: string;
 	editorState?: EditorState;
 	selection?: SelectionRange;
 	visible?: boolean;
-	noInputData?: boolean;
 }
 
 withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
 	visible: false,
-	noInputData: false,
 	editorState: undefined,
 	selection: undefined,
 	unresolvedExpression: undefined,
@@ -27,19 +27,95 @@ withDefaults(defineProps<InlineExpressionEditorOutputProps>(), {
 
 const i18n = useI18n();
 const theme = outputTheme();
+const ndvStore = useNDVStore();
+
+const hideTableHoverHint = computed(() => ndvStore.isTableHoverOnboarded);
+const hoveringItem = computed(() => ndvStore.getHoveringItem);
+const hoveringItemIndex = computed(() => hoveringItem.value?.itemIndex);
+const isHoveringItem = computed(() => Boolean(hoveringItem.value));
+const itemsLength = computed(() => ndvStore.ndvInputDataWithPinnedData.length);
+const itemIndex = computed(() => hoveringItemIndex.value ?? ndvStore.expressionOutputItemIndex);
+const max = computed(() => Math.max(itemsLength.value - 1, 0));
+const isItemIndexEditable = computed(() => !isHoveringItem.value && itemsLength.value > 0);
+const canSelectPrevItem = computed(() => isItemIndexEditable.value && itemIndex.value !== 0);
+const canSelectNextItem = computed(
+	() => isItemIndexEditable.value && itemIndex.value < itemsLength.value - 1,
+);
+
+function updateItemIndex(index: number) {
+	ndvStore.expressionOutputItemIndex = index;
+}
+
+function nextItem() {
+	ndvStore.expressionOutputItemIndex = ndvStore.expressionOutputItemIndex + 1;
+}
+
+function prevItem() {
+	ndvStore.expressionOutputItemIndex = ndvStore.expressionOutputItemIndex - 1;
+}
+
+onBeforeUnmount(() => {
+	ndvStore.expressionOutputItemIndex = 0;
+});
 </script>
 
 <template>
-	<div :class="visible ? $style.dropdown : $style.hidden">
-		<n8n-text v-if="!noInputData" size="small" compact :class="$style.header">
-			{{ i18n.baseText('parameterInput.resultForItem') }} {{ hoveringItemNumber }}
-		</n8n-text>
+	<div v-if="visible" :class="$style.dropdown" title="">
+		<div :class="$style.header">
+			<n8n-text bold size="small" compact>
+				{{ i18n.baseText('parameterInput.result') }}
+			</n8n-text>
+
+			<div :class="$style.item">
+				<n8n-text size="small" color="text-base" compact>
+					{{ i18n.baseText('parameterInput.item') }}
+				</n8n-text>
+
+				<div :class="$style.controls">
+					<N8nInputNumber
+						data-test-id="inline-expression-editor-item-input"
+						size="mini"
+						:controls="false"
+						:class="[$style.input, { [$style.hovering]: isHoveringItem }]"
+						:min="0"
+						:max="max"
+						:model-value="itemIndex"
+						@update:model-value="updateItemIndex"
+					></N8nInputNumber>
+					<N8nIconButton
+						data-test-id="inline-expression-editor-item-prev"
+						icon="chevron-left"
+						type="tertiary"
+						text
+						size="mini"
+						:disabled="!canSelectPrevItem"
+						@click="prevItem"
+					></N8nIconButton>
+
+					<N8nTooltip placement="right" :disabled="hideTableHoverHint">
+						<template #content>
+							<div>{{ i18n.baseText('parameterInput.hoverTableItemTip') }}</div>
+						</template>
+						<N8nIconButton
+							data-test-id="inline-expression-editor-item-next"
+							icon="chevron-right"
+							type="tertiary"
+							text
+							size="mini"
+							:disabled="!canSelectNextItem"
+							@click="nextItem"
+						></N8nIconButton>
+					</N8nTooltip>
+				</div>
+			</div>
+		</div>
 		<n8n-text :class="$style.body">
 			<ExpressionOutput
 				data-test-id="inline-expression-editor-output"
 				:segments="segments"
 				:extensions="theme"
-			></ExpressionOutput>
+			>
+			</ExpressionOutput>
 		</n8n-text>
 		<div :class="$style.footer">
 			<InlineExpressionTip
@@ -52,10 +128,6 @@ const theme = outputTheme();
 </template>
 
 <style lang="scss" module>
-.hidden {
-	display: none;
-}
-
 .dropdown {
 	display: flex;
 	flex-direction: column;
@@ -73,7 +145,6 @@ const theme = outputTheme();
 		background-color: var(--color-code-background);
 	}
 
-	.header,
 	.body {
 		padding: var(--spacing-3xs);
 	}
@@ -83,12 +154,22 @@ const theme = outputTheme();
 	}
 
 	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--spacing-2xs);
 		color: var(--color-text-dark);
 		font-weight: var(--font-weight-bold);
-		padding-left: var(--spacing-2xs);
+		padding: 0 var(--spacing-2xs);
 		padding-top: var(--spacing-2xs);
 	}
 
+	.item {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4xs);
+	}
+
 	.body {
 		padding-top: 0;
 		padding-left: var(--spacing-2xs);
@@ -98,5 +179,33 @@ const theme = outputTheme();
 			padding-top: var(--spacing-2xs);
 		}
 	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+	}
+
+	.input {
+		--input-height: 22px;
+		--input-width: 26px;
+		--input-border-top-left-radius: var(--border-radius-base);
+		--input-border-bottom-left-radius: var(--border-radius-base);
+		--input-border-top-right-radius: var(--border-radius-base);
+		--input-border-bottom-right-radius: var(--border-radius-base);
+		max-width: var(--input-width);
+		line-height: calc(var(--input-height) - var(--spacing-4xs));
+
+		&.hovering {
+			--input-font-color: var(--color-secondary);
+		}
+
+		:global(.el-input__inner) {
+			height: var(--input-height);
+			min-height: var(--input-height);
+			line-height: var(--input-height);
+			text-align: center;
+			padding: 0 var(--spacing-4xs);
+		}
+	}
 }
 </style>

packages/editor-ui/src/components/InlineExpressionEditor/__tests__/InlineExpressionEditorOutput.test.ts

@@ -8,6 +8,7 @@ describe('InlineExpressionEditorOutput.vue', () => {
 			pinia: createTestingPinia(),
 			props: {
 				hoveringItemNumber: 0,
+				visible: true,
 				segments: [
 					{
 						from: 0,
@@ -56,6 +57,7 @@ describe('InlineExpressionEditorOutput.vue', () => {
 			pinia: createTestingPinia(),
 			props: {
 				hoveringItemNumber: 0,
+				visible: true,
 				segments: [
 					{
 						kind: 'plaintext',

packages/editor-ui/src/components/SqlEditor/SqlEditor.vue

@@ -7,7 +7,6 @@
 			:segments="segments"
 			:is-read-only="isReadOnly"
 			:visible="hasFocus"
-			:hovering-item-number="hoveringItemNumber"
 		/>
 	</div>
 </template>
@@ -25,7 +24,6 @@ import {
 	tabKeyMap,
 } from '@/plugins/codemirror/keymap';
 import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
-import { useNDVStore } from '@/stores/ndv.store';
 import { ifNotIn } from '@codemirror/autocomplete';
 import { history, toggleComment } from '@codemirror/commands';
 import { LanguageSupport, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
@@ -143,11 +141,6 @@ const {
 	skipSegments: ['Statement', 'CompositeIdentifier', 'Parens', 'Brackets'],
 	isReadOnly: props.isReadOnly,
 });
-const ndvStore = useNDVStore();
-
-const hoveringItemNumber = computed(() => {
-	return ndvStore.hoveringItemNumber;
-});
 
 watch(
 	() => props.modelValue,

packages/editor-ui/src/components/__tests__/ExpressionParameterInput.test.ts

@@ -2,6 +2,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue';
 import { type TestingPinia, createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
 import { setActivePinia } from 'pinia';
 
 describe('ExpressionParameterInput', () => {
@@ -57,10 +58,12 @@ describe('ExpressionParameterInput', () => {
 				},
 			});
 
-			const editor = container.querySelector('.cm-content') as HTMLDivElement;
-			expect(editor).toBeInTheDocument();
-			expect(editor.getAttribute('contenteditable')).toEqual('false');
-			expect(editor.getAttribute('aria-readonly')).toEqual('true');
+			await waitFor(() => {
+				const editor = container.querySelector('.cm-content') as HTMLDivElement;
+				expect(editor).toBeInTheDocument();
+				expect(editor.getAttribute('contenteditable')).toEqual('false');
+				expect(editor.getAttribute('aria-readonly')).toEqual('true');
+			});
 		});
 	});
 });

packages/editor-ui/src/components/__tests__/SQLEditor.test.ts

@@ -6,6 +6,7 @@ import { createTestingPinia } from '@pinia/testing';
 import SqlEditor from '@/components/SqlEditor/SqlEditor.vue';
 import { renderComponent } from '@/__tests__/render';
 import { waitFor } from '@testing-library/vue';
+import { userEvent } from '@testing-library/user-event';
 import { setActivePinia } from 'pinia';
 import { useRouter } from 'vue-router';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -20,6 +21,10 @@ const DEFAULT_SETUP = {
 	},
 };
 
+async function focusEditor(container: Element) {
+	await waitFor(() => expect(container.querySelector('.cm-line')).toBeInTheDocument());
+	await userEvent.click(container.querySelector('.cm-line') as Element);
+}
 const nodes = [
 	{
 		id: '1',
@@ -70,7 +75,7 @@ describe('SqlEditor.vue', () => {
 	});
 
 	it('renders basic query', async () => {
-		const { getByTestId } = renderComponent(SqlEditor, {
+		const { getByTestId, container } = renderComponent(SqlEditor, {
 			...DEFAULT_SETUP,
 			props: {
 				...DEFAULT_SETUP.props,
@@ -78,6 +83,7 @@ describe('SqlEditor.vue', () => {
 			},
 		});
 
+		await focusEditor(container);
 		await waitFor(() =>
 			expect(getByTestId(EXPRESSION_OUTPUT_TEST_ID)).toHaveTextContent('SELECT * FROM users'),
 		);
@@ -85,7 +91,7 @@ describe('SqlEditor.vue', () => {
 
 	it('renders basic query with expression', async () => {
 		mockResolveExpression().mockReturnValueOnce('users');
-		const { getByTestId } = renderComponent(SqlEditor, {
+		const { getByTestId, container } = renderComponent(SqlEditor, {
 			...DEFAULT_SETUP,
 			props: {
 				...DEFAULT_SETUP.props,
@@ -93,6 +99,7 @@ describe('SqlEditor.vue', () => {
 			},
 		});
 
+		await focusEditor(container);
 		await waitFor(() =>
 			expect(getByTestId(EXPRESSION_OUTPUT_TEST_ID)).toHaveTextContent('SELECT * FROM users'),
 		);
@@ -100,13 +107,15 @@ describe('SqlEditor.vue', () => {
 
 	it('renders resolved expressions with dot between resolvables', async () => {
 		mockResolveExpression().mockReturnValueOnce('public.users');
-		const { getByTestId } = renderComponent(SqlEditor, {
+		const { getByTestId, container } = renderComponent(SqlEditor, {
 			...DEFAULT_SETUP,
 			props: {
 				...DEFAULT_SETUP.props,
 				modelValue: 'SELECT * FROM {{ $json.schema }}.{{ $json.table }}',
 			},
 		});
+
+		await focusEditor(container);
 		await waitFor(() =>
 			expect(getByTestId(EXPRESSION_OUTPUT_TEST_ID)).toHaveTextContent(
 				'SELECT * FROM public.users',
@@ -120,7 +129,7 @@ describe('SqlEditor.vue', () => {
 			.mockReturnValueOnce('users')
 			.mockReturnValueOnce('id')
 			.mockReturnValueOnce(0);
-		const { getByTestId } = renderComponent(SqlEditor, {
+		const { getByTestId, container } = renderComponent(SqlEditor, {
 			...DEFAULT_SETUP,
 			props: {
 				...DEFAULT_SETUP.props,
@@ -128,6 +137,8 @@ describe('SqlEditor.vue', () => {
 					'SELECT * FROM {{ $json.schema }}.{{ $json.table }} WHERE {{ $json.id }} > {{ $json.limit - 10 }}',
 			},
 		});
+
+		await focusEditor(container);
 		await waitFor(() =>
 			expect(getByTestId(EXPRESSION_OUTPUT_TEST_ID)).toHaveTextContent(
 				'SELECT * FROM public.users WHERE id > 0',
@@ -141,7 +152,7 @@ describe('SqlEditor.vue', () => {
 			.mockReturnValueOnce('users')
 			.mockReturnValueOnce(0)
 			.mockReturnValueOnce(false);
-		const { getByTestId } = renderComponent(SqlEditor, {
+		const { getByTestId, container } = renderComponent(SqlEditor, {
 			...DEFAULT_SETUP,
 			props: {
 				...DEFAULT_SETUP.props,
@@ -149,6 +160,8 @@ describe('SqlEditor.vue', () => {
 					'SELECT * FROM {{ $json.schema }}.{{ $json.table }}\n  WHERE id > {{ $json.limit - 10 }}\n  AND active = {{ $json.active }};',
 			},
 		});
+
+		await focusEditor(container);
 		await waitFor(() =>
 			expect(getByTestId(EXPRESSION_OUTPUT_TEST_ID)).toHaveTextContent(
 				'SELECT * FROM public.users WHERE id > 0 AND active = false;',