Default value and required field for generate keys (#2195)

src/clients/keys/GenerateKeyDialog.tsx

@@ -1,6 +1,11 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Control, Controller, useForm } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
 import {
   Button,
   ButtonVariant,
@@ -21,26 +26,23 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { StoreSettings } from "./StoreSettings";
 
 type GenerateKeyDialogProps = {
+  clientId: string;
   toggleDialog: () => void;
   save: (keyStoreConfig: KeyStoreConfig) => void;
 };
 
 type KeyFormProps = {
-  register: () => void;
-  control: Control<KeyStoreConfig>;
   useFile?: boolean;
 };
 
-export const KeyForm = ({
+export const KeyForm = ({ useFile = false }: KeyFormProps) => {
-  register,
-  control,
-  useFile = false,
-}: KeyFormProps) => {
   const { t } = useTranslation("clients");
 
   const [filename, setFilename] = useState<string>();
   const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
 
+  const { control } = useFormContext<KeyStoreConfig>();
+
   return (
     <Form className="pf-u-pt-lg">
       <FormGroup
@@ -111,17 +113,26 @@ export const KeyForm = ({
           />
         </FormGroup>
       )}
-      <StoreSettings register={register} hidePassword={useFile} />
+      <StoreSettings hidePassword={useFile} />
     </Form>
   );
 };
 
 export const GenerateKeyDialog = ({
+  clientId,
   save,
   toggleDialog,
 }: GenerateKeyDialogProps) => {
   const { t } = useTranslation("clients");
-  const { register, control, handleSubmit } = useForm<KeyStoreConfig>();
+  const form = useForm<KeyStoreConfig>({
+    defaultValues: { keyAlias: clientId },
+    mode: "onChange",
+  });
+
+  const {
+    handleSubmit,
+    formState: { isValid },
+  } = form;
 
   return (
     <Modal
@@ -134,6 +145,7 @@ export const GenerateKeyDialog = ({
           id="modal-confirm"
           key="confirm"
           data-testid="confirm"
+          isDisabled={!isValid}
           onClick={() => {
             handleSubmit((config) => {
               save(config);
@@ -159,7 +171,9 @@ export const GenerateKeyDialog = ({
       <TextContent>
         <Text>{t("clients-help:generateKeysDescription")}</Text>
       </TextContent>
-      <KeyForm register={register} control={control} />
+      <FormProvider {...form}>
+        <KeyForm />
+      </FormProvider>
     </Modal>
   );
 };

src/clients/keys/ImportKeyDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Controller, useForm, useWatch } from "react-hook-form";
+import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import {
   Button,
   ButtonVariant,
@@ -43,7 +43,8 @@ export const ImportKeyDialog = ({
   toggleDialog,
 }: ImportKeyDialogProps) => {
   const { t } = useTranslation("clients");
-  const { register, control, handleSubmit } = useForm<ImportFile>();
+  const form = useForm<ImportFile>();
+  const { control, handleSubmit } = form;
 
   const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
 
@@ -128,7 +129,9 @@ export const ImportKeyDialog = ({
           />
         </FormGroup>
         {baseFormats.includes(format) && (
-          <StoreSettings register={register} hidePassword />
+          <FormProvider {...form}>
+            <StoreSettings hidePassword />
+          </FormProvider>
         )}
         <FormGroup label={t("importFile")} fieldId="importFile">
           <Controller

src/clients/keys/Keys.tsx

@@ -42,6 +42,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
   const {
     control,
     register,
+    getValues,
     formState: { isDirty },
   } = useFormContext<ClientRepresentation>();
   const adminClient = useAdminClient();
@@ -106,6 +107,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
     <PageSection variant="light" className="keycloak__form">
       {openGenerateKeys && (
         <GenerateKeyDialog
+          clientId={getValues("clientId")!}
           toggleDialog={toggleOpenGenerateKeys}
           save={generate}
         />

src/clients/keys/SamlImportKeyDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
+import { FormProvider, useFormContext } from "react-hook-form";
 import { AlertVariant } from "@patternfly/react-core";
 
 import type { KeyTypes } from "./SamlKeys";
@@ -22,7 +22,8 @@ export const SamlImportKeyDialog = ({
   onClose,
 }: SamlImportKeyDialogProps) => {
   const { t } = useTranslation("clients");
-  const { register, control, handleSubmit } = useFormContext();
+  const form = useFormContext();
+  const { handleSubmit } = form;
 
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -48,7 +49,9 @@ export const SamlImportKeyDialog = ({
         onClose();
       }}
     >
-      <KeyForm register={register} control={control} useFile />
+      <FormProvider {...form}>
+        <KeyForm useFile />
+      </FormProvider>
     </ConfirmDialogModal>
   );
 };

src/clients/keys/SamlKeysDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import FileSaver from "file-saver";
 import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import {
   AlertVariant,
   Button,
@@ -75,12 +75,11 @@ export const SamlKeysDialog = ({
   const { t } = useTranslation("clients");
   const [type, setType] = useState(false);
   const [keys, setKeys] = useState<CertificateRepresentation>();
+  const form = useForm<SamlKeysDialogForm>();
   const {
-    register,
-    control,
     handleSubmit,
     formState: { isDirty },
-  } = useForm<SamlKeysDialogForm>();
+  } = form;
 
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -211,7 +210,11 @@ export const SamlKeysDialog = ({
           </FormGroup>
         </Form>
       )}
-      {type && <KeyForm register={register} control={control} useFile />}
+      {type && (
+        <FormProvider {...form}>
+          <KeyForm useFile />
+        </FormProvider>
+      )}
     </Modal>
   );
 };

src/clients/keys/StoreSettings.tsx

@@ -1,24 +1,26 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useFormContext } from "react-hook-form";
 import { FormGroup, TextInput } from "@patternfly/react-core";
 
+import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { PasswordInput } from "../../components/password-input/PasswordInput";
 
 export const StoreSettings = ({
-  register,
   hidePassword = false,
 }: {
-  register: () => void;
   hidePassword?: boolean;
 }) => {
   const { t } = useTranslation("clients");
+  const { register } = useFormContext<KeyStoreConfig>();
 
   return (
     <>
       <FormGroup
         label={t("keyAlias")}
         fieldId="keyAlias"
+        isRequired
         labelIcon={
           <HelpItem
             helpText="clients-help:keyAlias"
@@ -31,13 +33,14 @@ export const StoreSettings = ({
           type="text"
           id="keyAlias"
           name="keyAlias"
-          ref={register}
+          ref={register({ required: true })}
         />
       </FormGroup>
       {!hidePassword && (
         <FormGroup
           label={t("keyPassword")}
           fieldId="keyPassword"
+          isRequired
           labelIcon={
             <HelpItem
               helpText="clients-help:keyPassword"
@@ -49,13 +52,14 @@ export const StoreSettings = ({
             data-testid="keyPassword"
             id="keyPassword"
             name="keyPassword"
-            ref={register}
+            ref={register({ required: true })}
           />
         </FormGroup>
       )}
       <FormGroup
         label={t("storePassword")}
         fieldId="storePassword"
+        isRequired
         labelIcon={
           <HelpItem
             helpText="clients-help:storePassword"
@@ -67,7 +71,7 @@ export const StoreSettings = ({
           data-testid="storePassword"
           id="storePassword"
           name="storePassword"
-          ref={register}
+          ref={register({ required: true })}
         />
       </FormGroup>
     </>