From 4bab530375a820a1b607a2490e12ba64da9fff27 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Fri, 10 May 2024 16:18:40 +0100
Subject: [PATCH] Chore: Remove gf-forms from `SubMenuItems` and
 `RangeMatcherEditor` (#87633)

---
 .betterer.results                                        | 9 ---------
 .../dashboard/components/SubMenu/SubMenuItems.tsx        | 6 +-----
 .../ValueMatchers/RangeMatcherEditor.tsx                 | 8 +++-----
 public/app/features/variables/pickers/PickerRenderer.tsx | 6 +++---
 4 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index b721b475bef0..f187621a3143 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5495,9 +5495,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/datasources/components/BasicSettings.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
@@ -5543,11 +5540,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
@@ -5577,7 +5569,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "public/app/features/variables/pickers/shared/VariableInput.tsx:5381": [
diff --git a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
index 5bce5144f9d2..fb9fe6239003 100644
--- a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
+++ b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
@@ -24,11 +24,7 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
   return (
     <>
       {visibleVariables.map((variable) => (
-        <div
-          key={variable.id}
-          className="submenu-item gf-form-inline"
-          data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}
-        >
+        <div key={variable.id} className="submenu-item" data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>
           <PickerRenderer variable={variable} readOnly={readOnly} />
         </div>
       ))}
diff --git a/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx
index 1276d5f65f4d..50076b1819fe 100644
--- a/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx
+++ b/public/app/features/transformers/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 
 import { ValueMatcherID, RangeValueMatcherOptions, VariableOrigin } from '@grafana/data';
 import { getTemplateSrv, config as cfg } from '@grafana/runtime';
-import { Input } from '@grafana/ui';
+import { InlineLabel, Input } from '@grafana/ui';
 
 import { SuggestionsInput } from '../../suggestionsInput/SuggestionsInput';
 import { numberOrVariableValidator } from '../../utils';
@@ -84,7 +84,7 @@ export function rangeMatcherEditor<T = any>(
             onChange={(val) => onChangeOptionsSuggestions(val, 'from')}
             suggestions={variables}
           />
-          <div className="gf-form-label">and</div>
+          <InlineLabel>and</InlineLabel>
           <SuggestionsInput
             invalid={isInvalid.to}
             error={'Value needs to be an integer or a variable'}
@@ -99,16 +99,14 @@ export function rangeMatcherEditor<T = any>(
     return (
       <>
         <Input
-          className="flex-grow-1 gf-form-spacing"
           invalid={isInvalid['from']}
           defaultValue={String(options.from)}
           placeholder="From"
           onChange={(event) => onChangeValue(event, 'from')}
           onBlur={(event) => onChangeOptions(event, 'from')}
         />
-        <div className="gf-form-label">and</div>
+        <InlineLabel>and</InlineLabel>
         <Input
-          className="flex-grow-1"
           invalid={isInvalid['to']}
           defaultValue={String(options.to)}
           placeholder="To"
diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
index f4a135ba8c53..c410f617b9f3 100644
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement, useMemo } from 'react';
 
 import { TypedVariableModel, VariableHide } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Tooltip } from '@grafana/ui';
+import { Stack, Tooltip } from '@grafana/ui';
 
 import { variableAdapters } from '../adapters';
 import { VARIABLE_PREFIX } from '../constants';
@@ -20,12 +20,12 @@ export const PickerRenderer = (props: Props) => {
   }
 
   return (
-    <div className="gf-form">
+    <Stack gap={0}>
       <PickerLabel variable={props.variable} />
       {props.variable.hide !== VariableHide.hideVariable && PickerToRender && (
         <PickerToRender variable={props.variable} readOnly={props.readOnly ?? false} />
       )}
-    </div>
+    </Stack>
   );
 };