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

cypress/e2e/26-resource-locator.cy.ts

@@ -75,7 +75,7 @@ describe('Resource Locator', () => {
 
 		ndv.actions.setInvalidExpression({ fieldName: 'fieldId' });
 
-		ndv.getters.inputDataContainer().click(); // remove focus from input, hide expression preview
+		ndv.getters.inputPanel().click(); // remove focus from input, hide expression preview
 
 		ndv.getters.resourceLocatorInput('rlc').click();
 

cypress/e2e/5-ndv.cy.ts

@@ -325,7 +325,7 @@ describe('NDV', () => {
 
 		ndv.actions.setInvalidExpression({ fieldName: 'fieldId', delay: 200 });
 
-		ndv.getters.inputDataContainer().click(); // remove focus from input, hide expression preview
+		ndv.getters.inputPanel().click(); // remove focus from input, hide expression preview
 
 		ndv.getters.parameterInput('remoteOptions').click();
 
@@ -712,4 +712,31 @@ describe('NDV', () => {
 			workflowPage.getters.successToast().should('exist');
 		});
 	});
+
+	it('should allow selecting item for expressions', () => {
+		workflowPage.actions.visit();
+
+		cy.createFixtureWorkflow('Test_workflow_3.json', `My test workflow`);
+		workflowPage.actions.openNode('Set');
+
+		ndv.actions.typeIntoParameterInput('value', '='); // switch to expressions
+		ndv.actions.typeIntoParameterInput('value', '{{', {
+			parseSpecialCharSequences: false,
+		});
+		ndv.actions.typeIntoParameterInput('value', '$json.input[0].count');
+		ndv.getters.inlineExpressionEditorOutput().should('have.text', '0');
+
+		ndv.actions.expressionSelectNextItem();
+		ndv.getters.inlineExpressionEditorOutput().should('have.text', '1');
+		ndv.getters.inlineExpressionEditorItemInput().should('have.value', '1');
+		ndv.getters.inlineExpressionEditorItemNextButton().should('be.disabled');
+
+		ndv.actions.expressionSelectPrevItem();
+		ndv.getters.inlineExpressionEditorOutput().should('have.text', '0');
+		ndv.getters.inlineExpressionEditorItemInput().should('have.value', '0');
+		ndv.getters.inlineExpressionEditorItemPrevButton().should('be.disabled');
+
+		ndv.actions.expressionSelectItem(1);
+		ndv.getters.inlineExpressionEditorOutput().should('have.text', '1');
+	});
 });

cypress/pages/ndv.ts

@@ -40,6 +40,12 @@ export class NDV extends BasePage {
 			this.getters.inputTableRow(row).find('td').eq(col),
 		inlineExpressionEditorInput: () => cy.getByTestId('inline-expression-editor-input'),
 		inlineExpressionEditorOutput: () => cy.getByTestId('inline-expression-editor-output'),
+		inlineExpressionEditorItemInput: () =>
+			cy.getByTestId('inline-expression-editor-item-input').find('input'),
+		inlineExpressionEditorItemPrevButton: () =>
+			cy.getByTestId('inline-expression-editor-item-prev'),
+		inlineExpressionEditorItemNextButton: () =>
+			cy.getByTestId('inline-expression-editor-item-next'),
 		nodeParameters: () => cy.getByTestId('node-parameters'),
 		parameterInput: (parameterName: string) => cy.getByTestId(`parameter-input-${parameterName}`),
 		parameterInputIssues: (parameterName: string) =>
@@ -290,6 +296,15 @@ export class NDV extends BasePage {
 				.click({ force: true });
 			this.getters.parameterInput('operation').find('input').should('have.value', operation);
 		},
+		expressionSelectItem: (index: number) => {
+			this.getters.inlineExpressionEditorItemInput().type(`{selectall}${index}`);
+		},
+		expressionSelectNextItem: () => {
+			this.getters.inlineExpressionEditorItemNextButton().click();
+		},
+		expressionSelectPrevItem: () => {
+			this.getters.inlineExpressionEditorItemPrevButton().click();
+		},
 	};
 }
 

packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts

@@ -95,3 +95,24 @@ Sizes.args = {
 	placeholder: 'placeholder...',
 	controls: false,
 };
+
+const ControlsTemplate: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		N8nInputNumber,
+	},
+	template:
+		'<div> <n8n-input-number style="margin-bottom:10px" v-bind="args" v-model="val" @update:modelValue="onUpdateModelValue" /> <n8n-input-number style="margin-bottom:10px" v-bind="args" size="medium" v-model="val" @update:modelValue="onUpdateModelValue" /> <n8n-input-number style="margin-bottom:10px" v-bind="args" size="small" v-model="val" @update:modelValue="onUpdateModelValue" /> <n8n-input-number style="margin-bottom:10px" v-bind="args" v-model="val" size="mini" @update:modelValue="onUpdateModelValue" /> <n8n-input-number controls-position="right" style="margin-bottom:10px" v-bind="args" v-model="val" @update:modelValue="onUpdateModelValue" /> <n8n-input-number controls-position="right" style="margin-bottom:10px" v-bind="args" size="medium" v-model="val" @update:modelValue="onUpdateModelValue" /> <n8n-input-number controls-position="right" style="margin-bottom:10px" v-bind="args" size="small" v-model="val" @update:modelValue="onUpdateModelValue" /> <n8n-input-number controls-position="right" style="margin-bottom:10px" v-bind="args" v-model="val" size="mini" @update:modelValue="onUpdateModelValue" /> </div>',
+	methods,
+	data() {
+		return {
+			val: '',
+		};
+	},
+});
+
+export const Controls = ControlsTemplate.bind({});
+Controls.args = {
+	placeholder: 'placeholder...',
+};

packages/design-system/src/components/N8nInputNumber/InputNumber.vue

@@ -1,16 +1,16 @@
-<script lang="ts">
+<script setup lang="ts">
+import type { InputSize } from '@/types';
 import { ElInputNumber } from 'element-plus';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-	name: 'N8nInputNumber',
-	components: {
-		ElInputNumber,
-	},
-	props: {
-		...ElInputNumber.props,
-	},
-});
+type InputNumberProps = {
+	size?: InputSize;
+	min?: number;
+	max?: number;
+	step?: number;
+	precision?: number;
+};
+
+defineProps<InputNumberProps>();
 </script>
 
 <template>

packages/design-system/src/components/N8nText/Text.vue

@@ -88,6 +88,10 @@ const classes = computed(() => {
 	color: var(--color-primary);
 }
 
+.secondary {
+	color: var(--color-secondary);
+}
+
 .text-dark {
 	color: var(--color-text-dark);
 }

packages/design-system/src/css/common/var.scss

@@ -466,6 +466,7 @@ $input-small-height: 30px !default;
 $input-mini-font-size: 12px;
 /// height||Other|4
 $input-mini-height: 26px !default;
+$input-number-control-border-radius: 3px;
 
 /* Cascader
 -------------------------- */

packages/design-system/src/css/input-number.scss

@@ -32,12 +32,16 @@
 	}
 
 	@include mixins.e((increase, decrease)) {
+		--disabled-color: var(--color-text-light);
 		position: absolute;
 		z-index: 1;
 		top: 1px;
+		bottom: 1px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		width: var.$input-height;
 		height: auto;
-		text-align: center;
 		background: var.$background-color-base;
 		color: var(--color-text-dark);
 		cursor: pointer;
@@ -59,13 +63,15 @@
 
 	@include mixins.e(increase) {
 		right: 1px;
-		border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
+		border-radius: 0 var.$input-number-control-border-radius var.$input-number-control-border-radius
+			0;
 		border-left: var(--border-base);
 	}
 
 	@include mixins.e(decrease) {
 		left: 1px;
-		border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
+		border-radius: var.$input-number-control-border-radius 0 0
+			var.$input-number-control-border-radius;
 		border-right: var(--border-base);
 	}
 
@@ -82,7 +88,7 @@
 	}
 
 	@include mixins.m(medium) {
-		line-height: #{var.$input-medium-height - 2};
+		line-height: #{var.$input-medium-height - 4};
 
 		@include mixins.e((increase, decrease)) {
 			width: var.$input-medium-height;
@@ -114,7 +120,7 @@
 	}
 
 	@include mixins.m(mini) {
-		line-height: #{var.$input-mini-height - 2};
+		line-height: #{var.$input-mini-height - 4};
 
 		@include mixins.e((increase, decrease)) {
 			width: var.$input-mini-height;
@@ -134,28 +140,41 @@
 	@include mixins.when(without-controls) {
 		.el-input__inner {
 			text-align: left;
-			padding-left: 12px;
-			padding-right: 12px;
+			padding-left: var(--spacing-2xs);
+			padding-right: var(--spacing-2xs);
 		}
 	}
 
 	@include mixins.when(controls-right) {
 		.el-input__inner {
-			padding-left: 15px;
-			padding-right: #{var.$input-height + 10};
+			padding-left: var(--spacing-2xs);
+			padding-right: #{var.$input-height + 4};
+		}
+
+		&.el-input-number--medium .el-input__inner {
+			padding-right: #{var.$input-medium-height + 4};
+		}
+
+		&.el-input-number--small .el-input__inner {
+			padding-right: #{var.$input-small-height + 4};
+		}
+
+		&.el-input-number--mini .el-input__inner {
+			padding-left: var(--spacing-4xs);
+			padding-right: #{var.$input-mini-height + 4};
 		}
 
 		@include mixins.e((increase, decrease)) {
-			height: auto;
-			line-height: #{(var.$input-height - 2) * 0.5};
+			height: calc((100% - 1px) / 2);
+			bottom: auto;
 
 			[class*='el-icon'] {
 				transform: scale(0.8);
 			}
 		}
 
 		@include mixins.e(increase) {
-			border-radius: 0 var(--border-radius-base) 0 0;
+			border-radius: 0 var.$input-number-control-border-radius 0 0;
 			border-bottom: var(--border-base);
 		}
 
@@ -166,28 +185,7 @@
 			left: auto;
 			border-right: none;
 			border-left: var(--border-base);
-			border-radius: 0 0 var(--border-radius-base) 0;
-		}
-
-		&[class*='medium'] {
-			[class*='increase'],
-			[class*='decrease'] {
-				line-height: #{(var.$input-medium-height - 2) * 0.5};
-			}
-		}
-
-		&[class*='small'] {
-			[class*='increase'],
-			[class*='decrease'] {
-				line-height: #{(var.$input-small-height - 2) * 0.5};
-			}
-		}
-
-		&[class*='mini'] {
-			[class*='increase'],
-			[class*='decrease'] {
-				line-height: #{(var.$input-mini-height - 2) * 0.5};
-			}
+			border-radius: 0 0 var.$input-number-control-border-radius 0;
 		}
 	}
 }

packages/editor-ui/src/Interface.ts

@@ -1253,6 +1253,7 @@ export interface NDVState {
 	focusedInputPath: string;
 	mappingTelemetry: { [key: string]: string | number | boolean };
 	hoveringItem: null | TargetItem;
+	expressionOutputItemIndex: number;
 	draggable: {
 		isDragging: boolean;
 		type: string;
@@ -1261,6 +1262,7 @@ export interface NDVState {
 		activeTarget: { id: string; stickyPosition: null | XYPosition } | null;
 	};
 	isMappingOnboarded: boolean;
+	isTableHoverOnboarded: boolean;
 	isAutocompleteOnboarded: boolean;
 	highlightDraggables: boolean;
 }

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(() => {