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

update user form with new design

Browse source
This commit is contained in:
jenny-s51 2021-04-20 08:22:36 -04:00
parent 10b3619ae9
commit 033388bb67
6 changed files with 124 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
cypress/integration/users_test.spec.ts
View file

@ -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();
});

16
cypress/support/pages/admin_console/manage/users/CreateUserPage.ts
View file

@ -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();

4
cypress/support/pages/admin_console/manage/users/UserGroupsPage.ts
View file

@ -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;

34
src/user/JoinGroupDialog.tsx
View file

@ -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 (
<Modal
variant={ModalVariant.small}
@ -128,7 +120,7 @@ export const JoinGroupDialog = ({
onClose={onClose}
actions={[
<Button
data-testid="joinGroup"
data-testid="join-button"
key="confirm"
variant="primary"
form="group-form"

71
src/user/UserForm.tsx
View file

@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import {
ActionGroup,
AlertVariant,
Button,
Chip,
ChipGroup,
@ -9,7 +10,6 @@ import {
Select,
SelectOption,
Switch,
TextArea,
TextInput,
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
@ -24,18 +24,21 @@ import { useErrorHandler } from "react-error-boundary";
import moment from "moment";
import { JoinGroupDialog } from "./JoinGroupDialog";
import GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation";
import { useAlerts } from "../components/alert/Alerts";
export type UserFormProps = {
form: UseFormMethods<UserRepresentation>;
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<GroupRepresentation[]>(
[]
);
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<void> => {
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<void> => {
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={() => (
<>
<InputGroup>
<ChipGroup categoryName={" "} onClick={deleteCategory}>
<ChipGroup categoryName={" "}>
{chips.map((currentChip) => (
<Chip
key={currentChip}
@ -426,7 +401,7 @@ export const UserForm = ({
id="kc-join-groups-button"
onClick={toggleModal}
variant="secondary"
// isDisabled={!watchUsernameInput}
data-testid="join-groups-button"
>
{t("users:joinGroups")}
</Button>

32
src/user/UsersTabs.tsx
View file

@ -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<UserRepresentation>({ mode: "onChange" });
const { id } = useParams<{ id: string }>();
const [user, setUser] = useState("");
const [addedGroups, setAddedGroups] = useState<GroupRepresentation[]>([]);
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={<TabTitleText>{t("details")}</TabTitleText>}
>
<UserForm form={userForm} save={save} editMode={true} />
<UserForm
onGroupsUpdate={updateGroups}
form={userForm}
save={save}
editMode={true}
/>
</Tab>
<Tab
eventKey="groups"
@ -88,7 +107,14 @@ export const UsersTabs = () => {
</Tab>
</KeycloakTabs>
)}
{!id && <UserForm form={userForm} save={save} editMode={false} />}
{!id && (
<UserForm
onGroupsUpdate={updateGroups}
form={userForm}
save={save}
editMode={false}
/>
)}
</PageSection>
</>
);