From 55d17c7fcb273bafd13b5cc5a1df77b3acc13026 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:51:54 +0100
Subject: [PATCH] Chore: Remove Form usage from alerting config components
 (#81681)

* Chore: Replace InputControl in BaseSettings

* Chore: Replace InputControl and FormAPI in OptionElement.tsx

* Update ConfigEditor.tsx
---
 .../alerting/components/BasicSettings.tsx     |   5 +-
 .../alerting/components/OptionElement.tsx     |   7 +-
 .../unified/components/admin/ConfigEditor.tsx | 141 +++++++++---------
 3 files changed, 78 insertions(+), 75 deletions(-)

diff --git a/public/app/features/alerting/components/BasicSettings.tsx b/public/app/features/alerting/components/BasicSettings.tsx
index 6705da037ef..a739d7ce401 100644
--- a/public/app/features/alerting/components/BasicSettings.tsx
+++ b/public/app/features/alerting/components/BasicSettings.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { Controller } from 'react-hook-form';
 
 import { SelectableValue } from '@grafana/data';
-import { Field, Input, InputControl, Select } from '@grafana/ui';
+import { Field, Input, Select } from '@grafana/ui';
 
 import { NotificationChannelSecureFields, NotificationChannelType } from '../../../types';
 
@@ -31,7 +32,7 @@ export const BasicSettings = ({
         <Input {...register('name', { required: 'Name is required' })} />
       </Field>
       <Field label="Type">
-        <InputControl
+        <Controller
           name="type"
           render={({ field: { ref, ...field } }) => <Select {...field} options={channels} />}
           control={control}
diff --git a/public/app/features/alerting/components/OptionElement.tsx b/public/app/features/alerting/components/OptionElement.tsx
index bc43c8dee85..aa0581e7f32 100644
--- a/public/app/features/alerting/components/OptionElement.tsx
+++ b/public/app/features/alerting/components/OptionElement.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { Controller, UseFormReturn } from 'react-hook-form';
 
-import { FormAPI, Input, InputControl, Select, TextArea } from '@grafana/ui';
+import { Input, Select, TextArea } from '@grafana/ui';
 
 import { NotificationChannelOption } from '../../../types';
 
-interface Props extends Pick<FormAPI<any>, 'register' | 'control'> {
+interface Props extends Pick<UseFormReturn<any>, 'register' | 'control'> {
   option: NotificationChannelOption;
   invalid?: boolean;
 }
@@ -27,7 +28,7 @@ export const OptionElement = ({ control, option, register, invalid }: Props) =>
 
     case 'select':
       return (
-        <InputControl
+        <Controller
           control={control}
           name={`${modelValue}`}
           render={({ field: { ref, ...field } }) => (
diff --git a/public/app/features/alerting/unified/components/admin/ConfigEditor.tsx b/public/app/features/alerting/unified/components/admin/ConfigEditor.tsx
index aaf9c69a50d..8ea38ad84cd 100644
--- a/public/app/features/alerting/unified/components/admin/ConfigEditor.tsx
+++ b/public/app/features/alerting/unified/components/admin/ConfigEditor.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { useForm } from 'react-hook-form';
 
-import { Button, CodeEditor, ConfirmModal, Field, Form, HorizontalGroup } from '@grafana/ui';
+import { Button, CodeEditor, ConfirmModal, Field, Stack } from '@grafana/ui';
 
 import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
 
@@ -29,77 +30,77 @@ export const ConfigEditor = ({
   onConfirmReset,
   onDismiss,
 }: ConfigEditorProps) => {
+  const {
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    register,
+  } = useForm({ defaultValues });
+
+  register('configJSON', {
+    required: { value: true, message: 'Required' },
+    validate: (value: string) => {
+      try {
+        JSON.parse(value);
+        return true;
+      } catch (e) {
+        return e instanceof Error ? e.message : 'JSON is invalid';
+      }
+    },
+  });
   return (
-    <Form defaultValues={defaultValues} onSubmit={onSubmit} key={defaultValues.configJSON}>
-      {({ errors, setValue, register }) => {
-        register('configJSON', {
-          required: { value: true, message: 'Required' },
-          validate: (value: string) => {
-            try {
-              JSON.parse(value);
-              return true;
-            } catch (e) {
-              return e instanceof Error ? e.message : 'JSON is invalid';
-            }
-          },
-        });
+    <form onSubmit={handleSubmit(onSubmit)} key={defaultValues.configJSON}>
+      <Field
+        disabled={loading}
+        label="Configuration"
+        invalid={!!errors.configJSON}
+        error={errors.configJSON?.message}
+        data-testid={readOnly ? 'readonly-config' : 'config'}
+      >
+        <CodeEditor
+          language="json"
+          width="100%"
+          height={500}
+          showLineNumbers={true}
+          value={defaultValues.configJSON}
+          showMiniMap={false}
+          onSave={(value) => {
+            setValue('configJSON', value);
+          }}
+          onBlur={(value) => {
+            setValue('configJSON', value);
+          }}
+          readOnly={readOnly}
+        />
+      </Field>
 
-        return (
-          <>
-            <Field
-              disabled={loading}
-              label="Configuration"
-              invalid={!!errors.configJSON}
-              error={errors.configJSON?.message}
-              data-testid={readOnly ? 'readonly-config' : 'config'}
-            >
-              <CodeEditor
-                language="json"
-                width="100%"
-                height={500}
-                showLineNumbers={true}
-                value={defaultValues.configJSON}
-                showMiniMap={false}
-                onSave={(value) => {
-                  setValue('configJSON', value);
-                }}
-                onBlur={(value) => {
-                  setValue('configJSON', value);
-                }}
-                readOnly={readOnly}
-              />
-            </Field>
+      {!readOnly && (
+        <Stack gap={1}>
+          <Button type="submit" variant="primary" disabled={loading}>
+            Save configuration
+          </Button>
+          {onReset && (
+            <Button type="button" disabled={loading} variant="destructive" onClick={onReset}>
+              Reset configuration
+            </Button>
+          )}
+        </Stack>
+      )}
 
-            {!readOnly && (
-              <HorizontalGroup>
-                <Button type="submit" variant="primary" disabled={loading}>
-                  Save configuration
-                </Button>
-                {onReset && (
-                  <Button type="button" disabled={loading} variant="destructive" onClick={onReset}>
-                    Reset configuration
-                  </Button>
-                )}
-              </HorizontalGroup>
-            )}
-
-            {Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
-              <ConfirmModal
-                isOpen={true}
-                title="Reset Alertmanager configuration"
-                body={`Are you sure you want to reset configuration ${
-                  alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME
-                    ? 'for the Grafana Alertmanager'
-                    : `for "${alertManagerSourceName}"`
-                }? Contact points and notification policies will be reset to their defaults.`}
-                confirmText="Yes, reset configuration"
-                onConfirm={onConfirmReset}
-                onDismiss={onDismiss}
-              />
-            )}
-          </>
-        );
-      }}
-    </Form>
+      {Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
+        <ConfirmModal
+          isOpen={true}
+          title="Reset Alertmanager configuration"
+          body={`Are you sure you want to reset configuration ${
+            alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME
+              ? 'for the Grafana Alertmanager'
+              : `for "${alertManagerSourceName}"`
+          }? Contact points and notification policies will be reset to their defaults.`}
+          confirmText="Yes, reset configuration"
+          onConfirm={onConfirmReset}
+          onDismiss={onDismiss}
+        />
+      )}
+    </form>
   );
 };