From e9a1a6b9829a29a86c209b724814a4632fa94b2f Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Fri, 22 Mar 2024 16:56:17 +0100 Subject: [PATCH] use ui-shared (#27908) Signed-off-by: Erik Jan de Wit --- .../admin-ui/cypress/e2e/clients_test.spec.ts | 10 +- ...ser_fed_ldap_hardcoded_mapper_test.spec.ts | 2 +- .../manage/clients/CreateClientPage.ts | 33 ++-- .../client_details/tabs/SettingsTab.ts | 21 +-- .../src/clients/add/CapabilityConfig.tsx | 78 ++------- .../src/clients/add/GeneralSettings.tsx | 66 ++----- .../src/clients/add/LoginSettingsPanel.tsx | 161 ++++-------------- 7 files changed, 96 insertions(+), 275 deletions(-) diff --git a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts index 609fae3225..31d8b61991 100644 --- a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts @@ -320,7 +320,7 @@ describe("Clients test", () => { createClientPage .fillClientData("") - .selectClientType("openid-connect") + .selectClientType("OpenID Connect") .cancel(); cy.url().should("not.include", "/add-client"); @@ -360,7 +360,7 @@ describe("Clients test", () => { createClientPage .fillClientData("test_client") - .selectClientType("openid-connect") + .selectClientType("OpenID Connect") .continue() .back() .checkGeneralSettingsStepActive(); @@ -373,7 +373,7 @@ describe("Clients test", () => { createClientPage .fillClientData("") - .selectClientType("openid-connect") + .selectClientType("OpenID Connect") .continue() .checkClientIdRequiredMessage(); @@ -398,7 +398,7 @@ describe("Clients test", () => { commonPage.tableToolbarUtils().clickPrimaryButton(); createClientPage - .selectClientType("openid-connect") + .selectClientType("OpenID Connect") .fillClientData(itemId) .continue() .switchClientAuthentication() @@ -765,7 +765,7 @@ describe("Clients test", () => { client = "client_" + uuid(); commonPage.tableToolbarUtils().createClient(); createClientPage - .selectClientType("openid-connect") + .selectClientType("OpenID Connect") .fillClientData(client) .continue(); diff --git a/js/apps/admin-ui/cypress/e2e/user_fed_ldap_hardcoded_mapper_test.spec.ts b/js/apps/admin-ui/cypress/e2e/user_fed_ldap_hardcoded_mapper_test.spec.ts index ab736f86ab..c73d27c1d3 100644 --- a/js/apps/admin-ui/cypress/e2e/user_fed_ldap_hardcoded_mapper_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/user_fed_ldap_hardcoded_mapper_test.spec.ts @@ -127,7 +127,7 @@ describe("User Fed LDAP mapper tests", () => { sidebarPage.goToClients(); listingPage.goToCreateItem(); createClientPage - .selectClientType("openid-connect") + .selectClientType("OpenID Connect") .fillClientData(clientName) .continue() .continue() diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts index ce7b72cf11..8c42d47433 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts @@ -1,8 +1,8 @@ +import Select from "../../../../forms/Select"; import CommonPage from "../../../CommonPage"; export default class CreateClientPage extends CommonPage { - #clientTypeDrpDwn = ".pf-c-select__toggle"; - #clientTypeList = ".pf-c-select__toggle + ul"; + #clientTypeDrpDwn = "#protocol"; #clientIdInput = "#clientId"; #clientIdError = "#clientId + div"; #clientNameInput = "#name"; @@ -31,13 +31,15 @@ export default class CreateClientPage extends CommonPage { #firstWebOriginsInput = "webOrigins0"; #adminUrlInput = "adminUrl"; - #loginThemeDrpDwn = "#loginTheme"; - #loginThemeList = 'ul[aria-label="Login theme"]'; - #consentRequiredSwitch = '[for="kc-consent-switch"] > .pf-c-switch__toggle'; - #consentRequiredSwitchInput = "#kc-consent-switch"; - #displayClientOnScreenSwitch = '[for="kc-display-on-client-switch"]'; - #displayClientOnScreenSwitchInput = "#kc-display-on-client-switch"; - #clientConsentScreenText = "#kc-consent-screen-text"; + #loginThemeDrpDwn = "#login_theme"; + #loginThemeList = 'ul[class="pf-c-select__menu"]'; + #consentRequiredSwitch = '[for="consentRequired"] .pf-c-switch__toggle'; + #consentRequiredSwitchInput = "#consentRequired"; + #displayClientOnScreenSwitch = + '[for="attributes.display🍺on🍺consent🍺screen"].pf-c-switch'; + #displayClientOnScreenSwitchInput = + "#attributes\\.display🍺on🍺consent🍺screen"; + #clientConsentScreenText = "attributes.consent🍺screen🍺text"; #frontChannelLogoutSwitch = '[for="kc-frontchannelLogout-switch"] > .pf-c-switch__toggle'; @@ -60,8 +62,7 @@ export default class CreateClientPage extends CommonPage { //#region General Settings selectClientType(clientType: string) { - cy.get(this.#clientTypeDrpDwn).click(); - cy.get(this.#clientTypeList).findByTestId(`option-${clientType}`).click(); + Select.selectItem(cy.get(this.#clientTypeDrpDwn), clientType); return this; } @@ -238,11 +239,11 @@ export default class CreateClientPage extends CommonPage { } checkLoginSettingsElements() { - cy.get(this.#clientConsentScreenText).scrollIntoView(); + cy.findByTestId(this.#clientConsentScreenText).scrollIntoView(); cy.get(this.#loginThemeDrpDwn).should("not.be.disabled"); cy.get(this.#consentRequiredSwitchInput).should("not.be.disabled"); cy.get(this.#displayClientOnScreenSwitchInput).should("be.disabled"); - cy.get(this.#clientConsentScreenText).should("be.disabled"); + cy.findByTestId(this.#clientConsentScreenText).should("be.disabled"); cy.get(this.#loginThemeDrpDwn).click(); cy.get(this.#loginThemeList).findByText("base").should("exist"); @@ -251,13 +252,13 @@ export default class CreateClientPage extends CommonPage { cy.get(this.#consentRequiredSwitch).click(); cy.get(this.#displayClientOnScreenSwitchInput).should("not.be.disabled"); - cy.get(this.#clientConsentScreenText).should("be.disabled"); + cy.findByTestId(this.#clientConsentScreenText).should("be.disabled"); cy.get(this.#displayClientOnScreenSwitch).click(); - cy.get(this.#clientConsentScreenText).should("not.be.disabled"); + cy.findByTestId(this.#clientConsentScreenText).should("not.be.disabled"); cy.get(this.#displayClientOnScreenSwitch).click(); - cy.get(this.#clientConsentScreenText).should("be.disabled"); + cy.findByTestId(this.#clientConsentScreenText).should("be.disabled"); cy.get(this.#consentRequiredSwitch).click(); cy.get(this.#displayClientOnScreenSwitchInput).should("be.disabled"); diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts index 8b20283f11..ae2e65711f 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts @@ -26,10 +26,10 @@ export default class SettingsTab extends PageObject { "#saml🍺server🍺signature🍺keyinfo🍺xmlSigKeyInfoKeyNameTransformer"; #canonicalization = "#saml_signature_canonicalization_method"; - #loginTheme = "#loginTheme"; - #consentSwitch = "#kc-consent-switch"; - #displayClientSwitch = "#kc-display-on-client-switch"; - #consentScreenText = "#kc-consent-screen-text"; + #loginTheme = "#login_theme"; + #consentSwitch = "#consentRequired"; + #displayClientSwitch = "attributes.display🍺on🍺consent🍺screen"; + #consentScreenText = "attributes.consent🍺screen🍺text"; #saveBtn = "settings-save"; #revertBtn = "settingsRevert"; @@ -124,7 +124,7 @@ export default class SettingsTab extends PageObject { } public clickDisplayClientSwitch() { - cy.get(this.#displayClientSwitch).parent().click(); + cy.findByTestId(this.#displayClientSwitch).parent().click(); return this; } @@ -202,13 +202,14 @@ export default class SettingsTab extends PageObject { } public assertLoginSettings() { - cy.get(this.#displayClientSwitch).should("be.disabled"); - cy.get(this.#consentScreenText).should("be.disabled"); + cy.findByTestId(this.#displayClientSwitch).should("be.disabled"); + cy.findByTestId(this.#consentScreenText).should("be.disabled"); this.clickConsentSwitch(); - cy.get(this.#displayClientSwitch).should("not.be.disabled"); + cy.findByTestId(this.#displayClientSwitch).should("not.be.disabled"); this.clickDisplayClientSwitch(); - cy.get(this.#consentScreenText).should("not.be.disabled"); - cy.get(this.#consentScreenText).click().type("Consent Screen Text"); + cy.findByTestId(this.#consentScreenText).should("not.be.disabled"); + cy.findByTestId(this.#consentScreenText).click(); + cy.findByTestId(this.#consentScreenText).type("Consent Screen Text"); return this; } diff --git a/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx b/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx index 936de3224a..9e2e676631 100644 --- a/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx +++ b/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx @@ -1,3 +1,4 @@ +import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation"; import { Checkbox, FormGroup, @@ -8,13 +9,12 @@ import { } from "@patternfly/react-core"; import { Controller, useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; - -import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation"; -import { FormAccess } from "../../components/form/FormAccess"; import { HelpItem } from "ui-shared"; +import { DefaultSwitchControl } from "../../components/SwitchControl"; +import { FormAccess } from "../../components/form/FormAccess"; import { convertAttributeNameToForm } from "../../util"; -import { FormFields } from "../ClientDetails"; import useIsFeatureEnabled, { Feature } from "../../utils/useIsFeatureEnabled"; +import { FormFields } from "../ClientDetails"; type CapabilityConfigProps = { unWrap?: boolean; @@ -276,66 +276,20 @@ export const CapabilityConfig = ({ )} {protocol === "saml" && ( <> - - } + ( + "attributes.saml.encrypt", + )} label={t("encryptAssertions")} - fieldId="kc-encrypt" - hasNoPaddingTop - > - ( - "attributes.saml.encrypt", - )} - control={control} - defaultValue={false} - render={({ field }) => ( - - )} - /> - - - } + labelIcon={t("encryptAssertionsHelp")} + /> + ( + "attributes.saml.client.signature", + )} label={t("clientSignature")} - fieldId="kc-client-signature" - hasNoPaddingTop - > - ( - "attributes.saml.client.signature", - )} - control={control} - defaultValue={false} - render={({ field }) => ( - - )} - /> - + labelIcon={t("clientSignatureHelp")} + /> )} diff --git a/js/apps/admin-ui/src/clients/add/GeneralSettings.tsx b/js/apps/admin-ui/src/clients/add/GeneralSettings.tsx index ec6455c187..7bdb7b5754 100644 --- a/js/apps/admin-ui/src/clients/add/GeneralSettings.tsx +++ b/js/apps/admin-ui/src/clients/add/GeneralSettings.tsx @@ -1,70 +1,28 @@ -import { - FormGroup, - Select, - SelectOption, - SelectVariant, -} from "@patternfly/react-core"; -import { useState } from "react"; -import { Controller, useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; - +import { SelectControl } from "ui-shared"; import { FormAccess } from "../../components/form/FormAccess"; -import { HelpItem } from "ui-shared"; import { useLoginProviders } from "../../context/server-info/ServerInfoProvider"; import { ClientDescription } from "../ClientDescription"; import { getProtocolName } from "../utils"; export const GeneralSettings = () => { const { t } = useTranslation(); - const { - control, - formState: { errors }, - } = useFormContext(); - const providers = useLoginProviders(); - const [open, isOpen] = useState(false); return ( - - } - > - ( - - )} - /> - + labelIcon={t("clientTypeHelp")} + controller={{ + defaultValue: "", + }} + options={providers.map((option) => ({ + key: option, + value: getProtocolName(t, option), + }))} + /> ); diff --git a/js/apps/admin-ui/src/clients/add/LoginSettingsPanel.tsx b/js/apps/admin-ui/src/clients/add/LoginSettingsPanel.tsx index 5d85130c4d..8be7141745 100644 --- a/js/apps/admin-ui/src/clients/add/LoginSettingsPanel.tsx +++ b/js/apps/admin-ui/src/clients/add/LoginSettingsPanel.tsx @@ -1,26 +1,16 @@ -import { - FormGroup, - Select, - SelectOption, - SelectVariant, - Switch, -} from "@patternfly/react-core"; -import { useState } from "react"; -import { Controller, useFormContext } from "react-hook-form"; +import { useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; - +import { SelectControl, TextAreaControl } from "ui-shared"; +import { DefaultSwitchControl } from "../../components/SwitchControl"; import { FormAccess } from "../../components/form/FormAccess"; -import { HelpItem } from "ui-shared"; -import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea"; import { useServerInfo } from "../../context/server-info/ServerInfoProvider"; import { convertAttributeNameToForm } from "../../util"; import { FormFields } from "../ClientDetails"; export const LoginSettingsPanel = ({ access }: { access?: boolean }) => { const { t } = useTranslation(); - const { register, control, watch } = useFormContext(); + const { watch } = useFormContext(); - const [loginThemeOpen, setLoginThemeOpen] = useState(false); const loginThemes = useServerInfo().themes!["login"]; const consentRequired = watch("consentRequired"); const displayOnConsentScreen: string = watch( @@ -31,123 +21,40 @@ export const LoginSettingsPanel = ({ access }: { access?: boolean }) => { return ( - - } - fieldId="loginTheme" - > - ( - - )} - /> - - ({ key: name, value: name })), + ]} + /> + - } - fieldId="kc-consent" - hasNoPaddingTop - > - ( - - )} - /> - - + ( + "attributes.display.on.consent.screen", + )} label={t("displayOnClient")} - labelIcon={ - - } - fieldId="kc-display-on-client" - hasNoPaddingTop - > - ( - "attributes.display.on.consent.screen", - )} - defaultValue={false} - control={control} - render={({ field }) => ( - field.onChange("" + value)} - isDisabled={!consentRequired} - aria-label={t("displayOnClient")} - /> - )} - /> - - + ( + "attributes.consent.screen.text", + )} label={t("consentScreenText")} - labelIcon={ - - } - fieldId="kc-consent-screen-text" - > - ( - "attributes.consent.screen.text", - ), - )} - isDisabled={!(consentRequired && displayOnConsentScreen === "true")} - /> - + labelIcon={t("consentScreenTextHelp")} + isDisabled={!(consentRequired && displayOnConsentScreen === "true")} + /> ); };