Migration: Migrate New notification channel page (#25265)

* creating page

* add types select

* adding switches

* start with converting angular templates to json

* converting more alert channels to new format

* convert remaining channels

* typing the form

* add validation, update models

* fix default value in type select

* fix type

* fix issue with validation rule

* add missing settings

* fix type errors

* test notification

* add comments to structs

* fix selectable value and minor things on each channel

* More typings

* fix strictnull

* rename ModelValue -> PropertyName

* rename show -> showWhen

* add enums and adding comments

* fix comment

* break out channel options to component

* use try catch

* adding default case to OptionElement if element not supported

packages/grafana-ui/src/components/Forms/Form.tsx

@@ -23,7 +23,7 @@ export function Form<T>({
   validateOn = 'onSubmit',
   maxWidth = 400,
 }: FormProps<T>) {
-  const { handleSubmit, register, errors, control, triggerValidation, getValues, formState } = useForm<T>({
+  const { handleSubmit, register, errors, control, triggerValidation, getValues, formState, watch } = useForm<T>({
     mode: validateOn,
     defaultValues,
   });
@@ -42,7 +42,7 @@ export function Form<T>({
       `}
       onSubmit={handleSubmit(onSubmit)}
     >
-      {children({ register, errors, control, getValues, formState })}
+      {children({ register, errors, control, getValues, formState, watch })}
     </form>
   );
 }

packages/grafana-ui/src/types/forms.ts

@@ -1,4 +1,7 @@
 import { FormContextValues } from 'react-hook-form';
 export { OnSubmit as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form';
 
-export type FormAPI<T> = Pick<FormContextValues<T>, 'register' | 'errors' | 'control' | 'formState' | 'getValues'>;
+export type FormAPI<T> = Pick<
+  FormContextValues<T>,
+  'register' | 'errors' | 'control' | 'formState' | 'getValues' | 'watch'
+>;