Chore: Remove gf-form from datasource/loki and datasource/cloud-monitoring (#80117)

* Chore: Remove gf-form from datasource/loki

* remove query field

* update betterer

.betterer.results

@@ -5231,10 +5231,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "12"],
       [0, 0, 0, "Styles should be written using objects.", "13"]
     ],
-    "public/app/plugins/datasource/loki/components/LokiOptionFields.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
@@ -6843,9 +6839,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor/ConfigEditor.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
@@ -6935,14 +6928,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
-    "public/app/plugins/datasource/loki/components/LokiOptionFields.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/plugins/datasource/loki/components/LokiQueryField.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],

public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export const AnnotationsHelp = () => {
   return (
-    <div className="gf-form grafana-info-box alert-info">
+    <div className="grafana-info-box alert-info">
       <div>
         <h5>Annotation Query Format</h5>
         <p>

public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx

@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
 import { EditorField, EditorRow } from '@grafana/experimental';
-import { Input } from '@grafana/ui';
+import { Input, Stack } from '@grafana/ui';
 
 // Types
 import { getNormalizedLokiQuery } from '../queryUtils';
@@ -49,8 +49,8 @@ export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEdito
     queryType: annotation.queryType,
   };
   return (
-    <>
-      <div className="gf-form-group">
+    <Stack gap={5} direction="column">
+      <Stack gap={0} direction="column">
         <LokiQueryField
           datasource={props.datasource}
           query={queryWithRefId}
@@ -67,8 +67,7 @@ export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEdito
             />
           }
         />
-      </div>
-
+      </Stack>
       <EditorRow>
         <EditorField
           label="Title"
@@ -120,6 +119,6 @@ export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEdito
           />
         </EditorField>
       </EditorRow>
-    </>
+    </Stack>
   );
 });

public/app/plugins/datasource/loki/components/LokiOptionFields.tsx

@@ -1,12 +1,11 @@
 // Libraries
-import { css, cx } from '@emotion/css';
 import { map } from 'lodash';
 import React, { memo } from 'react';
 
 // Types
 import { SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { InlineFormLabel, RadioButtonGroup, InlineField, Input, Select } from '@grafana/ui';
+import { InlineFormLabel, RadioButtonGroup, InlineField, Input, Select, Stack } from '@grafana/ui';
 
 import { getLokiQueryType } from '../queryUtils';
 import { LokiQuery, LokiQueryType } from '../types';
@@ -82,18 +81,9 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
   }
 
   return (
-    <div aria-label="Loki extra field" className="gf-form-inline">
+    <Stack alignItems="flex-start" gap={0.5} aria-label="Loki extra field">
       {/*Query type field*/}
-      <div
-        data-testid="queryTypeField"
-        className={cx(
-          'gf-form explore-input-margin',
-          css`
-            flex-wrap: nowrap;
-          `
-        )}
-        aria-label="Query type field"
-      >
+      <Stack wrap="nowrap" gap={0} data-testid="queryTypeField" aria-label="Query type field">
         <InlineFormLabel width="auto">Query type</InlineFormLabel>
 
         <RadioButtonGroup
@@ -106,18 +96,9 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
             }
           }}
         />
-      </div>
+      </Stack>
       {/*Line limit field*/}
-      <div
-        data-testid="lineLimitField"
-        className={cx(
-          'gf-form',
-          css`
-            flex-wrap: nowrap;
-          `
-        )}
-        aria-label="Line limit field"
-      >
+      <Stack wrap="nowrap" gap={0} data-testid="lineLimitField" aria-label="Line limit field">
         <InlineField label="Line limit" tooltip={'Upper limit for number of log lines returned by query.'}>
           <Input
             className="width-4"
@@ -148,8 +129,8 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
             aria-label="Select resolution"
           />
         </InlineField>
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 }