Port role form to new form controls (#27626)

Signed-off-by: Jon Koops <jonkoops@gmail.com>

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts

@@ -94,7 +94,7 @@ export default class ProviderPage {
   #rolesTab = "rolesTab";
   #createRoleBtn = "no-roles-for-this-client-empty-action";
   #roleSaveBtn = "save";
-  #roleNameField = "#kc-name";
+  #roleNameField = "name";
 
   #groupName = "aa-uf-mappers-group";
   #clientName = "aa-uf-mappers-client";
@@ -310,7 +310,7 @@ export default class ProviderPage {
     cy.wait(1000);
     cy.findByTestId(this.#createRoleBtn).click();
     cy.wait(1000);
-    cy.get(this.#roleNameField).clear().type(roleName);
+    cy.findByTestId(this.#roleNameField).clear().type(roleName);
     cy.wait(1000);
     cy.findByTestId(this.#roleSaveBtn).click();
     cy.wait(1000);

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts

@@ -1,16 +1,16 @@
 class CreateRealmRolePage {
-  #realmRoleNameInput = "#kc-name";
+  #realmRoleNameInput = "name";
-  #realmRoleNameError = "#kc-name-helper";
+  #realmRoleNameError = "#name-helper";
-  #realmRoleDescriptionInput = "#kc-description";
+  #realmRoleDescriptionInput = "description";
   #saveBtn = "save";
   #cancelBtn = "cancel";
 
   //#region General Settings
   fillRealmRoleData(name: string, description = "") {
-    cy.get(this.#realmRoleNameInput).clear();
+    cy.findByTestId(this.#realmRoleNameInput).clear();
 
     if (name) {
-      cy.get(this.#realmRoleNameInput).type(name);
+      cy.findByTestId(this.#realmRoleNameInput).type(name);
     }
 
     if (description !== "") {
@@ -36,7 +36,7 @@ class CreateRealmRolePage {
   }
 
   checkNameDisabled() {
-    cy.get(this.#realmRoleNameInput).should(
+    cy.findByTestId(this.#realmRoleNameInput).should(
       "have.attr",
       "readonly",
       "readonly",
@@ -45,13 +45,16 @@ class CreateRealmRolePage {
   }
 
   checkDescription(description: string) {
-    cy.get(this.#realmRoleDescriptionInput).should("have.value", description);
+    cy.findByTestId(this.#realmRoleDescriptionInput).should(
+      "have.value",
+      description,
+    );
     return this;
   }
 
   updateDescription(description: string) {
-    cy.get(this.#realmRoleDescriptionInput).clear();
+    cy.findByTestId(this.#realmRoleDescriptionInput).clear();
-    cy.get(this.#realmRoleDescriptionInput).type(description);
+    cy.findByTestId(this.#realmRoleDescriptionInput).type(description);
     return this;
   }
 

js/apps/admin-ui/src/clients/roles/CreateClientRole.tsx

@@ -1,6 +1,6 @@
 import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
 import { AlertVariant } from "@patternfly/react-core";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -54,8 +54,8 @@ export default function CreateClientRole() {
   };
 
   return (
+    <FormProvider {...form}>
       <RoleForm
-      form={form}
         onSubmit={onSubmit}
         cancelLink={toClient({
           realm,
@@ -65,5 +65,6 @@ export default function CreateClientRole() {
         role="manage-clients"
         editMode={false}
       />
+    </FormProvider>
   );
 }

js/apps/admin-ui/src/components/role-form/RoleForm.tsx

@@ -1,22 +1,14 @@
-import {
+import { ActionGroup, Button, PageSection } from "@patternfly/react-core";
-  ActionGroup,
+import { SubmitHandler, useFormContext, useWatch } from "react-hook-form";
-  Button,
-  FormGroup,
-  PageSection,
-  ValidatedOptions,
-} from "@patternfly/react-core";
-import { SubmitHandler, UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, To } from "react-router-dom";
+import { TextAreaControl, TextControl } from "ui-shared";
 
 import { FormAccess } from "../form/FormAccess";
 import { AttributeForm } from "../key-value-form/AttributeForm";
-import { KeycloakTextArea } from "../keycloak-text-area/KeycloakTextArea";
-import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../view-header/ViewHeader";
 
 export type RoleFormProps = {
-  form: UseFormReturn<AttributeForm>;
   onSubmit: SubmitHandler<AttributeForm>;
   cancelLink: To;
   role: "manage-realm" | "manage-clients";
@@ -24,18 +16,13 @@ export type RoleFormProps = {
 };
 
 export const RoleForm = ({
-  form: {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors },
-  },
   onSubmit,
   cancelLink,
   role,
   editMode,
 }: RoleFormProps) => {
   const { t } = useTranslation();
+  const { control, handleSubmit } = useFormContext<AttributeForm>();
 
   const roleName = useWatch({
     control,
@@ -53,54 +40,30 @@ export const RoleForm = ({
           role={role}
           className="pf-u-mt-lg"
         >
-          <FormGroup
+          <TextControl
+            name="name"
             label={t("roleName")}
-            fieldId="kc-name"
+            rules={{
-            validated={
+              required: !editMode ? t("required") : undefined,
-              errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              validate(value) {
-            }
-            helperTextInvalid={t("required")}
-            isRequired={!editMode}
-          >
-            <KeycloakTextInput
-              id="kc-name"
-              isReadOnly={editMode}
-              {...register("name", {
-                required: !editMode,
-                validate: (value) => {
                 if (!value?.trim()) {
-                    return t("required").toString();
+                  return t("required");
                 }
               },
-              })}
+            }}
+            readOnly={editMode}
           />
-          </FormGroup>
+          <TextAreaControl
-          <FormGroup
+            name="description"
             label={t("description")}
-            fieldId="kc-description"
+            rules={{
-            validated={
-              errors.description
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
-            helperTextInvalid={errors.description?.message}
-          >
-            <KeycloakTextArea
-              id="kc-description"
-              validated={
-                errors.description
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-              isDisabled={roleName?.includes("default-roles")}
-              {...register("description", {
               maxLength: {
                 value: 255,
                 message: t("maxLength", { length: 255 }),
               },
-              })}
+            }}
+            isDisabled={roleName?.includes("default-roles") ?? false}
           />
-          </FormGroup>
           <ActionGroup>
             <Button data-testid="save" type="submit" variant="primary">
               {t("save")}

js/apps/admin-ui/src/realm-roles/CreateRealmRole.tsx

@@ -1,6 +1,6 @@
 import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
 import { AlertVariant } from "@patternfly/react-core";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -45,12 +45,13 @@ export default function CreateRealmRole() {
   };
 
   return (
+    <FormProvider {...form}>
       <RoleForm
-      form={form}
         onSubmit={onSubmit}
         cancelLink={toRealmRoles({ realm })}
         role="manage-realm"
         editMode={false}
       />
+    </FormProvider>
   );
 }

js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx

@@ -9,7 +9,12 @@ import {
   TabTitleText,
 } from "@patternfly/react-core";
 import { useState } from "react";
-import { SubmitHandler, useForm, useWatch } from "react-hook-form";
+import {
+  FormProvider,
+  SubmitHandler,
+  useForm,
+  useWatch,
+} from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useLocation, useMatch, useNavigate } from "react-router-dom";
 
@@ -333,13 +338,13 @@ export default function RealmRoleTabs() {
         divider={false}
       />
       <PageSection variant="light" className="pf-u-p-0">
+        <FormProvider {...form}>
           <RoutableTabs isBox mountOnEnter defaultLocation={toTab("details")}>
             <Tab
               title={<TabTitleText>{t("details")}</TabTitleText>}
               {...detailsTab}
             >
               <RoleForm
-              form={form}
                 onSubmit={onSubmit}
                 role={clientRoleMatch ? "manage-clients" : "manage-realm"}
                 cancelLink={
@@ -398,6 +403,7 @@ export default function RealmRoleTabs() {
               </Tab>
             )}
           </RoutableTabs>
+        </FormProvider>
       </PageSection>
     </>
   );