replaced KeycloakTextInput with TextControl (#27711)

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/GroupModal.ts

@@ -2,7 +2,7 @@ import ModalUtils from "../../../../util/ModalUtils";
 
 export default class GroupModal extends ModalUtils {
   #createGroupModalTitle = "Create a group";
-  #groupNameInput = "groupNameInput";
+  #groupNameInput = "name";
   #createGroupBnt = "createGroup";
   #renameButton = "renameGroup";
 

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/group_details/GroupDetailPage.ts

@@ -20,7 +20,7 @@ export default class GroupDetailPage extends GroupPage {
   #actionDrpDwnItemRenameGroup = "renameGroupAction";
   #actionDrpDwnItemDeleteGroup = "deleteGroup";
   #headerGroupName = ".pf-l-level.pf-m-gutter";
-  #renameGroupModalGroupNameInput = "groupNameInput";
+  #renameGroupModalGroupNameInput = "name";
   #renameGroupModalRenameBtn = "renameGroup";
   #permissionSwitch = "permissionSwitch";
 

js/apps/admin-ui/src/groups/GroupsModal.tsx

@@ -4,17 +4,14 @@ import {
   Button,
   ButtonVariant,
   Form,
-  FormGroup,
   Modal,
   ModalVariant,
-  ValidatedOptions,
 } from "@patternfly/react-core";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
+import { TextControl } from "ui-shared";
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
 type GroupsModalProps = {
   id?: string;
@@ -31,13 +28,11 @@ export const GroupsModal = ({
 }: GroupsModalProps) => {
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
+
+  const form = useForm({
     defaultValues: { name: rename?.name },
   });
+  const { handleSubmit } = form;
 
   const submitForm = async (group: GroupRepresentation) => {
     group.name = group.name?.trim();
@@ -96,28 +91,16 @@ export const GroupsModal = ({
         </Button>,
       ]}
     >
+      <FormProvider {...form}>
         <Form id="group-form" isHorizontal onSubmit={handleSubmit(submitForm)}>
-        <FormGroup
-          name="create-modal-group"
+          <TextControl
+            name="name"
             label={t("name")}
-          fieldId="create-group-name"
-          helperTextInvalid={t("required")}
-          validated={
-            errors.name ? ValidatedOptions.error : ValidatedOptions.default
-          }
-          isRequired
-        >
-          <KeycloakTextInput
-            data-testid="groupNameInput"
+            rules={{ required: t("required") }}
             autoFocus
-            id="create-group-name"
-            validated={
-              errors.name ? ValidatedOptions.error : ValidatedOptions.default
-            }
-            {...register("name", { required: true })}
           />
-        </FormGroup>
         </Form>
+      </FormProvider>
     </Modal>
   );
 };