fix(Filter Node): Propagate toggle changes correctly (#18864)

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

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
 import { within, waitFor } from '@testing-library/vue';
 import { getFilterOperator } from './utils';
 import get from 'lodash/get';
+import * as workFlowHelpers from '@/composables/useWorkflowHelpers';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -445,4 +446,49 @@ describe('FilterConditions.vue', () => {
 			within(conditions[1]).getByTestId('filter-condition-right').querySelector('input'),
 		).toHaveValue(6);
 	});
+
+	it('emits once with updated caseSensitive when typeOptions.filter.caseSensitive changes', async () => {
+		const { rerender, emitted } = renderComponent({
+			...DEFAULT_SETUP,
+			props: {
+				...DEFAULT_SETUP.props,
+				parameter: {
+					...DEFAULT_SETUP.props.parameter,
+					typeOptions: {
+						filter: { caseSensitive: true },
+					},
+				},
+				node: {
+					...DEFAULT_SETUP.props.node,
+					parameters: {},
+				},
+			},
+		});
+
+		// No emission on initial render
+		expect(emitted('valueChanged')).toBeUndefined();
+
+		vi.spyOn(workFlowHelpers, 'resolveParameter').mockReturnValue({ caseSensitive: false });
+
+		// Change caseSensitive and also change node.parameters to trigger the watcher
+		await rerender({
+			parameter: {
+				...DEFAULT_SETUP.props.parameter,
+				typeOptions: {
+					filter: { caseSensitive: false },
+				},
+			},
+			node: {
+				...DEFAULT_SETUP.props.node,
+				parameters: { foo: 'bar' },
+			},
+		});
+
+		await waitFor(() => {
+			expect(emitted('valueChanged') ?? []).toHaveLength(1);
+		});
+
+		const events = emitted('valueChanged') ?? [];
+		expect(get(events[0], '0.value.options.caseSensitive')).toBe(false);
+	});
 });

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

@@ -36,7 +36,13 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), { readOnly: false });
 
 const emit = defineEmits<{
-	valueChanged: [value: { name: string; node: string; value: FilterValue }];
+	valueChanged: [
+		value: {
+			name: string;
+			node: string;
+			value: FilterValue;
+		},
+	];
 }>();
 
 const i18n = useI18n();
@@ -120,6 +126,14 @@ watch(
 	},
 );
 
+watch(
+	() => state.paramValue,
+	() => {
+		debouncedEmitChange();
+	},
+	{ deep: true },
+);
+
 function emitChange() {
 	emit('valueChanged', {
 		name: props.path,
@@ -130,22 +144,18 @@ function emitChange() {
 
 function addCondition(): void {
 	state.paramValue.conditions.push(createCondition());
-	debouncedEmitChange();
 }
 
 function onConditionUpdate(index: number, value: FilterConditionValue): void {
 	state.paramValue.conditions[index] = value;
-	debouncedEmitChange();
 }
 
 function onCombinatorChange(combinator: FilterTypeCombinator): void {
 	state.paramValue.combinator = combinator;
-	debouncedEmitChange();
 }
 
 function onConditionRemove(index: number): void {
 	state.paramValue.conditions.splice(index, 1);
-	debouncedEmitChange();
 }
 
 function getIssues(index: number): string[] {