From 2442532f57dfe8dd6b0afbcd1d10e0cc35833f3a Mon Sep 17 00:00:00 2001
From: Shabeeb Khalid <convey2shabeeb@gmail.com>
Date: Thu, 12 Oct 2023 21:03:21 +0300
Subject: [PATCH] chore(76107): Remove legacy form from InfluxConfigEditor
 (#76382)

Remove legacy form from InfluxConfigEditor

With this commit, legacy form components are remvoed from influxdb
config eidtor page. Form is now using FieldSet instead.
---
 .../components/editor/config/ConfigEditor.tsx | 81 +++++++++----------
 1 file changed, 36 insertions(+), 45 deletions(-)

diff --git a/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx
index 87970d4db16..6944954783b 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx
@@ -8,7 +8,7 @@ import {
   updateDatasourcePluginJsonDataOption,
   updateDatasourcePluginResetOption,
 } from '@grafana/data/src';
-import { Alert, DataSourceHttpSettings, InlineField, LegacyForms, Select } from '@grafana/ui/src';
+import { Alert, DataSourceHttpSettings, InlineField, Select, Field, Input, FieldSet } from '@grafana/ui/src';
 import { config } from 'app/core/config';
 
 import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants';
@@ -18,8 +18,6 @@ import { InfluxFluxConfig } from './InfluxFluxConfig';
 import { InfluxInfluxQLConfig } from './InfluxInfluxQLConfig';
 import { InfluxSqlConfig } from './InfluxSQLConfig';
 
-const { Input } = LegacyForms;
-
 const versions: Array<SelectableValue<InfluxVersion>> = [
   {
     label: 'InfluxQL',
@@ -132,21 +130,19 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
     return (
       <>
-        <h3 className="page-heading">Query Language</h3>
-        <div className="gf-form-group">
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <Select
-                aria-label="Query language"
-                className="width-30"
-                value={this.getQueryLanguageDropdownValue(options.jsonData.version)}
-                options={config.featureToggles.influxdbSqlSupport ? versionsWithSQL : versions}
-                defaultValue={versions[0]}
-                onChange={this.onVersionChanged}
-              />
-            </div>
-          </div>
-        </div>
+        <FieldSet>
+          <h3 className="page-heading">Query language</h3>
+          <Field>
+            <Select
+              aria-label="Query language"
+              className="width-30"
+              value={this.getQueryLanguageDropdownValue(options.jsonData.version)}
+              options={config.featureToggles.influxdbSqlSupport ? versionsWithSQL : versions}
+              defaultValue={versions[0]}
+              onChange={this.onVersionChanged}
+            />
+          </Field>
+        </FieldSet>
 
         {options.jsonData.version !== InfluxVersion.InfluxQL && (
           <Alert severity="info" title={this.versionNotice[options.jsonData.version!]}>
@@ -172,34 +168,29 @@ export class ConfigEditor extends PureComponent<Props, State> {
           onChange={onOptionsChange}
           secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
         />
-
-        <div className="gf-form-group">
-          <div>
-            <h3 className="page-heading">InfluxDB Details</h3>
-          </div>
+        <FieldSet>
+          <h3 className="page-heading">InfluxDB Details</h3>
           {this.renderJsonDataOptions()}
-          <div className="gf-form-inline">
-            <InlineField
-              labelWidth={20}
-              label="Max series"
-              tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
-            >
-              <Input
-                placeholder="1000"
-                type="number"
-                className="width-20"
-                value={this.state.maxSeries}
-                onChange={(event) => {
-                  // We duplicate this state so that we allow to write freely inside the input. We don't have
-                  // any influence over saving so this seems to be only way to do this.
-                  this.setState({ maxSeries: event.currentTarget.value });
-                  const val = parseInt(event.currentTarget.value, 10);
-                  updateDatasourcePluginJsonDataOption(this.props, 'maxSeries', Number.isFinite(val) ? val : undefined);
-                }}
-              />
-            </InlineField>
-          </div>
-        </div>
+          <InlineField
+            labelWidth={20}
+            label="Max series"
+            tooltip="Limit the number of series/tables that Grafana will process. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000."
+          >
+            <Input
+              placeholder="1000"
+              type="number"
+              className="width-20"
+              value={this.state.maxSeries}
+              onChange={(event: { currentTarget: { value: string } }) => {
+                // We duplicate this state so that we allow to write freely inside the input. We don't have
+                // any influence over saving so this seems to be only way to do this.
+                this.setState({ maxSeries: event.currentTarget.value });
+                const val = parseInt(event.currentTarget.value, 10);
+                updateDatasourcePluginJsonDataOption(this.props, 'maxSeries', Number.isFinite(val) ? val : undefined);
+              }}
+            />
+          </InlineField>
+        </FieldSet>
       </>
     );
   }