From 335b73d9ae8f27c65bedea1c2d91cdcaf6240349 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Fri, 13 Oct 2023 19:58:03 +0200
Subject: [PATCH] Chore: remove gf-forms and LegacyForms from Graphite
 ConfigEditor (#76038)

* Chore: remove gf-forms and LegacyForms from Graphite ConfigEditor

* Use Field instead of InlineField

* Remove unused imports
---
 .../graphite/configuration/ConfigEditor.tsx   | 97 ++++++++-----------
 1 file changed, 41 insertions(+), 56 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
index aef4ad9a9239..7cfb530ab0b5 100644
--- a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
@@ -6,7 +6,7 @@ import {
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceJsonDataOptionChecked,
 } from '@grafana/data';
-import { Alert, DataSourceHttpSettings, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
+import { Alert, DataSourceHttpSettings, Field, FieldSet, Select, Switch } from '@grafana/ui';
 import { config } from 'app/core/config';
 import store from 'app/core/store';
 
@@ -16,7 +16,6 @@ import { DEFAULT_GRAPHITE_VERSION, GRAPHITE_VERSIONS } from '../versions';
 import { MappingsConfiguration } from './MappingsConfiguration';
 import { fromString, toString } from './parseLokiLabelMappings';
 
-const { Switch } = LegacyForms;
 export const SHOW_MAPPINGS_HELP_KEY = 'grafana.datasources.graphite.config.showMappingsHelp';
 
 const graphiteVersions = GRAPHITE_VERSIONS.map((version) => ({ label: `${version}.x`, value: version }));
@@ -40,20 +39,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
     };
   }
 
-  renderTypeHelp = () => {
-    return (
-      <p>
-        There are different types of Graphite compatible backends. Here you can specify the type you are using. If you
-        are using{' '}
-        <a href="https://github.com/grafana/metrictank" className="pointer" target="_blank" rel="noreferrer">
-          Metrictank
-        </a>{' '}
-        then select that here. This will enable Metrictank specific features like query processing meta data. Metrictank
-        is a multi-tenant timeseries engine for Graphite and friends.
-      </p>
-    );
-  };
-
   componentDidMount() {
     updateDatasourcePluginJsonDataOption(this.props, 'graphiteVersion', this.currentGraphiteVersion);
   }
@@ -77,48 +62,48 @@ export class ConfigEditor extends PureComponent<Props, State> {
           onChange={onOptionsChange}
           secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
         />
-        <h3 className="page-heading">Graphite details</h3>
-        <div className="gf-form-group">
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <InlineFormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
-                Version
-              </InlineFormLabel>
-              <Select
-                aria-label="Graphite version"
-                value={currentVersion}
-                options={graphiteVersions}
-                className="width-8"
-                onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
-              />
-            </div>
-          </div>
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <InlineFormLabel tooltip={this.renderTypeHelp}>Type</InlineFormLabel>
-              <Select
-                aria-label="Graphite backend type"
-                options={graphiteTypes}
-                value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
-                className="width-8"
-                onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
-              />
-            </div>
-          </div>
+        <FieldSet>
+          <legend className="page-heading">Graphite details</legend>
+          <Field
+            label="Version"
+            description="This option controls what functions are available in the Graphite query editor."
+          >
+            <Select
+              id="graphite-version"
+              aria-label="Graphite version"
+              value={currentVersion}
+              options={graphiteVersions}
+              width={16}
+              onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
+            />
+          </Field>
+
+          <Field
+            label="Graphite backend type"
+            description="There are different types of Graphite compatible backends. Here you can specify the type you are using. For Metrictank, this will enable specific features, like query processing meta data. Metrictank
+        is a multi-tenant timeseries engine for Graphite and friends."
+          >
+            <Select
+              id="backend-type"
+              options={graphiteTypes}
+              value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
+              width={16}
+              onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
+            />
+          </Field>
           {options.jsonData.graphiteType === GraphiteType.Metrictank && (
-            <div className="gf-form-inline">
-              <div className="gf-form">
-                <Switch
-                  label="Rollup indicator"
-                  labelClass={'width-10'}
-                  tooltip="Shows up as an info icon in panel headers when data is aggregated"
-                  checked={!!options.jsonData.rollupIndicatorEnabled}
-                  onChange={onUpdateDatasourceJsonDataOptionChecked(this.props, 'rollupIndicatorEnabled')}
-                />
-              </div>
-            </div>
+            <Field
+              label="Rollup indicator"
+              description="Shows up as an info icon in panel headers when data is aggregated."
+            >
+              <Switch
+                id="rollup-indicator"
+                value={!!options.jsonData.rollupIndicatorEnabled}
+                onChange={onUpdateDatasourceJsonDataOptionChecked(this.props, 'rollupIndicatorEnabled')}
+              />
+            </Field>
           )}
-        </div>
+        </FieldSet>
         <MappingsConfiguration
           mappings={(options.jsonData.importConfiguration?.loki?.mappings || []).map(toString)}
           showHelp={this.state.showMappingsHelp}