Update dependency react-hook-form to v7.26.1 (#43670)

* Update dependency react-hook-form to v7.27.0

* fix type errors for alerting components with new react-hook-form version (#45341)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Rodman <nathanrodman@gmail.com>

package.json

@@ -334,7 +334,7 @@
     "react-draggable": "4.4.4",
     "react-grid-layout": "1.3.3",
     "react-highlight-words": "0.17.0",
-    "react-hook-form": "7.5.3",
+    "react-hook-form": "7.27.0",
     "react-inlinesvg": "2.3.0",
     "react-loadable": "5.5.0",
     "react-moveable": "0.30.3",

packages/grafana-ui/package.json

@@ -74,7 +74,7 @@
     "react-dom": "17.0.2",
     "react-dropzone": "11.5.1",
     "react-highlight-words": "0.17.0",
-    "react-hook-form": "7.5.3",
+    "react-hook-form": "7.27.0",
     "react-inlinesvg": "2.3.0",
     "react-popper": "2.2.5",
     "react-popper-tooltip": "^4.3.1",

public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx

@@ -5,7 +5,7 @@ import { useCleanup } from 'app/core/hooks/useCleanup';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 import { NotifierDTO } from 'app/types';
 import React, { useCallback } from 'react';
-import { useForm, FormProvider, FieldErrors, Validate } from 'react-hook-form';
+import { useForm, FormProvider, FieldErrors, Validate, SubmitHandler } from 'react-hook-form';
 import { useControlledFieldArray } from '../../../hooks/useControlledFieldArray';
 import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
 import { ChannelValues, CommonSettingsComponentType, ReceiverFormValues } from '../../../types/receiver-form';
@@ -94,7 +94,7 @@ export function ReceiverForm<R extends ChannelValues>({
           Because there is no default policy configured yet, this contact point will automatically be set as default.
         </Alert>
       )}
-      <form onSubmit={handleSubmit(submitCallback, onInvalid)}>
+      <form onSubmit={handleSubmit(submitCallback as SubmitHandler<ReceiverFormValues<R>>, onInvalid)}>
         <h4 className={styles.heading}>
           {readOnly ? 'Contact point' : initialValues ? 'Update contact point' : 'Create contact point'}
         </h4>
@@ -121,13 +121,13 @@ export function ReceiverForm<R extends ChannelValues>({
               defaultValues={field}
               key={field.__id}
               onDuplicate={() => {
-                const currentValues: R = getValues().items[index];
+                const currentValues = getValues().items[index] as R;
                 append({ ...currentValues, __id: String(Math.random()) });
               }}
               onTest={
                 onTestChannel
                   ? () => {
-                      const currentValues: R = getValues().items[index];
+                      const currentValues = getValues().items[index] as R;
                       onTestChannel(currentValues);
                     }
                   : undefined

public/app/features/alerting/unified/components/rule-editor/AlertTypeStep.tsx

@@ -10,6 +10,7 @@ import { GroupAndNamespaceFields } from './GroupAndNamespaceFields';
 import { contextSrv } from 'app/core/services/context_srv';
 import { CloudRulesSourcePicker } from './CloudRulesSourcePicker';
 import { checkForPathSeparator } from './util';
+import { get } from 'lodash';
 
 interface Props {
   editingExistingRule: boolean;
@@ -148,8 +149,9 @@ export const AlertTypeStep: FC<Props> = ({ editingExistingRule }) => {
         <Field
           label="Folder"
           className={styles.formInput}
-          error={errors.folder?.message}
+          // Use get to make react-hook-form + TS happy for object fields
-          invalid={!!errors.folder?.message}
+          error={get(errors, 'folder.message')}
+          invalid={!!get(errors, 'folder.message')}
           data-testid="folder-picker"
         >
           <InputControl

yarn.lock

@@ -4441,7 +4441,7 @@ __metadata:
     react-dom: 17.0.2
     react-dropzone: 11.5.1
     react-highlight-words: 0.17.0
-    react-hook-form: 7.5.3
+    react-hook-form: 7.27.0
     react-inlinesvg: 2.3.0
     react-popper: 2.2.5
     react-popper-tooltip: ^4.3.1
@@ -20596,7 +20596,7 @@ __metadata:
     react-draggable: 4.4.4
     react-grid-layout: 1.3.3
     react-highlight-words: 0.17.0
-    react-hook-form: 7.5.3
+    react-hook-form: 7.27.0
     react-inlinesvg: 2.3.0
     react-loadable: 5.5.0
     react-moveable: 0.30.3
@@ -30613,6 +30613,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hook-form@npm:7.27.0":
+  version: 7.27.0
+  resolution: "react-hook-form@npm:7.27.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17
+  checksum: 643c643e6d52b2427e73853abe0255e39f4c323c87862b1651e7153adaf1f3db27b843dda9ea32306db102d1e9e1e00e49c2ded13705ede0706235b53ef69e24
+  languageName: node
+  linkType: hard
+
 "react-hook-form@npm:7.5.3":
   version: 7.5.3
   resolution: "react-hook-form@npm:7.5.3"