Loki: Remove legacy form classes from LokiQuerySettings (#76331)

* Remove legacy form from LokiQuerySettings

With this commit, legacy form components are remvoed from loki query
settings page. Form is now using InlineField instead.

* Fix the width of loki predefined ops input

* Fix the width of loki predefined ops input

* Fix type in loki query component input field

public/app/plugins/datasource/loki/configuration/QuerySettings.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 
 import { ConfigSubSection } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Badge, LegacyForms } from '@grafana/ui';
+import { Badge, InlineField, InlineFieldRow, Input } from '@grafana/ui';
 import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
-const { FormField } = LegacyForms;
-
 type Props = {
   maxLines: string;
   onMaxLinedChange: (value: string) => void;
@@ -27,64 +25,64 @@ export const QuerySettings = (props: Props) => {
         />
       }
     >
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <FormField
-            label="Maximum lines"
-            labelWidth={11}
-            inputWidth={20}
-            inputEl={
-              <input
-                type="number"
-                className="gf-form-input width-8 gf-form-input--has-help-icon"
-                value={maxLines}
-                onChange={(event) => onMaxLinedChange(event.currentTarget.value)}
-                spellCheck={false}
-                placeholder="1000"
-              />
-            }
+      <InlineField
+        label="Maximum lines"
+        htmlFor="loki_config_maxLines"
+        labelWidth={22}
+        tooltip={
+          <>
+            Loki queries must contain a limit of the maximum number of lines returned (default: 1000). Increase this
+            limit to have a bigger result set for ad-hoc analysis. Decrease this limit if your browser becomes sluggish
+            when displaying the log results.
+          </>
+        }
+      >
+        <Input
+          type="number"
+          id="loki_config_maxLines"
+          value={maxLines}
+          onChange={(event: React.FormEvent<HTMLInputElement>) => onMaxLinedChange(event.currentTarget.value)}
+          width={16}
+          placeholder="1000"
+          spellCheck={false}
+        />
+      </InlineField>
+
+      {config.featureToggles.lokiPredefinedOperations && (
+        <InlineFieldRow>
+          <InlineField
+            label="Predefined operations"
+            htmlFor="loki_config_predefinedOperations"
+            labelWidth={22}
             tooltip={
               <>
-                Loki queries must contain a limit of the maximum number of lines returned (default: 1000). Increase this
-                limit to have a bigger result set for ad-hoc analysis. Decrease this limit if your browser becomes
-                sluggish when displaying the log results.
+                {
+                  'Predefined operations are used as an initial state for your queries. They are useful, if you want to unpack, parse or format all log lines. Currently we support only log operations starting with |. For example: | unpack | line_format "{{.message}}".'
+                }
               </>
             }
-          />
-        </div>
-      </div>
-      {config.featureToggles.lokiPredefinedOperations && (
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <FormField
-              label="Predefined operations"
-              labelWidth={11}
-              inputEl={
-                <input
-                  type="string"
-                  className="gf-form-input width-20 gf-form-input--has-help-icon"
-                  value={predefinedOperations}
-                  onChange={(event) => onPredefinedOperationsChange(event.currentTarget.value)}
-                  spellCheck={false}
-                  placeholder="| unpack | line_format"
-                />
-              }
-              tooltip={
-                <div>
-                  {
-                    'Predefined operations are used as an initial state for your queries. They are useful, if you want to unpack, parse or format all log lines. Currently we support only log operations starting with |. For example: | unpack | line_format "{{.message}}".'
-                  }
-                </div>
+          >
+            <Input
+              type="string"
+              id="loki_config_predefinedOperations"
+              value={predefinedOperations}
+              onChange={(event: React.FormEvent<HTMLInputElement>) =>
+                onPredefinedOperationsChange(event.currentTarget.value)
               }
+              width={40}
+              placeholder="| unpack | line_format"
+              spellCheck={false}
             />
+          </InlineField>
+          <InlineField>
             <Badge
               text="Experimental"
               color="orange"
               icon="exclamation-triangle"
               tooltip="Predefined operations is an experimental feature that may change in the future."
             />
-          </div>
-        </div>
+          </InlineField>
+        </InlineFieldRow>
       )}
     </ConfigSubSection>
   );