update user form with new design

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);
+    for (let i = 0; i <= 2; i++) {
-
+      createNewGroup();
-    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);
   });
 });
 
@@ -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();
     });
 

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

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;

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 (
     <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"

src/user/UserForm.tsx

@@ -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));
-
+    setSelectedGroups(copyOfGroups.filter((item) => item.name !== id));
-    // const index = copyOfChips.indexOf(id);
+    onGroupsUpdate(selectedGroups);
-    // if (index !== -1) {
-    //   copyOfChips.splice(index, 1);
-    //   setChips(copyOfChips);
-    // }
-  };
-
-  const deleteCategory = () => {
-    setChips([]);
   };
 
   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]);
-
+    setSelectedGroups([...selectedGroups!, ...newSelectedGroups]);
-    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())
-
   };
 
-  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);
+        addAlert(t("users:addedGroupMembership"), AlertVariant.success);
-        // refresh();
-        // addAlert(t("users:addedGroupMembership"), AlertVariant.success);
       } catch (error) {
-        // addAlert(
+        addAlert(
-        //   t("users:addedGroupMembershipError", { error }),
+          t("users:addedGroupMembershipError", { error }),
-        //   AlertVariant.danger
+          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>

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<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>
     </>
   );