From e9e438ee2f720231c412e0693342f2f3d6055d5a Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 24 May 2021 15:09:33 +0300
Subject: [PATCH] Form: Expose all return values from useForm (#34380)

---
 packages/grafana-ui/src/components/Forms/Form.tsx            | 4 ++--
 packages/grafana-ui/src/types/forms.ts                       | 5 +----
 .../features/alerting/components/NotificationChannelForm.tsx | 5 +++--
 .../alerting/components/NotificationChannelOptions.tsx       | 5 +++--
 .../manage-dashboards/components/ImportDashboardForm.tsx     | 2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx
index c3b4eeb0913..b10051597ae 100644
--- a/packages/grafana-ui/src/components/Forms/Form.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.tsx
@@ -24,7 +24,7 @@ export function Form<T>({
   maxWidth = 600,
   ...htmlProps
 }: FormProps<T>) {
-  const { handleSubmit, register, control, trigger, getValues, formState, watch, setValue } = useForm<T>({
+  const { handleSubmit, trigger, formState, ...rest } = useForm<T>({
     mode: validateOn,
     defaultValues,
   });
@@ -45,7 +45,7 @@ export function Form<T>({
       onSubmit={handleSubmit(onSubmit)}
       {...htmlProps}
     >
-      {children({ register, errors: formState.errors, control, getValues, formState, watch, setValue })}
+      {children({ errors: formState.errors, formState, ...rest })}
     </form>
   );
 }
diff --git a/packages/grafana-ui/src/types/forms.ts b/packages/grafana-ui/src/types/forms.ts
index 15684115dab..c757bee9223 100644
--- a/packages/grafana-ui/src/types/forms.ts
+++ b/packages/grafana-ui/src/types/forms.ts
@@ -1,10 +1,7 @@
 import { UseFormReturn, FieldValues, FieldErrors } from 'react-hook-form';
 export { SubmitHandler as FormsOnSubmit, FieldErrors as FormFieldErrors } from 'react-hook-form';
 
-export type FormAPI<T> = Pick<
-  UseFormReturn<T>,
-  'register' | 'control' | 'formState' | 'getValues' | 'watch' | 'setValue'
-> & {
+export type FormAPI<T> = Omit<UseFormReturn<T>, 'trigger' | 'handleSubmit'> & {
   errors: FieldErrors<T>;
 };
 
diff --git a/public/app/features/alerting/components/NotificationChannelForm.tsx b/public/app/features/alerting/components/NotificationChannelForm.tsx
index 14b9fe9979f..a9abc49a523 100644
--- a/public/app/features/alerting/components/NotificationChannelForm.tsx
+++ b/public/app/features/alerting/components/NotificationChannelForm.tsx
@@ -9,7 +9,8 @@ import { ChannelSettings } from './ChannelSettings';
 
 import config from 'app/core/config';
 
-interface Props extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'setValue'> {
+interface Props
+  extends Pick<FormAPI<NotificationChannelDTO>, 'control' | 'errors' | 'register' | 'watch' | 'getValues'> {
   selectableChannels: Array<SelectableValue<string>>;
   selectedChannel?: NotificationChannelType;
   imageRendererAvailable: boolean;
@@ -19,7 +20,7 @@ interface Props extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'set
 }
 
 export interface NotificationSettingsProps
-  extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'watch' | 'getValues' | 'setValue'> {
+  extends Pick<FormAPI<NotificationChannelDTO>, 'control' | 'errors' | 'register'> {
   currentFormValues: NotificationChannelDTO;
 }
 
diff --git a/public/app/features/alerting/components/NotificationChannelOptions.tsx b/public/app/features/alerting/components/NotificationChannelOptions.tsx
index f268a4d5886..9cdb59a61d5 100644
--- a/public/app/features/alerting/components/NotificationChannelOptions.tsx
+++ b/public/app/features/alerting/components/NotificationChannelOptions.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, Checkbox, Field, FormAPI, Input } from '@grafana/ui';
+import { Button, Checkbox, Field, Input } from '@grafana/ui';
 import { OptionElement } from './OptionElement';
 import { NotificationChannelDTO, NotificationChannelOption, NotificationChannelSecureFields } from '../../../types';
+import { NotificationSettingsProps } from './NotificationChannelForm';
 
-interface Props extends Omit<FormAPI<NotificationChannelDTO>, 'formState' | 'getValues' | 'watch' | 'setValue'> {
+interface Props extends NotificationSettingsProps {
   selectedChannelOptions: NotificationChannelOption[];
   currentFormValues: NotificationChannelDTO;
   secureFields: NotificationChannelSecureFields;
diff --git a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
index 43ba364b8ba..865a75a07f5 100644
--- a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
+++ b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
@@ -15,7 +15,7 @@ import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { DashboardInput, DashboardInputs, DataSourceInput, ImportDashboardDTO } from '../state/reducers';
 import { validateTitle, validateUid } from '../utils/validation';
 
-interface Props extends Omit<FormAPI<ImportDashboardDTO>, 'formState' | 'setValue'> {
+interface Props extends Pick<FormAPI<ImportDashboardDTO>, 'register' | 'errors' | 'control' | 'getValues' | 'watch'> {
   uidReset: boolean;
   inputs: DashboardInputs;
   initialFolderId: number;