libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Create profile (#1218)

Browse source 
* create-client-profile: creating client profile wip

* create-profile: added deleting profile

* create-profile: add executors - wip

* create-profile: add executors - wip

* create-profile: add executors - wip

* create-profile: add executors - wip

* create-profile: added testId for tests

* create-profile: added cypress tests for client profiles

* Update cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

marking fields as private

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* Update src/realm-settings/NewClientProfileForm.tsx

removing async (not needed)

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* feedback fixes

* Update src/realm-settings/NewClientProfileForm.tsx

new router link implementation

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* simplify ClientProfile type

* align form type with model

* do not delete

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
agagancarczyk 2021-09-24 11:46:01 +01:00 committed by GitHub
parent b7ebd3260b
commit bd423c4bbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 595 additions and 361 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
cypress/integration/realm_settings_test.spec.ts
View file

@ -13,7 +13,8 @@ const masthead = new Masthead();
const modalUtils = new ModalUtils();
const realmSettingsPage = new RealmSettingsPage();
describe("Realm settings", () => {
describe("Realm settings tests", () => {
describe("Realm settings tabs tests", () => {
const realmName = "Realm_" + (Math.random() + 1).toString(36).substring(7);
beforeEach(() => {
@ -140,7 +141,9 @@ describe("Realm settings", () => {
cy.findByTestId(realmSettingsPage.testConnectionButton).click();
realmSettingsPage.fillEmailField(
"example" + (Math.random() + 1).toString(36).substring(7) + "@example.com"
"example" +
(Math.random() + 1).toString(36).substring(7) +
"@example.com"
);
cy.findByTestId(realmSettingsPage.modalTestConnectionButton).click();
@ -389,18 +392,16 @@ describe("Realm settings", () => {
"have.value",
1
);
cy.findByTestId(realmSettingsPage.accessTokenLifespanImplicitInput).should(
"have.value",
2
);
cy.findByTestId(
realmSettingsPage.accessTokenLifespanImplicitInput
).should("have.value", 2);
cy.findByTestId(realmSettingsPage.clientLoginTimeoutInput).should(
"have.value",
3
);
cy.findByTestId(realmSettingsPage.userInitiatedActionLifespanInput).should(
"have.value",
4
);
cy.findByTestId(
realmSettingsPage.userInitiatedActionLifespanInput
).should("have.value", 4);
cy.findByTestId(realmSettingsPage.defaultAdminInitatedInput).should(
"have.value",
@ -426,3 +427,38 @@ describe("Realm settings", () => {
);
});
});
describe("Realm settings client profiles tab tests", () => {
beforeEach(() => {
keycloakBefore();
loginPage.logIn();
sidebarPage.goToRealmSettings();
cy.findByTestId("rs-clientPolicies-tab").click();
cy.findByTestId("rs-profiles-clientPolicies-tab").click();
});
it("Go to client policies profiles tab", function () {
realmSettingsPage.shouldDisplayProfilesTab();
});
it("Check new client form is displaying", function () {
realmSettingsPage.shouldDisplayNewClientProfileForm();
});
it("Complete new client form and cancel", function () {
realmSettingsPage.shouldCompleteAndCancelCreateNewClientProfile();
});
it("Complete new client form and submit", function () {
realmSettingsPage.shouldCompleteAndCreateNewClientProfile();
});
it("Check cancelling the client profile deletion", function () {
realmSettingsPage.shouldDisplayDeleteClientProfileDialog();
});
it("Check deleting the client profile", function () {
realmSettingsPage.shouldDeleteClientProfileDialog();
});
});
});

72
cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts
View file

@ -143,6 +143,20 @@ export default class RealmSettingsPage {
executeActionsSelectMenu = "#kc-execute-actions-select-menu";
executeActionsSelectMenuList = "#kc-execute-actions-select-menu > div > ul";
private createProfileBtn = "createProfile";
private formViewSelect = "formView-radioBtn";
private jsonEditorSelect = "formView-radioBtn";
private newClientProfileNameInput = "client-profile-name";
private newClientProfileDescriptionInput = "client-profile-description";
private saveNewClientProfileBtn = "saveCreateProfile";
private cancelNewClientProfile = "cancelCreateProfile";
private alertMessage = ".pf-c-alert__title";
private moreDrpDwn = ".pf-c-dropdown__toggle.pf-m-plain";
private moreDrpDwnItems = ".pf-c-dropdown__menu-item";
private deleteDialogTitle = ".pf-c-modal-box__title-text";
private deleteDialogBodyText = ".pf-c-modal-box__body";
private deleteDialogCancelBtn = ".pf-c-button.pf-m-link";
selectLoginThemeType(themeType: string) {
cy.get(this.selectLoginTheme).click();
cy.get(this.loginThemeList).contains(themeType).click();
@ -450,4 +464,62 @@ export default class RealmSettingsPage {
cy.findByTestId("addEventTypeConfirm").click();
return this;
}
shouldDisplayProfilesTab() {
cy.findByTestId(this.createProfileBtn).should("exist");
cy.findByTestId(this.formViewSelect).should("exist");
cy.findByTestId(this.jsonEditorSelect).should("exist");
cy.get("table").should("be.visible").contains("td", "Global");
}
shouldDisplayNewClientProfileForm() {
cy.findByTestId(this.createProfileBtn).click();
cy.findByTestId(this.newClientProfileNameInput).should("exist");
cy.findByTestId(this.newClientProfileDescriptionInput).should("exist");
cy.findByTestId(this.saveNewClientProfileBtn).should("exist");
cy.findByTestId(this.cancelNewClientProfile).should("exist");
}
shouldCompleteAndCancelCreateNewClientProfile() {
cy.findByTestId(this.createProfileBtn).click();
cy.findByTestId(this.newClientProfileNameInput).type("Test");
cy.findByTestId(this.newClientProfileDescriptionInput).type(
"Test Description"
);
cy.findByTestId(this.cancelNewClientProfile).click();
cy.get("table").should("not.have.text", "Test");
}
shouldCompleteAndCreateNewClientProfile() {
cy.findByTestId(this.createProfileBtn).click();
cy.findByTestId(this.newClientProfileNameInput).type("Test");
cy.findByTestId(this.newClientProfileDescriptionInput).type(
"Test Description"
);
cy.findByTestId(this.saveNewClientProfileBtn).click();
cy.get(this.alertMessage).should(
"be.visible",
"New client profile created"
);
}
shouldDisplayDeleteClientProfileDialog() {
cy.get(this.moreDrpDwn).last().click();
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."
);
cy.findByTestId("modalConfirm").contains("Delete");
cy.get(this.deleteDialogCancelBtn).contains("Cancel").click();
cy.get("table").should("not.have.text", "Test");
}
shouldDeleteClientProfileDialog() {
cy.get(this.moreDrpDwn).last().click();
cy.get(this.moreDrpDwnItems).click();
cy.findByTestId("modalConfirm").contains("Delete").click();
cy.get("table").should("not.have.text", "Test");
cy.get(this.alertMessage).should("be.visible", "Client profile deleted");
}
}

121
src/realm-settings/NewClientProfileForm.tsx
View file

@ -1,11 +1,15 @@
import React from "react";
import React, { useState } from "react";
import {
ActionGroup,
AlertVariant,
Button,
Divider,
FormGroup,
PageSection,
Text,
TextArea,
TextInput,
TextVariants,
ValidatedOptions,
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
@ -14,15 +18,69 @@ import { FormAccess } from "../components/form-access/FormAccess";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { Link } from "react-router-dom";
import { useRealm } from "../context/realm-context/RealmContext";
import { useAlerts } from "../components/alert/Alerts";
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
import { HelpItem } from "../components/help-enabler/HelpItem";
import { PlusCircleIcon } from "@patternfly/react-icons";
import "./RealmSettingsSection.css";
type NewClientProfileForm = Required<ClientProfileRepresentation>;
const defaultValues: NewClientProfileForm = {
name: "",
executors: [],
description: "",
};
export const NewClientProfileForm = () => {
const { t } = useTranslation("realm-settings");
const { register, errors } = useForm();
const { getValues, register, errors } = useForm<NewClientProfileForm>({
defaultValues,
});
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const adminClient = useAdminClient();
const [globalProfiles, setGlobalProfiles] = useState<
ClientProfileRepresentation[]
>([]);
const [profiles, setProfiles] = useState<ClientProfileRepresentation[]>([]);
const [showAddExecutorsForm, setShowAddExecutorsForm] = useState(false);
function save() {
//TODO
useFetch(
() =>
adminClient.clientPolicies.listProfiles({ includeGlobalProfiles: true }),
(profiles) => {
setGlobalProfiles(profiles.globalProfiles ?? []);
setProfiles(profiles.profiles ?? []);
},
[]
);
const save = async () => {
const form = getValues();
const createdProfile = {
...form,
executors: [],
};
const allProfiles = profiles.concat(createdProfile);
try {
await adminClient.clientPolicies.createProfiles({
profiles: allProfiles,
globalProfiles: globalProfiles,
});
addAlert(
t("realm-settings:createClientProfileSuccess"),
AlertVariant.success
);
setShowAddExecutorsForm(true);
} catch (error) {
addError("realm-settings:createClientProfileError", error);
}
};
return (
<>
@ -32,39 +90,36 @@ export const NewClientProfileForm = () => {
<FormGroup
label={t("newClientProfileName")}
fieldId="kc-name"
helperText={t("createClientProfileNameHelperText")}
isRequired
helperTextInvalid={t("common:required")}
validated={
errors.name ? ValidatedOptions.error : ValidatedOptions.default
}
>
<TextInput
ref={register({ required: true })}
type="text"
id="kc-client-profile-name"
name="name"
data-testid="client-profile-name"
/>
</FormGroup>
<FormGroup
label={t("common:description")}
fieldId="kc-description"
validated={
errors.description
? ValidatedOptions.error
: ValidatedOptions.default
}
helperTextInvalid={errors.description?.message}
>
<FormGroup label={t("common:description")} fieldId="kc-description">
<TextArea
name="description"
aria-label={t("description")}
ref={register()}
type="text"
id="kc-client-profile-description"
data-testid="client-profile-description"
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
onClick={save}
data-testid="realm-settings-client-profile-save-button"
data-testid="saveCreateProfile"
>
{t("common:save")}
</Button>
@ -78,6 +133,42 @@ export const NewClientProfileForm = () => {
{t("common:cancel")}
</Button>
</ActionGroup>
{showAddExecutorsForm && (
<>
<FormGroup
label={t("executors")}
fieldId="kc-executors"
labelIcon={
<HelpItem
helpText={t("realm-settings:executorsHelpText")}
forLabel={t("executorsHelpItem")}
forID={t("executors")}
/>
}
>
<Button
id="addExecutor"
component={(props) => (
<Link
{...props}
to={`/${realm}/realm-settings/clientPolicies`}
></Link>
)}
variant="link"
className="kc-addExecutor"
data-testid="cancelCreateProfile"
icon={<PlusCircleIcon />}
isDisabled
>
{t("realm-settings:addExecutor")}
</Button>
</FormGroup>
<Divider />
<Text component={TextVariants.h6}>
{t("realm-settings:emptyExecutors")}
</Text>
</>
)}
</FormAccess>
</PageSection>
</>

45
src/realm-settings/ProfilesTab.tsx
View file

@ -1,4 +1,5 @@
import React, { useMemo, useState } from "react";
import { omit } from "lodash";
import {
AlertVariant,
Button,
@ -18,13 +19,10 @@ import { useRealm } from "../context/realm-context/RealmContext";
import { useAlerts } from "../components/alert/Alerts";
import { Link } from "react-router-dom";
import "./RealmSettingsSection.css";
import type ClientPolicyExecutorRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyExecutorRepresentation";
import { toNewClientProfile } from "./routes/NewClientProfile";
import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
type ClientProfile = {
description?: string;
executors?: ClientPolicyExecutorRepresentation[];
name?: string;
type ClientProfile = ClientProfileRepresentation & {
global: boolean;
};
@ -33,8 +31,12 @@ export const ProfilesTab = () => {
const adminClient = useAdminClient();
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const [profiles, setProfiles] = useState<ClientProfile[]>();
const [tableProfiles, setTableProfiles] = useState<ClientProfile[]>();
const [globalProfiles, setGlobalProfiles] =
useState<ClientProfileRepresentation[]>();
const [selectedProfile, setSelectedProfile] = useState<ClientProfile>();
const [show, setShow] = useState(false);
const [key, setKey] = useState(0);
const loader = async () => {
const allProfiles = await adminClient.clientPolicies.listProfiles({
@ -42,6 +44,8 @@ export const ProfilesTab = () => {
includeGlobalProfiles: true,
});
setGlobalProfiles(allProfiles.globalProfiles);
const globalProfiles = allProfiles.globalProfiles?.map(
(globalProfiles) => ({
...globalProfiles,
@ -55,12 +59,15 @@ export const ProfilesTab = () => {
}));
const allClientProfiles = globalProfiles?.concat(profiles ?? []);
setProfiles(allClientProfiles);
setTableProfiles(allClientProfiles);
return allClientProfiles ?? [];
};
const code = useMemo(() => JSON.stringify(profiles, null, 2), [profiles]);
const code = useMemo(
() => JSON.stringify(tableProfiles, null, 2),
[tableProfiles]
);
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("deleteClientProfileConfirmTitle"),
@ -68,9 +75,19 @@ export const ProfilesTab = () => {
continueButtonLabel: t("delete"),
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
const updatedProfiles = tableProfiles
?.filter(
(profile) => profile.name !== selectedProfile?.name && !profile.global
)
.map<ClientProfileRepresentation>((profile) => omit(profile, "global"));
try {
// delete client profile here
await adminClient.clientPolicies.createProfiles({
profiles: updatedProfiles,
globalProfiles,
});
addAlert(t("deleteClientSuccess"), AlertVariant.success);
setKey(key + 1);
} catch (error) {
addError(t("deleteClientError"), error);
}
@ -102,6 +119,7 @@ export const ProfilesTab = () => {
label={t("profilesConfigTypes.formView")}
id="formView-radioBtn"
className="kc-form-radio-btn pf-u-mr-sm pf-u-ml-sm"
data-testid="formView-radioBtn"
/>
</FlexItem>
<FlexItem>
@ -112,6 +130,7 @@ export const ProfilesTab = () => {
label={t("profilesConfigTypes.jsonEditor")}
id="jsonEditor-radioBtn"
className="kc-editor-radio-btn"
data-testid="jsonEditor-radioBtn"
/>
</FlexItem>
</Flex>
@ -119,6 +138,7 @@ export const ProfilesTab = () => {
<Divider />
{!show ? (
<KeycloakDataTable
key={key}
ariaLabelKey="userEventsRegistered"
searchPlaceholderKey="realm-settings:clientProfileSearch"
isPaginated
@ -136,11 +156,12 @@ export const ProfilesTab = () => {
</Button>
</ToolbarItem>
}
isRowDisabled={(value) => value.global === true}
isRowDisabled={(value) => value.global}
actions={[
{
title: t("common:delete"),
onRowClick: () => {
onRowClick: (profile) => {
setSelectedProfile(profile);
toggleDeleteDialog();
},
},
@ -181,7 +202,7 @@ export const ProfilesTab = () => {
>
{t("save")}
</Button>
<Button variant={ButtonVariant.secondary}> {t("reload")}</Button>
<Button variant={ButtonVariant.link}> {t("reload")}</Button>
</div>
</>
)}

4
src/realm-settings/RealmSettingsSection.css
View file

@ -193,3 +193,7 @@ article.pf-c-card.pf-m-flat.kc-login-settings-template
.kc-editor-radio-btn > input {
transform: scale(1.6);
}
.kc-addExecutor {
float: right;
}

10
src/realm-settings/messages.ts
View file

@ -234,6 +234,10 @@ export default {
deleteClientSuccess: "Client profile deleted",
deleteClientError: "Could not delete profile: {{error}}",
createClientProfile: "Create client profile",
createClientProfileSuccess: "New client profile created",
createClientProfileError: "Could not create client profile: '{{error}}'",
createClientProfileNameHelperText:
"The name must be unique within the realm",
allClientPolicies: "Client policies",
newClientProfile: "Create client profile",
newClientProfileName: "Client profile name",
@ -242,6 +246,12 @@ export default {
reload: "Reload",
global: "Global",
description: "description",
executors: "Executors",
executorsHelpText:
"Executors, which will be applied for this client profile",
executorsHelpItem: "Executors help item",
addExecutor: "Add executor",
emptyExecutors: "No executors configured",
tokens: "Tokens",
key: "Key",
value: "Value",