Changed KeyckloakTextInput to TextControl in NewRealmForm (#27596)

* Replaced KeycloakTextInput with TextControl

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

* changed Switch to DefaultSwitchControl

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

* Fix `defaultValue` behaviour for `SwitchControl`

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

* fixing test

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

* fixing test

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

---------

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

js/apps/admin-ui/cypress/support/pages/admin-ui/CreateRealmPage.ts

@@ -1,14 +1,14 @@
 export default class CreateRealmPage {
   #clearBtn = ".pf-c-file-upload__file-select button:last-child";
   #modalClearBtn = "clear-button";
-  #realmNameInput = "#kc-realm-name";
+  #realmNameInput = "realm";
   #enabledSwitch = ".pf-c-toolbar .pf-c-switch__toggle";
   #createBtn = '.pf-c-form__group:last-child button[type="submit"]';
   #cancelBtn = '.pf-c-form__group:last-child button[type="button"]';
   #codeEditor = ".pf-c-code-editor__code";
 
   fillRealmName(realmName: string) {
-    cy.get(this.#realmNameInput).clear().type(realmName);
+    cy.findByTestId(this.#realmNameInput).clear().type(realmName);
 
     return this;
   }
@@ -45,7 +45,7 @@ export default class CreateRealmPage {
   }
 
   verifyRealmNameFieldInvalid() {
-    cy.get(this.#realmNameInput)
+    cy.findByTestId(this.#realmNameInput)
       .next("div")
       .contains("Required field")
       .should("have.class", "pf-m-error");

js/apps/admin-ui/src/components/SwitchControl.tsx

@@ -1,18 +1,12 @@
-import { SwitchProps } from "@patternfly/react-core";
-import { FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
+import { FieldPath, FieldValues } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import type { SwitchControlProps } from "ui-shared";
 import { SwitchControl } from "ui-shared";
 
-type DefaultSwitchControlProps<
+export type DefaultSwitchControlProps<
   T extends FieldValues,
   P extends FieldPath<T> = FieldPath<T>,
-> = SwitchProps &
-  UseControllerProps<T, P> & {
-    name: string;
-    label?: string;
-    labelIcon?: string;
-    stringify?: boolean;
-  };
+> = Omit<SwitchControlProps<T, P>, "labelOn" | "labelOff">;
 
 export const DefaultSwitchControl = <
   T extends FieldValues,

js/apps/admin-ui/src/realm/add/NewRealmForm.tsx

@@ -1,21 +1,16 @@
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
-import {
-  ActionGroup,
-  Button,
-  FormGroup,
-  PageSection,
-  Switch,
-} from "@patternfly/react-core";
+import { ActionGroup, Button, PageSection } from "@patternfly/react-core";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { TextControl } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
+import { DefaultSwitchControl } from "../../components/SwitchControl";
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form/FormAccess";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealms } from "../../context/RealmsContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
@@ -30,13 +25,11 @@ export default function NewRealmForm() {
   const { addAlert, addError } = useAlerts();
   const [realm, setRealm] = useState<RealmRepresentation>();
 
-  const {
-    register,
-    handleSubmit,
-    control,
-    setValue,
-    formState: { errors },
-  } = useForm<RealmRepresentation>({ mode: "onChange" });
+  const form = useForm<RealmRepresentation>({
+    mode: "onChange",
+  });
+
+  const { handleSubmit, setValue } = form;
 
   const handleFileChange = (obj?: object) => {
     const defaultRealm = { id: "", realm: "", enabled: true };
@@ -64,60 +57,38 @@ export default function NewRealmForm() {
     <>
       <ViewHeader titleKey="createRealm" subKey="realmExplain" />
       <PageSection variant="light">
-        <FormAccess
-          isHorizontal
-          onSubmit={handleSubmit(save)}
-          role="view-realm"
-          isReadOnly={!whoAmI.canCreateRealm()}
-        >
-          <JsonFileUpload
-            id="kc-realm-filename"
-            allowEditingUploadedText
-            onChange={handleFileChange}
-          />
-          <FormGroup
-            label={t("realmNameField")}
-            isRequired
-            fieldId="kc-realm-name"
-            validated={errors.realm ? "error" : "default"}
-            helperTextInvalid={errors.realm?.message}
+        <FormProvider {...form}>
+          <FormAccess
+            isHorizontal
+            onSubmit={handleSubmit(save)}
+            role="view-realm"
+            isReadOnly={!whoAmI.canCreateRealm()}
           >
-            <KeycloakTextInput
-              isRequired
-              id="kc-realm-name"
-              validated={errors.realm ? "error" : "default"}
-              {...register("realm", {
-                required: { value: true, message: t("required") },
-              })}
+            <JsonFileUpload
+              id="kc-realm-filename"
+              allowEditingUploadedText
+              onChange={handleFileChange}
             />
-          </FormGroup>
-          <FormGroup label={t("enabled")} fieldId="kc-realm-enabled-switch">
-            <Controller
+            <TextControl
+              name="realm"
+              label={t("realmNameField")}
+              rules={{ required: t("required") }}
+            />
+            <DefaultSwitchControl
               name="enabled"
+              label={t("enabled")}
               defaultValue={true}
-              control={control}
-              render={({ field }) => (
-                <Switch
-                  id="kc-realm-enabled-switch"
-                  name="enabled"
-                  label={t("on")}
-                  labelOff={t("off")}
-                  isChecked={field.value}
-                  onChange={field.onChange}
-                  aria-label={t("enabled")}
-                />
-              )}
             />
-          </FormGroup>
-          <ActionGroup>
-            <Button variant="primary" type="submit">
-              {t("create")}
-            </Button>
-            <Button variant="link" onClick={() => navigate(-1)}>
-              {t("cancel")}
-            </Button>
-          </ActionGroup>
-        </FormAccess>
+            <ActionGroup>
+              <Button variant="primary" type="submit">
+                {t("create")}
+              </Button>
+              <Button variant="link" onClick={() => navigate(-1)}>
+                {t("cancel")}
+              </Button>
+            </ActionGroup>
+          </FormAccess>
+        </FormProvider>
       </PageSection>
     </>
   );

js/libs/ui-shared/src/controls/SwitchControl.tsx

@@ -12,7 +12,7 @@ import { FormLabel } from "./FormLabel";
 export type SwitchControlProps<
   T extends FieldValues,
   P extends FieldPath<T> = FieldPath<T>,
-> = Omit<SwitchProps, "name"> &
+> = Omit<SwitchProps, "name" | "defaultValue"> &
   UseControllerProps<T, P> & {
     name: string;
     label?: string;

js/libs/ui-shared/src/main.ts

@@ -1,7 +1,10 @@
 export { ContinueCancelModal } from "./continue-cancel/ContinueCancelModal";
 export { SelectControl } from "./controls/SelectControl";
 export type { SelectControlOption } from "./controls/SelectControl";
-export { SwitchControl } from "./controls/SwitchControl";
+export {
+  SwitchControl,
+  type SwitchControlProps,
+} from "./controls/SwitchControl";
 export { TextControl } from "./controls/TextControl";
 export { TextAreaControl } from "./controls/TextAreaControl";
 export { NumberControl } from "./controls/NumberControl";