Chore: Remove gf-forms from alertmanager and graphite datasources (#88933)

.betterer.results

@@ -7998,12 +7998,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/alertmanager/ConfigEditor.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"],
-      [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"]
     ],
@@ -8037,14 +8031,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/graphite/components/AnnotationsEditor.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/graphite/configuration/MappingsConfiguration.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/influxdb/components/editor/annotation/AnnotationEditor.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/alertmanager/ConfigEditor.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
-import { DataSourceHttpSettings, InlineField, InlineFormLabel, InlineSwitch, Select, Text } from '@grafana/ui';
+import { Box, DataSourceHttpSettings, InlineField, InlineSwitch, Select, Text } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from './types';
@@ -47,10 +47,8 @@ export const ConfigEditor = (props: Props) => {
   return (
     <>
       <h3 className="page-heading">Alertmanager</h3>
-      <div className="gf-form-group">
+      <Box marginBottom={5}>
-        <div className="gf-form-inline">
+        <InlineField label="Implementation" labelWidth={26}>
-          <div className="gf-form">
-            <InlineFormLabel width={13}>Implementation</InlineFormLabel>
           <Select
             width={40}
             options={IMPL_OPTIONS}
@@ -65,9 +63,7 @@ export const ConfigEditor = (props: Props) => {
               })
             }
           />
-          </div>
+        </InlineField>
-        </div>
-        <div className="gf-form-inline">
         <InlineField
           label="Receive Grafana Alerts"
           tooltip="When enabled, Grafana-managed alerts are sent to this Alertmanager."
@@ -84,13 +80,12 @@ export const ConfigEditor = (props: Props) => {
             }}
           />
         </InlineField>
-        </div>
         {options.jsonData.handleGrafanaManagedAlerts && (
           <Text variant="bodySmall" color="secondary">
             Make sure to enable the alert forwarding on the <Link to="/alerting/admin">settings page</Link>.
           </Text>
         )}
-      </div>
+      </Box>
       <DataSourceHttpSettings
         defaultUrl={''}
         dataSourceConfig={options}

public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { InlineFormLabel, Input, TagsInput } from '@grafana/ui';
+import { Box, InlineField, Input, TagsInput } from '@grafana/ui';
 
 import { GraphiteDatasource } from '../datasource';
 import { GraphiteQuery, GraphiteOptions } from '../types';
@@ -34,23 +34,21 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
   };
 
   return (
-    <div className="gf-form-group">
+    <Box marginBottom={5}>
-      <div className="gf-form">
+      <InlineField label="Graphite Query" labelWidth={24} grow>
-        <InlineFormLabel width={12}>Graphite Query</InlineFormLabel>
         <Input
           value={target}
           onChange={(e) => setTarget(e.currentTarget.value || '')}
           onBlur={() => updateValue('target', target)}
           placeholder="Example: statsd.application.counters.*.count"
         />
-      </div>
+      </InlineField>
 
       <h5 className="section-heading">Or</h5>
 
-      <div className="gf-form">
+      <InlineField label="Graphite events tags" labelWidth={24}>
-        <InlineFormLabel width={12}>Graphite events tags</InlineFormLabel>
         <TagsInput id="tags-input" width={50} tags={tags} onChange={onTagsChange} placeholder="Example: event_tag" />
-      </div>
+      </InlineField>
-    </div>
+    </Box>
   );
 };

public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useState } from 'react';
 
-import { Button, Icon, InlineField, InlineFieldRow, Input } from '@grafana/ui';
+import { Box, Button, Icon, InlineField, InlineFieldRow, Input } from '@grafana/ui';
 
 import MappingsHelp from './MappingsHelp';
 
@@ -27,7 +27,7 @@ export const MappingsConfiguration = (props: Props): JSX.Element => {
       )}
       {props.showHelp && <MappingsHelp onDismiss={props.onDismiss} />}
 
-      <div className="gf-form-group">
+      <Box marginBottom={5}>
         {mappings.map((mapping, i) => (
           <InlineFieldRow key={i}>
             <InlineField label={`Mapping (${i + 1})`}>
@@ -71,7 +71,7 @@ export const MappingsConfiguration = (props: Props): JSX.Element => {
         >
           Add label mapping
         </Button>
-      </div>
+      </Box>
     </div>
   );
 };