Use react-hook-form v7 for client keys (#4045)

apps/admin-ui/src/clients/keys/GenerateKeyDialog.tsx

@@ -5,7 +5,7 @@ import {
   FormProvider,
   useForm,
   useFormContext,
-} from "react-hook-form";
+} from "react-hook-form-v7";
 import {
   Button,
   ButtonVariant,
@@ -46,6 +46,10 @@ const extensions = new Map([
   ["BCFKS", "bcfks"],
 ]);
 
+type FormFields = KeyStoreConfig & {
+  file: string | File;
+};
+
 export const getFileExtension = (format: string) => extensions.get(format);
 
 export const KeyForm = ({
@@ -58,7 +62,7 @@ export const KeyForm = ({
   const [filename, setFilename] = useState<string>();
   const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
 
-  const { control, watch } = useFormContext<KeyStoreConfig>();
+  const { control, watch } = useFormContext<FormFields>();
   const format = watch("format");
 
   const { cryptoInfo } = useServerInfo();
@@ -79,15 +83,15 @@ export const KeyForm = ({
           name="format"
           defaultValue="JKS"
           control={control}
-          render={({ onChange, value }) => (
+          render={({ field }) => (
             <Select
               toggleId="archiveFormat"
               onToggle={setOpenArchiveFormat}
               onSelect={(_, value) => {
-                onChange(value.toString());
+                field.onChange(value.toString());
                 setOpenArchiveFormat(false);
               }}
-              selections={value}
+              selections={field.value}
               variant={SelectVariant.single}
               aria-label={t("archiveFormat")}
               isOpen={openArchiveFormat}
@@ -96,7 +100,7 @@ export const KeyForm = ({
                 .concat(hasPem ? CERT_PEM : [])
                 .map((option) => (
                   <SelectOption
-                    selected={option === value}
+                    selected={option === field.value}
                     key={option}
                     value={option}
                   />
@@ -120,15 +124,15 @@ export const KeyForm = ({
             name="file"
             defaultValue=""
             control={control}
-            render={({ onChange, value }) => (
+            render={({ field }) => (
               <FileUpload
                 id="importFile"
-                value={value}
+                value={field.value}
                 filename={filename}
                 browseButtonText={t("browse")}
                 onChange={(value, filename) => {
                   setFilename(filename);
-                  onChange(value);
+                  field.onChange(value);
                 }}
               />
             )}

apps/admin-ui/src/clients/keys/SamlImportKeyDialog.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { FormProvider, useFormContext } from "react-hook-form";
+import { FormProvider, useFormContext } from "react-hook-form-v7";
 import { AlertVariant } from "@patternfly/react-core";
 
 import type { KeyTypes } from "./SamlKeys";
@@ -21,7 +21,7 @@ export const SamlImportKeyDialog = ({
   onClose,
 }: SamlImportKeyDialogProps) => {
   const { t } = useTranslation("clients");
-  const form = useFormContext();
+  const form = useFormContext<SamlKeysDialogForm>();
   const { handleSubmit } = form;
 
   const { adminClient } = useAdminClient();

apps/admin-ui/src/clients/keys/StoreSettings.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form-v7";
 import { FormGroup } from "@patternfly/react-core";
 
 import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
@@ -15,7 +15,10 @@ export const StoreSettings = ({
   isSaml?: boolean;
 }) => {
   const { t } = useTranslation("clients");
-  const { register, errors } = useFormContext<KeyStoreConfig>();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<KeyStoreConfig>();
 
   return (
     <>
@@ -34,11 +37,9 @@ export const StoreSettings = ({
       >
         <KeycloakTextInput
           data-testid="keyAlias"
-          type="text"
           id="keyAlias"
-          name="keyAlias"
-          ref={register({ required: true })}
           validated={errors.keyAlias ? "error" : "default"}
+          {...register("keyAlias", { required: true })}
         />
       </FormGroup>
       {!hidePassword && (
@@ -58,9 +59,8 @@ export const StoreSettings = ({
           <PasswordInput
             data-testid="keyPassword"
             id="keyPassword"
-            name="keyPassword"
-            ref={register({ required: true })}
             validated={errors.keyPassword ? "error" : "default"}
+            {...register("keyPassword", { required: true })}
           />
         </FormGroup>
       )}
@@ -77,10 +77,8 @@ export const StoreSettings = ({
         >
           <KeycloakTextInput
             data-testid="realmCertificateAlias"
-            type="text"
             id="realmCertificateAlias"
-            name="realmAlias"
+            {...register("realmAlias")}
-            ref={register()}
           />
         </FormGroup>
       )}
@@ -100,9 +98,8 @@ export const StoreSettings = ({
         <PasswordInput
           data-testid="storePassword"
           id="storePassword"
-          name="storePassword"
-          ref={register({ required: true })}
           validated={errors.storePassword ? "error" : "default"}
+          {...register("storePassword", { required: true })}
         />
       </FormGroup>
     </>