Migrated to ui-shared clients/advanced (#27764)

* migrated to uishared

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

* feedback

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

* fixed SwitchControl

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

* fixed tests

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

* fixed tests

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

---------

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/clients/client_details/tabs/AdvancedTab.ts

@@ -10,7 +10,7 @@ export default class AdvancedTab extends PageObject {
     '[aria-label="Registered cluster nodes"] [aria-label="Actions"]';
   #deleteClusterNodeBtn =
     '[aria-label="Registered cluster nodes"] [role="menu"] button';
-  #nodeHostInput = "#nodeHost";
+  #nodeHostInput = "node";
   #addNodeConfirmBtn = "#add-node-confirm";
 
   #accessTokenSignatureAlgorithmInput = "#accessTokenSignatureAlgorithm";
@@ -30,10 +30,11 @@ export default class AdvancedTab extends PageObject {
     "#useRefreshTokenForClientCredentialsGrant";
   #useLowerCaseBearerTypeSwitch = "#useLowerCaseBearerType";
 
-  #oAuthMutualSwitch = "#oAuthMutual-switch";
+  #oAuthMutualSwitch =
+    "attributes.tls🍺client🍺certificate🍺bound🍺access🍺tokens";
   #keyForCodeExchangeInput = "#keyForCodeExchange";
   #pushedAuthorizationRequestRequiredSwitch =
-    "#pushedAuthorizationRequestRequired";
+    "attributes.require🍺pushed🍺authorization🍺requests";
 
   #browserFlowInput = "#browserFlow";
   #directGrantInput = "#directGrant";
@@ -73,7 +74,7 @@ export default class AdvancedTab extends PageObject {
   }
 
   fillHost(host: string) {
-    cy.get(this.#nodeHostInput).type(host);
+    cy.findByTestId(this.#nodeHostInput).type(host);
     return this;
   }
 
@@ -173,24 +174,26 @@ export default class AdvancedTab extends PageObject {
   }
 
   clickAdvancedSwitches() {
-    cy.get(this.#oAuthMutualSwitch).parent().click();
-    cy.get(this.#pushedAuthorizationRequestRequiredSwitch).parent().click();
+    cy.findByTestId(this.#oAuthMutualSwitch).parent().click();
+    cy.findByTestId(this.#pushedAuthorizationRequestRequiredSwitch)
+      .parent()
+      .click();
     return this;
   }
 
   checkAdvancedSwitchesOn() {
-    cy.get(this.#oAuthMutualSwitch).scrollIntoView();
-    this.assertSwitchStateOn(cy.get(this.#oAuthMutualSwitch));
+    cy.findByTestId(this.#oAuthMutualSwitch).scrollIntoView();
+    this.assertSwitchStateOn(cy.findByTestId(this.#oAuthMutualSwitch));
     this.assertSwitchStateOn(
-      cy.get(this.#pushedAuthorizationRequestRequiredSwitch),
+      cy.findByTestId(this.#pushedAuthorizationRequestRequiredSwitch),
     );
     return this;
   }
 
   checkAdvancedSwitchesOff() {
-    this.assertSwitchStateOff(cy.get(this.#oAuthMutualSwitch));
+    this.assertSwitchStateOff(cy.findByTestId(this.#oAuthMutualSwitch));
     this.assertSwitchStateOff(
-      cy.get(this.#pushedAuthorizationRequestRequiredSwitch),
+      cy.findByTestId(this.#pushedAuthorizationRequestRequiredSwitch),
     );
     return this;
   }

js/apps/admin-ui/src/clients/advanced/AddHostDialog.tsx

@@ -3,15 +3,13 @@ import {
   Button,
   ButtonVariant,
   Form,
-  FormGroup,
   Modal,
 } 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 FormFields = {
   node: string;
@@ -31,11 +29,11 @@ export const AddHostDialog = ({
   onClose,
 }: AddHostDialogProps) => {
   const { t } = useTranslation();
+  const form = useForm<FormFields>();
   const {
-    register,
     handleSubmit,
     formState: { isDirty, isValid },
-  } = useForm<FormFields>();
+  } = form;
   const { addAlert, addError } = useAlerts();
 
   async function onSubmit({ node }: FormFields) {
@@ -79,15 +77,17 @@ export const AddHostDialog = ({
         </Button>,
       ]}
     >
+      <FormProvider {...form}>
         <Form id="add-host-form" onSubmit={handleSubmit(onSubmit)} isHorizontal>
-        <FormGroup label={t("nodeHost")} fieldId="nodeHost" isRequired>
-          <KeycloakTextInput
-            id="nodeHost"
-            {...register("node", { required: true })}
-            isRequired
+          <TextControl
+            name="node"
+            label={t("nodeHost")}
+            rules={{
+              required: t("required"),
+            }}
           />
-        </FormGroup>
         </Form>
+      </FormProvider>
     </Modal>
   );
 };

js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx

@@ -6,15 +6,13 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
 import { FormAccess } from "../../components/form/FormAccess";
 import { HelpItem } from "ui-shared";
-
+import { DefaultSwitchControl } from "../../components/SwitchControl";
 import { adminClient } from "../../admin-client";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
@@ -99,7 +97,6 @@ export const AdvancedSettings = ({
             defaultValue={realm?.accessTokenLifespan}
             units={["minute", "day", "hour"]}
           />
-
           <TokenLifespan
             id="clientSessionIdle"
             name={convertAttributeNameToForm(
@@ -108,7 +105,6 @@ export const AdvancedSettings = ({
             defaultValue={realm?.clientSessionIdleTimeout}
             units={["minute", "day", "hour"]}
           />
-
           <TokenLifespan
             id="clientSessionMax"
             name={convertAttributeNameToForm(
@@ -117,7 +113,6 @@ export const AdvancedSettings = ({
             defaultValue={realm?.clientSessionMaxLifespan}
             units={["minute", "day", "hour"]}
           />
-
           <TokenLifespan
             id="clientOfflineSessionIdle"
             name={convertAttributeNameToForm(
@@ -126,67 +121,24 @@ export const AdvancedSettings = ({
             defaultValue={realm?.offlineSessionIdleTimeout}
             units={["minute", "day", "hour"]}
           />
-
-          <FormGroup
-            label={t("oAuthMutual")}
-            fieldId="oAuthMutual"
-            hasNoPaddingTop
-            labelIcon={
-              <HelpItem
-                helpText={t("oAuthMutualHelp")}
-                fieldLabelId="oAuthMutual"
-              />
-            }
-          >
-            <Controller
+          <DefaultSwitchControl
             name={convertAttributeNameToForm<FormFields>(
               "attributes.tls.client.certificate.bound.access.tokens",
             )}
-              defaultValue={false}
-              control={control}
-              render={({ field }) => (
-                <Switch
-                  id="oAuthMutual-switch"
-                  label={t("on")}
-                  labelOff={t("off")}
-                  isChecked={field.value === "true"}
-                  onChange={(value) => field.onChange("" + value)}
-                  aria-label={t("oAuthMutual")}
+            label={t("oAuthMutual")}
+            labelIcon={t("oAuthMutualHelp")}
+            stringify
           />
-              )}
-            />
-          </FormGroup>
           {isDPoPEnabled && (
-            <FormGroup
-              label={t("oAuthDPoP")}
-              fieldId="oAuthDPoP"
-              hasNoPaddingTop
-              labelIcon={
-                <HelpItem
-                  helpText={t("oAuthDPoPHelp")}
-                  fieldLabelId="oAuthDPoP"
-                />
-              }
-            >
-              <Controller
+            <DefaultSwitchControl
               name={convertAttributeNameToForm<FormFields>(
                 "attributes.dpop.bound.access.tokens",
               )}
-                defaultValue={false}
-                control={control}
-                render={({ field }) => (
-                  <Switch
-                    id="oAuthDPoP-switch"
-                    label={t("on")}
-                    labelOff={t("off")}
-                    isChecked={field.value === "true"}
-                    onChange={(value) => field.onChange("" + value)}
-                    aria-label={t("oAuthDPoP")}
+              label={t("oAuthDPoP")}
+              labelIcon={t("oAuthDPoPHelp")}
+              stringify
             />
           )}
-              />
-            </FormGroup>
-          )}
           <FormGroup
             label={t("keyForCodeExchange")}
             fieldId="keyForCodeExchange"
@@ -225,62 +177,22 @@ export const AdvancedSettings = ({
               )}
             />
           </FormGroup>
-          <FormGroup
-            label={t("pushedAuthorizationRequestRequired")}
-            fieldId="pushedAuthorizationRequestRequired"
-            labelIcon={
-              <HelpItem
-                helpText={t("pushedAuthorizationRequestRequiredHelp")}
-                fieldLabelId="pushedAuthorizationRequestRequired"
-              />
-            }
-          >
-            <Controller
+          <DefaultSwitchControl
             name={convertAttributeNameToForm<FormFields>(
               "attributes.require.pushed.authorization.requests",
             )}
-              defaultValue="false"
-              control={control}
-              render={({ field }) => (
-                <Switch
-                  id="pushedAuthorizationRequestRequired"
-                  label={t("on")}
-                  labelOff={t("off")}
-                  isChecked={field.value === "true"}
-                  onChange={(value) => field.onChange(value.toString())}
-                  aria-label={t("pushedAuthorizationRequestRequired")}
+            label={t("pushedAuthorizationRequestRequired")}
+            labelIcon={t("pushedAuthorizationRequestRequiredHelp")}
+            stringify
           />
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("lightweightAccessToken")}
-            fieldId="lightweightAccessToken"
-            labelIcon={
-              <HelpItem
-                helpText={t("lightweightAccessTokenHelp")}
-                fieldLabelId="lightweightAccessToken"
-              />
-            }
-          >
-            <Controller
+          <DefaultSwitchControl
             name={convertAttributeNameToForm<FormFields>(
               "attributes.client.use.lightweight.access.token.enabled",
             )}
-              defaultValue="false"
-              control={control}
-              render={({ field }) => (
-                <Switch
-                  id="lightweightAccessToken"
-                  label={t("on")}
-                  labelOff={t("off")}
-                  isChecked={field.value === "true"}
-                  onChange={(value) => field.onChange(value.toString())}
-                  aria-label={t("lightweightAccessToken")}
+            label={t("lightweightAccessToken")}
+            labelIcon={t("lightweightAccessTokenHelp")}
+            stringify
           />
-              )}
-            />
-          </FormGroup>
           <FormGroup
             label={t("acrToLoAMapping")}
             fieldId="acrToLoAMapping"

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

@@ -28,7 +28,8 @@ export const SwitchControl = <
 >(
   props: SwitchControlProps<T, P>,
 ) => {
-  const defaultValue = props.defaultValue ?? (false as PathValue<T, P>);
+  const fallbackValue = props.stringify ? "false" : false;
+  const defaultValue = props.defaultValue ?? (fallbackValue as PathValue<T, P>);
   const { control } = useFormContext();
   return (
     <FormLabel