fix(editor): Add read only mode to filter component (#8285)

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

@@ -32,6 +32,7 @@ interface Props {
 	issues?: string[];
 	fixedLeftValue?: boolean;
 	canRemove?: boolean;
+	readOnly?: boolean;
 	index?: number;
 }
 
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
 	issues: () => [],
 	canRemove: true,
 	fixedLeftValue: false,
+	readOnly: false,
 });
 
 const emit = defineEmits<{
@@ -190,7 +192,7 @@ const onBlur = (): void => {
 		data-test-id="filter-condition"
 	>
 		<n8n-icon-button
-			v-if="canRemove"
+			v-if="canRemove && !readOnly"
 			type="tertiary"
 			text
 			size="mini"
@@ -227,6 +229,7 @@ const onBlur = (): void => {
 						:value="condition.leftValue"
 						:path="`${path}.left`"
 						:class="[$style.input, $style.inputLeft]"
+						:is-read-only="readOnly"
 						data-test-id="filter-condition-left"
 						@update="onLeftValueChange"
 						@blur="onBlur"
@@ -234,6 +237,7 @@ const onBlur = (): void => {
 					<OperatorSelect
 						:class="$style.select"
 						:selected="`${operator.type}:${operator.operation}`"
+						:read-only="readOnly"
 						@operatorChange="onOperatorChange"
 					></OperatorSelect>
 					<ParameterInputFull
@@ -248,6 +252,7 @@ const onBlur = (): void => {
 						:value="condition.rightValue"
 						:path="`${path}.right`"
 						:class="[$style.input, $style.inputRight]"
+						:is-read-only="readOnly"
 						data-test-id="filter-condition-right"
 						@update="onRightValueChange"
 						@blur="onBlur"

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

@@ -29,9 +29,10 @@ interface Props {
 	value: FilterValue;
 	path: string;
 	node: INode | null;
+	readOnly?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), { readOnly: false });
 
 const emit = defineEmits<{
 	(event: 'valueChanged', value: { name: string; node: string; value: FilterValue }): void;
@@ -145,7 +146,7 @@ function getIssues(index: number): string[] {
 				<div v-for="(condition, index) of state.paramValue.conditions" :key="condition.id">
 					<CombinatorSelect
 						v-if="index !== 0"
-						:read-only="index !== 1"
+						:read-only="index !== 1 || readOnly"
 						:options="allowedCombinators"
 						:selected="state.paramValue.combinator"
 						:class="$style.combinator"
@@ -157,6 +158,7 @@ function getIssues(index: number): string[] {
 						:index="index"
 						:options="state.paramValue.options"
 						:fixed-left-value="!!parameter.typeOptions?.filter?.leftValue"
+						:read-only="readOnly"
 						:can-remove="index !== 0 || state.paramValue.conditions.length > 1"
 						:path="`${path}.${index}`"
 						:issues="getIssues(index)"
@@ -166,7 +168,7 @@ function getIssues(index: number): string[] {
 					></Condition>
 				</div>
 			</div>
-			<div v-if="!singleCondition" :class="$style.addConditionWrapper">
+			<div v-if="!singleCondition && !readOnly" :class="$style.addConditionWrapper">
 				<n8n-button
 					type="tertiary"
 					block

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

@@ -6,9 +6,10 @@ import type { FilterOperator } from './types';
 
 interface Props {
 	selected: string;
+	readOnly?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), { readOnly: false });
 
 const selected = ref(props.selected);
 const menuOpen = ref(false);
@@ -57,6 +58,7 @@ function onGroupSelect(group: string) {
 		data-test-id="filter-operator-select"
 		size="small"
 		:model-value="selected"
+		:disabled="readOnly"
 		@update:modelValue="onOperatorChange"
 		@visible-change="onSelectVisibleChange"
 		@mouseenter="shouldRenderItems = true"

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

@@ -102,6 +102,7 @@
 				:value="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
 				:path="getPath(parameter.name)"
 				:node="node"
+				:read-only="isReadOnly"
 				@valueChanged="valueChanged"
 			/>
 			<div

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

@@ -5,6 +5,7 @@ import { STORES } from '@/constants';
 import { useNDVStore } from '@/stores/ndv.store';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
+import { within } from '@testing-library/vue';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -31,7 +32,7 @@ const DEFAULT_SETUP = {
 
 const renderComponent = createComponentRenderer(FilterConditions, DEFAULT_SETUP);
 
-describe('Filter.vue', () => {
+describe('FilterConditions.vue', () => {
 	afterEach(() => {
 		vi.clearAllMocks();
 	});
@@ -264,4 +265,45 @@ describe('Filter.vue', () => {
 		expect(conditions.length).toEqual(1);
 		expect(conditions[0].querySelector('[data-test-id="filter-remove-condition"]')).toBeNull();
 	});
+
+	it('renders correctly in read only mode', async () => {
+		const { findAllByTestId, queryByTestId } = renderComponent({
+			props: {
+				...DEFAULT_SETUP.props,
+				value: {
+					conditions: [
+						{
+							leftValue: 'foo',
+							operator: { type: 'string', operation: 'equals' },
+							rightValue: 'bar',
+						},
+						{
+							leftValue: 'foo',
+							operator: { type: 'string', operation: 'equals' },
+							rightValue: 'bar',
+						},
+					],
+				},
+				readOnly: true,
+			},
+		});
+
+		expect(queryByTestId('filter-add-condition')).not.toBeInTheDocument();
+
+		const conditions = await findAllByTestId('filter-condition');
+
+		for (const condition of conditions) {
+			const removeButton = within(condition).queryByTestId('filter-remove-condition');
+			expect(removeButton).not.toBeInTheDocument();
+
+			const left = within(condition).getByTestId('filter-condition-left');
+			expect(left.querySelector('input')).toBeDisabled();
+
+			const right = within(condition).getByTestId('filter-condition-right');
+			expect(right.querySelector('input')).toBeDisabled();
+
+			const operatorSelect = within(condition).getByTestId('filter-operator-select');
+			expect(operatorSelect.querySelector('input')).toBeDisabled();
+		}
+	});
 });