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,9 +30,13 @@ export const ConfigEditor = ({
   onConfirmReset,
   onDismiss,
 }: ConfigEditorProps) => {
-  return (
-    <Form defaultValues={defaultValues} onSubmit={onSubmit} key={defaultValues.configJSON}>
-      {({ errors, setValue, register }) => {
+  const {
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    register,
+  } = useForm({ defaultValues });
+
   register('configJSON', {
     required: { value: true, message: 'Required' },
     validate: (value: string) => {
@@ -43,9 +48,8 @@ export const ConfigEditor = ({
       }
     },
   });
-
   return (
-          <>
+    <form onSubmit={handleSubmit(onSubmit)} key={defaultValues.configJSON}>
       <Field
         disabled={loading}
         label="Configuration"
@@ -71,7 +75,7 @@ export const ConfigEditor = ({
       </Field>
 
       {!readOnly && (
-              <HorizontalGroup>
+        <Stack gap={1}>
           <Button type="submit" variant="primary" disabled={loading}>
             Save configuration
           </Button>
@@ -80,7 +84,7 @@ export const ConfigEditor = ({
               Reset configuration
             </Button>
           )}
-              </HorizontalGroup>
+        </Stack>
       )}
 
       {Boolean(showConfirmDeleteAMConfig) && onConfirmReset && onDismiss && (
@@ -97,9 +101,6 @@ export const ConfigEditor = ({
           onDismiss={onDismiss}
         />
       )}
-          </>
-        );
-      }}
-    </Form>
+    </form>
   );
 };