Forms: Remove usage of sass styles in Group By and Reduce Transformations (#71223)

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -32,8 +32,6 @@ export interface RichHistoryQueriesTabProps {
 }
 
 const getStyles = (theme: GrafanaTheme2, height: number) => {
-  const bgColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.dark4;
-
   return {
     container: css`
       display: flex;
@@ -76,11 +74,6 @@ const getStyles = (theme: GrafanaTheme2, height: number) => {
     multiselect: css`
       width: 100%;
       margin-bottom: ${theme.spacing(1)};
-      .gf-form-select-box__multi-value {
-        background-color: ${bgColor};
-        padding: ${theme.spacing(0.25, 0.5, 0.25, 1)};
-        border-radius: ${theme.shape.borderRadius(1)};
-      }
     `,
     sort: css`
       width: 170px;

public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx

@@ -29,7 +29,6 @@ export interface RichHistoryStarredTabProps {
 }
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const bgColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.dark4;
   return {
     container: css`
       display: flex;
@@ -45,11 +44,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     multiselect: css`
       width: 100%;
       margin-bottom: ${theme.spacing(1)};
-      .gf-form-select-box__multi-value {
-        background-color: ${bgColor};
-        padding: ${theme.spacing(0.25, 0.5, 0.25, 1)};
-        border-radius: ${theme.shape.borderRadius(1)};
-      }
     `,
     filterInput: css`
       margin-bottom: ${theme.spacing(1)};

public/app/features/transformers/editors/GroupByTransformerEditor.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import React, { useCallback } from 'react';
 
 import {
@@ -9,13 +9,15 @@ import {
   TransformerRegistryItem,
   TransformerUIProps,
   TransformerCategory,
+  GrafanaTheme2,
 } from '@grafana/data';
 import {
   GroupByFieldOptions,
   GroupByOperationID,
   GroupByTransformerOptions,
 } from '@grafana/data/src/transformations/transformers/groupBy';
-import { Select, StatsPicker, stylesFactory } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useTheme2, Select, StatsPicker, InlineField } from '@grafana/ui';
 
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
@@ -67,7 +69,8 @@ const options = [
 ];
 
 export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }: FieldProps) => {
-  const styles = getStyling();
+  const theme = useTheme2();
+  const styles = getStyles(theme);
 
   const onChange = useCallback(
     (value: SelectableValue<GroupByOperationID | null>) => {
@@ -80,28 +83,15 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }:
   );
 
   return (
-    <div className={cx('gf-form-inline', styles.row)}>
-      <div className={cx('gf-form', styles.fieldName)}>
-        <div className={cx('gf-form-label', styles.rowSpacing)}>{fieldName}</div>
-      </div>
-
-      <div className={cx('gf-form', styles.cell)}>
-        <div className={cx('gf-form-spacing', styles.rowSpacing)}>
-          <Select
-            className="width-12"
-            options={options}
-            value={config?.operation}
-            placeholder="Ignored"
-            onChange={onChange}
-            isClearable
-          />
+    <InlineField label={fieldName} labelWidth={32} grow shrink>
+      <Stack gap={0.5} direction="row" wrap={false}>
+        <div className={styles.operation}>
+          <Select options={options} value={config?.operation} placeholder="Ignored" onChange={onChange} isClearable />
         </div>
-      </div>
 
-      {config?.operation === GroupByOperationID.aggregate && (
-        <div className={cx('gf-form', 'gf-form--grow', styles.calculations)}>
+        {config?.operation === GroupByOperationID.aggregate && (
           <StatsPicker
-            className={cx('flex-grow-1', styles.rowSpacing)}
+            className={styles.aggregations}
             placeholder="Select Stats"
             allowMultiple
             stats={config.aggregations}
@@ -109,36 +99,24 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }:
               onConfigChange({ ...config, aggregations: stats as ReducerID[] });
             }}
           />
-        </div>
-      )}
-    </div>
+        )}
+      </Stack>
+    </InlineField>
   );
 };
 
-const getStyling = stylesFactory(() => {
-  const cell = css`
-    display: table-cell;
-  `;
-
+const getStyles = (theme: GrafanaTheme2) => {
   return {
-    row: css`
-      display: table-row;
+    operation: css`
+      flex-shrink: 0;
+      height: 100%;
+      width: ${theme.spacing(24)};
     `,
-    cell: cell,
-    rowSpacing: css`
-      margin-bottom: 4px;
-    `,
-    fieldName: css`
-      ${cell}
-      min-width: 250px;
-      white-space: nowrap;
-    `,
-    calculations: css`
-      ${cell}
-      width: 99%;
+    aggregations: css`
+      flex-grow: 1;
     `,
   };
-});
+};
 
 export const groupByTransformRegistryItem: TransformerRegistryItem<GroupByTransformerOptions> = {
   id: DataTransformerID.groupBy,

public/app/features/transformers/editors/ReduceTransformerEditor.tsx

@@ -11,7 +11,7 @@ import {
 } from '@grafana/data';
 import { ReduceTransformerMode, ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
 import { selectors } from '@grafana/e2e-selectors';
-import { LegacyForms, Select, StatsPicker } from '@grafana/ui';
+import { InlineField, Select, StatsPicker, InlineSwitch } from '@grafana/ui';
 
 // TODO:  Minimal implementation, needs some <3
 export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
@@ -56,61 +56,40 @@ export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProp
 
   return (
     <>
-      <div>
-        <div className="gf-form gf-form--grow">
-          <div className="gf-form-label width-8" aria-label={selectors.components.Transforms.Reduce.modeLabel}>
-            Mode
-          </div>
-          <Select
-            options={modes}
-            value={modes.find((v) => v.value === options.mode) || modes[0]}
-            onChange={onSelectMode}
-            className="flex-grow-1"
-          />
-        </div>
-      </div>
-      <div className="gf-form-inline">
-        <div className="gf-form gf-form--grow">
-          <div className="gf-form-label width-8" aria-label={selectors.components.Transforms.Reduce.calculationsLabel}>
-            Calculations
-          </div>
-          <StatsPicker
-            className="flex-grow-1"
-            placeholder="Choose Stat"
-            allowMultiple
-            stats={options.reducers || []}
-            onChange={(stats) => {
-              onChange({
-                ...options,
-                reducers: stats as ReducerID[],
-              });
-            }}
-          />
-        </div>
-      </div>
+      <InlineField label="Mode" aria-label={selectors.components.Transforms.Reduce.modeLabel} grow labelWidth={16}>
+        <Select
+          options={modes}
+          value={modes.find((v) => v.value === options.mode) || modes[0]}
+          onChange={onSelectMode}
+        />
+      </InlineField>
+      <InlineField
+        label="Calculations"
+        aria-label={selectors.components.Transforms.Reduce.calculationsLabel}
+        grow
+        labelWidth={16}
+      >
+        <StatsPicker
+          placeholder="Choose Stat"
+          allowMultiple
+          stats={options.reducers || []}
+          onChange={(stats) => {
+            onChange({
+              ...options,
+              reducers: stats as ReducerID[],
+            });
+          }}
+        />
+      </InlineField>
       {options.mode === ReduceTransformerMode.ReduceFields && (
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <LegacyForms.Switch
-              label="Include time"
-              labelClass="width-8"
-              checked={!!options.includeTimeField}
-              onChange={onToggleTime}
-            />
-          </div>
-        </div>
+        <InlineField htmlFor="include-time-field" labelWidth={16} label="Include time">
+          <InlineSwitch id="include-time-field" value={!!options.includeTimeField} onChange={onToggleTime} />
+        </InlineField>
       )}
       {options.mode !== ReduceTransformerMode.ReduceFields && (
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <LegacyForms.Switch
-              label="Labels to fields"
-              labelClass="width-8"
-              checked={!!options.labelsToFields}
-              onChange={onToggleLabels}
-            />
-          </div>
-        </div>
+        <InlineField htmlFor="labels-to-fields" labelWidth={16} label="Labels to fields">
+          <InlineSwitch id="labels-to-fields" value={!!options.labelsToFields} onChange={onToggleLabels} />
+        </InlineField>
       )}
     </>
   );