From dc03798c34d1cdab0cdc9484c457fa5120a7c5c9 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Wed, 12 Jun 2024 10:13:13 +0100
Subject: [PATCH] Chore: Remove gf-forms from alertmanager and graphite
 datasources (#88933)

---
 .betterer.results                             | 14 ----
 .../datasource/alertmanager/ConfigEditor.tsx  | 73 +++++++++----------
 .../graphite/components/AnnotationsEditor.tsx | 16 ++--
 .../configuration/MappingsConfiguration.tsx   |  6 +-
 4 files changed, 44 insertions(+), 65 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index fda1df4c2d5..f1637bf05fe 100644
--- a/.betterer.results
+++ b/.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"]
     ],
diff --git a/public/app/plugins/datasource/alertmanager/ConfigEditor.tsx b/public/app/plugins/datasource/alertmanager/ConfigEditor.tsx
index f65cd16dd6b..923e44e1110 100644
--- a/public/app/plugins/datasource/alertmanager/ConfigEditor.tsx
+++ b/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,50 +47,45 @@ export const ConfigEditor = (props: Props) => {
   return (
     <>
       <h3 className="page-heading">Alertmanager</h3>
-      <div className="gf-form-group">
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineFormLabel width={13}>Implementation</InlineFormLabel>
-            <Select
-              width={40}
-              options={IMPL_OPTIONS}
-              value={options.jsonData.implementation || AlertManagerImplementation.mimir}
-              onChange={(value) =>
-                onOptionsChange({
-                  ...options,
-                  jsonData: {
-                    ...options.jsonData,
-                    implementation: value.value,
-                  },
+      <Box marginBottom={5}>
+        <InlineField label="Implementation" labelWidth={26}>
+          <Select
+            width={40}
+            options={IMPL_OPTIONS}
+            value={options.jsonData.implementation || AlertManagerImplementation.mimir}
+            onChange={(value) =>
+              onOptionsChange({
+                ...options,
+                jsonData: {
+                  ...options.jsonData,
+                  implementation: value.value,
+                },
+              })
+            }
+          />
+        </InlineField>
+        <InlineField
+          label="Receive Grafana Alerts"
+          tooltip="When enabled, Grafana-managed alerts are sent to this Alertmanager."
+          labelWidth={26}
+        >
+          <InlineSwitch
+            value={options.jsonData.handleGrafanaManagedAlerts ?? false}
+            onChange={(e) => {
+              onOptionsChange(
+                produce(options, (draft) => {
+                  draft.jsonData.handleGrafanaManagedAlerts = e.currentTarget.checked;
                 })
-              }
-            />
-          </div>
-        </div>
-        <div className="gf-form-inline">
-          <InlineField
-            label="Receive Grafana Alerts"
-            tooltip="When enabled, Grafana-managed alerts are sent to this Alertmanager."
-            labelWidth={26}
-          >
-            <InlineSwitch
-              value={options.jsonData.handleGrafanaManagedAlerts ?? false}
-              onChange={(e) => {
-                onOptionsChange(
-                  produce(options, (draft) => {
-                    draft.jsonData.handleGrafanaManagedAlerts = e.currentTarget.checked;
-                  })
-                );
-              }}
-            />
-          </InlineField>
-        </div>
+              );
+            }}
+          />
+        </InlineField>
         {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}
diff --git a/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx b/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx
index e2ab36f8cec..0eddf2e3e8e 100644
--- a/public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx
+++ b/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">
-      <div className="gf-form">
-        <InlineFormLabel width={12}>Graphite Query</InlineFormLabel>
+    <Box marginBottom={5}>
+      <InlineField label="Graphite Query" labelWidth={24} grow>
         <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">
-        <InlineFormLabel width={12}>Graphite events tags</InlineFormLabel>
+      <InlineField label="Graphite events tags" labelWidth={24}>
         <TagsInput id="tags-input" width={50} tags={tags} onChange={onTagsChange} placeholder="Example: event_tag" />
-      </div>
-    </div>
+      </InlineField>
+    </Box>
   );
 };
diff --git a/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx b/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx
index 8babee6d2a2..10de5f75ddd 100644
--- a/public/app/plugins/datasource/graphite/configuration/MappingsConfiguration.tsx
+++ b/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>
   );
 };