From bc82e7eb3c02bbe2dfdf631cde8ddbeb145028ab Mon Sep 17 00:00:00 2001 From: Mark Franceschelli <39063664+mfrances17@users.noreply.github.com> Date: Wed, 22 May 2024 08:18:28 -0400 Subject: [PATCH] Fix deprecated wizards (#29453) * updated wizards Signed-off-by: mfrances * fix broken tests Signed-off-by: mfrances --------- Signed-off-by: mfrances --- .../admin-ui/cypress/e2e/clients_test.spec.ts | 4 +- .../manage/clients/CreateClientPage.ts | 16 +- .../src/clients/add/NewClientForm.tsx | 166 +++++-------- .../UserFederationKerberosWizard.tsx | 63 +++-- .../UserFederationLdapWizard.tsx | 219 +++++++----------- 5 files changed, 199 insertions(+), 269 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 153b027737..5c1d1fcb97 100644 --- a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts @@ -1255,10 +1255,10 @@ describe("Clients test", () => { createClientPage.fillClientData(clientId); cy.checkA11y(); - cy.findByTestId("next").click(); + createClientPage.continue(); cy.checkA11y(); - cy.findByTestId("next").click(); + createClientPage.continue(); cy.checkA11y(); }); 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 938457d2c0..558610cb8a 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 @@ -55,10 +55,10 @@ export default class CreateClientPage extends CommonPage { #actionDrpDwn = "action-dropdown"; #deleteClientBtn = "delete-client"; - #saveBtn = "save"; - #continueBtn = "next"; - #backBtn = "back"; - #cancelBtn = "cancel"; + #saveBtn = "Save"; + #continueBtn = "Next"; + #backBtn = "Back"; + #cancelBtn = "Cancel"; //#region General Settings selectClientType(clientType: string) { @@ -174,25 +174,25 @@ export default class CreateClientPage extends CommonPage { //#endregion save() { - cy.findByTestId(this.#saveBtn).click(); + cy.contains("button", this.#saveBtn).click(); return this; } continue() { - cy.findByTestId(this.#continueBtn).click(); + cy.contains("button", this.#continueBtn).click(); return this; } back() { - cy.findByTestId(this.#backBtn).click(); + cy.contains("button", this.#backBtn).click(); return this; } cancel() { - cy.findByTestId(this.#cancelBtn).click(); + cy.contains("button", this.#cancelBtn).click(); return this; } diff --git a/js/apps/admin-ui/src/clients/add/NewClientForm.tsx b/js/apps/admin-ui/src/clients/add/NewClientForm.tsx index 6745de4407..8ad92a4d07 100644 --- a/js/apps/admin-ui/src/clients/add/NewClientForm.tsx +++ b/js/apps/admin-ui/src/clients/add/NewClientForm.tsx @@ -1,10 +1,11 @@ -import { AlertVariant, Button, PageSection } from "@patternfly/react-core"; import { + AlertVariant, + PageSection, + useWizardContext, Wizard, - WizardContextConsumer, WizardFooter, -} from "@patternfly/react-core/deprecated"; -import { useState } from "react"; + WizardStep, +} from "@patternfly/react-core"; import { FormProvider, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; @@ -21,6 +22,32 @@ import { CapabilityConfig } from "./CapabilityConfig"; import { GeneralSettings } from "./GeneralSettings"; import { LoginSettings } from "./LoginSettings"; +const NewClientFooter = (newClientForm: any) => { + const { t } = useTranslation(); + const { trigger } = newClientForm; + const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext(); + + const forward = async (onNext: () => void) => { + if (!(await trigger())) { + return; + } + onNext?.(); + }; + + return ( + forward(goToNextStep)} + onBack={goToPrevStep} + onClose={close} + isBackDisabled={activeStep.index === 1} + backButtonText={t("back")} + nextButtonText={t("next")} + cancelButtonText={t("cancel")} + /> + ); +}; + export default function NewClientForm() { const { adminClient } = useAdminClient(); @@ -28,8 +55,6 @@ export default function NewClientForm() { const { realm } = useRealm(); const navigate = useNavigate(); - const [step, setStep] = useState(0); - const { addAlert, addError } = useAlerts(); const form = useForm({ defaultValues: { @@ -49,7 +74,7 @@ export default function NewClientForm() { }, }, }); - const { getValues, watch, trigger } = form; + const { getValues, watch } = form; const protocol = watch("protocol"); const save = async () => { @@ -66,33 +91,6 @@ export default function NewClientForm() { } }; - const forward = async (onNext?: () => void) => { - if (!(await trigger())) { - return; - } - if (!isFinalStep()) { - setStep(step + 1); - } - onNext?.(); - }; - - const isFinalStep = () => - protocol === "openid-connect" ? step === 2 : step === 1; - - const back = () => { - setStep(step - 1); - }; - - const onGoToStep = (newStep: { id?: string | number }) => { - if (newStep.id === "generalSettings") { - setStep(0); - } else if (newStep.id === "capabilityConfig") { - setStep(1); - } else { - setStep(2); - } - }; - const title = t("createClient"); return ( <> @@ -102,75 +100,39 @@ export default function NewClientForm() { navigate(toClients({ realm }))} navAriaLabel={`${title} steps`} - mainAriaLabel={`${title} content`} - steps={[ - { - id: "generalSettings", - name: t("generalSettings"), - component: , - }, - ...(protocol !== "saml" - ? [ - { - id: "capabilityConfig", - name: t("capabilityConfig"), - component: , - canJumpTo: step >= 1, - }, - ] - : []), - { - id: "loginSettings", - name: t("loginSettings"), - component: ( - - - - ), - canJumpTo: step >= 1, - }, - ]} - footer={ - - - {({ activeStep, onNext, onBack, onClose }) => ( - <> - - - - - )} - - - } onSave={save} - onGoToStep={onGoToStep} - /> + footer={} + > + + + + + + + + + + + + diff --git a/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx b/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx index 721a6c27f5..733e1a341f 100644 --- a/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx +++ b/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx @@ -1,4 +1,9 @@ -import { Wizard } from "@patternfly/react-core/deprecated"; +import { + useWizardContext, + Wizard, + WizardFooter, + WizardStep, +} from "@patternfly/react-core/"; import { useTranslation } from "react-i18next"; import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired"; @@ -6,36 +11,50 @@ import { SettingsCache } from "./shared/SettingsCache"; import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation"; import { useForm } from "react-hook-form"; +const UserFedKerberosFooter = () => { + const { t } = useTranslation(); + const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext(); + return ( + + ); +}; + export const UserFederationKerberosWizard = () => { const { t } = useTranslation(); const form = useForm({ mode: "onChange" }); - const steps = [ - { - name: t("requiredSettings"), - component: ( + return ( + }> + - ), - }, - { - name: t("cacheSettings"), - component: ( + + - ), - nextButtonText: t("finish"), // TODO: needs to disable until cache policy is valid - }, - ]; - - return ( - + + ); }; diff --git a/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx b/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx index fe235c306f..5db3120295 100644 --- a/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx +++ b/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx @@ -1,10 +1,12 @@ import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation"; -import { Button } from "@patternfly/react-core"; import { + Button, + useWizardContext, Wizard, - WizardContextConsumer, WizardFooter, -} from "@patternfly/react-core/deprecated"; + WizardFooterWrapper, + WizardStep, +} from "@patternfly/react-core"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; @@ -17,173 +19,120 @@ import { LdapSettingsSearching } from "./ldap/LdapSettingsSearching"; import { LdapSettingsSynchronization } from "./ldap/LdapSettingsSynchronization"; import { SettingsCache } from "./shared/SettingsCache"; +const UserFedLdapFooter = () => { + const { t } = useTranslation(); + const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext(); + return ( + + ); +}; +const SkipCustomizationFooter = () => { + const { goToNextStep, goToPrevStep, close } = useWizardContext(); + const { t } = useTranslation(); + return ( + + + + {/* TODO: validate last step and finish */} + + + + ); +}; export const UserFederationLdapWizard = () => { const form = useForm(); const { t } = useTranslation(); const isFeatureEnabled = useIsFeatureEnabled(); - const steps = [ - { - name: t("requiredSettings"), - id: "ldapRequiredSettingsStep", - component: ( + return ( + }> + - ), - }, - { - name: t("connectionAndAuthenticationSettings"), - id: "ldapConnectionSettingsStep", - component: ( + + - ), - }, - { - name: t("ldapSearchingAndUpdatingSettings"), - id: "ldapSearchingSettingsStep", - component: ( + + - ), - }, - { - name: t("synchronizationSettings"), - id: "ldapSynchronizationSettingsStep", - component: ( + + } + > - ), - }, - { - name: t("kerberosIntegration"), - id: "ldapKerberosIntegrationSettingsStep", - component: ( + + } + > - ), - isDisabled: !isFeatureEnabled(Feature.Kerberos), - }, - { - name: t("cacheSettings"), - id: "ldapCacheSettingsStep", - component: ( + + } + > - ), - }, - { - name: t("advancedSettings"), - id: "ldapAdvancedSettingsStep", - component: ( + + - ), - }, - ]; - - const footer = ( - - - {({ activeStep, onNext, onBack, onClose }) => { - // First step buttons - if (activeStep.id === "ldapRequiredSettingsStep") { - return ( - <> - - - - - ); - } - // Other required step buttons - else if ( - activeStep.id === "ldapConnectionSettingsStep" || - activeStep.id === "ldapSearchingSettingsStep" - ) { - return ( - <> - - - - - ); - } - // Last step buttons - else if (activeStep.id === "ldapAdvancedSettingsStep") { - return ( - <> - {/* TODO: close the wizard and finish */} - - - - - ); - } - // All the other steps buttons - return ( - <> - - - {/* TODO: validate last step and finish */} - - - - ); - }} - - - ); - - return ( - + + ); };