Transformations: Hide "Match all/any" conditions for less than two filters (#109754)

Hide "Match all/any" conditions for less than two filters

public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.test.tsx

@@ -67,3 +67,62 @@ describe('FilterByValueTransformerEditor', () => {
     });
   });
 });
+it('hides conditions field when there is 0 or 1 filter', () => {
+  const onChangeMock = jest.fn();
+  const input: DataFrame[] = [
+    {
+      fields: [{ name: 'field1', type: FieldType.string, config: {}, values: [] }],
+      length: 0,
+    },
+  ];
+
+  // Test with 0 filters
+  const { queryByText, rerender } = render(
+    <FilterByValueTransformerEditor
+      input={input}
+      options={{ type: FilterByValueType.include, match: FilterByValueMatch.all, filters: [] }}
+      onChange={onChangeMock}
+    />
+  );
+  expect(queryByText('Conditions')).not.toBeInTheDocument();
+
+  // Test with 1 filter
+  rerender(
+    <FilterByValueTransformerEditor
+      input={input}
+      options={{
+        type: FilterByValueType.include,
+        match: FilterByValueMatch.all,
+        filters: [{ fieldName: 'test', config: { id: ValueMatcherID.isNull, options: {} } }],
+      }}
+      onChange={onChangeMock}
+    />
+  );
+  expect(queryByText('Conditions')).not.toBeInTheDocument();
+});
+
+it('shows conditions field when there are more than 1 filter', () => {
+  const onChangeMock = jest.fn();
+  const input: DataFrame[] = [
+    {
+      fields: [{ name: 'field1', type: FieldType.string, config: {}, values: [] }],
+      length: 0,
+    },
+  ];
+
+  const { getByText } = render(
+    <FilterByValueTransformerEditor
+      input={input}
+      options={{
+        type: FilterByValueType.include,
+        match: FilterByValueMatch.all,
+        filters: [
+          { fieldName: 'test1', config: { id: ValueMatcherID.isNull, options: {} } },
+          { fieldName: 'test2', config: { id: ValueMatcherID.isNull, options: {} } },
+        ],
+      }}
+      onChange={onChangeMock}
+    />
+  );
+  expect(getByText('Conditions')).toBeInTheDocument();
+});

public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx

@@ -124,14 +124,16 @@ export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterB
           <RadioButtonGroup options={filterTypes} value={options.type} onChange={onChangeType} fullWidth />
         </div>
       </InlineField>
-      <InlineField
-        label={t('transformers.filter-by-value-transformer-editor.label-conditions', 'Conditions')}
-        labelWidth={16}
-      >
-        <div className="width-15">
-          <RadioButtonGroup options={filterMatch} value={options.match} onChange={onChangeMatch} fullWidth />
-        </div>
-      </InlineField>
+      {options.filters.length > 1 && (
+        <InlineField
+          label={t('transformers.filter-by-value-transformer-editor.label-conditions', 'Conditions')}
+          labelWidth={16}
+        >
+          <div className="width-15">
+            <RadioButtonGroup options={filterMatch} value={options.match} onChange={onChangeMatch} fullWidth />
+          </div>
+        </InlineField>
+      )}
       <Box paddingLeft={2}>
         {options.filters.map((filter, idx) => (
           <FilterByValueFilterEditor