fix up types and rebase

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/hip-beers-attend.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-shortcuts': patch
+---
+
+Bumped `react-hook-form` to `^7.12.2`

plugins/catalog-import/src/components/ImportStepper/defaults.tsx

@@ -188,7 +188,7 @@ export function defaultGenerateStepper(
                 renderFormFields={({
                   values,
                   setValue,
-                  errors,
+                  formState,
                   groupsLoading,
                   groups,
                   register,
@@ -209,7 +209,7 @@ export function defaultGenerateStepper(
                       margin="normal"
                       variant="outlined"
                       fullWidth
-                      error={Boolean(errors.title)}
+                      error={Boolean(formState.errors.title)}
                       required
                     />
 
@@ -224,7 +224,7 @@ export function defaultGenerateStepper(
                       margin="normal"
                       variant="outlined"
                       fullWidth
-                      error={Boolean(errors.body)}
+                      error={Boolean(formState.errors.body)}
                       multiline
                       required
                     />
@@ -242,14 +242,14 @@ export function defaultGenerateStepper(
                       margin="normal"
                       variant="outlined"
                       fullWidth
-                      error={Boolean(errors.componentName)}
+                      error={Boolean(formState.errors.componentName)}
                       required
                     />
 
                     {!values.useCodeowners && (
                       <AutocompleteTextField
                         name="owner"
-                        errors={errors}
+                        errors={formState.errors}
                         options={groups || []}
                         loading={groupsLoading}
                         loadingText="Loading groups…"

plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.test.tsx

@@ -82,14 +82,14 @@ describe('<PreparePullRequestForm />', () => {
     const { queryByText, getByRole } = render(
       <PreparePullRequestForm<{ main: string }>
         defaultValues={{}}
-        render={({ errors, register }) => (
+        render={({ formState, register }) => (
           <>
             <TextField
               {...asInputRef(register('main', { required: true }))}
               name="main"
               required
             />
-            {errors.main && (
+            {formState.errors.main && (
               <FormHelperText error>
                 Error in required main field
               </FormHelperText>

plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreparePullRequestForm.tsx

@@ -19,20 +19,20 @@ import {
   SubmitHandler,
   UnpackNestedValue,
   useForm,
-  UseFormMethods,
-  UseFormOptions,
+  UseFormProps,
+  UseFormReturn,
 } from 'react-hook-form';
 
 type Props<TFieldValues extends Record<string, any>> = Pick<
-  UseFormOptions<TFieldValues>,
+  UseFormProps<TFieldValues>,
   'defaultValues'
 > & {
   onSubmit: SubmitHandler<TFieldValues>;
 
   render: (
     props: Pick<
-      UseFormMethods<TFieldValues>,
-      'errors' | 'register' | 'control'
+      UseFormReturn<TFieldValues>,
+      'formState' | 'register' | 'control' | 'setValue'
     > & {
       values: UnpackNestedValue<TFieldValues>;
     },
@@ -55,17 +55,12 @@ export const PreparePullRequestForm = <
   onSubmit,
   render,
 }: Props<TFieldValues>) => {
-  const {
-    handleSubmit,
-    watch,
-    control,
-    register,
-    formState: { errors },
-  } = useForm<TFieldValues>({ mode: 'onTouched', defaultValues });
+  const { handleSubmit, watch, control, register, formState, setValue } =
+    useForm<TFieldValues>({ mode: 'onTouched', defaultValues });
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      {render({ values: watch(), errors, register, control })}
+      {render({ values: watch(), formState, register, control, setValue })}
     </form>
   );
 };

plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.tsx

@@ -23,7 +23,7 @@ import {
 import { Box, FormHelperText, Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useCallback, useState } from 'react';
-import { FieldErrors, UnpackNestedValue, UseFormReturn } from 'react-hook-form';
+import { UnpackNestedValue, UseFormReturn } from 'react-hook-form';
 import { useAsync } from 'react-use';
 import YAML from 'yaml';
 import { AnalyzeResult, catalogImportApiRef } from '../../api';
@@ -63,8 +63,10 @@ type Props = {
   defaultBody: string;
 
   renderFormFields: (
-    props: Pick<UseFormReturn<FormData>, 'register' | 'setValue'> & {
-      errors: FieldErrors<FormData>;
+    props: Pick<
+      UseFormReturn<FormData>,
+      'register' | 'setValue' | 'formState'
+    > & {
       values: UnpackNestedValue<FormData>;
       groups: string[];
       groupsLoading: boolean;
@@ -193,11 +195,11 @@ export const StepPrepareCreatePullRequest = ({
             analyzeResult.generatedEntities[0]?.metadata?.name || '',
           useCodeowners: false,
         }}
-        render={({ values, errors, register, setValue }) => (
+        render={({ values, formState, register, setValue }) => (
           <>
             {renderFormFields({
               values,
-              errors,
+              formState,
               register,
               setValue,
               groups: groups ?? [],
@@ -242,7 +244,11 @@ export const StepPrepareCreatePullRequest = ({
               )}
               <NextButton
                 type="submit"
-                disabled={Boolean(errors.title || errors.body || errors.owner)}
+                disabled={Boolean(
+                  formState.errors.title ||
+                    formState.errors.body ||
+                    formState.errors.owner,
+                )}
                 loading={submitted}
               >
                 Create PR

plugins/cloudbuild/package.json

@@ -42,7 +42,6 @@
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^7.12.2",
     "react-lazylog": "^4.5.3",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",

plugins/shortcuts/package.json

@@ -29,7 +29,7 @@
     "@types/zen-observable": "^0.8.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^7.1.1",
+    "react-hook-form": "^7.12.2",
     "react-router": "6.0.0-beta.0",
     "react-use": "^17.2.4",
     "uuid": "^8.3.2",

yarn.lock

@@ -22376,7 +22376,7 @@ react-hook-form@^6.15.4:
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-6.15.4.tgz#328003e1ccc096cd158899ffe7e3b33735a9b024"
   integrity sha512-K+Sw33DtTMengs8OdqFJI3glzNl1wBzSefD/ksQw/hJf9CnOHQAU6qy82eOrh0IRNt2G53sjr7qnnw1JDjvx1w==
 
-react-hook-form@^7.1.1, react-hook-form@^7.12.2:
+react-hook-form@^7.12.2:
   version "7.12.2"
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.12.2.tgz#2660afbf03c4ef360a9314ebf46ce3d972296c77"
   integrity sha512-cpxocjrgpMAJCMJQR51BQhMoEx80/EQqePNihMTgoTYTqCRbd2GExi+N4GJIr+cFqrmbwNj9wxk5oLWYQsUefg==