From fe757f69c57bec89be8e17a9c8022e0334c9e0e5 Mon Sep 17 00:00:00 2001
From: Khushi Jain <khushij393@gmail.com>
Date: Tue, 2 Jan 2024 19:36:23 +0530
Subject: [PATCH] Forms: Remove gf-form from opentsdb/components (#79830)

* Forms: Remove gf-form from opentsdb/components

* filter and tag

* rate

* Update public/app/plugins/datasource/opentsdb/components/DownSample.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/plugins/datasource/opentsdb/components/FilterSection.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/plugins/datasource/opentsdb/components/MetricSection.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/plugins/datasource/opentsdb/components/RateSection.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/plugins/datasource/opentsdb/components/TagSection.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* prettier

* more changes

---------

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .betterer.results                             |  73 +-----------
 .../opentsdb/components/DownSample.tsx        |  32 +++--
 .../opentsdb/components/FilterSection.tsx     | 103 ++++++++--------
 .../opentsdb/components/MetricSection.tsx     |  26 ++--
 .../components/OpenTsdbQueryEditor.tsx        |   9 +-
 .../opentsdb/components/RateSection.tsx       |  51 ++++----
 .../opentsdb/components/TagSection.tsx        | 112 ++++++++++--------
 7 files changed, 166 insertions(+), 240 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 26ae030adbb..8cb345bb383 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5550,8 +5550,7 @@ exports[`better eslint`] = {
     ],
     "public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/plugins/datasource/opentsdb/datasource.d.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -7405,76 +7404,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/plugins/datasource/opentsdb/components/DownSample.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"],
-      [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"],
-      [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/plugins/datasource/opentsdb/components/FilterSection.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"],
-      [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"],
-      [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"],
-      [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/plugins/datasource/opentsdb/components/MetricSection.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"],
-      [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"],
-      [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/plugins/datasource/opentsdb/components/RateSection.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"],
-      [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"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
-    "public/app/plugins/datasource/opentsdb/components/TagSection.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"],
-      [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"],
-      [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"],
-      [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/plugins/datasource/prometheus/components/PromExploreExtraField.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"],
diff --git a/public/app/plugins/datasource/opentsdb/components/DownSample.tsx b/public/app/plugins/datasource/opentsdb/components/DownSample.tsx
index ab022d66f48..74911259d50 100644
--- a/public/app/plugins/datasource/opentsdb/components/DownSample.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/DownSample.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
 import { toOption } from '@grafana/data';
-import { InlineLabel, Select, Input, InlineFormLabel, InlineSwitch } from '@grafana/ui';
+import { InlineLabel, Select, Input, InlineFormLabel, InlineSwitch, Stack } from '@grafana/ui';
 
 import { OpenTsdbQuery } from '../types';
 
-import { paddingRightClass } from './styles';
-
 export interface DownSampleProps {
   query: OpenTsdbQuery;
   onChange: (query: OpenTsdbQuery) => void;
@@ -21,8 +19,8 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
   const fillPolicyOptions = fillPolicies.map((value: string) => toOption(value));
 
   return (
-    <div className="gf-form-inline" data-testid={testIds.section}>
-      <div className="gf-form">
+    <Stack gap={0.5} alignItems="flex-start" data-testid={testIds.section}>
+      <Stack gap={0}>
         <InlineFormLabel
           className="query-keyword"
           width={8}
@@ -36,7 +34,6 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
         </InlineFormLabel>
         <Input
           width={25}
-          className={paddingRightClass}
           data-testid={testIds.interval}
           placeholder="interval"
           value={query.downsampleInterval ?? ''}
@@ -46,13 +43,12 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
           }}
           onBlur={() => onRunQuery()}
         />
-      </div>
-      <div className="gf-form">
+      </Stack>
+      <Stack gap={0}>
         <InlineFormLabel width={'auto'} className="query-keyword">
           Aggregator
         </InlineFormLabel>
         <Select
-          className="gf-form-input"
           value={query.downsampleAggregator ? toOption(query.downsampleAggregator) : undefined}
           options={aggregatorOptions}
           onChange={({ value }) => {
@@ -62,9 +58,9 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
             }
           }}
         />
-      </div>
+      </Stack>
       {tsdbVersion >= 2 && (
-        <div className="gf-form">
+        <Stack gap={0} alignItems="flex-start">
           <InlineLabel className="width-6 query-keyword">Fill</InlineLabel>
           <Select
             inputId="opentsdb-fillpolicy-select"
@@ -77,9 +73,9 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
               }
             }}
           />
-        </div>
+        </Stack>
       )}
-      <div className="gf-form">
+      <Stack gap={0}>
         <InlineFormLabel className="query-keyword">Disable downsampling</InlineFormLabel>
         <InlineSwitch
           value={query.disableDownsampling ?? false}
@@ -89,11 +85,11 @@ export function DownSample({ query, onChange, onRunQuery, aggregators, fillPolic
             onRunQuery();
           }}
         />
-      </div>
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow"></div>
-      </div>
-    </div>
+      </Stack>
+      <Stack gap={0} grow={1}>
+        <InlineLabel> </InlineLabel>
+      </Stack>
+    </Stack>
   );
 }
 
diff --git a/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx b/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
index c947b0017db..86c1d0a917f 100644
--- a/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/FilterSection.tsx
@@ -12,6 +12,7 @@ import {
   clearButtonStyles,
   useStyles2,
   AsyncSelect,
+  Stack,
 } from '@grafana/ui';
 
 import { OpenTsdbFilter, OpenTsdbQuery } from '../types';
@@ -118,46 +119,45 @@ export function FilterSection({
   const tagValueSearch = debounce((query: string) => suggestTagValues(query), 350);
 
   return (
-    <div className="gf-form-inline" data-testid={testIds.section}>
-      <div className="gf-form">
-        <InlineFormLabel
-          className="query-keyword"
-          width={8}
-          tooltip={<div>Filters does not work with tags, either of the two will work but not both.</div>}
-        >
-          Filters
-        </InlineFormLabel>
-        {query.filters &&
-          query.filters.map((fil: OpenTsdbFilter, idx: number) => {
-            return (
-              <InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
-                {fil.tagk} = {fil.type}({fil.filter}), groupBy = {'' + fil.groupBy}
-                <button type="button" className={buttonStyles} onClick={() => editFilter(fil, idx)}>
-                  <Icon name={'pen'} />
-                </button>
-                <button
-                  type="button"
-                  className={buttonStyles}
-                  onClick={() => removeFilter(idx)}
-                  data-testid={testIds.remove}
-                >
-                  <Icon name={'times'} />
-                </button>
-              </InlineFormLabel>
-            );
-          })}
-        {!addFilterMode && (
-          <button className="gf-form-label" type="button" onClick={changeAddFilterMode} aria-label="Add filter">
+    <Stack gap={0} data-testid={testIds.section}>
+      <InlineFormLabel
+        className="query-keyword"
+        width={8}
+        tooltip={<div>Filters does not work with tags, either of the two will work but not both.</div>}
+      >
+        Filters
+      </InlineFormLabel>
+      {query.filters &&
+        query.filters.map((fil: OpenTsdbFilter, idx: number) => {
+          return (
+            <InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
+              {fil.tagk} = {fil.type}({fil.filter}), groupBy = {'' + fil.groupBy}
+              <button type="button" className={buttonStyles} onClick={() => editFilter(fil, idx)}>
+                <Icon name={'pen'} />
+              </button>
+              <button
+                type="button"
+                className={buttonStyles}
+                onClick={() => removeFilter(idx)}
+                data-testid={testIds.remove}
+              >
+                <Icon name={'times'} />
+              </button>
+            </InlineFormLabel>
+          );
+        })}
+      {!addFilterMode && (
+        <InlineFormLabel width={2}>
+          <button type="button" className={buttonStyles} onClick={changeAddFilterMode} aria-label="Add filter">
             <Icon name={'plus'} />
           </button>
-        )}
-      </div>
+        </InlineFormLabel>
+      )}
       {addFilterMode && (
-        <div className="gf-form-inline">
-          <div className="gf-form">
+        <Stack gap={0.5} alignItems="center">
+          <Stack gap={0}>
             <Select
               inputId="opentsdb-suggested-tagk-select"
-              className="gf-form-input"
               value={curFilterKey ? toOption(curFilterKey) : undefined}
               placeholder="key"
               allowCustomValue
@@ -177,9 +177,9 @@ export function FilterSection({
                 }
               }}
             />
-          </div>
+          </Stack>
 
-          <div className="gf-form">
+          <Stack gap={0}>
             <InlineLabel className="width-4 query-keyword">Type</InlineLabel>
             <Select
               inputId="opentsdb-aggregator-select"
@@ -191,12 +191,11 @@ export function FilterSection({
                 }
               }}
             />
-          </div>
+          </Stack>
 
-          <div className="gf-form">
+          <Stack gap={0}>
             <AsyncSelect
               inputId="opentsdb-suggested-tagv-select"
-              className="gf-form-input"
               value={curFilterValue ? toOption(curFilterValue) : undefined}
               placeholder="filter"
               allowCustomValue
@@ -208,7 +207,7 @@ export function FilterSection({
                 }
               }}
             />
-          </div>
+          </Stack>
 
           <InlineFormLabel width={5} className="query-keyword">
             Group by
@@ -221,27 +220,27 @@ export function FilterSection({
               updCurFilterGroupBy(!curFilterGroupBy);
             }}
           />
-          <div className="gf-form">
+          <Stack gap={0}>
             {errors && (
-              <div className="gf-form-label" title={errors} data-testid={testIds.error}>
+              <InlineLabel title={errors} data-testid={testIds.error}>
                 <Icon name={'exclamation-triangle'} color={'rgb(229, 189, 28)'} />
-              </div>
+              </InlineLabel>
             )}
-            <div className="gf-form-label">
+            <InlineFormLabel width={5.5}>
               <button type="button" className={buttonStyles} onClick={addFilter}>
                 add filter
               </button>
               <button type="button" className={buttonStyles} onClick={changeAddFilterMode}>
                 <Icon name={'times'} />
               </button>
-            </div>
-          </div>
-        </div>
+            </InlineFormLabel>
+          </Stack>
+        </Stack>
       )}
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow"></div>
-      </div>
-    </div>
+      <Stack gap={0} grow={1}>
+        <InlineLabel> </InlineLabel>
+      </Stack>
+    </Stack>
   );
 }
 
diff --git a/public/app/plugins/datasource/opentsdb/components/MetricSection.tsx b/public/app/plugins/datasource/opentsdb/components/MetricSection.tsx
index edb3adad010..a76ff1b4422 100644
--- a/public/app/plugins/datasource/opentsdb/components/MetricSection.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/MetricSection.tsx
@@ -2,7 +2,7 @@ import debounce from 'debounce-promise';
 import React from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { Select, Input, InlineFormLabel, AsyncSelect } from '@grafana/ui';
+import { Select, Input, InlineFormLabel, AsyncSelect, Stack, InlineLabel } from '@grafana/ui';
 
 import { OpenTsdbQuery } from '../types';
 
@@ -19,8 +19,8 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
   const metricSearch = debounce((query: string) => suggestMetrics(query), 350);
 
   return (
-    <div className="gf-form-inline" data-testid={testIds.section}>
-      <div className="gf-form">
+    <Stack gap={0.5} alignItems="flex-start" data-testid={testIds.section}>
+      <Stack gap={0}>
         <InlineFormLabel width={8} className="query-keyword">
           Metric
         </InlineFormLabel>
@@ -28,7 +28,6 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
         <AsyncSelect
           width={25}
           inputId="opentsdb-metric-select"
-          className="gf-form-input"
           value={query.metric ? toOption(query.metric) : undefined}
           placeholder="Metric name"
           allowCustomValue
@@ -41,14 +40,13 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
             }
           }}
         />
-      </div>
-      <div className="gf-form">
+      </Stack>
+      <Stack gap={0} alignItems="flex-start">
         <InlineFormLabel width={'auto'} className="query-keyword">
           Aggregator
         </InlineFormLabel>
         <Select
           inputId="opentsdb-aggregator-select"
-          className="gf-form-input"
           value={query.aggregator ? toOption(query.aggregator) : undefined}
           options={aggregatorOptions}
           onChange={({ value }) => {
@@ -58,8 +56,8 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
             }
           }}
         />
-      </div>
-      <div className="gf-form max-width-20">
+      </Stack>
+      <Stack gap={0}>
         <InlineFormLabel
           className="query-keyword"
           width={6}
@@ -77,11 +75,11 @@ export function MetricSection({ query, onChange, onRunQuery, suggestMetrics, agg
           }}
           onBlur={() => onRunQuery()}
         />
-      </div>
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow"></div>
-      </div>
-    </div>
+      </Stack>
+      <Stack gap={0} grow={1}>
+        <InlineLabel> </InlineLabel>
+      </Stack>
+    </Stack>
   );
 }
 
diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
index 8a4fcba5220..bdf57dbfbb4 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 
 import { GrafanaTheme2, QueryEditorProps, textUtil } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, Stack } from '@grafana/ui';
 
 import OpenTsDatasource from '../datasource';
 import { OpenTsdbOptions, OpenTsdbQuery } from '../types';
@@ -112,7 +112,7 @@ export function OpenTsdbQueryEditor({
 
   return (
     <div className={styles.container} data-testid={testIds.editor}>
-      <div className={styles.visualEditor}>
+      <Stack gap={0.5} direction="column" grow={1}>
         <MetricSection
           query={query}
           onChange={onChange}
@@ -147,7 +147,7 @@ export function OpenTsdbQueryEditor({
           tsdbVersion={tsdbVersion}
         />
         <RateSection query={query} onChange={onChange} onRunQuery={onRunQuery} tsdbVersion={tsdbVersion} />
-      </div>
+      </Stack>
     </div>
   );
 }
@@ -157,9 +157,6 @@ function getStyles(theme: GrafanaTheme2) {
     container: css`
       display: flex;
     `,
-    visualEditor: css`
-      flex-grow: 1;
-    `,
     toggleButton: css`
       margin-left: ${theme.spacing(0.5)};
     `,
diff --git a/public/app/plugins/datasource/opentsdb/components/RateSection.tsx b/public/app/plugins/datasource/opentsdb/components/RateSection.tsx
index 868969b39b3..e2f9e221eeb 100644
--- a/public/app/plugins/datasource/opentsdb/components/RateSection.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/RateSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { InlineLabel, Input, InlineFormLabel, InlineSwitch } from '@grafana/ui';
+import { InlineLabel, Input, InlineFormLabel, InlineSwitch, Stack } from '@grafana/ui';
 
 import { OpenTsdbQuery } from '../types';
 
@@ -13,23 +13,22 @@ export interface RateSectionProps {
 
 export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSectionProps) {
   return (
-    <div className="gf-form-inline" data-testid={testIds.section}>
-      <div className="gf-form">
-        <InlineFormLabel className="query-keyword" width={8}>
-          Rate
-        </InlineFormLabel>
-        <InlineSwitch
-          data-testid={testIds.shouldComputeRate}
-          value={query.shouldComputeRate ?? false}
-          onChange={() => {
-            const shouldComputeRate = query.shouldComputeRate ?? false;
-            onChange({ ...query, shouldComputeRate: !shouldComputeRate });
-            onRunQuery();
-          }}
-        />
-      </div>
+    <Stack gap={0} data-testid={testIds.section}>
+      <InlineFormLabel className="query-keyword" width={8}>
+        Rate
+      </InlineFormLabel>
+      <InlineSwitch
+        data-testid={testIds.shouldComputeRate}
+        value={query.shouldComputeRate ?? false}
+        onChange={() => {
+          const shouldComputeRate = query.shouldComputeRate ?? false;
+          onChange({ ...query, shouldComputeRate: !shouldComputeRate });
+          onRunQuery();
+        }}
+      />
+
       {query.shouldComputeRate && (
-        <div className="gf-form">
+        <>
           <InlineFormLabel className="query-keyword" width={'auto'}>
             Counter
           </InlineFormLabel>
@@ -42,10 +41,10 @@ export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSe
               onRunQuery();
             }}
           />
-        </div>
+        </>
       )}
       {query.shouldComputeRate && query.isCounter && (
-        <div className="gf-form">
+        <Stack gap={0}>
           <InlineLabel width={'auto'} className="query-keyword">
             Counter max
           </InlineLabel>
@@ -72,10 +71,10 @@ export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSe
             }}
             onBlur={() => onRunQuery()}
           />
-        </div>
+        </Stack>
       )}
       {tsdbVersion > 2 && (
-        <div className="gf-form">
+        <>
           <InlineFormLabel className="query-keyword" width={'auto'}>
             Explicit tags
           </InlineFormLabel>
@@ -88,12 +87,12 @@ export function RateSection({ query, onChange, onRunQuery, tsdbVersion }: RateSe
               onRunQuery();
             }}
           />
-        </div>
+        </>
       )}
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow"></div>
-      </div>
-    </div>
+      <Stack gap={0} grow={1}>
+        <InlineLabel> </InlineLabel>
+      </Stack>
+    </Stack>
   );
 }
 
diff --git a/public/app/plugins/datasource/opentsdb/components/TagSection.tsx b/public/app/plugins/datasource/opentsdb/components/TagSection.tsx
index f292acaa374..6ffe4b0fc61 100644
--- a/public/app/plugins/datasource/opentsdb/components/TagSection.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/TagSection.tsx
@@ -3,7 +3,16 @@ import { has, size } from 'lodash';
 import React, { useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { Select, InlineFormLabel, Icon, clearButtonStyles, useStyles2, AsyncSelect } from '@grafana/ui';
+import {
+  Select,
+  InlineFormLabel,
+  Icon,
+  clearButtonStyles,
+  useStyles2,
+  AsyncSelect,
+  Stack,
+  InlineLabel,
+} from '@grafana/ui';
 
 import { OpenTsdbQuery } from '../types';
 
@@ -97,47 +106,47 @@ export function TagSection({
   const tagValueSearch = debounce((query: string) => suggestTagValues(query), 350);
 
   return (
-    <div className="gf-form-inline" data-testid={testIds.section}>
-      <div className="gf-form">
-        <InlineFormLabel
-          className="query-keyword"
-          width={8}
-          tooltip={tsdbVersion >= 2 ? <div>Please use filters, tags are deprecated in opentsdb 2.2</div> : undefined}
-        >
-          Tags
-        </InlineFormLabel>
-        {query.tags &&
-          Object.keys(query.tags).map((tagKey: string | number, idx: number) => {
-            const tagValue = query.tags[tagKey];
-            return (
-              <InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
-                {tagKey}={tagValue}
-                <button type="button" className={buttonStyles} onClick={() => editTag(tagKey, tagValue)}>
-                  <Icon name={'pen'} />
-                </button>
-                <button
-                  type="button"
-                  className={buttonStyles}
-                  onClick={() => removeTag(tagKey)}
-                  data-testid={testIds.remove}
-                >
-                  <Icon name={'times'} />
-                </button>
-              </InlineFormLabel>
-            );
-          })}
-        {!addTagMode && (
-          <button className="gf-form-label" type="button" onClick={changeAddTagMode} aria-label="Add tag">
+    <Stack gap={0} data-testid={testIds.section}>
+      <InlineFormLabel
+        className="query-keyword"
+        width={8}
+        tooltip={tsdbVersion >= 2 ? <div>Please use filters, tags are deprecated in opentsdb 2.2</div> : undefined}
+      >
+        Tags
+      </InlineFormLabel>
+      {query.tags &&
+        Object.keys(query.tags).map((tagKey: string | number, idx: number) => {
+          const tagValue = query.tags[tagKey];
+          return (
+            <InlineFormLabel key={idx} width="auto" data-testid={testIds.list + idx}>
+              {tagKey}={tagValue}
+              <button type="button" className={buttonStyles} onClick={() => editTag(tagKey, tagValue)}>
+                <Icon name={'pen'} />
+              </button>
+              <button
+                type="button"
+                className={buttonStyles}
+                onClick={() => removeTag(tagKey)}
+                data-testid={testIds.remove}
+              >
+                <Icon name={'times'} />
+              </button>
+            </InlineFormLabel>
+          );
+        })}
+      {!addTagMode && (
+        <InlineFormLabel width={2}>
+          <button type="button" className={buttonStyles} onClick={changeAddTagMode} aria-label="Add tag">
             <Icon name={'plus'} />
           </button>
-        )}
-      </div>
+        </InlineFormLabel>
+      )}
+
       {addTagMode && (
-        <div className="gf-form-inline">
-          <div className="gf-form">
+        <Stack gap={0.5} alignItems="center">
+          <Stack gap={0}>
             <Select
               inputId="opentsdb-suggested-tagk-select"
-              className="gf-form-input"
               value={curTagKey ? toOption('' + curTagKey) : undefined}
               placeholder="key"
               allowCustomValue
@@ -156,12 +165,11 @@ export function TagSection({
                 }
               }}
             />
-          </div>
+          </Stack>
 
-          <div className="gf-form">
+          <Stack gap={0}>
             <AsyncSelect
               inputId="opentsdb-suggested-tagv-select"
-              className="gf-form-input"
               value={curTagValue ? toOption(curTagValue) : undefined}
               placeholder="value"
               allowCustomValue
@@ -173,30 +181,30 @@ export function TagSection({
                 }
               }}
             />
-          </div>
+          </Stack>
 
-          <div className="gf-form">
+          <Stack gap={0}>
             {errors && (
-              <div className="gf-form-label" title={errors} data-testid={testIds.error}>
+              <InlineLabel title={errors} data-testid={testIds.error}>
                 <Icon name={'exclamation-triangle'} color={'rgb(229, 189, 28)'} />
-              </div>
+              </InlineLabel>
             )}
 
-            <div className="gf-form-label">
+            <InlineFormLabel width={5.5}>
               <button type="button" className={buttonStyles} onClick={addTag}>
                 add tag
               </button>
               <button type="button" className={buttonStyles} onClick={changeAddTagMode}>
                 <Icon name={'times'} />
               </button>
-            </div>
-          </div>
-        </div>
+            </InlineFormLabel>
+          </Stack>
+        </Stack>
       )}
-      <div className="gf-form gf-form--grow">
-        <div className="gf-form-label gf-form-label--grow"></div>
-      </div>
-    </div>
+      <Stack gap={0} grow={1}>
+        <InlineLabel> </InlineLabel>
+      </Stack>
+    </Stack>
   );
 }