From 7f89251dc931d8bd9d7fe2cbad291ebe08271b6d Mon Sep 17 00:00:00 2001
From: Daniel Benjamin <benjamindaniel706@gmail.com>
Date: Fri, 13 Oct 2023 18:55:37 +0100
Subject: [PATCH] chore: Remove gh-form and LegacyForms from InfluxFluxConfig
 (#76495)

* chore: replace SecretFormField with SecretInput

* chore: Remove gh-form and LegacyForms from InfluxFluxConfig
---
 .../editor/config/InfluxFluxConfig.tsx        | 97 ++++++++-----------
 1 file changed, 42 insertions(+), 55 deletions(-)

diff --git a/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx
index 7aad0b0aed5..dd28a7c73b3 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config/InfluxFluxConfig.tsx
@@ -7,11 +7,11 @@ import {
   onUpdateDatasourceSecureJsonDataOption,
   updateDatasourcePluginResetOption,
 } from '@grafana/data';
-import { InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { InlineField, InlineFieldRow, Input, SecretInput } from '@grafana/ui';
 
 import { InfluxOptions, InfluxSecureJsonData } from '../../../types';
 
-const { Input, SecretFormField } = LegacyForms;
+const WIDTH_SHORT = 20;
 
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>;
 
@@ -23,68 +23,55 @@ export const InfluxFluxConfig = (props: Props) => {
 
   return (
     <>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel htmlFor={`${htmlPrefix}-org`} className="width-10">
-            Organization
-          </InlineFormLabel>
-          <div className="width-10">
-            <Input
-              id={`${htmlPrefix}-org`}
-              className="width-20"
-              value={jsonData.organization || ''}
-              onChange={onUpdateDatasourceJsonDataOption(props, 'organization')}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <SecretFormField
+      <InlineFieldRow>
+        <InlineField labelWidth={WIDTH_SHORT} label="Organization" htmlFor={`${htmlPrefix}-org`}>
+          <Input
+            id={`${htmlPrefix}-org`}
+            className="width-20"
+            value={jsonData.organization || ''}
+            onChange={onUpdateDatasourceJsonDataOption(props, 'organization')}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField labelWidth={WIDTH_SHORT} label="Token">
+          <SecretInput
             isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
             value={secureJsonData?.token || ''}
             label="Token"
             aria-label="Token"
-            labelWidth={10}
-            inputWidth={20}
+            className="width-20"
             onReset={() => updateDatasourcePluginResetOption(props, 'token')}
             onChange={onUpdateDatasourceSecureJsonDataOption(props, 'token')}
           />
-        </div>
-      </div>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel className="width-10">Default Bucket</InlineFormLabel>
-          <div className="width-10">
-            <Input
-              className="width-20"
-              placeholder="default bucket"
-              value={jsonData.defaultBucket || ''}
-              onChange={onUpdateDatasourceJsonDataOption(props, 'defaultBucket')}
-            />
-          </div>
-        </div>
-      </div>
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField labelWidth={WIDTH_SHORT} label="Default Bucket">
+          <Input
+            className="width-20"
+            placeholder="default bucket"
+            value={jsonData.defaultBucket || ''}
+            onChange={onUpdateDatasourceJsonDataOption(props, 'defaultBucket')}
+          />
+        </InlineField>
+      </InlineFieldRow>
 
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel
-            className="width-10"
-            tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
+      <InlineFieldRow>
+        <InlineField
+          labelWidth={WIDTH_SHORT}
+          label="Min time interval"
+          tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example 1m if your data is written every minute."
-          >
-            Min time interval
-          </InlineFormLabel>
-          <div className="width-10">
-            <Input
-              className="width-20"
-              placeholder="10s"
-              value={jsonData.timeInterval || ''}
-              onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
-            />
-          </div>
-        </div>
-      </div>
+        >
+          <Input
+            className="width-20"
+            placeholder="10s"
+            value={jsonData.timeInterval || ''}
+            onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
+          />
+        </InlineField>
+      </InlineFieldRow>
     </>
   );
 };