Revert "Update dependency react-hook-form to v7.26.1" (#45761)

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

This reverts commit 175891a5e3.

* chore(renovate): prevent bumping react-hook-form so plugins dont break

.github/renovate.json5

@@ -17,6 +17,7 @@
     "d3-scale-chromatic", // we should bump this once we move to esm modules
     "execa", // we should bump this once we move to esm modules
     "history", // we should bump this together with react-router-dom
+    "react-hook-form", // due to us exposing these hooks via @grafana/ui form components bumping can break plugins
     "react-icons", // jaeger-ui-components is being refactored to use @grafana/ui icons instead
     "react-router-dom", // we should bump this together with history
     "slate",

package.json

@@ -336,7 +336,7 @@
     "react-draggable": "4.4.4",
     "react-grid-layout": "1.3.3",
     "react-highlight-words": "0.17.0",
-    "react-hook-form": "7.27.0",
+    "react-hook-form": "7.5.3",
     "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.27.0",
+    "react-hook-form": "7.5.3",
     "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, SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider, FieldErrors, Validate } 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 as SubmitHandler<ReceiverFormValues<R>>, onInvalid)}>
+      <form onSubmit={handleSubmit(submitCallback, 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 = getValues().items[index] as R;
+                const currentValues: R = getValues().items[index];
                 append({ ...currentValues, __id: String(Math.random()) });
               }}
               onTest={
                 onTestChannel
                   ? () => {
-                      const currentValues = getValues().items[index] as R;
+                      const currentValues: R = getValues().items[index];
                       onTestChannel(currentValues);
                     }
                   : undefined

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

@@ -10,7 +10,6 @@ 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;
@@ -149,9 +148,8 @@ export const AlertTypeStep: FC<Props> = ({ editingExistingRule }) => {
         <Field
           label="Folder"
           className={styles.formInput}
-          // Use get to make react-hook-form + TS happy for object fields
-          error={get(errors, 'folder.message')}
-          invalid={!!get(errors, 'folder.message')}
+          error={errors.folder?.message}
+          invalid={!!errors.folder?.message}
           data-testid="folder-picker"
         >
           <InputControl

yarn.lock

@@ -4449,7 +4449,7 @@ __metadata:
     react-dom: 17.0.2
     react-dropzone: 11.5.1
     react-highlight-words: 0.17.0
-    react-hook-form: 7.27.0
+    react-hook-form: 7.5.3
     react-inlinesvg: 2.3.0
     react-popper: 2.2.5
     react-popper-tooltip: ^4.3.1
@@ -20869,7 +20869,7 @@ __metadata:
     react-draggable: 4.4.4
     react-grid-layout: 1.3.3
     react-highlight-words: 0.17.0
-    react-hook-form: 7.27.0
+    react-hook-form: 7.5.3
     react-inlinesvg: 2.3.0
     react-loadable: 5.5.0
     react-moveable: 0.30.3
@@ -30886,15 +30886,6 @@ __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"