From 838d017d14f582db72c3208383b66d0861d50333 Mon Sep 17 00:00:00 2001 From: agagancarczyk <4890675+agagancarczyk@users.noreply.github.com> Date: Mon, 11 Mar 2024 14:01:15 +0000 Subject: [PATCH] Migrated to ui-shared clients/advanced (#27764) * migrated to uishared Signed-off-by: Agnieszka Gancarczyk * feedback Signed-off-by: Agnieszka Gancarczyk * fixed SwitchControl Signed-off-by: Agnieszka Gancarczyk * fixed tests Signed-off-by: Agnieszka Gancarczyk * fixed tests Signed-off-by: Agnieszka Gancarczyk --------- Signed-off-by: Agnieszka Gancarczyk Co-authored-by: Agnieszka Gancarczyk --- .../client_details/tabs/AdvancedTab.ts | 25 +-- .../src/clients/advanced/AddHostDialog.tsx | 28 ++-- .../src/clients/advanced/AdvancedSettings.tsx | 146 ++++-------------- .../ui-shared/src/controls/SwitchControl.tsx | 3 +- 4 files changed, 59 insertions(+), 143 deletions(-) diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts index 7ad73b2cfc..3fa57e7f13 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts +++ b/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; } diff --git a/js/apps/admin-ui/src/clients/advanced/AddHostDialog.tsx b/js/apps/admin-ui/src/clients/advanced/AddHostDialog.tsx index a164da1d7b..b9a4de7cc4 100644 --- a/js/apps/admin-ui/src/clients/advanced/AddHostDialog.tsx +++ b/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(); const { - register, handleSubmit, formState: { isDirty, isValid }, - } = useForm(); + } = form; const { addAlert, addError } = useAlerts(); async function onSubmit({ node }: FormFields) { @@ -79,15 +77,17 @@ export const AddHostDialog = ({ , ]} > -
- - + + - -
+ + ); }; diff --git a/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx b/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx index 71f0424093..bca33c9eb9 100644 --- a/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx +++ b/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"]} /> - - - - - ( + "attributes.tls.client.certificate.bound.access.tokens", + )} label={t("oAuthMutual")} - fieldId="oAuthMutual" - hasNoPaddingTop - labelIcon={ - - } - > - ( - "attributes.tls.client.certificate.bound.access.tokens", - )} - defaultValue={false} - control={control} - render={({ field }) => ( - field.onChange("" + value)} - aria-label={t("oAuthMutual")} - /> - )} - /> - + labelIcon={t("oAuthMutualHelp")} + stringify + /> {isDPoPEnabled && ( - ( + "attributes.dpop.bound.access.tokens", + )} label={t("oAuthDPoP")} - fieldId="oAuthDPoP" - hasNoPaddingTop - labelIcon={ - - } - > - ( - "attributes.dpop.bound.access.tokens", - )} - defaultValue={false} - control={control} - render={({ field }) => ( - field.onChange("" + value)} - aria-label={t("oAuthDPoP")} - /> - )} - /> - + labelIcon={t("oAuthDPoPHelp")} + stringify + /> )} - ( + "attributes.require.pushed.authorization.requests", + )} label={t("pushedAuthorizationRequestRequired")} - fieldId="pushedAuthorizationRequestRequired" - labelIcon={ - - } - > - ( - "attributes.require.pushed.authorization.requests", - )} - defaultValue="false" - control={control} - render={({ field }) => ( - field.onChange(value.toString())} - aria-label={t("pushedAuthorizationRequestRequired")} - /> - )} - /> - - + ( + "attributes.client.use.lightweight.access.token.enabled", + )} label={t("lightweightAccessToken")} - fieldId="lightweightAccessToken" - labelIcon={ - - } - > - ( - "attributes.client.use.lightweight.access.token.enabled", - )} - defaultValue="false" - control={control} - render={({ field }) => ( - field.onChange(value.toString())} - aria-label={t("lightweightAccessToken")} - /> - )} - /> - + labelIcon={t("lightweightAccessTokenHelp")} + stringify + /> ( props: SwitchControlProps, ) => { - const defaultValue = props.defaultValue ?? (false as PathValue); + const fallbackValue = props.stringify ? "false" : false; + const defaultValue = props.defaultValue ?? (fallbackValue as PathValue); const { control } = useFormContext(); return (