From 5949fd43d0a6ebf7535af81567a51f0133d046e0 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Thu, 30 May 2024 13:45:58 +0200 Subject: [PATCH] remove all use of deprecated Select and Dropdown (#29270) * removed deprecated select Signed-off-by: Erik Jan de Wit * some more deprecation removal working towards fixing: #28197 Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * changed to use new api Signed-off-by: Erik Jan de Wit * more deprecation removal Signed-off-by: Erik Jan de Wit * fixed merge error Signed-off-by: Erik Jan de Wit * fix tests Signed-off-by: Erik Jan de Wit * small fix Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed merge error Signed-off-by: Erik Jan de Wit * no more default text for SelectOption Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * changed to use id Signed-off-by: Erik Jan de Wit * fixed dropdown in keycloakCard and test fixes Signed-off-by: mfrances Signed-off-by: Erik Jan de Wit * fixed lint error Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fix dropdown/select related test failures Signed-off-by: mfrances * fixed test Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * i18n label Signed-off-by: Erik Jan de Wit * fix test Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed tests Signed-off-by: Erik Jan de Wit * fixed test Signed-off-by: Erik Jan de Wit * removed Signed-off-by: Erik Jan de Wit * fixed merge error Signed-off-by: Erik Jan de Wit --------- Signed-off-by: Erik Jan de Wit Signed-off-by: mfrances Co-authored-by: mfrances --- .../src/resources/EditTheResource.tsx | 2 +- .../src/resources/ShareTheResource.tsx | 2 +- .../cypress/e2e/client_scopes_test.spec.ts | 2 - .../admin-ui/cypress/e2e/clients_test.spec.ts | 4 +- .../e2e/realm_settings_events_test.spec.ts | 1 - .../e2e/realm_settings_tabs_test.spec.ts | 10 +- .../admin-ui/cypress/e2e/users_test.spec.ts | 2 +- .../admin-ui/cypress/support/forms/Select.ts | 2 +- .../cypress/support/pages/CommonElements.ts | 14 +- .../support/pages/admin-ui/ListingPage.ts | 34 +- .../support/pages/admin-ui/SidebarPage.ts | 2 +- .../pages/admin-ui/components/PageObject.ts | 35 +- .../pages/admin-ui/components/TablePage.ts | 2 +- .../admin-ui/components/TableToolbarPage.ts | 11 +- .../manage/authentication/BindFlowModal.ts | 4 +- .../manage/authentication/FlowDetail.ts | 2 + .../manage/authentication/WebAuthnPolicies.ts | 2 +- .../client_scope_details/tabs/MappersTab.ts | 4 +- .../manage/clients/CreateClientPage.ts | 2 +- .../client_details/tabs/AdvancedTab.ts | 16 +- .../ProviderBaseAdvancedSettingsPage.ts | 24 +- .../admin-ui/manage/providers/ProviderPage.ts | 57 +- .../manage/realm_roles/CreateRealmRolePage.ts | 1 + .../realm_settings/RealmSettingsPage.ts | 100 ++- .../manage/realm_settings/UserProfile.ts | 8 +- .../admin-ui/manage/users/CredentialsPage.ts | 2 +- .../cypress/support/util/ModalUtils.ts | 4 +- .../src/authentication/BindFlowDialog.tsx | 2 - .../src/authentication/FlowDetails.tsx | 2 +- .../components/AddFlowDropdown.tsx | 42 +- .../components/FlowRequirementDropdown.tsx | 31 +- .../policies/PasswordPolicy.tsx | 6 +- .../policies/WebauthnPolicy.tsx | 6 +- .../src/client-scopes/ChangeTypeDropdown.tsx | 34 +- .../src/client-scopes/ClientScopesSection.tsx | 40 +- .../src/client-scopes/EditClientScope.tsx | 2 +- .../src/client-scopes/details/MapperList.tsx | 47 +- .../client-scopes/details/MappingDetails.tsx | 2 +- .../src/client-scopes/details/ScopeForm.tsx | 7 +- .../client-scopes/details/SearchFilter.tsx | 84 ++- .../admin-ui/src/clients/ClientDetails.tsx | 2 +- .../src/clients/advanced/AdvancedSettings.tsx | 36 +- .../src/clients/advanced/TokenLifespan.tsx | 30 +- .../authorization/AuthorizationEvaluate.tsx | 149 +--- .../authorization/KeyBasedAttributeInput.tsx | 29 +- .../authorization/PermissionDetails.tsx | 31 +- .../src/clients/authorization/Permissions.tsx | 39 +- .../clients/authorization/ResourceDetails.tsx | 2 +- .../authorization/ResourcesPolicySelect.tsx | 26 +- .../clients/authorization/ScopeDetails.tsx | 2 +- .../src/clients/authorization/ScopePicker.tsx | 32 +- .../src/clients/authorization/ScopeSelect.tsx | 22 +- .../clients/authorization/SearchDropdown.tsx | 25 +- .../authorization/evaluate/Results.tsx | 61 +- .../clients/authorization/policy/Client.tsx | 3 +- .../authorization/policy/PolicyDetails.tsx | 2 +- .../clients/authorization/search-dropdown.css | 2 +- .../src/clients/credentials/SignedJWT.tsx | 3 +- .../clients/registration/DetailProvider.tsx | 2 +- .../src/clients/scopes/AddScopeDialog.tsx | 99 +-- .../src/clients/scopes/ClientScopes.tsx | 35 +- .../src/clients/scopes/EvaluateScopes.tsx | 16 +- .../src/clients/scopes/client-scopes.css | 4 - .../client-scope/ClientScopeTypes.tsx | 33 +- .../src/components/client/ClientSelect.tsx | 7 +- .../download-dialog/DownloadDialog.tsx | 57 +- .../src/components/dynamic/ListComponent.tsx | 25 +- .../dynamic/MultivaluedListComponent.tsx | 28 +- .../components/help-enabler/HelpHeader.tsx | 32 +- .../components/key-value-form/KeySelect.tsx | 16 +- .../components/key-value-form/ValueSelect.tsx | 15 +- .../components/keycloak-card/KeycloakCard.tsx | 30 +- .../realm-selector/RealmSelector.tsx | 168 ++--- .../realm-selector/realm-selector.css | 40 +- .../role-mapping/AddRoleMappingModal.tsx | 31 +- .../src/components/select/KeycloakSelect.tsx | 49 ++ .../src/components/select/SingleSelect.tsx | 84 +++ .../src/components/select/TypeaheadSelect.tsx | 184 +++++ .../components/time-selector/TimeSelector.tsx | 18 +- .../UserDataTableAttributeSearchForm.tsx | 17 +- .../users/UserDataTableToolbarItems.tsx | 33 +- .../src/components/users/UserSelect.tsx | 128 +++- .../src/components/view-header/ViewHeader.tsx | 48 +- js/apps/admin-ui/src/events/AdminEvents.tsx | 41 +- js/apps/admin-ui/src/events/EventsSection.tsx | 24 +- js/apps/admin-ui/src/events/events.css | 2 +- js/apps/admin-ui/src/groups/GroupsSection.tsx | 2 +- js/apps/admin-ui/src/groups/Members.tsx | 37 +- .../src/groups/components/GroupToolbar.tsx | 39 +- .../src/groups/components/GroupTree.tsx | 47 +- .../IdentityProvidersSection.tsx | 48 +- .../src/identity-providers/add/AddMapper.tsx | 2 +- .../identity-providers/add/AddMapperForm.tsx | 24 +- .../add/AdvancedSettings.tsx | 35 +- .../identity-providers/add/DetailSettings.tsx | 7 +- .../add/ExtendedNonDiscoverySettings.tsx | 16 +- .../add/OIDCAuthentication.tsx | 28 +- .../add/ReqAuthnConstraintsSettings.tsx | 19 +- js/apps/admin-ui/src/page/Page.tsx | 3 +- .../src/realm-roles/RealmRoleTabs.tsx | 2 +- .../src/realm-settings/ClientProfileForm.tsx | 12 +- .../src/realm-settings/DefaultGroupsTab.tsx | 39 +- .../src/realm-settings/ExecutorForm.tsx | 26 +- .../src/realm-settings/NewClientPolicy.tsx | 12 +- .../NewClientPolicyCondition.tsx | 20 +- .../src/realm-settings/PartialImport.tsx | 32 +- .../src/realm-settings/RealmSettingsTabs.tsx | 8 +- .../admin-ui/src/realm-settings/ThemesTab.tsx | 36 +- .../admin-ui/src/realm-settings/TokensTab.tsx | 18 +- .../event-config/EventListenersForm.tsx | 8 +- .../src/realm-settings/keys/KeysListTab.tsx | 18 +- .../localization/EffectiveMessageBundles.tsx | 46 +- .../localization/LocalizationTab.tsx | 172 +---- .../localization/RealmOverrides.tsx | 53 +- .../security-defences/BruteForceDetection.tsx | 18 +- .../user-profile/AttributesTab.tsx | 25 +- .../attribute/AttributeGeneralSettings.tsx | 678 +++++++++--------- .../attribute/ValidatorSelect.tsx | 10 +- .../admin-ui/src/sessions/SessionsSection.tsx | 52 +- .../UserFederationKerberosSettings.tsx | 8 +- .../user-federation/UserFederationSection.tsx | 2 +- .../kerberos/KerberosSettingsRequired.tsx | 60 +- .../ldap/LdapSettingsConnection.tsx | 69 +- .../ldap/LdapSettingsGeneral.tsx | 20 +- .../ldap/LdapSettingsSearching.tsx | 184 +---- .../ldap/mappers/LdapMapperDetails.tsx | 23 +- .../user-federation/shared/ExtendedHeader.tsx | 8 +- .../src/user-federation/shared/Header.tsx | 7 +- .../user-federation/shared/SettingsCache.tsx | 131 ++-- js/apps/admin-ui/src/user/EditUser.tsx | 2 +- .../src/user/details/SearchFilter.tsx | 38 +- .../user/user-credentials/CredentialRow.tsx | 36 +- .../RequiredActionMultiSelect.tsx | 7 +- .../ui-shared/src/controls/PasswordInput.tsx | 2 +- .../ui-shared/src/controls/SelectControl.tsx | 157 ---- .../controls/select-control/SelectControl.tsx | 75 ++ .../select-control/SingleSelectControl.tsx | 114 +++ .../select-control/TypeaheadSelectControl.tsx | 263 +++++++ js/libs/ui-shared/src/main.ts | 10 +- .../src/masthead/KeycloakDropdown.tsx | 40 +- js/libs/ui-shared/src/masthead/Masthead.tsx | 7 +- .../src/user-profile/LocaleSelector.tsx | 4 +- 142 files changed, 2843 insertions(+), 2432 deletions(-) create mode 100644 js/apps/admin-ui/src/components/select/KeycloakSelect.tsx create mode 100644 js/apps/admin-ui/src/components/select/SingleSelect.tsx create mode 100644 js/apps/admin-ui/src/components/select/TypeaheadSelect.tsx delete mode 100644 js/libs/ui-shared/src/controls/SelectControl.tsx create mode 100644 js/libs/ui-shared/src/controls/select-control/SelectControl.tsx create mode 100644 js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx create mode 100644 js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx diff --git a/js/apps/account-ui/src/resources/EditTheResource.tsx b/js/apps/account-ui/src/resources/EditTheResource.tsx index b8f2511d1e..6324b388ae 100644 --- a/js/apps/account-ui/src/resources/EditTheResource.tsx +++ b/js/apps/account-ui/src/resources/EditTheResource.tsx @@ -85,7 +85,7 @@ export const EditTheResource = ({ id={`permissions-${p.id}`} name={`permissions.${index}.scopes`} label="permissions" - variant="typeaheadmulti" + variant="typeaheadMulti" controller={{ defaultValue: [] }} options={resource.scopes.map(({ name, displayName }) => ({ key: name, diff --git a/js/apps/account-ui/src/resources/ShareTheResource.tsx b/js/apps/account-ui/src/resources/ShareTheResource.tsx index b644e3ced2..509c8402fe 100644 --- a/js/apps/account-ui/src/resources/ShareTheResource.tsx +++ b/js/apps/account-ui/src/resources/ShareTheResource.tsx @@ -195,7 +195,7 @@ export const ShareTheResource = ({ ({ key: name, diff --git a/js/apps/admin-ui/cypress/e2e/client_scopes_test.spec.ts b/js/apps/admin-ui/cypress/e2e/client_scopes_test.spec.ts index f1ec9ab4e8..c6c5f6cb2b 100644 --- a/js/apps/admin-ui/cypress/e2e/client_scopes_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/client_scopes_test.spec.ts @@ -192,11 +192,9 @@ describe("Client Scopes test", () => { .checkDropdownItemIsDisabled("Delete") .clickItemCheckbox(itemName) .checkInSearchBarChangeTypeToButtonIsDisabled(false) - .clickSearchBarActionButton() .checkDropdownItemIsDisabled("Delete", false) .clickItemCheckbox(itemName) .checkInSearchBarChangeTypeToButtonIsDisabled() - .clickSearchBarActionButton() .checkDropdownItemIsDisabled("Delete"); }); 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 5c1d1fcb97..489b50d00a 100644 --- a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts @@ -321,8 +321,8 @@ describe("Clients test", () => { clientDetailsPage.goToClientScopesEvaluateGeneratedUserInfoTab(); cy.get("div#generatedUserInfo").contains("No generated user info"); - cy.get("input#user-select-typeahead").type("admin-a"); - cy.get("li[id*=select-option-] > button:first-child").click(); + cy.get("[data-testid='user'] input").type("admin-a"); + cy.get(".pf-v5-c-menu__item-text").click(); clientDetailsPage.goToClientScopesEvaluateGeneratedAccessTokenTab(); cy.get("div#generatedAccessToken").contains( diff --git a/js/apps/admin-ui/cypress/e2e/realm_settings_events_test.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_settings_events_test.spec.ts index ff334d20ec..e5afab1237 100644 --- a/js/apps/admin-ui/cypress/e2e/realm_settings_events_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/realm_settings_events_test.spec.ts @@ -412,7 +412,6 @@ describe("Realm settings events tab tests", () => { }); it("Should remove all events from event listener and re-save original", () => { - realmSettingsPage.shouldSaveEventListener(); realmSettingsPage.shouldRemoveAllEventListeners(); realmSettingsPage.shouldReSaveEventListener(); }); diff --git a/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts index 793adcaa8c..72ee006ed4 100644 --- a/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts @@ -204,14 +204,14 @@ describe("Realm settings tabs tests", () => { realmSettingsPage.goToLocalizationTab(); realmSettingsPage.goToLocalizationLocalesSubTab(); - cy.findByTestId("internationalization-disabled").click({ force: true }); + cy.findByTestId("internationalizationEnabled").click({ force: true }); cy.get(realmSettingsPage.supportedLocalesTypeahead) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains("Danish") - .click(); - cy.get("#kc-l-supported-locales").click(); + .click({ force: true }); + cy.findByTestId("internationalizationEnabled").click({ force: true }); cy.intercept("GET", `/admin/realms/${realmName}/localization/en*`).as( "load", @@ -258,7 +258,7 @@ describe("Realm settings tabs tests", () => { .should("be.visible"); cy.findByTestId("selectAll").click(); - cy.get('[data-testid="toolbar-deleteBtn"] button').click(); + cy.get('[data-testid="toolbar-deleteBtn"]').click(); cy.findByTestId("delete-selected-TranslationBtn").click(); cy.findByTestId("confirm").click(); masthead.checkNotificationMessage("Successfully removed translation(s)."); diff --git a/js/apps/admin-ui/cypress/e2e/users_test.spec.ts b/js/apps/admin-ui/cypress/e2e/users_test.spec.ts index 030309dc19..823efbe5f4 100644 --- a/js/apps/admin-ui/cypress/e2e/users_test.spec.ts +++ b/js/apps/admin-ui/cypress/e2e/users_test.spec.ts @@ -438,7 +438,7 @@ describe("User creation", () => { cy.get("table") .contains(itemCredential) .parentsUntil("tbody") - .find(".pf-v5-c-dropdown__toggle") + .find(".pf-v5-c-table__action .pf-v5-c-menu-toggle") .click(); cy.get("table").contains("Delete").click(); modalUtils.checkModalTitle("Delete credentials?").confirmModal(); diff --git a/js/apps/admin-ui/cypress/support/forms/Select.ts b/js/apps/admin-ui/cypress/support/forms/Select.ts index 8667b15248..8d7aadae7f 100644 --- a/js/apps/admin-ui/cypress/support/forms/Select.ts +++ b/js/apps/admin-ui/cypress/support/forms/Select.ts @@ -15,6 +15,6 @@ export default class Select { } static #getSelectMenu(chain: Cypress.Chainable>) { - return chain.parent().get(".pf-v5-c-select__menu"); + return chain.parent().get(".pf-v5-c-menu__list"); } } diff --git a/js/apps/admin-ui/cypress/support/pages/CommonElements.ts b/js/apps/admin-ui/cypress/support/pages/CommonElements.ts index 8ee2740102..791e7695f3 100644 --- a/js/apps/admin-ui/cypress/support/pages/CommonElements.ts +++ b/js/apps/admin-ui/cypress/support/pages/CommonElements.ts @@ -18,16 +18,14 @@ export default class CommonElements { this.secondaryBtn = this.parentSelector + ".pf-v5-c-button.pf-m-secondary"; this.secondaryBtnLink = this.parentSelector + ".pf-v5-c-button.pf-m-link"; this.dropdownMenuItem = - this.parentSelector + - ".pf-v5-c-dropdown__menu .pf-v5-c-dropdown__menu-item"; + this.parentSelector + ".pf-v5-c-menu__list .pf-v5-c-menu__item"; this.selectMenuItem = - this.parentSelector + ".pf-v5-c-select__menu .pf-v5-c-select__menu-item"; - this.dropdownToggleBtn = this.parentSelector + ".pf-v5-c-select__toggle"; - this.tableKebabBtn = this.parentSelector + ".pf-v5-c-dropdown__toggle"; - this.dropdownSelectToggleBtn = - this.parentSelector + ".pf-v5-c-select__toggle"; + this.parentSelector + ".pf-v5-c-menu__list .pf-v5-c-menu__list-item"; + this.dropdownToggleBtn = this.parentSelector + ".pf-v5-c-menu-toggle"; + this.tableKebabBtn = this.parentSelector + ".pf-v5-c-menu-toggle"; + this.dropdownSelectToggleBtn = this.parentSelector + ".pf-v5-c-menu-toggle"; this.dropdownSelectToggleItem = - this.parentSelector + ".pf-v5-c-select__menu > li"; + this.parentSelector + ".pf-v5-c-menu__list > li"; } clickPrimaryBtn() { diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts index 6a78a72c1a..c67d2f871c 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts @@ -28,14 +28,14 @@ export enum FilterSession { } export default class ListingPage extends CommonElements { - #tableToolbar = ".pf-v5-c-toolbar"; + #tableToolbar = "section .pf-v5-c-toolbar"; #itemsRows = "table:visible"; #deleteUserButton = "delete-user-btn"; #emptyListImg = '[role="tabpanel"]:not([hidden]) [data-testid="empty-state"]'; #emptyState = "empty-state"; - #itemRowDrpDwn = ".pf-v5-c-menu-toggle"; - #itemRowSelect = ".pf-v5-c-select__toggle:nth-child(1)"; - #itemRowSelectItem = ".pf-v5-c-select__menu-item"; + #itemRowDrpDwn = ".pf-v5-c-table__action button"; + #itemRowSelect = "[data-testid='cell-dropdown']"; + #itemRowSelectItem = ".pf-v5-c-menu__item"; #itemCheckbox = ".pf-v5-c-table__check"; public exportBtn = '[role="menuitem"]:nth-child(1)'; public deleteBtn = '[role="menuitem"]:nth-child(2)'; @@ -52,10 +52,11 @@ export default class ListingPage extends CommonElements { public tableRowItem = "tbody tr[data-ouia-component-type]:visible"; #table = "table[aria-label]"; #filterSessionDropdownButton = ".pf-v5-c-select button:nth-child(1)"; - #filterDropdownButton = "[class*='searchtype'] button"; - #kebabMenu = ".pf-v5-c-dropdown__toggle"; - #dropdownItem = ".pf-v5-c-dropdown__menu-item"; - #changeTypeToButton = ".pf-v5-c-select__toggle"; + #searchTypeButton = "[data-testid='clientScopeSearch']"; + #filterDropdownButton = "[data-testid='clientScopeSearchType']"; + #protocolFilterDropdownButton = "[data-testid='clientScopeSearchProtocol']"; + #kebabMenu = "[data-testid='kebab']"; + #dropdownItem = ".pf-v5-c-menu__list-item"; #toolbarChangeType = "#change-type-dropdown"; #tableNameColumnPrefix = "name-column-"; #rowGroup = "table:visible tbody[role='rowgroup']"; @@ -139,7 +140,7 @@ export default class ListingPage extends CommonElements { } clickSearchBarActionButton() { - cy.get(this.#tableToolbar).find(this.#kebabMenu).last().click(); + cy.get(this.#tableToolbar).find(this.#kebabMenu).click(); return this; } @@ -320,14 +321,14 @@ export default class ListingPage extends CommonElements { } selectFilter(filter: Filter) { - cy.get(this.#filterDropdownButton).first().click(); + cy.get(this.#searchTypeButton).click(); cy.get(this.#dropdownItem).contains(filter).click(); return this; } selectSecondaryFilter(itemName: string) { - cy.get(this.#filterDropdownButton).last().click(); + cy.get(this.#filterDropdownButton).click(); cy.get(this.#itemRowSelectItem).contains(itemName).click(); return this; @@ -340,7 +341,8 @@ export default class ListingPage extends CommonElements { } selectSecondaryFilterProtocol(protocol: FilterProtocol) { - this.selectSecondaryFilter(protocol); + cy.get(this.#protocolFilterDropdownButton).click(); + cy.get(this.#itemRowSelectItem).contains(protocol).click(); return this; } @@ -364,14 +366,14 @@ export default class ListingPage extends CommonElements { cy.get(this.#itemsRows) .contains(itemName) .parentsUntil("tbody") - .find(this.#changeTypeToButton) + .find(this.#toolbarChangeType) .first() .click(); cy.get(this.#itemsRows) .contains(itemName) .parentsUntil("tbody") - .find(this.#changeTypeToButton) + .find(this.#toolbarChangeType) .contains(assignedType) .click(); @@ -383,7 +385,7 @@ export default class ListingPage extends CommonElements { if (!disabled) { condition = "be.enabled"; } - cy.get(this.#changeTypeToButton).first().should(condition); + cy.get(this.#toolbarChangeType).first().should(condition); return this; } @@ -391,7 +393,7 @@ export default class ListingPage extends CommonElements { checkDropdownItemIsDisabled(itemName: string, disabled: boolean = true) { cy.get(this.#dropdownItem) .contains(itemName) - .should("have.attr", "aria-disabled", String(disabled)); + .should((disabled ? "" : "not.") + "be.disabled"); return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts index 4ec477129a..da4bf2e3e5 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts @@ -17,7 +17,7 @@ export default class SidebarPage extends CommonElements { #identityProvidersBtn = "#nav-item-identity-providers"; #userFederationBtn = "#nav-item-user-federation"; - realmsElements = '[data-testid="realmSelector"] li'; + realmsElements = '[id="realm-select"] li'; showCurrentRealms(length: number) { cy.findByTestId(this.#realmsDrpDwn).click(); diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts index efb00966fe..7e218e7d2b 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts @@ -1,11 +1,11 @@ export default class PageObject { - #selectItemSelectedIcon = ".pf-v5-c-select__menu-item-icon"; - #drpDwnMenuList = ".pf-v5-c-dropdown__menu"; - #drpDwnMenuItem = ".pf-v5-c-dropdown__menu-item"; - #drpDwnMenuToggleBtn = ".pf-v5-c-select__toggle"; - #selectMenuList = ".pf-v5-c-select__menu"; - #selectMenuItem = ".pf-v5-c-select__menu-item"; - #selectMenuToggleBtn = ".pf-v5-c-select__toggle"; + #selectItemSelectedIcon = ".pf-v5-c-menu-toggle__toggle-icon"; + #drpDwnMenuList = ".pf-v5-c-menu__list"; + #drpDwnMenuItem = ".pf-v5-c-menu__item"; + #drpDwnMenuToggleBtn = ".pf-v5-c-menu-toggle"; + #selectMenuList = ".pf-v5-c-menu__list"; + #selectMenuItem = ".pf-v5-c-menu__list-item"; + #selectMenuToggleBtn = ".pf-v5-c-menu-toggle"; #switchInput = ".pf-v5-c-switch__input"; #formLabel = ".pf-v5-c-form__label"; #chipGroup = ".pf-v5-c-chip-group"; @@ -103,7 +103,12 @@ export default class PageObject { ) { element = element ?? - cy.get(this.#drpDwnMenuToggleBtn).contains(itemName).parent().parent(); + cy + .get(this.#drpDwnMenuToggleBtn) + .parent() + .contains(itemName) + .parent() + .parent(); element.click(); return this; } @@ -114,7 +119,12 @@ export default class PageObject { ) { element = element ?? - cy.get(this.#drpDwnMenuToggleBtn).contains(itemName).parent().parent(); + cy + .get(this.#drpDwnMenuToggleBtn) + .parent() + .contains(itemName) + .parent() + .parent(); this.clickDropdownMenuToggleButton(itemName, element); this.assertDropdownMenuIsOpen(true); return this; @@ -126,7 +136,12 @@ export default class PageObject { ) { element = element ?? - cy.get(this.#drpDwnMenuToggleBtn).contains(itemName).parent().parent(); + cy + .get(this.#drpDwnMenuToggleBtn) + .parent() + .contains(itemName) + .parent() + .parent(); this.clickDropdownMenuToggleButton(itemName, element); this.assertDropdownMenuIsOpen(false); return this; diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts index 5996dcd4fe..15de13b471 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts @@ -61,7 +61,7 @@ export default class TablePage extends CommonElements { ) .contains(itemName) .parentsUntil("tbody") - .find(".pf-v5-c-menu-toggle") + .find(".pf-v5-c-table__action .pf-v5-c-menu-toggle") .click() .get(this.#tableKebabMenu) .contains(actionItemName); diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts index d8eec8b49b..500925ca52 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts @@ -8,7 +8,6 @@ export default class TableToolbar extends CommonElements { #nextPageBtn: string; #previousPageBtn: string; #searchTypeDropdownBtn: string; - #searchTypeSelectToggleBtn: string; #actionToggleBtn: string; constructor() { @@ -21,12 +20,8 @@ export default class TableToolbar extends CommonElements { this.#nextPageBtn = this.parentSelector + "button[data-action=next]"; this.#previousPageBtn = this.parentSelector + "button[data-action=previous]"; - this.#searchTypeDropdownBtn = - this.parentSelector + - ".pf-v5-c-dropdown .keycloak__client-scopes__searchtype"; - this.#searchTypeSelectToggleBtn = - this.parentSelector + "[class*='searchtype'] .pf-v5-c-select__toggle"; - this.#actionToggleBtn = this.tableKebabBtn + "[aria-label='Actions']"; + this.#searchTypeDropdownBtn = "[data-testid='clientScopeSearchType']"; + this.#actionToggleBtn = "[data-testid='kebab']"; } clickNextPageButton(isUpperButton = true) { @@ -98,7 +93,7 @@ export default class TableToolbar extends CommonElements { } selectSecondarySearchType(itemName: FilterAssignedType) { - cy.get(this.#searchTypeSelectToggleBtn).click(); + cy.get(this.#searchTypeDropdownBtn).click(); cy.get(this.dropdownSelectToggleItem).contains(itemName).click(); return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts index 774cf3e070..aa8a67a6b3 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts @@ -1,8 +1,8 @@ import ModalUtils from "../../../../util/ModalUtils"; export default class BindFlowModal extends ModalUtils { - #bindingType = "#bindingType"; - #dropdownSelectToggleItem = ".pf-v5-c-select__menu > li"; + #bindingType = "#chooseBindingType"; + #dropdownSelectToggleItem = ".pf-v5-c-menu__list > li"; fill(bindingType: string) { cy.get(this.#bindingType).click(); diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts index 6d3d806a9e..39e4854048 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts @@ -40,6 +40,7 @@ export default class FlowDetails { .parentsUntil(".keycloak__authentication__flow-row") .find(".keycloak__authentication__requirement-dropdown") .click() + .parent() .contains(requirement) .click(); return this; @@ -53,6 +54,7 @@ export default class FlowDetails { #clickEditDropdownForFlow(subFlowName: string, option: string) { cy.findByTestId(`${subFlowName}-edit-dropdown`) .click() + .parent() .contains(option) .click(); } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts index d9119e95db..c334de25e5 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts @@ -23,7 +23,7 @@ export default class WebAuthnPolicies { isPasswordLess ? prop.replace("Policy", "PolicyPasswordless") : prop }`, ).click(); - cy.get(".pf-v5-c-select__menu").contains(data[prop]).click(); + cy.get(".pf-v5-c-menu__list").contains(data[prop]).click(); } return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/MappersTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/MappersTab.ts index 92d743257d..055315ada2 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/MappersTab.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/MappersTab.ts @@ -3,9 +3,9 @@ import CommonPage from "../../../../../CommonPage"; export default class MappersTab extends CommonPage { #addMapperBtn = "#mapperAction"; #fromPredefinedMappersBtn = - 'ul[aria-labelledby="mapperAction"] > li:nth-child(1) a'; + 'ul[class="pf-v5-c-menu__list"] > li:nth-child(1) button'; #byConfigurationBtn = - 'ul[aria-labelledby="mapperAction"] > li:nth-child(2) a'; + 'ul[class="pf-v5-c-menu__list"] > li:nth-child(2) button'; #mapperConfigurationList = 'ul[aria-label="Add predefined mappers"] > li:not([id=header])'; 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 558610cb8a..ea98ef58ed 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 @@ -32,7 +32,7 @@ export default class CreateClientPage extends CommonPage { #adminUrlInput = "adminUrl"; #loginThemeDrpDwn = "#login_theme"; - #loginThemeList = 'ul[class="pf-v5-c-select__menu"]'; + #loginThemeList = 'ul[class="pf-v5-c-menu__list"]'; #consentRequiredSwitch = '[for="consentRequired"] .pf-v5-c-switch__toggle'; #consentRequiredSwitchInput = "#consentRequired"; #displayClientOnScreenSwitch = 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 85198e8d6b..cb361de9e3 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 @@ -85,9 +85,7 @@ export default class AdvancedTab extends PageObject { selectAccessTokenSignatureAlgorithm(algorithm: string) { cy.get(this.#accessTokenSignatureAlgorithmInput).click(); - cy.get(this.#accessTokenSignatureAlgorithmInput + " + ul") - .contains(algorithm) - .click(); + cy.get(".pf-v5-c-menu__list").contains(algorithm).click(); return this; } @@ -200,7 +198,9 @@ export default class AdvancedTab extends PageObject { selectKeyForCodeExchangeInput(input: string) { cy.get(this.#keyForCodeExchangeInput).click(); - cy.get(this.#keyForCodeExchangeInput + " + ul") + cy.get(this.#keyForCodeExchangeInput) + .parent() + .get("ul") .contains(input) .click(); return this; @@ -228,17 +228,13 @@ export default class AdvancedTab extends PageObject { selectBrowserFlowInput(input: string) { cy.get(this.#browserFlowInput).click(); - cy.get(this.#browserFlowInput + " + ul") - .contains(input) - .click(); + cy.get(this.#browserFlowInput).parent().get("ul").contains(input).click(); return this; } selectDirectGrantInput(input: string) { cy.get(this.#directGrantInput).click(); - cy.get(this.#directGrantInput + " + ul") - .contains(input) - .click(); + cy.get(this.#directGrantInput).parent().get("ul").contains(input).click(); return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts index 5d0eaef769..e3622fe1b8 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts @@ -4,7 +4,7 @@ import Masthead from "../../Masthead"; const masthead = new Masthead(); export enum LoginFlowOption { - empty = "", + empty = "First login flow override", none = "None", browser = "browser", directGrant = "direct grant", @@ -171,7 +171,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.get(this.#firstLoginFlowSelect).click(); super.clickSelectMenuItem( loginFlowOption, - cy.get(".pf-v5-c-select__menu-item").contains(loginFlowOption), + cy.get(".pf-v5-c-menu__list-item").contains(loginFlowOption), ); return this; } @@ -180,7 +180,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.get(this.#postLoginFlowSelect).click(); super.clickSelectMenuItem( loginFlowOption, - cy.get(".pf-v5-c-select__menu-item").contains(loginFlowOption), + cy.get(".pf-v5-c-menu__list-item").contains(loginFlowOption), ); return this; } @@ -191,7 +191,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.get(this.#clientAssertionSigningAlg).click(); super.clickSelectMenuItem( clientAssertionSigningAlg, - cy.get(".pf-v5-c-select__menu-item").contains(clientAssertionSigningAlg), + cy.get(".pf-v5-c-menu__list-item").contains(clientAssertionSigningAlg), ); return this; } @@ -205,7 +205,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.get(this.#syncModeSelect).click(); super.clickSelectMenuItem( syncModeOption, - cy.get(".pf-v5-c-select__menu-item").contains(syncModeOption), + cy.get(".pf-v5-c-menu__list-item").contains(syncModeOption), ); return this; } @@ -214,7 +214,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.get(this.#promptSelect).click(); super.clickSelectMenuItem( promptOption, - cy.get(".pf-v5-c-select__menu-item").contains(promptOption).parent(), + cy.get(".pf-v5-c-menu__list-item").contains(promptOption).parent(), ); return this; } @@ -393,7 +393,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.findByTestId("jump-link-openid-connect-settings").click(); cy.get(this.#clientAuth) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains(option) .click(); return this; @@ -403,7 +403,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.findByTestId("jump-link-openid-connect-settings").click(); cy.get(this.#clientAssertionSigningAlg) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains(alg) .click(); return this; @@ -413,25 +413,25 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject { cy.findByTestId("jump-link-openid-connect-settings").click(); cy.get(this.#clientAuth) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains(ClientAuthentication.post) .click(); cy.get(this.#jwtX509HeadersSwitch).should("not.exist"); cy.get(this.#clientAuth) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains(ClientAuthentication.basicAuth) .click(); cy.get(this.#jwtX509HeadersSwitch).should("not.exist"); cy.get(this.#clientAuth) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains(ClientAuthentication.jwt) .click(); cy.get(this.#jwtX509HeadersSwitch).should("not.exist"); cy.get(this.#clientAuth) .click() - .get(".pf-v5-c-select__menu-item") + .get(".pf-v5-c-menu__list-item") .contains(ClientAuthentication.jwtPrivKey) .click(); cy.get(this.#jwtX509HeadersSwitch).should("exist"); diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts index 4e3c77d5c6..074e1714b3 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts @@ -8,25 +8,20 @@ export default class ProviderPage { // LdapSettingsGeneral input values #ldapNameInput = "name"; #ldapVendorInput = "#kc-vendor"; - #ldapVendorList = "#kc-vendor + ul"; // LdapSettingsConnection input values connectionUrlInput = "config.connectionUrl.0"; - truststoreSpiInput = "#kc-use-truststore-spi"; - truststoreSpiList = "#kc-use-truststore-spi + ul"; + truststoreSpiInput = "#useTruststoreSpi"; connectionTimeoutInput = "config.connectionTimeout.0"; bindTypeInput = "#kc-bind-type"; - #bindTypeList = "#kc-bind-type + ul"; bindDnInput = "config.bindDn.0"; bindCredsInput = "config.bindCredential.0"; #testConnectionBtn = "test-connection-button"; #testAuthBtn = "test-auth-button"; // LdapSettingsSearching input values - ldapEditModeInput = "#kc-edit-mode"; - #ldapEditModeList = "#kc-edit-mode + ul"; + ldapEditModeInput = "#editMode"; ldapSearchScopeInput = "#kc-search-scope"; - #ldapSearchScopeInputList = "#kc-search-scope + ul"; ldapPagination = "ui-pagination"; ldapUsersDnInput = "config.usersDn.0"; ldapUserLdapAttInput = "config.usernameLDAPAttribute.0"; @@ -54,13 +49,9 @@ export default class ProviderPage { // SettingsCache input values #cacheDayInput = "#kc-eviction-day"; - #cacheDayList = "#kc-eviction-day + ul"; #cacheHourInput = "#kc-eviction-hour"; - #cacheHourList = "#kc-eviction-hour + ul"; #cacheMinuteInput = "#kc-eviction-minute"; - #cacheMinuteList = "#kc-eviction-minute + ul"; #cachePolicyInput = "#kc-cache-policy"; - #cachePolicyList = "#kc-cache-policy + ul"; // Mapper input values #userModelAttInput = "config.user🍺model🍺attribute"; @@ -119,15 +110,19 @@ export default class ProviderPage { switch (unit) { case "day": cy.get(this.#cacheDayInput).click(); - cy.get(this.#cacheDayList).contains(time).click(); + cy.get(this.#cacheDayInput).parent().find("ul").contains(time).click(); break; case "hour": cy.get(this.#cacheHourInput).click(); - cy.get(this.#cacheHourList).contains(time).click(); + cy.get(this.#cacheHourInput).parent().find("ul").contains(time).click(); break; case "minute": cy.get(this.#cacheMinuteInput).click(); - cy.get(this.#cacheMinuteList).contains(time).click(); + cy.get(this.#cacheMinuteInput) + .parent() + .find("ul") + .contains(time) + .click(); break; default: console.log("Invalid cache time, must be 'day', 'hour', or 'minute'."); @@ -187,7 +182,7 @@ export default class ProviderPage { fillSelect(selectField: string, value: string) { cy.get(selectField).click(); - cy.get(`${selectField} + ul`).contains(value).click(); + cy.get(selectField).parent().find("ul").contains(value).click(); } fillTextField(textField: string, value: string) { @@ -218,7 +213,11 @@ export default class ProviderPage { cy.findByTestId(this.#ldapNameInput).clear().type(name); if (vendor) { cy.get(this.#ldapVendorInput).click(); - cy.get(this.#ldapVendorList).contains(vendor).click(); + cy.get(this.#ldapVendorInput) + .parent() + .find("ul") + .contains(vendor) + .click(); } return this; } @@ -234,11 +233,15 @@ export default class ProviderPage { cy.findByTestId(this.connectionUrlInput).clear().type(connectionUrl); cy.get(this.bindTypeInput).click(); - cy.get(this.#bindTypeList).contains(bindType).click(); + cy.get(this.bindTypeInput).parent().find("ul").contains(bindType).click(); if (truststoreSpi) { cy.get(this.truststoreSpiInput).click(); - cy.get(this.truststoreSpiList).contains(truststoreSpi).click(); + cy.get(this.truststoreSpiInput) + .parent() + .find("ul") + .contains(truststoreSpi) + .click(); } if (connectionTimeout) { cy.findByTestId(this.connectionTimeoutInput) @@ -266,7 +269,11 @@ export default class ProviderPage { readTimeout?: string, ) { cy.get(this.ldapEditModeInput).click(); - cy.get(this.#ldapEditModeList).contains(editMode).click(); + cy.get(this.ldapEditModeInput) + .parent() + .find("ul") + .contains(editMode) + .click(); cy.findByTestId(this.ldapUsersDnInput).clear().type(usersDn); if (userLdapAtt) { cy.findByTestId(this.ldapUserLdapAttInput).clear().type(userLdapAtt); @@ -287,7 +294,11 @@ export default class ProviderPage { } if (searchScope) { cy.get(this.ldapSearchScopeInput).click(); - cy.get(this.#ldapSearchScopeInputList).contains(searchScope).click(); + cy.get(this.ldapSearchScopeInput) + .parent() + .find("ul") + .contains(searchScope) + .click(); } if (readTimeout) { cy.findByTestId(this.ldapReadTimeout).clear().type(readTimeout); @@ -297,7 +308,11 @@ export default class ProviderPage { selectCacheType(cacheType: string) { cy.get(this.#cachePolicyInput).click(); - cy.get(this.#cachePolicyList).contains(cacheType).click(); + cy.get(this.#cachePolicyInput) + .parent() + .find("ul") + .contains(cacheType) + .click(); return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts index ca899b368d..bc527fd690 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts @@ -31,6 +31,7 @@ class CreateRealmRolePage { clickActionMenu(item: string) { cy.findByTestId("action-dropdown") .click() + .parent() .within(() => { cy.findByText(item).click(); }); diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts index fbeb463a0d..e62a6338c3 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts @@ -23,49 +23,45 @@ export default class RealmSettingsPage extends CommonPage { userProfileTab = "rs-user-profile-tab"; tokensTab = "rs-tokens-tab"; selectLoginTheme = "#kc-login-theme"; - loginThemeList = "#kc-login-theme + ul"; + loginThemeList = "[data-testid='select-login-theme']"; selectAccountTheme = "#kc-account-theme"; - accountThemeList = "#kc-account-theme + ul"; + accountThemeList = "[data-testid='select-account-theme']"; selectAdminTheme = "#kc-admin-ui-theme"; - adminThemeList = "#kc-admin-ui-theme + ul"; + adminThemeList = "[data-testid='select-admin-theme']"; selectEmailTheme = "#kc-email-theme"; - emailThemeList = "#kc-email-theme + ul"; + emailThemeList = "[data-testid='select-email-theme']"; ssoSessionIdleSelectMenu = "#kc-sso-session-idle-select-menu"; - ssoSessionIdleSelectMenuList = "#kc-sso-session-idle-select-menu > div > ul"; + ssoSessionIdleSelectMenuList = "#kc-sso-session-idle-select-menu ul"; ssoSessionMaxSelectMenu = "#kc-sso-session-max-select-menu"; - ssoSessionMaxSelectMenuList = "#kc-sso-session-max-select-menu > div > ul"; + ssoSessionMaxSelectMenuList = "#kc-sso-session-max-select-menu ul"; ssoSessionMaxRememberMeSelectMenu = "#kc-sso-session-max-remember-me-select-menu"; ssoSessionMaxRememberMeSelectMenuList = - "#kc-sso-session-max-remember-me-select-menu > div > ul"; + "#kc-sso-session-max-remember-me-select-menu ul"; ssoSessionIdleRememberMeSelectMenu = "#kc-sso-session-idle-remember-me-select-menu"; ssoSessionIdleRememberMeSelectMenuList = - "#kc-sso-session-idle-remember-me-select-menu > div > ul"; + "#kc-sso-session-idle-remember-me-select-menu ul"; clientSessionIdleSelectMenu = "#kc-client-session-idle-select-menu"; - clientSessionIdleSelectMenuList = - "#kc-client-session-idle-select-menu > div > ul"; + clientSessionIdleSelectMenuList = "#kc-client-session-idle-select-menu ul"; clientSessionMaxSelectMenu = "#kc-client-session-max-select-menu"; - clientSessionMaxSelectMenuList = - "#kc-client-session-max-select-menu > div > ul"; + clientSessionMaxSelectMenuList = "#kc-client-session-max-select-menu ul"; offlineSessionIdleSelectMenu = "#kc-offline-session-idle-select-menu"; loginTimeoutSelectMenu = "#kc-login-timeout-select-menu"; - loginTimeoutSelectMenuList = "#kc-login-timeout-select-menu > div > ul"; + loginTimeoutSelectMenuList = "#kc-login-timeout-select-menu ul"; loginActionTimeoutSelectMenu = "#kc-login-action-timeout-select-menu"; - loginActionTimeoutSelectMenuList = - "#kc-login-action-timeout-select-menu > div > ul"; + loginActionTimeoutSelectMenuList = "#kc-login-action-timeout-select-menu ul"; selectDefaultLocale = "#kc-default-locale"; defaultLocaleList = "select-default-locale"; - supportedLocalesTypeahead = - "#kc-l-supported-locales-select-multi-typeahead-typeahead"; + supportedLocalesTypeahead = "#supportedLocales"; supportedLocalesToggle = "#kc-l-supported-locales"; emailSaveBtn = "email-tab-save"; managedAccessSwitch = "userManagedAccessAllowed"; @@ -129,29 +125,27 @@ export default class RealmSettingsPage extends CommonPage { accessTokenLifespanSelectMenu = "#kc-access-token-lifespan-select-menu"; accessTokenLifespanSelectMenuList = - "#kc-access-token-lifespan-select-menu > div > ul"; + "#kc-access-token-lifespan-select-menu ul"; parRequestUriLifespanSelectMenu = "#par-request-uri-lifespan-select-menu"; parRequestUriLifespanSelectMenuList = - "#par-request-uri-lifespan-select-menu > div > ul"; + "#par-request-uri-lifespan-select-menu ul"; accessTokenLifespanImplicitSelectMenu = "#kc-access-token-lifespan-implicit-select-menu"; accessTokenLifespanImplicitSelectMenuList = - "#kc-access-token-lifespan-implicit-select-menu > div > ul"; + "#kc-access-token-lifespan-implicit-select-menu ul"; clientLoginTimeoutSelectMenu = "#kc-client-login-timeout-select-menu"; - clientLoginTimeoutSelectMenuList = - "#kc-client-login-timeout-select-menu > div > ul"; + clientLoginTimeoutSelectMenuList = "#kc-client-login-timeout-select-menu ul"; offlineSessionMaxSelectMenu = "#kc-offline-session-max-select-menu"; - offlineSessionMaxSelectMenuList = - "#kc-offline-session-max-select-menu > div > ul"; + offlineSessionMaxSelectMenuList = "#kc-offline-session-max-select-menu ul"; userInitiatedActionLifespanSelectMenu = "#kc-user-initiated-action-lifespan-select-menu"; userInitiatedActionLifespanSelectMenuList = - "#kc-user-initiated-action-lifespan-select-menu > div > ul"; + "#kc-user-initiated-action-lifespan-select-menu ul"; defaultAdminInitatedInputSelectMenu = "#kc-default-admin-initiated-select-menu"; @@ -159,18 +153,17 @@ export default class RealmSettingsPage extends CommonPage { "#kc-default-admin-initiated-select-menu"; emailVerificationSelectMenu = "#kc-email-verification-select-menu"; - emailVerificationSelectMenuList = - "#kc-email-verification-select-menu > div > ul"; + emailVerificationSelectMenuList = "#kc-email-verification-select-menu ul"; idpEmailVerificationSelectMenu = "#kc-idp-email-verification-select-menu"; idpEmailVerificationSelectMenuList = - "#kc-idp-email-verification-select-menu > div > ul"; + "#kc-idp-email-verification-select-menu ul"; forgotPasswordSelectMenu = "#kc-forgot-pw-select-menu"; - forgotPasswordSelectMenuList = "#kc-forgot-pw-select-menu > div > ul"; + forgotPasswordSelectMenuList = "#kc-forgot-pw-select-menu ul"; executeActionsSelectMenu = "#kc-execute-actions-select-menu"; - executeActionsSelectMenuList = "#kc-execute-actions-select-menu > div > ul"; + executeActionsSelectMenuList = "#kc-execute-actions-select-menu ul"; #formViewProfilesView = "formView-profilesView"; #jsonEditorProfilesView = "jsonEditor-profilesView"; @@ -197,7 +190,7 @@ export default class RealmSettingsPage extends CommonPage { #jsonEditorSavePoliciesBtn = "jsonEditor-policies-saveBtn"; #jsonEditorReloadBtn = "jsonEditor-reloadBtn"; #jsonEditor = ".monaco-scrollable-element.editor-scrollable.vs"; - #clientPolicyDrpDwn = '[data-testid="action-dropdown"] button'; + #clientPolicyDrpDwn = '[data-testid="action-dropdown"]'; #deleteclientPolicyDrpDwn = "deleteClientPolicyDropdown"; #clientProfileOne = 'a[href*="realm-settings/client-policies/Test/edit-profile"]'; @@ -206,8 +199,8 @@ export default class RealmSettingsPage extends CommonPage { #clientPolicy = 'a[href*="realm-settings/client-policies/Test/edit-policy"]'; #reloadBtn = "reloadProfile"; #addExecutor = "addExecutor"; - #addExecutorDrpDwn = ".pf-v5-c-select__toggle"; - #addExecutorDrpDwnOption = "executorType-select"; + #addExecutorDrpDwn = "#kc-executor"; + #addExecutorDrpDwnOption = ".pf-v5-c-menu__list"; #addExecutorCancelBtn = ".pf-v5-c-form__actions a"; #addExecutorSaveBtn = "addExecutor-saveBtn"; #availablePeriodExecutorFld = "available-period"; @@ -217,22 +210,21 @@ export default class RealmSettingsPage extends CommonPage { #listingPage = new ListingPage(); #addCondition = "addCondition"; - #addConditionDrpDwn = ".pf-v5-c-select__toggle"; - #addConditionDrpDwnOption = "conditionType-select"; + #addConditionDrpDwn = "#provider"; + #addConditionDrpDwnOption = ".pf-v5-c-menu__list"; #addConditionCancelBtn = "addCondition-cancelBtn"; #addConditionSaveBtn = "addCondition-saveBtn"; #clientRolesConditionLink = "client-roles-condition-link"; #clientScopesConditionLink = "client-scopes-condition-link"; #eventListenersFormLabel = ".pf-v5-c-form__label-text"; - #eventListenersDrpDwn = ".pf-v5-c-select.kc_eventListeners_select"; + #eventListenersDrpDwn = "#eventsListeners"; #eventListenersSaveBtn = "saveEventListenerBtn"; #eventListenersRevertBtn = "revertEventListenerBtn"; #eventListenersInputFld = - ".pf-v5-c-form-control.pf-v5-c-select__toggle-typeahead"; - #eventListenersDrpDwnOption = ".pf-v5-c-select__menu"; - #eventListenersDrwDwnSelect = - ".pf-v5-c-button.pf-v5-c-select__toggle-button.pf-m-plain"; - #eventListenerRemove = '[data-ouia-component-id="Remove"]'; + "#eventsListeners .pf-v5-c-text-input-group__text-input"; + #eventListenersDrpDwnOption = ".pf-v5-c-menu__list"; + #eventListenersDrwDwnSelect = "#eventsListeners .pf-v5-c-menu-toggle__button"; + #eventListenerRemove = ".pf-v5-c-chip__actions"; #roleSelect = "config.roles0"; #selectScopeButton = "addValue"; #deleteClientRolesConditionBtn = "delete-client-roles-condition"; @@ -753,7 +745,8 @@ export default class RealmSettingsPage extends CommonPage { shouldRemoveEventFromEventListener() { cy.get(this.#eventListenerRemove).last().click({ force: true }); - cy.findByTestId(this.#eventListenersSaveBtn).click({ force: true }); + cy.get(this.#eventListenersInputFld).click(); + cy.findByTestId(this.#eventListenersSaveBtn).click(); cy.get(this.#alertMessage).should( "be.visible", "Event listener has been updated.", @@ -762,7 +755,8 @@ export default class RealmSettingsPage extends CommonPage { } shouldRemoveAllEventListeners() { - cy.get(".pf-v5-c-button.pf-m-plain.pf-v5-c-select__toggle-clear").click(); + cy.get(".pf-v5-c-chip__actions").first().click(); + cy.get(".pf-v5-c-chip__actions").click(); cy.findByTestId(this.#eventListenersSaveBtn).click(); cy.get(this.#eventListenersDrpDwn).should("not.have.text", "jboss-logging"); cy.get(this.#eventListenersDrpDwn).should("not.have.text", "email"); @@ -908,7 +902,7 @@ export default class RealmSettingsPage extends CommonPage { cy.get(this.#clientProfileTwo).click(); cy.findByTestId(this.#addExecutor).click(); cy.get(this.#addExecutorDrpDwn).click(); - cy.findByTestId(this.#addExecutorDrpDwnOption) + cy.get(this.#addExecutorDrpDwnOption) .contains("secure-ciba-signed-authn-req") .click(); cy.get(this.#addExecutorCancelBtn).click(); @@ -922,7 +916,7 @@ export default class RealmSettingsPage extends CommonPage { cy.get(this.#clientProfileTwo).click(); cy.findByTestId(this.#addExecutor).click(); cy.get(this.#addExecutorDrpDwn).click(); - cy.findByTestId(this.#addExecutorDrpDwnOption) + cy.get(this.#addExecutorDrpDwnOption) .contains("secure-ciba-signed-authn-req") .click(); cy.findByTestId(this.#addExecutorSaveBtn).click(); @@ -1136,9 +1130,7 @@ export default class RealmSettingsPage extends CommonPage { cy.get(this.#clientPolicy).click(); cy.findByTestId(this.#addCondition).click(); cy.get(this.#addConditionDrpDwn).click(); - cy.findByTestId(this.#addConditionDrpDwnOption) - .contains("any-client") - .click(); + cy.get(this.#addConditionDrpDwnOption).contains("any-client").click(); cy.findByTestId(this.#addConditionCancelBtn).click(); cy.get('h2[class*="kc-emptyConditions"]').should( "have.text", @@ -1150,9 +1142,7 @@ export default class RealmSettingsPage extends CommonPage { cy.get(this.#clientPolicy).click(); cy.findByTestId(this.#addCondition).click(); cy.get(this.#addConditionDrpDwn).click(); - cy.findByTestId(this.#addConditionDrpDwnOption) - .contains("client-roles") - .click(); + cy.get(this.#addConditionDrpDwnOption).contains("client-roles").click(); cy.findByTestId(this.#roleSelect).clear().type("manage-realm"); cy.findByTestId(this.#addConditionSaveBtn).click(); @@ -1178,9 +1168,7 @@ export default class RealmSettingsPage extends CommonPage { cy.get(this.#clientPolicy).click(); cy.findByTestId(this.#addCondition).click(); cy.get(this.#addConditionDrpDwn).click(); - cy.findByTestId(this.#addConditionDrpDwnOption) - .contains("client-scopes") - .click(); + cy.get(this.#addConditionDrpDwnOption).contains("client-scopes").click(); this.addClientScopes(); @@ -1293,7 +1281,9 @@ export default class RealmSettingsPage extends CommonPage { deleteClientPolicyFromDetails() { cy.get(this.#clientPolicyDrpDwn).click({ force: true }); - cy.findByTestId(this.#deleteclientPolicyDrpDwn).click({ force: true }); + cy.findByTestId(this.#deleteclientPolicyDrpDwn) + .find("button") + .click({ force: true }); return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts index 3f6adaf8f5..5ac0833bde 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts @@ -142,8 +142,12 @@ export default class UserProfile { } setAttributeGroup(group: string) { - cy.get("#kc-attributeGroup").click(); - cy.get("button.pf-v5-c-select__menu-item").contains(group).click(); + cy.get("#group").click(); + cy.get("#group") + .parent() + .get(".pf-v5-c-menu__list-item") + .contains(group) + .click(); return this; } diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts index 450b56d2cc..1a1c70da8c 100644 --- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts +++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts @@ -57,7 +57,7 @@ export default class CredentialsPage { } clickResetModalAction(index: number) { - cy.get("[data-testid=credential-reset-modal] .pf-v5-c-select__menu") + cy.get("[data-testid=credential-reset-modal] .pf-v5-c-menu__list") .contains(this.#resetActions[index]) .click(); diff --git a/js/apps/admin-ui/cypress/support/util/ModalUtils.ts b/js/apps/admin-ui/cypress/support/util/ModalUtils.ts index 1639b6a22d..7841e33db6 100644 --- a/js/apps/admin-ui/cypress/support/util/ModalUtils.ts +++ b/js/apps/admin-ui/cypress/support/util/ModalUtils.ts @@ -9,8 +9,8 @@ export default class ModalUtils extends PageObject { #cancelModalBtn = "cancel"; #closeModalBtn = ".pf-v5-c-modal-box .pf-m-plain"; #copyToClipboardBtn = '[id*="copy-button"]'; - #addModalDropdownBtn = "#add-dropdown > button"; - #addModalDropdownItem = "#add-dropdown [role='menuitem']"; + #addModalDropdownBtn = "#add-dropdown"; + #addModalDropdownItem = ".pf-v5-c-modal-box__footer .pf-v5-c-menu__content"; #addBtn = "add"; #tablePage = new TablePage(TablePage.tableSelector); diff --git a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx index dea63cae9c..53e26d78fa 100644 --- a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx +++ b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx @@ -6,7 +6,6 @@ import { Form, Modal, } from "@patternfly/react-core"; -import { SelectVariant } from "@patternfly/react-core/deprecated"; import { FormProvider, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { SelectControl } from "@keycloak/keycloak-ui-shared"; @@ -83,7 +82,6 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => { value: t(`flow.${REALM_FLOWS.get(key)}`), }))} controller={{ defaultValue: flowKeys[0] }} - variant={SelectVariant.single} menuAppendTo="parent" aria-label={t("chooseBindingType")} /> diff --git a/js/apps/admin-ui/src/authentication/FlowDetails.tsx b/js/apps/admin-ui/src/authentication/FlowDetails.tsx index f00e0aea39..0a0b6b5574 100644 --- a/js/apps/admin-ui/src/authentication/FlowDetails.tsx +++ b/js/apps/admin-ui/src/authentication/FlowDetails.tsx @@ -7,6 +7,7 @@ import { ButtonVariant, DataList, DragDrop, + DropdownItem, Droppable, Label, PageSection, @@ -16,7 +17,6 @@ import { ToolbarContent, ToolbarItem, } from "@patternfly/react-core"; -import { DropdownItem } from "@patternfly/react-core/deprecated"; import { DomainIcon, TableIcon } from "@patternfly/react-icons"; import { useState } from "react"; import { Trans, useTranslation } from "react-i18next"; diff --git a/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx b/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx index fbe80911a4..55ea06ac84 100644 --- a/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx +++ b/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx @@ -1,10 +1,6 @@ import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation"; -import { Tooltip } from "@patternfly/react-core"; -import { - Dropdown, - DropdownItem, - DropdownToggle, -} from "@patternfly/react-core/deprecated"; +import { DropdownList, Tooltip } from "@patternfly/react-core"; +import { Dropdown, DropdownItem, MenuToggle } from "@patternfly/react-core"; import { PlusIcon } from "@patternfly/react-icons"; import { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -49,19 +45,24 @@ export const AddFlowDropdown = ({ <> setOpen(val)} + toggle={(ref) => ( + setOpen(!open)} aria-label={t("add")} + data-testid={`${execution.displayName}-edit-dropdown`} > - - } - dropdownItems={[ + + )} + onSelect={() => setOpen(false)} + > + @@ -69,19 +70,18 @@ export const AddFlowDropdown = ({ } > {t("addStep")} - , + setType("condition")} > {t("addCondition")} - , + setType("subFlow")}> {t("addSubFlow")} - , - ]} - onSelect={() => setOpen(false)} - /> + + + {type && type !== "subFlow" && ( {flow.requirementChoices && flow.requirementChoices.length > 1 && ( )} {(!flow.requirementChoices || flow.requirementChoices.length <= 1) && ( diff --git a/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx b/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx index 7b6f0ffca2..28515aac47 100644 --- a/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx +++ b/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx @@ -17,9 +17,9 @@ import { ToolbarContent, ToolbarItem, Select, - SelectOption, MenuToggle, SelectList, + SelectOption, } from "@patternfly/react-core"; import { PlusCircleIcon } from "@patternfly/react-icons"; import { useEffect, useMemo, useState } from "react"; @@ -53,9 +53,6 @@ const PolicySelect = ({ onSelect, selectedPolicies }: PolicySelectProps) => { return ( setOpen(val)} + toggle={(ref) => ( + setOpen(!open)} + isExpanded={open} + > + {t("changeTypeTo")} + + )} onSelect={async (_, value) => { try { await Promise.all( @@ -63,10 +73,12 @@ export const ChangeTypeDropdown = ({ } }} > - {clientScopeTypesSelectOptions( - t, - !clientId ? allClientScopeTypes : undefined, - )} + + {clientScopeTypesSelectOptions( + t, + !clientId ? allClientScopeTypes : undefined, + )} + ); }; diff --git a/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx b/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx index 302fc34275..8cb1784a42 100644 --- a/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx +++ b/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx @@ -2,14 +2,14 @@ import { AlertVariant, Button, ButtonVariant, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, PageSection, ToolbarItem, } from "@patternfly/react-core"; -import { - Dropdown, - DropdownItem, - KebabToggle, -} from "@patternfly/react-core/deprecated"; +import { EllipsisVIcon } from "@patternfly/react-icons"; import { cellWidth } from "@patternfly/react-table"; import { useState } from "react"; import { useTranslation } from "react-i18next"; @@ -256,17 +256,23 @@ export default function ClientScopesSection() { setKebabOpen(val)} - /> - } + shouldFocusToggleOnSelect + toggle={(ref) => ( + setKebabOpen(!kebabOpen)} + variant="plain" + > + + + )} isOpen={kebabOpen} - isPlain - dropdownItems={[ + > + { toggleDeleteDialog(); @@ -274,9 +280,9 @@ export default function ClientScopesSection() { }} > {t("delete")} - , - ]} - /> + + + } diff --git a/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx b/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx index 218553250b..852ca46bbe 100644 --- a/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx +++ b/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx @@ -6,11 +6,11 @@ import { Alert, AlertVariant, ButtonVariant, + DropdownItem, PageSection, Tab, TabTitleText, } from "@patternfly/react-core"; -import { DropdownItem } from "@patternfly/react-core/deprecated"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; diff --git a/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx b/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx index 2fd6f6ef48..37ddcf2d75 100644 --- a/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx +++ b/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx @@ -2,12 +2,6 @@ import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import type { Path } from "react-router-dom"; import { Link } from "react-router-dom"; -import { - Dropdown, - DropdownItem, - DropdownToggle, -} from "@patternfly/react-core/deprecated"; -import { CaretDownIcon } from "@patternfly/react-icons"; import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation"; import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation"; @@ -21,6 +15,12 @@ import { Action, KeycloakDataTable, } from "../../components/table-toolbar/KeycloakDataTable"; +import { + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, +} from "@patternfly/react-core"; type MapperListProps = { model: ClientScopeRepresentation | ClientRepresentation; @@ -114,32 +114,27 @@ export const MapperList = ({ toolbarItem={ setMapperAction(false)} - toggle={ - ( + setMapperAction(!mapperAction)} - toggleIndicator={CaretDownIcon} + onClick={() => setMapperAction(!mapperAction)} > {t("addMapper")} - - } + + )} isOpen={mapperAction} - dropdownItems={[ - toggleAddMapperDialog(true)} - > + > + + toggleAddMapperDialog(true)}> {t("fromPredefinedMapper")} - , - toggleAddMapperDialog(false)} - > + + toggleAddMapperDialog(false)}> {t("byConfiguration")} - , - ]} - /> + + + } actions={[ { diff --git a/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx b/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx index 991aefdd9d..d048daccfd 100644 --- a/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx +++ b/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx @@ -5,11 +5,11 @@ import { AlertVariant, Button, ButtonVariant, + DropdownItem, FormGroup, PageSection, TextInput, } from "@patternfly/react-core"; -import { DropdownItem } from "@patternfly/react-core/deprecated"; import { useState } from "react"; import { FormProvider, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; diff --git a/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx b/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx index 7c859327a2..614cff7fbc 100644 --- a/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx +++ b/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx @@ -1,6 +1,5 @@ import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation"; import { ActionGroup, Button } from "@patternfly/react-core"; -import { SelectVariant } from "@patternfly/react-core/deprecated"; import { useEffect } from "react"; import { FormProvider, useForm, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; @@ -129,11 +128,10 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => { }} /> ({ key, @@ -142,11 +140,10 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => { /> {!clientScope && ( ({ key: option, diff --git a/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx b/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx index 0c9bd2b6fb..b53f6f61eb 100644 --- a/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx +++ b/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx @@ -1,13 +1,15 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { ToolbarItem } from "@patternfly/react-core"; import { Dropdown, DropdownItem, - DropdownToggle, + DropdownList, + MenuToggle, Select, + SelectList, SelectOption, -} from "@patternfly/react-core/deprecated"; + ToolbarItem, +} from "@patternfly/react-core"; import { FilterIcon } from "@patternfly/react-icons"; import { @@ -70,18 +72,20 @@ export const SearchDropdown = ({ return ( ( + setSearchToggle(val)} + onClick={() => setSearchToggle(!searchToggle)} > {t(`clientScopeSearch.${searchType}`)} - - } + + )} isOpen={searchToggle} - dropdownItems={options} - /> + > + {options} + ); }; @@ -109,23 +113,36 @@ export const SearchToolbar = ({ @@ -141,20 +158,31 @@ export const SearchToolbar = ({ diff --git a/js/apps/admin-ui/src/clients/ClientDetails.tsx b/js/apps/admin-ui/src/clients/ClientDetails.tsx index 065f8cc54f..cc5b7f856e 100644 --- a/js/apps/admin-ui/src/clients/ClientDetails.tsx +++ b/js/apps/admin-ui/src/clients/ClientDetails.tsx @@ -3,13 +3,13 @@ import { AlertVariant, ButtonVariant, Divider, + DropdownItem, Label, PageSection, Tab, TabTitleText, Tooltip, } from "@patternfly/react-core"; -import { DropdownItem } from "@patternfly/react-core/deprecated"; import { InfoCircleIcon } from "@patternfly/react-icons"; import { cloneDeep, sortBy } from "lodash-es"; import { useMemo, useState } from "react"; diff --git a/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx b/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx index 3fe1bbe82d..15767dcb70 100644 --- a/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx +++ b/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx @@ -1,10 +1,13 @@ import { HelpItem } from "@keycloak/keycloak-ui-shared"; -import { ActionGroup, Button, FormGroup } from "@patternfly/react-core"; import { + ActionGroup, + Button, + FormGroup, + MenuToggle, Select, + SelectList, SelectOption, - SelectVariant, -} from "@patternfly/react-core/deprecated"; +} from "@patternfly/react-core"; import { useState } from "react"; import { Controller, useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; @@ -145,21 +148,30 @@ export const AdvancedSettings = ({ control={control} render={({ field }) => ( )} /> diff --git a/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx b/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx index df7c38d5aa..5ca11114e2 100644 --- a/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx +++ b/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx @@ -1,9 +1,12 @@ -import { FormGroup, Split, SplitItem } from "@patternfly/react-core"; import { + FormGroup, + MenuToggle, Select, + SelectList, SelectOption, - SelectVariant, -} from "@patternfly/react-core/deprecated"; + Split, + SplitItem, +} from "@patternfly/react-core"; import { useState } from "react"; import { Controller, useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; @@ -57,19 +60,26 @@ export const TokenLifespan = ({ @@ -301,8 +299,7 @@ export const EffectiveMessageBundles = ({ validate: (value) => (value || "").length > 0, }} render={({ field }) => ( - + )} /> @@ -362,8 +358,7 @@ export const EffectiveMessageBundles = ({ validate: (value) => (value || "").length > 0, }} render={({ field }) => ( - + )} /> diff --git a/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx b/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx index 842d96ebc0..af011eae57 100644 --- a/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx +++ b/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx @@ -1,22 +1,15 @@ import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation"; +import { SelectControl, SwitchControl } from "@keycloak/keycloak-ui-shared"; import { ActionGroup, Button, - FormGroup, - Switch, Tab, TabTitleText, Tabs, } from "@patternfly/react-core"; -import { - Select, - SelectOption, - SelectVariant, -} from "@patternfly/react-core/deprecated"; import { useEffect, useMemo, useState } from "react"; -import { Controller, useForm, useWatch } from "react-hook-form"; +import { FormProvider, useForm, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; -import { HelpItem } from "@keycloak/keycloak-ui-shared"; import { FormAccess } from "../../components/form/FormAccess"; import { useServerInfo } from "../../context/server-info/ServerInfoProvider"; import { useWhoAmI } from "../../context/whoami/WhoAmI"; @@ -40,9 +33,8 @@ export const LocalizationTab = ({ const { whoAmI } = useWhoAmI(); const [activeTab, setActiveTab] = useState(0); - const { setValue, control, handleSubmit, formState } = useForm(); - const [supportedLocalesOpen, setSupportedLocalesOpen] = useState(false); - const [defaultLocaleOpen, setDefaultLocaleOpen] = useState(false); + const form = useForm(); + const { setValue, control, handleSubmit, formState } = form; const defaultSupportedLocales = realm.supportedLocales?.length ? realm.supportedLocales @@ -98,134 +90,46 @@ export const LocalizationTab = ({ className="pf-v5-u-mt-lg pf-v5-u-ml-md" onSubmit={handleSubmit(save)} > - - } - > - + ( - - )} + label={t("internationalization")} + labelIcon={t("internationalizationHelp")} + labelOn={t("enabled")} + labelOff={t("disabled")} + aria-label={t("internationalization")} /> - - {internationalizationEnabled && ( - <> - - + ( - - )} + isScrollable + label={t("supportedLocales")} + controller={{ + defaultValue: defaultSupportedLocales, + }} + variant="typeaheadMulti" + placeholderText={t("selectLocales")} + options={allLocales.map((l) => ({ + key: l, + value: localeToDisplayName(l, whoAmI.getLocale()) || l, + }))} /> - - - ( - - )} + label={t("defaultLocale")} + controller={{ + defaultValue: DEFAULT_LOCALE, + }} + data-testid="select-default-locale" + options={watchSupportedLocales.map((l) => ({ + key: l, + value: localeToDisplayName(l, whoAmI.getLocale()) || l, + }))} /> - - - )} + + )} +