diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue index ad88341ed5a75..d68ea0bad9233 100644 --- a/packages/editor-ui/src/components/FilterConditions/Condition.vue +++ b/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(), { issues: () => [], canRemove: true, fixedLeftValue: false, + readOnly: false, }); const emit = defineEmits<{ @@ -190,7 +192,7 @@ const onBlur = (): void => { data-test-id="filter-condition" > { :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 => { { :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" diff --git a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue index 761da34ee2cb6..de993a9f36130 100644 --- a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue +++ b/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(); +const props = withDefaults(defineProps(), { readOnly: false }); const emit = defineEmits<{ (event: 'valueChanged', value: { name: string; node: string; value: FilterValue }): void; @@ -145,7 +146,7 @@ function getIssues(index: number): string[] {
-
+
(); +const props = withDefaults(defineProps(), { 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" diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue index 61276a7cb17e3..2b29a1458a6a6 100644 --- a/packages/editor-ui/src/components/ParameterInputList.vue +++ b/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" />
{ +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(); + } + }); });