Client credentials: "Regenerate" button fix (#2337)

src/clients/ClientDetails.tsx

@@ -216,6 +216,7 @@ export default function ClientDetails() {
   });
 
   const setupForm = (client: ClientRepresentation) => {
+    form.reset({ ...client });
     convertToFormValues(client, form.setValue);
     form.setValue(
       "attributes.request.uris",
@@ -383,7 +384,11 @@ export default function ClientDetails() {
                 title={<TabTitleText>{t("credentials")}</TabTitleText>}
                 {...route("credentials")}
               >
-                <Credentials clientId={clientId} save={() => save()} />
+                <Credentials
+                  form={form}
+                  clientId={clientId}
+                  save={() => save()}
+                />
               </Tab>
             )}
             <Tab

src/clients/credentials/ClientSecret.tsx

@@ -7,17 +7,18 @@ import {
   Split,
   SplitItem,
 } from "@patternfly/react-core";
-import { useFormContext } from "react-hook-form";
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
+import type { UseFormMethods } from "react-hook-form";
 
 export type ClientSecretProps = {
   secret: string;
   toggle: () => void;
+  form: UseFormMethods<ClientRepresentation>;
 };
 
-export const ClientSecret = ({ secret, toggle }: ClientSecretProps) => {
+export const ClientSecret = ({ secret, toggle, form }: ClientSecretProps) => {
   const { t } = useTranslation("clients");
-  const { formState } = useFormContext<ClientRepresentation>();
+
   return (
     <FormGroup label={t("clientSecret")} fieldId="kc-client-secret">
       <Split hasGutter>
@@ -29,8 +30,8 @@ export const ClientSecret = ({ secret, toggle }: ClientSecretProps) => {
         <SplitItem>
           <Button
             variant="secondary"
+            isDisabled={form.formState.isDirty}
             onClick={toggle}
-            isDisabled={formState.isDirty}
           >
             {t("regenerate")}
           </Button>

src/clients/credentials/Credentials.tsx

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
+import {
+  Controller,
+  useFormContext,
+  UseFormMethods,
+  useWatch,
+} from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
   ActionGroup,
@@ -29,6 +34,7 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { ClientSecret } from "./ClientSecret";
 import { SignedJWT } from "./SignedJWT";
 import { X509 } from "./X509";
+import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 
 type AccessToken = {
   registrationAccessToken: string;
@@ -37,9 +43,10 @@ type AccessToken = {
 export type CredentialsProps = {
   clientId: string;
   save: () => void;
+  form: UseFormMethods<ClientRepresentation>;
 };
 
-export const Credentials = ({ clientId, save }: CredentialsProps) => {
+export const Credentials = ({ clientId, save, form }: CredentialsProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -51,7 +58,9 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
   const {
     control,
     formState: { isDirty },
+    handleSubmit,
   } = useFormContext();
+
   const clientAuthenticatorType = useWatch({
     control: control,
     name: "clientAuthenticatorType",
@@ -131,7 +140,12 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
 
   return (
     <PageSection>
-      <FormAccess isHorizontal className="pf-u-mt-md" role="manage-clients">
+      <FormAccess
+        onSubmit={handleSubmit(save)}
+        isHorizontal
+        className="pf-u-mt-md"
+        role="manage-clients"
+      >
         <ClientSecretConfirm />
         <AccessTokenConfirm />
         <Card isFlat>
@@ -180,11 +194,7 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
             {clientAuthenticatorType === "client-jwt" && <SignedJWT />}
             {clientAuthenticatorType === "client-x509" && <X509 />}
             <ActionGroup>
-              <Button
+              <Button variant="primary" type="submit" isDisabled={!isDirty}>
-                variant="primary"
-                onClick={() => save()}
-                isDisabled={!isDirty}
-              >
                 {t("common:save")}
               </Button>
             </ActionGroup>
@@ -195,6 +205,7 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
             clientAuthenticatorType === "client-secret-jwt") && (
             <CardBody>
               <ClientSecret
+                form={form}
                 secret={secret}
                 toggle={toggleClientSecretConfirm}
               />