From 033388bb67fda0830005a3bc1e7aed75005ea227 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 20 Apr 2021 08:22:36 -0400 Subject: [PATCH] update user form with new design --- cypress/integration/users_test.spec.ts | 73 +++++++++++-------- .../manage/users/CreateUserPage.ts | 16 ++++ .../manage/users/UserGroupsPage.ts | 4 +- src/user/JoinGroupDialog.tsx | 34 ++++----- src/user/UserForm.tsx | 71 ++++++------------ src/user/UsersTabs.tsx | 32 +++++++- 6 files changed, 124 insertions(+), 106 deletions(-) diff --git a/cypress/integration/users_test.spec.ts b/cypress/integration/users_test.spec.ts index 672e964d49..faebcf4871 100644 --- a/cypress/integration/users_test.spec.ts +++ b/cypress/integration/users_test.spec.ts @@ -25,33 +25,25 @@ describe("Group creation", () => { sidebarPage.goToGroups(); }); + function createNewGroup() { + groupName += "_" + (Math.random() + 1).toString(36).substring(7); + + groupModal + .open("openCreateGroupModal") + .fillGroupForm(groupName) + .clickCreate(); + + groupsList = [...groupsList, groupName]; + masthead.checkNotificationMessage("Group created"); + + sidebarPage.goToGroups(); + // listingPage.searchItem(groupName, false).itemExist(groupName); + } + it("Add groups to be joined", () => { - groupName += "_" + (Math.random() + 1).toString(36).substring(7); - - groupModal - .open("openCreateGroupModal") - .fillGroupForm(groupName) - .clickCreate(); - - groupsList = [...groupsList, groupName]; - masthead.checkNotificationMessage("Group created"); - - sidebarPage.goToGroups(); - listingPage.searchItem(groupName, false).itemExist(groupName); - - groupName = "group"; - groupName += "_" + (Math.random() + 1).toString(36).substring(7); - - groupModal - .open("openCreateGroupModal") - .fillGroupForm(groupName) - .clickCreate(); - - groupsList = [...groupsList, groupName]; - masthead.checkNotificationMessage("Group created"); - - sidebarPage.goToGroups(); - listingPage.searchItem(groupName, false).itemExist(groupName); + for (let i = 0; i <= 2; i++) { + createNewGroup(); + } }); }); @@ -93,7 +85,21 @@ describe("Users test", () => { createUserPage.goToCreateUser(); - createUserPage.createUser(itemId).save(); + createUserPage.createUser(itemId); + + createUserPage.toggleAddGroupModal(); + + const groupsListCopy = groupsList.slice(0, 1); + + console.log(groupsList); + + groupsListCopy.forEach((element) => { + cy.getId(`${element}-check`).click(); + }); + + createUserPage.joinGroups(); + + createUserPage.save(); masthead.checkNotificationMessage("The user has been created"); @@ -126,15 +132,17 @@ describe("Users test", () => { userGroupsPage.goToGroupsTab(); userGroupsPage.toggleAddGroupModal(); - groupsList.forEach((element) => { + cy.wait(1000); + + const groupsListCopy = groupsList.slice(1, 2); + + groupsListCopy.forEach((element) => { cy.getId(`${element}-check`).click(); }); - userGroupsPage.joinGroup(); + userGroupsPage.joinGroups(); cy.wait(1000); - - listingPage.itemExist(groupName); }); it("Leave group test", function () { @@ -142,7 +150,8 @@ describe("Users test", () => { listingPage.goToItemDetails(itemId); // Go to user groups userGroupsPage.goToGroupsTab(); - cy.getId(`leave-${groupName}`).click(); + cy.wait(1000); + cy.contains("Leave").click(); cy.getId("modalConfirm").click(); }); diff --git a/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts b/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts index c0abe02d6e..4f81ed2970 100644 --- a/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts +++ b/cypress/support/pages/admin_console/manage/users/CreateUserPage.ts @@ -4,6 +4,8 @@ export default class CreateUserPage { emptyStateCreateUserBtn: string; searchPgCreateUserBtn: string; addUserBtn: string; + joinGroupsBtn: string; + joinBtn: string; saveBtn: string; cancelBtn: string; @@ -14,6 +16,8 @@ export default class CreateUserPage { this.emptyStateCreateUserBtn = "empty-primary-action"; this.searchPgCreateUserBtn = "create-new-user"; this.addUserBtn = "add-user"; + this.joinGroupsBtn = "join-groups-button"; + this.joinBtn = "join-button"; this.saveBtn = "create-user"; this.cancelBtn = "cancel-create-user"; } @@ -44,6 +48,18 @@ export default class CreateUserPage { return this; } + toggleAddGroupModal() { + cy.getId(this.joinGroupsBtn).click(); + + return this; + } + + joinGroups() { + cy.getId(this.joinBtn).click(); + + return this; + } + save() { cy.getId(this.saveBtn).click(); diff --git a/cypress/support/pages/admin_console/manage/users/UserGroupsPage.ts b/cypress/support/pages/admin_console/manage/users/UserGroupsPage.ts index e45717772d..e29f1b3e81 100644 --- a/cypress/support/pages/admin_console/manage/users/UserGroupsPage.ts +++ b/cypress/support/pages/admin_console/manage/users/UserGroupsPage.ts @@ -6,7 +6,7 @@ export default class UserGroupsPage { constructor() { this.userGroupsTab = "user-groups-tab"; this.addGroupButton = "add-group-button"; - this.joinGroupButton = "joinGroup"; + this.joinGroupButton = "join-button"; } goToGroupsTab() { @@ -21,7 +21,7 @@ export default class UserGroupsPage { return this; } - joinGroup() { + joinGroups() { cy.getId(this.joinGroupButton).click(); return this; diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx index 8f417028e2..318db6c744 100644 --- a/src/user/JoinGroupDialog.tsx +++ b/src/user/JoinGroupDialog.tsx @@ -96,28 +96,20 @@ export const JoinGroupDialog = ({ ), [groupId] ); + } else if (!id) { + useEffect(() => { + return asyncStateFetch( + () => { + return Promise.resolve(adminClient.groups.find()); + }, + (groups) => { + setGroups([...groups.filter((row) => !chips.includes(row.name))]); + }, + errorHandler + ); + }, []); } - else if (!id) { - useEffect(() => { - return asyncStateFetch( - () => { - // adminClient.groups.find(); - return Promise.resolve(adminClient.groups.find()); - }, - (groups) => { - console.log(groups); - console.log("potato", chips) - // setGroups(groups.filter((item) => item.name !== chips)); - setGroups([...groups.filter((row) => !chips.includes(row.name))]); - - // setupForm(realm); - }, - errorHandler - ); - }, []); -} - return ( ; save: (user: UserRepresentation) => void; editMode: boolean; timestamp?: number; + onGroupsUpdate: (groups: GroupRepresentation[]) => void; }; export const UserForm = ({ form: { handleSubmit, register, errors, watch, control, setValue, reset }, save, editMode, + onGroupsUpdate, }: UserFormProps) => { const { t } = useTranslation("users"); const { realm } = useRealm(); @@ -52,8 +55,12 @@ export const UserForm = ({ const watchUsernameInput = watch("username"); const [timestamp, setTimestamp] = useState(null); const [chips, setChips] = useState<(string | undefined)[]>([]); + const [selectedGroups, setSelectedGroups] = useState( + [] + ); + + const { addAlert } = useAlerts(); - const [list, setList] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { @@ -102,54 +109,24 @@ export const UserForm = ({ const deleteItem = (id: string) => { const copyOfChips = chips; - console.log("care", id); + const copyOfGroups = selectedGroups; setChips(copyOfChips.filter((item) => item !== id)); - - // const index = copyOfChips.indexOf(id); - // if (index !== -1) { - // copyOfChips.splice(index, 1); - // setChips(copyOfChips); - // } - }; - - const deleteCategory = () => { - setChips([]); + setSelectedGroups(copyOfGroups.filter((item) => item.name !== id)); + onGroupsUpdate(selectedGroups); }; const addChips = async (groups: GroupRepresentation[]): Promise => { - const newGroups = groups; + const newSelectedGroups = groups; - const newGroupNames: (string | undefined)[] = newGroups!.map( + const newGroupNames: (string | undefined)[] = newSelectedGroups!.map( (item) => item.name ); - console.log(newGroupNames); setChips([...chips!, ...newGroupNames]); - - console.log("newGroups", newGroups) - - newGroups.forEach(async (group) => { - // try { - await adminClient.users.addToGroup({ - id: id, - groupId: group.id!, - }); - // refresh(); - // addAlert(t("users:addedGroupMembership"), AlertVariant.success); - // } catch (error) { - // // addAlert( - // // t("users:addedGroupMembershipError", { error }), - // // AlertVariant.danger - // // ); - // } - }); - - console.log("beep beep", adminClient.users.listGroups()) - + setSelectedGroups([...selectedGroups!, ...newSelectedGroups]); }; - console.log(watchUsernameInput) - + onGroupsUpdate(selectedGroups); const addGroups = async (groups: GroupRepresentation[]): Promise => { const newGroups = groups; @@ -160,14 +137,12 @@ export const UserForm = ({ id: id, groupId: group.id!, }); - setList(true); - // refresh(); - // addAlert(t("users:addedGroupMembership"), AlertVariant.success); + addAlert(t("users:addedGroupMembership"), AlertVariant.success); } catch (error) { - // addAlert( - // t("users:addedGroupMembershipError", { error }), - // AlertVariant.danger - // ); + addAlert( + t("users:addedGroupMembershipError", { error }), + AlertVariant.danger + ); } }); }; @@ -412,7 +387,7 @@ export const UserForm = ({ render={() => ( <> - + {chips.map((currentChip) => ( {t("users:joinGroups")} diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx index 658f469a92..39d1b0ecff 100644 --- a/src/user/UsersTabs.tsx +++ b/src/user/UsersTabs.tsx @@ -17,6 +17,7 @@ import { useHistory, useParams, useRouteMatch } from "react-router-dom"; import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs"; import { UserGroups } from "./UserGroups"; import { UserConsents } from "./UserConsents"; +import GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation"; export const UsersTabs = () => { const { t } = useTranslation("roles"); @@ -28,6 +29,7 @@ export const UsersTabs = () => { const userForm = useForm({ mode: "onChange" }); const { id } = useParams<{ id: string }>(); const [user, setUser] = useState(""); + const [addedGroups, setAddedGroups] = useState([]); useEffect(() => { const update = async () => { @@ -39,13 +41,25 @@ export const UsersTabs = () => { setTimeout(update, 100); }, []); + const updateGroups = (groups: GroupRepresentation[]) => { + setAddedGroups(groups); + }; + const save = async (user: UserRepresentation) => { try { if (id) { await adminClient.users.update({ id: user.id! }, user); addAlert(t("users:userSaved"), AlertVariant.success); } else { - await adminClient.users.create(user); + const getNewUserId = await adminClient.users.create(user); + + addedGroups.forEach(async (group) => { + await adminClient.users.addToGroup({ + id: getNewUserId.id!, + groupId: group.id!, + }); + }); + addAlert(t("users:userCreated"), AlertVariant.success); history.push(url.substr(0, url.lastIndexOf("/"))); } @@ -70,7 +84,12 @@ export const UsersTabs = () => { data-testid="user-details-tab" title={{t("details")}} > - + { )} - {!id && } + {!id && ( + + )} );