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

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}

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 } }) => (

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}>
+    <form onSubmit={handleSubmit(onSubmit)} key={defaultValues.configJSON}>
-      {({ errors, setValue, register }) => {
+      <Field
-        register('configJSON', {
+        disabled={loading}
-          required: { value: true, message: 'Required' },
+        label="Configuration"
-          validate: (value: string) => {
+        invalid={!!errors.configJSON}
-            try {
+        error={errors.configJSON?.message}
-              JSON.parse(value);
+        data-testid={readOnly ? 'readonly-config' : 'config'}
-              return true;
+      >
-            } catch (e) {
+        <CodeEditor
-              return e instanceof Error ? e.message : 'JSON is invalid';
+          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 (
+      {!readOnly && (
-          <>
+        <Stack gap={1}>
-            <Field
+          <Button type="submit" variant="primary" disabled={loading}>
-              disabled={loading}
+            Save configuration
-              label="Configuration"
+          </Button>
-              invalid={!!errors.configJSON}
+          {onReset && (
-              error={errors.configJSON?.message}
+            <Button type="button" disabled={loading} variant="destructive" onClick={onReset}>
-              data-testid={readOnly ? 'readonly-config' : 'config'}
+              Reset configuration
-            >
+            </Button>
-              <CodeEditor
+          )}
-                language="json"
+        </Stack>
-                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 && (
+      {Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
-              <HorizontalGroup>
+        <ConfirmModal
-                <Button type="submit" variant="primary" disabled={loading}>
+          isOpen={true}
-                  Save configuration
+          title="Reset Alertmanager configuration"
-                </Button>
+          body={`Are you sure you want to reset configuration ${
-                {onReset && (
+            alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME
-                  <Button type="button" disabled={loading} variant="destructive" onClick={onReset}>
+              ? 'for the Grafana Alertmanager'
-                    Reset configuration
+              : `for "${alertManagerSourceName}"`
-                  </Button>
+          }? Contact points and notification policies will be reset to their defaults.`}
-                )}
+          confirmText="Yes, reset configuration"
-              </HorizontalGroup>
+          onConfirm={onConfirmReset}
-            )}
+          onDismiss={onDismiss}
-
+        />
-            {Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
+      )}
-              <ConfirmModal
+    </form>
-                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>
   );
 };