Port role form to new form controls

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";
-  #realmRoleNameError = "#kc-name-helper";
-  #realmRoleDescriptionInput = "#kc-description";
+  #realmRoleNameInput = "name";
+  #realmRoleNameError = "#name-helper";
+  #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.get(this.#realmRoleDescriptionInput).type(description);
+    cy.findByTestId(this.#realmRoleDescriptionInput).clear();
+    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,16 +54,17 @@ export default function CreateClientRole() {
   };
 
   return (
-    <RoleForm
-      form={form}
-      onSubmit={onSubmit}
-      cancelLink={toClient({
-        realm,
-        clientId: clientId!,
-        tab: "roles",
-      })}
-      role="manage-clients"
-      editMode={false}
-    />
+    <FormProvider {...form}>
+      <RoleForm
+        onSubmit={onSubmit}
+        cancelLink={toClient({
+          realm,
+          clientId: clientId!,
+          tab: "roles",
+        })}
+        role="manage-clients"
+        editMode={false}
+      />
+    </FormProvider>
   );
 }

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

@@ -1,41 +1,28 @@
-import {
-  ActionGroup,
-  Button,
-  FormGroup,
-  PageSection,
-  ValidatedOptions,
-} from "@patternfly/react-core";
-import { SubmitHandler, UseFormReturn, useWatch } from "react-hook-form";
+import { ActionGroup, Button, PageSection } from "@patternfly/react-core";
+import { SubmitHandler, useFormContext, 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";
   editMode: boolean;
 };
 
 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"
-            validated={
-              errors.name ? ValidatedOptions.error : ValidatedOptions.default
-            }
-            helperTextInvalid={t("required")}
-            isRequired={!editMode}
-          >
-            <KeycloakTextInput
-              id="kc-name"
-              isReadOnly={editMode}
-              {...register("name", {
-                required: !editMode,
-                validate: (value) => {
-                  if (!value?.trim()) {
-                    return t("required").toString();
-                  }
-                },
-              })}
-            />
-          </FormGroup>
-          <FormGroup
+            rules={{
+              required: !editMode ? t("required") : undefined,
+              validate(value) {
+                if (!value?.trim()) {
+                  return t("required");
+                }
+              },
+            }}
+            readOnly={editMode}
+          />
+          <TextAreaControl
+            name="description"
             label={t("description")}
-            fieldId="kc-description"
-            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 }),
-                },
-              })}
-            />
-          </FormGroup>
+            rules={{
+              maxLength: {
+                value: 255,
+                message: t("maxLength", { length: 255 }),
+              },
+            }}
+            isDisabled={roleName?.includes("default-roles") ?? false}
+          />
           <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 (
-    <RoleForm
-      form={form}
-      onSubmit={onSubmit}
-      cancelLink={toRealmRoles({ realm })}
-      role="manage-realm"
-      editMode={false}
-    />
+    <FormProvider {...form}>
+      <RoleForm
+        onSubmit={onSubmit}
+        cancelLink={toRealmRoles({ realm })}
+        role="manage-realm"
+        editMode={false}
+      />
+    </FormProvider>
   );
 }