From ca1afff886006277f15d0644bddc8c0bfc0aa4d7 Mon Sep 17 00:00:00 2001
From: Chirag Gomber <chirag.codes@gmail.com>
Date: Tue, 25 Jun 2024 00:29:41 +0530
Subject: [PATCH] Chore: Remove deprecated Layout components (#89376)

* Removed depricated HorizontalLayout from PrometheusMetricsBrowser

* Removed commented import

* typo fix

* Removed depricated HorizontalLayout from RawInfluxQLEditor

* Replaced InlineFormLabel to InlineField in RawInlfuxEditor.tsx

* Removed depricated HorizontalLayout from GraphiteFunctionEditor

* Changed div to instead use stack

* Changed htmlFor attribute from selectElementId to aliasElementId

* Updated the betterer results

* Updated prettier write to the updated files

* Changed htmlFor label to fix the text
---
 .betterer.results                             |  9 +--
 .../components/PrometheusMetricsBrowser.tsx   | 10 ++--
 .../components/GraphiteFunctionEditor.tsx     | 14 +++--
 .../query/influxql/code/RawInfluxQLEditor.tsx | 56 ++++++++++---------
 4 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index fbe38508f3d..796548a475e 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -447,9 +447,6 @@ exports[`better eslint`] = {
     "packages/grafana-prometheus/src/components/PromQueryField.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "packages/grafana-prometheus/src/datasource.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -6430,8 +6427,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
+      [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
@@ -6571,9 +6567,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
-    "public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
diff --git a/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx b/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
index 6d19dfbbe86..157908f5197 100644
--- a/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
+++ b/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
@@ -8,7 +8,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import {
   BrowserLabel as PromLabel,
   Button,
-  HorizontalGroup,
+  Stack,
   Input,
   Label,
   LoadingPlaceholder,
@@ -488,7 +488,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserPro
 
     return (
       <div className={styles.wrapper}>
-        <HorizontalGroup align="flex-start" spacing="lg">
+        <Stack gap={3}>
           <div>
             <div className={styles.section}>
               <Label description="Once a metric is selected only possible labels are shown.">1. Select a metric</Label>
@@ -631,7 +631,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserPro
               </div>
             </div>
           </div>
-        </HorizontalGroup>
+        </Stack>
 
         <div className={styles.section}>
           <Label>4. Resulting selector</Label>
@@ -639,7 +639,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserPro
             {selector}
           </div>
           {validationStatus && <div className={styles.validationStatus}>{validationStatus}</div>}
-          <HorizontalGroup>
+          <Stack>
             <Button
               data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.useQuery}
               aria-label="Use selector for query button"
@@ -677,7 +677,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserPro
             <div className={cx(styles.status, (status || error) && styles.statusShowing)}>
               <span className={error ? styles.error : ''}>{error || status}</span>
             </div>
-          </HorizontalGroup>
+          </Stack>
         </div>
       </div>
     );
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
index 6132b92a604..4e1d09ddc13 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { HorizontalGroup, InlineLabel, useStyles2 } from '@grafana/ui';
+import { Stack, InlineLabel, useStyles2 } from '@grafana/ui';
 
 import { FuncInstance } from '../gfunc';
 import { actions } from '../state/actions';
@@ -42,7 +42,7 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
       onMouseOver={() => setIsMouseOver(true)}
       onMouseOut={() => setIsMouseOver(false)}
     >
-      <HorizontalGroup spacing="none">
+      <Stack gap={0} alignItems={'baseline'}>
         <FunctionEditor
           func={func}
           onMoveLeft={() => {
@@ -55,7 +55,9 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
             dispatch(actions.removeFunction({ func }));
           }}
         />
-        <InlineLabel className={styles.label}>(</InlineLabel>
+        <InlineLabel className={styles.label} width={'auto'}>
+          (
+        </InlineLabel>
         {params.map((editableParam: EditableParam, index: number) => {
           return (
             <React.Fragment key={index}>
@@ -75,8 +77,10 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
             </React.Fragment>
           );
         })}
-        <InlineLabel className={styles.label}>)</InlineLabel>
-      </HorizontalGroup>
+        <InlineLabel className={styles.label} width={'auto'}>
+          )
+        </InlineLabel>
+      </Stack>
     </div>
   );
 }
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx
index 0df57b7b26d..e8da5a7572f 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useId } from 'react';
 
-import { HorizontalGroup, InlineFormLabel, Input, Select, TextArea } from '@grafana/ui';
+import { Stack, InlineField, Input, Select, TextArea } from '@grafana/ui';
 
 import { InfluxQuery } from '../../../../../types';
 import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants';
@@ -34,7 +34,7 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
   };
 
   return (
-    <div>
+    <Stack direction={'column'}>
       <TextArea
         aria-label="query"
         rows={3}
@@ -46,30 +46,32 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
         }}
         value={currentQuery ?? ''}
       />
-      <HorizontalGroup>
-        <InlineFormLabel htmlFor={selectElementId}>Format as</InlineFormLabel>
-        <Select
-          inputId={selectElementId}
-          onChange={(v) => {
-            onChange({ ...query, resultFormat: v.value });
-            onRunQuery();
-          }}
-          value={resultFormat}
-          options={RESULT_FORMATS}
-        />
-        <InlineFormLabel htmlFor={aliasElementId}>Alias by</InlineFormLabel>
-        <Input
-          id={aliasElementId}
-          type="text"
-          spellCheck={false}
-          placeholder="Naming pattern"
-          onBlur={applyDelayedChangesAndRunQuery}
-          onChange={(e) => {
-            setCurrentAlias(e.currentTarget.value);
-          }}
-          value={currentAlias ?? ''}
-        />
-      </HorizontalGroup>
-    </div>
+      <Stack>
+        <InlineField htmlFor={selectElementId} label="Format as">
+          <Select
+            inputId={selectElementId}
+            onChange={(v) => {
+              onChange({ ...query, resultFormat: v.value });
+              onRunQuery();
+            }}
+            value={resultFormat}
+            options={RESULT_FORMATS}
+          />
+        </InlineField>
+        <InlineField htmlFor={aliasElementId} label="Alias by">
+          <Input
+            id={aliasElementId}
+            type="text"
+            spellCheck={false}
+            placeholder="Naming pattern"
+            onBlur={applyDelayedChangesAndRunQuery}
+            onChange={(e) => {
+              setCurrentAlias(e.currentTarget.value);
+            }}
+            value={currentAlias ?? ''}
+          />
+        </InlineField>
+      </Stack>
+    </Stack>
   );
 };