From 260e123b359acfcb2ab9b67474ab2dd46db9be9c Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Mon, 16 Oct 2023 10:36:48 +0100
Subject: [PATCH] Transformations: Remove usage of gf-forms in FilterByValue
 transformation (#76570)

---
 .betterer.results                             |  3 --
 .../FilterByValueFilterEditor.tsx             | 26 +++++++--------
 .../FilterByValueTransformerEditor.tsx        | 33 +++++++------------
 3 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 9fd133181d1..edf78f5e317 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5187,9 +5187,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
       [0, 0, 0, "Do not use any type assertions.", "15"]
     ],
-    "public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/BasicMatcherEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
index fdfd2e1b154..312e2646b0b 100644
--- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
+++ b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
@@ -2,7 +2,8 @@ import React, { useCallback } from 'react';
 
 import { Field, SelectableValue, valueMatchers } from '@grafana/data';
 import { FilterByValueFilter } from '@grafana/data/src/transformations/transformers/filterByValue';
-import { Button, Select } from '@grafana/ui';
+import { Button, Select, InlineField, InlineFieldRow } from '@grafana/ui';
+import { Box } from '@grafana/ui/src/unstable';
 
 import { valueMatchersUI } from './ValueMatchers/valueMatchersUI';
 
@@ -75,9 +76,8 @@ export const FilterByValueFilterEditor = (props: Props) => {
   }
 
   return (
-    <div className="gf-form-inline">
-      <div className="gf-form gf-form-spacing">
-        <div className="gf-form-label width-7">Field</div>
+    <InlineFieldRow>
+      <InlineField label="Field" labelWidth={14}>
         <Select
           className="min-width-15 max-width-24"
           placeholder="Field Name"
@@ -85,9 +85,8 @@ export const FilterByValueFilterEditor = (props: Props) => {
           value={filter.fieldName}
           onChange={onChangeField}
         />
-      </div>
-      <div className="gf-form gf-form-spacing">
-        <div className="gf-form-label">Match</div>
+      </InlineField>
+      <InlineField label="Match">
         <Select
           className="width-12"
           placeholder="Select test"
@@ -95,15 +94,14 @@ export const FilterByValueFilterEditor = (props: Props) => {
           value={matcherId}
           onChange={onChangeMatcher}
         />
-      </div>
-      <div className="gf-form gf-form-spacing">
-        <div className="gf-form-label">Value</div>
+      </InlineField>
+      <InlineField label="Value" grow>
         <editor.component field={field} options={filter.config.options ?? {}} onChange={onChangeMatcherOptions} />
-      </div>
-      <div className="gf-form">
+      </InlineField>
+      <Box marginBottom={0.5}>
         <Button icon="times" onClick={onDelete} variant="secondary" />
-      </div>
-    </div>
+      </Box>
+    </InlineFieldRow>
   );
 };
 
diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
index 70be902af67..08b18d2e289 100644
--- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
+++ b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { cloneDeep } from 'lodash';
 import React, { useMemo, useCallback } from 'react';
 
@@ -21,7 +20,8 @@ import {
   FilterByValueTransformerOptions,
   FilterByValueType,
 } from '@grafana/data/src/transformations/transformers/filterByValue';
-import { Button, RadioButtonGroup, stylesFactory } from '@grafana/ui';
+import { Button, RadioButtonGroup, InlineField } from '@grafana/ui';
+import { Box } from '@grafana/ui/src/unstable';
 
 import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor';
 
@@ -37,7 +37,6 @@ const filterMatch: Array<SelectableValue<FilterByValueMatch>> = [
 
 export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterByValueTransformerOptions>) => {
   const { input, options, onChange } = props;
-  const styles = getEditorStyles();
   const fieldsInfo = useFieldsInfo(input);
 
   const onAddFilter = useCallback(() => {
@@ -101,19 +100,17 @@ export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterB
 
   return (
     <div>
-      <div className="gf-form gf-form-inline">
-        <div className="gf-form-label width-8">Filter type</div>
+      <InlineField label="Filter type" labelWidth={16}>
         <div className="width-15">
           <RadioButtonGroup options={filterTypes} value={options.type} onChange={onChangeType} fullWidth />
         </div>
-      </div>
-      <div className="gf-form gf-form-inline">
-        <div className="gf-form-label width-8">Conditions</div>
+      </InlineField>
+      <InlineField label="Conditions" labelWidth={16}>
         <div className="width-15">
           <RadioButtonGroup options={filterMatch} value={options.match} onChange={onChangeMatch} fullWidth />
         </div>
-      </div>
-      <div className={styles.conditions}>
+      </InlineField>
+      <Box paddingLeft={2}>
         {options.filters.map((filter, idx) => (
           <FilterByValueFilterEditor
             key={idx}
@@ -123,12 +120,10 @@ export const FilterByValueTransformerEditor = (props: TransformerUIProps<FilterB
             onDelete={() => onDeleteFilter(idx)}
           />
         ))}
-        <div className="gf-form">
-          <Button icon="plus" size="sm" onClick={onAddFilter} variant="secondary">
-            Add condition
-          </Button>
-        </div>
-      </div>
+        <Button icon="plus" size="sm" onClick={onAddFilter} variant="secondary">
+          Add condition
+        </Button>
+      </Box>
     </div>
   );
 };
@@ -143,12 +138,6 @@ export const filterByValueTransformRegistryItem: TransformerRegistryItem<FilterB
   categories: new Set([TransformerCategory.Filter]),
 };
 
-const getEditorStyles = stylesFactory(() => ({
-  conditions: css`
-    padding-left: 16px;
-  `,
-}));
-
 const useFieldsInfo = (data: DataFrame[]): DataFrameFieldsInfo => {
   return useMemo(() => {
     const meta = {