fix(editor): Set correct type for right input in filter component (#8771)

packages/editor-ui/src/components/FilterConditions/Condition.vue

@@ -79,16 +79,17 @@ const leftParameter = computed<INodeProperties>(() => ({
 	...operatorTypeToNodeProperty(operator.value.type),
 }));
 
-const rightParameter = computed<INodeProperties>(() => ({
+const rightParameter = computed<INodeProperties>(() => {
-	name: '',
+	const type = operator.value.rightType ?? operator.value.type;
-	displayName: '',
+	return {
-	default: '',
+		name: '',
-	placeholder:
+		displayName: '',
-		operator.value.type === 'dateTime'
+		default: '',
-			? now.value
+		placeholder:
-			: i18n.baseText('filter.condition.placeholderRight'),
+			type === 'dateTime' ? now.value : i18n.baseText('filter.condition.placeholderRight'),
-	...operatorTypeToNodeProperty(operator.value.type),
+		...operatorTypeToNodeProperty(type),
-}));
+	};
+});
 
 const onLeftValueChange = (update: IUpdateInformation): void => {
 	condition.value.leftValue = update.value;

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

@@ -6,6 +6,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import { within } from '@testing-library/vue';
+import { getFilterOperator } from '../utils';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -62,29 +63,22 @@ describe('FilterConditions.vue', () => {
 						{
 							leftValue: '={{ $json.tags }}',
 							rightValue: 'exotic',
-							operator: {
+							operator: getFilterOperator('array:contains'),
-								type: 'array',
-								operation: 'contains',
-								rightType: 'any',
-							},
 						},
 						{
 							leftValue: '={{ $json.meta }}',
 							rightValue: '',
-							operator: {
+							operator: getFilterOperator('object:notEmpty'),
-								type: 'object',
-								operation: 'notEmpty',
-								singleValue: true,
-							},
 						},
 						{
-							leftValue: '={{ $json.test }}',
+							leftValue: '={{ $json.name }}',
-							rightValue: 'other',
+							rightValue: 'John',
-							operator: {
+							operator: getFilterOperator('string:equals'),
-								type: 'string',
+						},
-								operation: 'equals',
+						{
-								singleValue: true,
+							leftValue: '={{ $json.tags }}',
-							},
+							rightValue: 5,
+							operator: getFilterOperator('array:lengthGte'),
 						},
 					],
 					combinator: 'or',
@@ -95,31 +89,53 @@ describe('FilterConditions.vue', () => {
 		const conditions = await findAllByTestId('filter-condition');
 		const combinators = await findAllByTestId('filter-combinator-select');
 
-		expect(combinators).toHaveLength(2);
+		expect(combinators).toHaveLength(3);
-		expect(combinators[0].querySelector('input')?.value).toEqual('OR');
+		expect(combinators[0].querySelector('input')).toHaveValue('OR');
 		expect(combinators[1]).toHaveTextContent('OR');
 
-		expect(conditions).toHaveLength(3);
+		expect(conditions).toHaveLength(4);
-		expect(conditions[0].querySelector('[data-test-id="filter-condition-left"]')).toHaveTextContent(
+
+		// array:contains
+		expect(within(conditions[0]).getByTestId('filter-condition-left')).toHaveTextContent(
 			'{{ $json.tags }}',
 		);
 		expect(
-			conditions[0].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
+			within(conditions[0]).getByTestId('filter-operator-select').querySelector('input'),
-				?.value,
+		).toHaveValue('contains');
-		).toEqual('contains');
 		expect(
-			conditions[0].querySelector('[data-test-id="filter-condition-right"]')?.querySelector('input')
+			within(conditions[0]).getByTestId('filter-condition-right').querySelector('input'),
-				?.value,
+		).toHaveValue('exotic');
-		).toEqual('exotic');
 
-		expect(conditions[1].querySelector('[data-test-id="filter-condition-left"]')).toHaveTextContent(
+		// object:notEmpty
+		expect(within(conditions[1]).getByTestId('filter-condition-left')).toHaveTextContent(
 			'{{ $json.meta }}',
 		);
 		expect(
-			conditions[1].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
+			within(conditions[1]).getByTestId('filter-operator-select').querySelector('input'),
-				?.value,
+		).toHaveValue('is not empty');
-		).toEqual('is not empty');
+		expect(within(conditions[1]).queryByTestId('filter-condition-right')).not.toBeInTheDocument();
-		expect(conditions[1].querySelector('[data-test-id="filter-condition-right"]')).toBeNull();
+
+		// string:equals
+		expect(within(conditions[2]).getByTestId('filter-condition-left')).toHaveTextContent(
+			'{{ $json.name }}',
+		);
+		expect(
+			within(conditions[2]).getByTestId('filter-operator-select').querySelector('input'),
+		).toHaveValue('is equal to');
+		expect(
+			within(conditions[2]).getByTestId('filter-condition-right').querySelector('input'),
+		).toHaveValue('John');
+
+		// array:lengthGte
+		expect(within(conditions[3]).getByTestId('filter-condition-left')).toHaveTextContent(
+			'{{ $json.tags }}',
+		);
+		expect(
+			within(conditions[3]).getByTestId('filter-operator-select').querySelector('input'),
+		).toHaveValue('length greater than or equal to');
+		expect(
+			within(conditions[3]).getByTestId('filter-condition-right').querySelector('input'),
+		).toHaveValue(5);
 	});
 
 	it('renders parameter issues', async () => {
@@ -137,18 +153,12 @@ describe('FilterConditions.vue', () => {
 						{
 							leftValue: '={{ $json.num }}',
 							rightValue: '5',
-							operator: {
+							operator: getFilterOperator('number:equals'),
-								type: 'number',
-								operation: 'equals',
-							},
 						},
 						{
 							leftValue: '={{ $json.num }}',
 							rightValue: 'not a number',
-							operator: {
+							operator: getFilterOperator('number:equals'),
-								type: 'number',
-								operation: 'equals',
-							},
 						},
 					],
 				},
@@ -199,12 +209,12 @@ describe('FilterConditions.vue', () => {
 					conditions: [
 						{
 							leftValue: 'foo',
-							operator: { type: 'string', operation: 'equals' },
+							operator: getFilterOperator('string:equals'),
 							rightValue: 'bar',
 						},
 						{
 							leftValue: 'foo',
-							operator: { type: 'string', operation: 'equals' },
+							operator: getFilterOperator('string:equals'),
 							rightValue: 'bar',
 						},
 					],
@@ -272,12 +282,12 @@ describe('FilterConditions.vue', () => {
 					conditions: [
 						{
 							leftValue: 'foo',
-							operator: { type: 'string', operation: 'equals' },
+							operator: getFilterOperator('string:equals'),
 							rightValue: 'bar',
 						},
 						{
 							leftValue: 'foo',
-							operator: { type: 'string', operation: 'equals' },
+							operator: getFilterOperator('string:equals'),
 							rightValue: 'bar',
 						},
 					],
@@ -316,10 +326,7 @@ describe('FilterConditions.vue', () => {
 							id: '1',
 							leftValue: 'foo',
 							rightValue: 'bar',
-							operator: {
+							operator: getFilterOperator('string:equals'),
-								type: 'string',
-								operation: 'equals',
-							},
 						},
 					],
 					combinator: 'and',
@@ -335,19 +342,13 @@ describe('FilterConditions.vue', () => {
 						id: '2',
 						leftValue: 'quz',
 						rightValue: 'qux',
-						operator: {
+						operator: getFilterOperator('string:notEquals'),
-							type: 'string',
-							operation: 'notEquals',
-						},
 					},
 					{
 						id: '3',
 						leftValue: 5,
 						rightValue: 6,
-						operator: {
+						operator: getFilterOperator('number:gt'),
-							type: 'number',
-							operation: 'gt',
-						},
 					},
 				],
 				combinator: 'and',