From 56eb774dd37202bd9c0b051bff0d43d3731e87be Mon Sep 17 00:00:00 2001 From: agagancarczyk Date: Tue, 26 Oct 2021 21:16:19 +0100 Subject: [PATCH] Profile view update (#1357) * added routing for viewing client profile * added add executors form template * added add executors form template * add executor: wip * add executor: wip * add executor: wip * add executor: wip * add executor: wip * add executor: wip * add executor: wip * add executor: wip * add executor: wip * added adding excutors to profiles * added displaying executors - wip * added displaying executors - wip * added navigation to client profile edit on executor creation * replaced table with list for listing executors added * added support for editing client profile * added logic making executors with config links only * added read only values for edit/view client temporarily * added helpText for added executors listed in executors list * added helpText for added executors listed in executors list * added deleting executor from client profile * fixed deleting client profile and fixed messages for delete modals * fixed message for delete clinet profile modal * combined delete dialogs for client profile and executor * displaying global executors for global profiles, hiding add executor button * fixed eslint issue * fixed executors list * added back button to global profile view/edit view * fixed test * added global batche and hid actions dropdown for global profiles * fixed switch on/off labels * fixed hide/display items for global and non-global profiles * added isDirty * feedback fixes * feedback fixes * feedback fixes * feedback fixes * feedback fixes * feedback fix * small refactor * added name and removed unused state * fixed executor creation * fixed executor creation * added saving edited client profile * added saving edited client profile * improved trash icon styles * test fix * Some code suggestions * Some more code suggestions * feedback fixes * feedback fixes * use find instead of filter * feedback fixes * added defaultValues for executors * removed defaultValues for executors * final feedback fixes * minor fixes Co-authored-by: Agnieszka Gancarczyk Co-authored-by: Erik Jan de Wit Co-authored-by: Jon Koops --- .../integration/realm_settings_test.spec.ts | 190 +++---- .../realm_settings/RealmSettingsPage.ts | 4 +- .../add/components/BooleanComponent.tsx | 3 +- .../add/components/ListComponent.tsx | 1 + .../components/MultivaluedListComponent.tsx | 75 +++ .../add/components/RoleComponent.tsx | 1 + .../add/components/ScriptComponent.tsx | 1 + .../add/components/StringComponent.tsx | 1 + .../add/components/components.ts | 6 + src/client-scopes/details/MappingDetails.tsx | 5 +- src/common-messages.ts | 4 + src/events/AdminEvents.tsx | 8 +- src/events/EventsSection.tsx | 4 +- src/realm-settings/ClientProfileForm.tsx | 482 ++++++++++++++++++ src/realm-settings/ExecutorForm.tsx | 207 ++++++++ src/realm-settings/NewClientProfileForm.tsx | 234 --------- src/realm-settings/ProfilesTab.tsx | 18 +- src/realm-settings/RealmSettingsSection.css | 17 + src/realm-settings/messages.ts | 23 +- src/realm-settings/routes.ts | 10 +- src/realm-settings/routes/AddClientProfile.ts | 21 + src/realm-settings/routes/AddExecutor.ts | 22 + src/realm-settings/routes/ClientProfile.ts | 22 + src/realm-settings/routes/NewClientProfile.ts | 21 - 24 files changed, 1009 insertions(+), 371 deletions(-) create mode 100644 src/client-scopes/add/components/MultivaluedListComponent.tsx create mode 100644 src/realm-settings/ClientProfileForm.tsx create mode 100644 src/realm-settings/ExecutorForm.tsx delete mode 100644 src/realm-settings/NewClientProfileForm.tsx create mode 100644 src/realm-settings/routes/AddClientProfile.ts create mode 100644 src/realm-settings/routes/AddExecutor.ts create mode 100644 src/realm-settings/routes/ClientProfile.ts delete mode 100644 src/realm-settings/routes/NewClientProfile.ts diff --git a/cypress/integration/realm_settings_test.spec.ts b/cypress/integration/realm_settings_test.spec.ts index 6c1c9a7d62..61116f5714 100644 --- a/cypress/integration/realm_settings_test.spec.ts +++ b/cypress/integration/realm_settings_test.spec.ts @@ -437,130 +437,130 @@ describe("Realm settings tests", () => { 9 ); }); + }); - describe("Realm settings client profiles tab tests", () => { - beforeEach(() => { - keycloakBefore(); - loginPage.logIn(); - sidebarPage.goToRealmSettings(); - cy.findByTestId("rs-clientPolicies-tab").click(); - cy.findByTestId("rs-policies-clientProfiles-tab").click(); - }); + describe("Realm settings client profiles tab tests", () => { + beforeEach(() => { + keycloakBefore(); + loginPage.logIn(); + sidebarPage.goToRealmSettings(); + cy.findByTestId("rs-clientPolicies-tab").click(); + cy.findByTestId("rs-policies-clientProfiles-tab").click(); + }); - it("Go to client policies profiles tab", () => { - realmSettingsPage.shouldDisplayProfilesTab(); - }); + it("Go to client policies profiles tab", () => { + realmSettingsPage.shouldDisplayProfilesTab(); + }); - it("Check new client form is displaying", () => { - realmSettingsPage.shouldDisplayNewClientProfileForm(); - }); + it("Check new client form is displaying", () => { + realmSettingsPage.shouldDisplayNewClientProfileForm(); + }); - it("Complete new client form and cancel", () => { - realmSettingsPage.shouldCompleteAndCancelCreateNewClientProfile(); - }); + it("Complete new client form and cancel", () => { + realmSettingsPage.shouldCompleteAndCancelCreateNewClientProfile(); + }); - it("Complete new client form and submit", () => { - realmSettingsPage.shouldCompleteAndCreateNewClientProfile(); - }); + it("Complete new client form and submit", () => { + realmSettingsPage.shouldCompleteAndCreateNewClientProfile(); + }); - it("Should perform client profile search by profile name", () => { - realmSettingsPage.shouldSearchClientProfile(); - }); + it("Should perform client profile search by profile name", () => { + realmSettingsPage.shouldSearchClientProfile(); + }); - it("Check cancelling the client profile deletion", () => { - realmSettingsPage.shouldDisplayDeleteClientProfileDialog(); - }); + it("Check cancelling the client profile deletion", () => { + realmSettingsPage.shouldDisplayDeleteClientProfileDialog(); + }); - it("Check deleting the client profile", () => { - realmSettingsPage.shouldDeleteClientProfileDialog(); - }); + it("Check deleting the client profile", () => { + realmSettingsPage.shouldDeleteClientProfileDialog(); + }); - it("Check navigating between Form View and JSON editor", () => { - realmSettingsPage.shouldNavigateBetweenFormAndJSONView(); - }); + it("Check navigating between Form View and JSON editor", () => { + realmSettingsPage.shouldNavigateBetweenFormAndJSONView(); + }); - it("Check saving changed JSON profiles", () => { - realmSettingsPage.shouldSaveChangedJSONProfiles(); - realmSettingsPage.shouldDeleteClientProfileDialog(); - }); + it("Check saving changed JSON profiles", () => { + realmSettingsPage.shouldSaveChangedJSONProfiles(); + realmSettingsPage.shouldDeleteClientProfileDialog(); + }); - it("Should not create duplicate client profile", () => { - sidebarPage.goToRealmSettings(); - cy.findByTestId("rs-clientPolicies-tab").click(); - cy.findByTestId("rs-policies-clientProfiles-tab").click(); - realmSettingsPage.shouldCompleteAndCreateNewClientProfile(); - realmSettingsPage.shouldNotCreateDuplicateClientProfile(); - }); + it("Should not create duplicate client profile", () => { + sidebarPage.goToRealmSettings(); + cy.findByTestId("rs-clientPolicies-tab").click(); + cy.findByTestId("rs-policies-clientProfiles-tab").click(); + realmSettingsPage.shouldCompleteAndCreateNewClientProfile(); + realmSettingsPage.shouldNotCreateDuplicateClientProfile(); + }); + }); - describe("Realm settings client policies tab tests", () => { - beforeEach(() => { - keycloakBefore(); - loginPage.logIn(); - sidebarPage.goToRealmSettings(); - cy.findByTestId("rs-clientPolicies-tab").click(); - cy.findByTestId("rs-policies-clientPolicies-tab").click(); - }); + describe.skip("Realm settings client policies tab tests", () => { + beforeEach(() => { + keycloakBefore(); + loginPage.logIn(); + sidebarPage.goToRealmSettings(); + cy.findByTestId("rs-clientPolicies-tab").click(); + cy.findByTestId("rs-policies-clientPolicies-tab").click(); + }); - it("Go to client policies tab", () => { - realmSettingsPage.shouldDisplayPoliciesTab(); - }); + it("Go to client policies tab", () => { + realmSettingsPage.shouldDisplayPoliciesTab(); + }); - it("Check new client form is displaying", () => { - realmSettingsPage.shouldDisplayNewClientPolicyForm(); - }); + it("Check new client form is displaying", () => { + realmSettingsPage.shouldDisplayNewClientPolicyForm(); + }); - it("Complete new client form and cancel", () => { - realmSettingsPage.shouldCompleteAndCancelCreateNewClientPolicy(); - }); + it("Complete new client form and cancel", () => { + realmSettingsPage.shouldCompleteAndCancelCreateNewClientPolicy(); + }); - it("Complete new client form and submit", () => { - realmSettingsPage.shouldCompleteAndCreateNewClientPolicyFromEmptyState(); - }); + it("Complete new client form and submit", () => { + realmSettingsPage.shouldCompleteAndCreateNewClientPolicyFromEmptyState(); + }); - it("Should perform client profile search by profile name", () => { - realmSettingsPage.shouldSearchClientPolicy(); - }); + it("Should perform client profile search by profile name", () => { + realmSettingsPage.shouldSearchClientPolicy(); + }); - it("Check cancelling the client policy deletion", () => { - realmSettingsPage.shouldDisplayDeleteClientPolicyDialog(); - }); + it("Check cancelling the client policy deletion", () => { + realmSettingsPage.shouldDisplayDeleteClientPolicyDialog(); + }); - it("Check deleting the client policy", () => { - realmSettingsPage.shouldDeleteClientPolicyDialog(); - }); + it("Check deleting the client policy", () => { + realmSettingsPage.shouldDeleteClientPolicyDialog(); + }); - it("Check navigating between Form View and JSON editor", () => { - realmSettingsPage.shouldNavigateBetweenFormAndJSONViewPolicies(); - }); + it("Check navigating between Form View and JSON editor", () => { + realmSettingsPage.shouldNavigateBetweenFormAndJSONViewPolicies(); + }); - /* it("Check saving changed JSON policies", () => { + /* it("Check saving changed JSON policies", () => { realmSettingsPage.shouldSaveChangedJSONPolicies(); realmSettingsPage.shouldDeleteClientPolicyDialog(); }); */ - it("Should not create duplicate client profile", () => { - realmSettingsPage.shouldCompleteAndCreateNewClientPolicyFromEmptyState(); + it("Should not create duplicate client profile", () => { + realmSettingsPage.shouldCompleteAndCreateNewClientPolicyFromEmptyState(); - sidebarPage.goToRealmSettings(); - cy.findByTestId("rs-clientPolicies-tab").click(); - cy.findByTestId("rs-policies-clientPolicies-tab").click(); - realmSettingsPage.shouldCompleteAndCreateNewClientPolicy(); - realmSettingsPage.shouldNotCreateDuplicateClientPolicy(); + sidebarPage.goToRealmSettings(); + cy.findByTestId("rs-clientPolicies-tab").click(); + cy.findByTestId("rs-policies-clientPolicies-tab").click(); + realmSettingsPage.shouldCompleteAndCreateNewClientPolicy(); + realmSettingsPage.shouldNotCreateDuplicateClientPolicy(); - sidebarPage.goToRealmSettings(); - cy.findByTestId("rs-clientPolicies-tab").click(); - cy.findByTestId("rs-policies-clientPolicies-tab").click(); - realmSettingsPage.shouldDeleteClientProfileDialog(); - }); + sidebarPage.goToRealmSettings(); + cy.findByTestId("rs-clientPolicies-tab").click(); + cy.findByTestId("rs-policies-clientPolicies-tab").click(); + realmSettingsPage.shouldDeleteClientProfileDialog(); + }); - it("Check deleting newly created client policy from create view via dropdown", () => { - realmSettingsPage.shouldRemoveClientPolicyFromCreateView(); - }); + it("Check deleting newly created client policy from create view via dropdown", () => { + realmSettingsPage.shouldRemoveClientPolicyFromCreateView(); + }); - it("Check reloading JSON policies", () => { - realmSettingsPage.shouldReloadJSONPolicies(); - }); - }); + it("Check reloading JSON policies", () => { + realmSettingsPage.shouldReloadJSONPolicies(); }); }); }); diff --git a/cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts b/cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts index dda60dd607..3d511e81c2 100644 --- a/cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts +++ b/cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts @@ -709,11 +709,11 @@ export default class RealmSettingsPage { cy.get(this.moreDrpDwnItems).click(); cy.get(this.deleteDialogTitle).contains("Delete profile?"); cy.get(this.deleteDialogBodyText).contains( - "This action will permanently delete the profile custom-profile. This cannot be undone." + "This action will permanently delete the profile Test. This cannot be undone." ); cy.findByTestId("modalConfirm").contains("Delete"); cy.get(this.deleteDialogCancelBtn).contains("Cancel").click(); - cy.get("table").should("not.have.text", "Test"); + cy.get("table").should("be.visible").contains("td", "Test"); } shouldDeleteClientPolicyDialog() { diff --git a/src/client-scopes/add/components/BooleanComponent.tsx b/src/client-scopes/add/components/BooleanComponent.tsx index 920231215a..20cfe607a4 100644 --- a/src/client-scopes/add/components/BooleanComponent.tsx +++ b/src/client-scopes/add/components/BooleanComponent.tsx @@ -26,6 +26,7 @@ export const BooleanComponent = ({ > ( @@ -33,7 +34,7 @@ export const BooleanComponent = ({ id={name!} label={t("common:on")} labelOff={t("common:off")} - isChecked={value === "true"} + isChecked={value === "true" || value === true} onChange={(value) => onChange("" + value)} /> )} diff --git a/src/client-scopes/add/components/ListComponent.tsx b/src/client-scopes/add/components/ListComponent.tsx index 1e9d60a01b..610be8b735 100644 --- a/src/client-scopes/add/components/ListComponent.tsx +++ b/src/client-scopes/add/components/ListComponent.tsx @@ -32,6 +32,7 @@ export const ListComponent = ({ > ( diff --git a/src/client-scopes/add/components/MultivaluedListComponent.tsx b/src/client-scopes/add/components/MultivaluedListComponent.tsx new file mode 100644 index 0000000000..6b1e4d06b4 --- /dev/null +++ b/src/client-scopes/add/components/MultivaluedListComponent.tsx @@ -0,0 +1,75 @@ +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Controller, useFormContext } from "react-hook-form"; +import { + FormGroup, + Select, + SelectOption, + SelectVariant, +} from "@patternfly/react-core"; + +import { HelpItem } from "../../../components/help-enabler/HelpItem"; +import type { ComponentProps } from "./components"; + +export const MultivaluedListComponent = ({ + name, + label, + helpText, + defaultValue, + options, +}: ComponentProps) => { + const { t } = useTranslation("client-scopes"); + const { control } = useFormContext(); + const [open, setOpen] = useState(false); + + return ( + + } + fieldId={name!} + > + ( + + )} + /> + + ); +}; diff --git a/src/client-scopes/add/components/RoleComponent.tsx b/src/client-scopes/add/components/RoleComponent.tsx index a157a1ac40..20c0b0d6dd 100644 --- a/src/client-scopes/add/components/RoleComponent.tsx +++ b/src/client-scopes/add/components/RoleComponent.tsx @@ -142,6 +142,7 @@ export const RoleComponent = ({ name, label, helpText }: ComponentProps) => { {clients && (