chore: Remove gh-form and LegacyForms from InfluxInfluxQLConfig (#76497)

* chore: Remove gh-form and LegacyForms from InfluxInfluxQLConfig

* chore: Refactor InfluxInfluxQLConfig component UI to use Field

public/app/plugins/datasource/influxdb/components/editor/config/InfluxInfluxQLConfig.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
 import React from 'react';
 
@@ -10,22 +11,25 @@ import {
   SelectableValue,
   updateDatasourcePluginResetOption,
 } from '@grafana/data';
-import { Alert, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data/src/themes';
+import { Alert, Field, InlineLabel, Input, SecretInput, Select, useStyles2 } from '@grafana/ui';
 
 import { InfluxOptions, InfluxSecureJsonData } from '../../../types';
 
-const { Input, SecretFormField } = LegacyForms;
-
 const httpModes: SelectableValue[] = [
   { label: 'GET', value: 'GET' },
   { label: 'POST', value: 'POST' },
 ];
 
+const WIDTH_SHORT = 20;
+
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions, InfluxSecureJsonData>;
 
 export const InfluxInfluxQLConfig = (props: Props) => {
   const { options, onOptionsChange } = props;
   const { database, jsonData, secureJsonData, secureJsonFields } = options;
+  const styles = useStyles2(getStyles);
+
   const htmlPrefix = uniqueId('influxdb-influxql-config');
 
   return (
@@ -41,12 +45,13 @@ export const InfluxInfluxQLConfig = (props: Props) => {
           To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
         </p>
       </Alert>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel htmlFor={`${htmlPrefix}-db`} className="width-10">
-            Database
-          </InlineFormLabel>
-          <div className="width-20">
+
+      <Field
+        horizontal
+        label={<InlineLabel width={WIDTH_SHORT}>Database</InlineLabel>}
+        className={styles.horizontalField}
+        htmlFor={`${htmlPrefix}-db`}
+      >
         <Input
           id={`${htmlPrefix}-db`}
           className="width-20"
@@ -57,54 +62,55 @@ export const InfluxInfluxQLConfig = (props: Props) => {
               database: '',
               jsonData: {
                 ...jsonData,
-                    dbName: event.target.value,
+                dbName: event.currentTarget.value,
               },
             });
           }}
         />
-          </div>
-        </div>
-      </div>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel htmlFor={`${htmlPrefix}-user`} className="width-10">
-            User
-          </InlineFormLabel>
-          <div className="width-10">
+      </Field>
+      <Field
+        horizontal
+        label={<InlineLabel width={WIDTH_SHORT}>User</InlineLabel>}
+        className={styles.horizontalField}
+        htmlFor={`${htmlPrefix}-user`}
+      >
         <Input
           id={`${htmlPrefix}-user`}
           className="width-20"
           value={options.user || ''}
           onChange={onUpdateDatasourceOption(props, 'user')}
         />
-          </div>
-        </div>
-      </div>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <SecretFormField
+      </Field>
+      <Field
+        horizontal
+        label={<InlineLabel width={WIDTH_SHORT}>Password</InlineLabel>}
+        className={styles.horizontalField}
+      >
+        <SecretInput
           isConfigured={Boolean(secureJsonFields && secureJsonFields.password)}
           value={secureJsonData?.password || ''}
           label="Password"
           aria-label="Password"
-            labelWidth={10}
-            inputWidth={20}
+          className="width-20"
           onReset={() => updateDatasourcePluginResetOption(props, 'password')}
           onChange={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
         />
-        </div>
-      </div>
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel
-            htmlFor={`${htmlPrefix}-http-method`}
-            className="width-10"
+      </Field>
+      <Field
+        horizontal
+        label={
+          <InlineLabel
+            width={WIDTH_SHORT}
             tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
           method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
           will restrict you and return an error if the query is too large."
           >
             HTTP Method
-          </InlineFormLabel>
+          </InlineLabel>
+        }
+        htmlFor={`${htmlPrefix}-http-method`}
+        className={styles.horizontalField}
+      >
         <Select
           inputId={`${htmlPrefix}-http-method`}
           className="width-20"
@@ -113,28 +119,34 @@ export const InfluxInfluxQLConfig = (props: Props) => {
           defaultValue={options.jsonData.httpMode}
           onChange={onUpdateDatasourceJsonDataOptionSelect(props, 'httpMode')}
         />
-        </div>
-      </div>
+      </Field>
 
-      <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,
-				for example 1m if your data is written every minute."
+      <Field
+        horizontal
+        label={
+          <InlineLabel
+            width={WIDTH_SHORT}
+            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">
+          </InlineLabel>
+        }
+        className={styles.horizontalField}
+      >
         <Input
           className="width-20"
           placeholder="10s"
           value={options.jsonData.timeInterval || ''}
           onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
         />
-          </div>
-        </div>
-      </div>
+      </Field>
     </>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  horizontalField: css({
+    justifyContent: 'initial',
+    margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`,
+  }),
+});