From d8c491123a1b6adf15224d36b1d357b0658125a9 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 5 Apr 2021 16:29:03 -0400
Subject: [PATCH 1/9] add user to groups modal wip

---
 src/user/UserGroups.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/user/UserGroups.tsx b/src/user/UserGroups.tsx
index ce353e47d5..c9d214f102 100644
--- a/src/user/UserGroups.tsx
+++ b/src/user/UserGroups.tsx
@@ -32,7 +32,7 @@ export type UserFormProps = {
     max?: number,
     search?: string
   ) => Promise<UserRepresentation[]>;
-  addGroup?: (newGroup: GroupRepresentation) => void;
+  addGroups?: (newReps: GroupRepresentation[]) => void;
 };
 
 export const UserGroups = () => {
@@ -48,12 +48,17 @@ export const UserGroups = () => {
 
   const [search, setSearch] = useState("");
   const [username, setUsername] = useState("");
+  const [join, setJoin] = useState<GroupTableData>();
+
+  const lastId = getLastId(location.pathname);
+
 
   const [isDirectMembership, setDirectMembership] = useState(true);
   const [directMembershipList, setDirectMembershipList] = useState<
     GroupRepresentation[]
   >([]);
   const [open, setOpen] = useState(false);
+  const [move, setMove] = useState<GroupTableData>();
 
   const adminClient = useAdminClient();
   const { id } = useParams<{ id: string }>();
@@ -205,6 +210,15 @@ export const UserGroups = () => {
   const toggleModal = () => {
     setOpen(!open);
   };
+  const JoinGroupButtonRenderer = (group: GroupRepresentation) => {
+    return (
+      <>
+        <Button onClick={() => joinGroup(group)} variant="link">
+          {t("users:joinGroup")}
+        </Button>
+      </>
+    );
+  };
 
   const joinGroup = (group: GroupRepresentation) => {
     setSelectedGroup(group);

From 0b106cb55929915dae1ed491e11bfaabc364c52b Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 6 Apr 2021 15:42:51 -0400
Subject: [PATCH 2/9] add logic for selecting multiple groups, API does not
 support this yet

---
 src/user/JoinGroupDialog.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx
index 2802acd5bd..aaffe640db 100644
--- a/src/user/JoinGroupDialog.tsx
+++ b/src/user/JoinGroupDialog.tsx
@@ -39,6 +39,10 @@ type Group = GroupRepresentation & {
   checked?: boolean;
 };
 
+type Group = GroupRepresentation & {
+  checked?: boolean;
+};
+
 export const JoinGroupDialog = ({
   onClose,
   open,

From 559bf1cceee63846e3fd902e7fa629d64778b051 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 15 Apr 2021 11:32:19 -0400
Subject: [PATCH 3/9] cfixcheckbox select bug

---
 src/user/JoinGroupDialog.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx
index aaffe640db..2802acd5bd 100644
--- a/src/user/JoinGroupDialog.tsx
+++ b/src/user/JoinGroupDialog.tsx
@@ -39,10 +39,6 @@ type Group = GroupRepresentation & {
   checked?: boolean;
 };
 
-type Group = GroupRepresentation & {
-  checked?: boolean;
-};
-
 export const JoinGroupDialog = ({
   onClose,
   open,

From 62b21dbfe12fde5cfd8bd4ab9fdc5fa6866bd45e Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 15 Apr 2021 15:46:47 -0400
Subject: [PATCH 4/9] add functionality to select and add multiple groups

---
 src/user/UserGroups.tsx | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/user/UserGroups.tsx b/src/user/UserGroups.tsx
index c9d214f102..ce353e47d5 100644
--- a/src/user/UserGroups.tsx
+++ b/src/user/UserGroups.tsx
@@ -32,7 +32,7 @@ export type UserFormProps = {
     max?: number,
     search?: string
   ) => Promise<UserRepresentation[]>;
-  addGroups?: (newReps: GroupRepresentation[]) => void;
+  addGroup?: (newGroup: GroupRepresentation) => void;
 };
 
 export const UserGroups = () => {
@@ -48,17 +48,12 @@ export const UserGroups = () => {
 
   const [search, setSearch] = useState("");
   const [username, setUsername] = useState("");
-  const [join, setJoin] = useState<GroupTableData>();
-
-  const lastId = getLastId(location.pathname);
-
 
   const [isDirectMembership, setDirectMembership] = useState(true);
   const [directMembershipList, setDirectMembershipList] = useState<
     GroupRepresentation[]
   >([]);
   const [open, setOpen] = useState(false);
-  const [move, setMove] = useState<GroupTableData>();
 
   const adminClient = useAdminClient();
   const { id } = useParams<{ id: string }>();
@@ -210,15 +205,6 @@ export const UserGroups = () => {
   const toggleModal = () => {
     setOpen(!open);
   };
-  const JoinGroupButtonRenderer = (group: GroupRepresentation) => {
-    return (
-      <>
-        <Button onClick={() => joinGroup(group)} variant="link">
-          {t("users:joinGroup")}
-        </Button>
-      </>
-    );
-  };
 
   const joinGroup = (group: GroupRepresentation) => {
     setSelectedGroup(group);

From 10b3619ae905f3d64b4f1d0c94cf27235dacf5ab Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 16 Apr 2021 16:15:02 -0400
Subject: [PATCH 5/9] wip add groups to user form

---
 src/user/JoinGroupDialog.tsx |  88 +++++++++++++--------
 src/user/UserForm.tsx        | 144 ++++++++++++++++++++++++++++++++++-
 src/user/messages.json       |   1 +
 src/user/user-section.css    |  14 ++++
 4 files changed, 216 insertions(+), 31 deletions(-)

diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx
index 2802acd5bd..8f417028e2 100644
--- a/src/user/JoinGroupDialog.tsx
+++ b/src/user/JoinGroupDialog.tsx
@@ -31,8 +31,9 @@ export type JoinGroupDialogProps = {
   open: boolean;
   toggleDialog: () => void;
   onClose: () => void;
-  username: string;
+  username?: string;
   onConfirm: (newGroups: Group[]) => void;
+  chips?: any;
 };
 
 type Group = GroupRepresentation & {
@@ -45,6 +46,7 @@ export const JoinGroupDialog = ({
   toggleDialog,
   onConfirm,
   username,
+  chips,
 }: JoinGroupDialogProps) => {
   const { t } = useTranslation("roles");
   const adminClient = useAdminClient();
@@ -61,41 +63,67 @@ export const JoinGroupDialog = ({
 
   const { id } = useParams<{ id: string }>();
 
-  useEffect(
-    () =>
-      asyncStateFetch(
-        async () => {
-          const existingUserGroups = await adminClient.users.listGroups({ id });
-          const allGroups = await adminClient.groups.find();
+  if (id) {
+    useEffect(
+      () =>
+        asyncStateFetch(
+          async () => {
+            const existingUserGroups = await adminClient.users.listGroups({
+              id,
+            });
+            const allGroups = await adminClient.groups.find();
 
-          if (groupId) {
-            const group = await adminClient.groups.findOne({ id: groupId });
-            return { group, groups: group.subGroups! };
-          } else {
-            return {
-              groups: _.differenceBy(allGroups, existingUserGroups, "id"),
-            };
-          }
-        },
-        async ({ group: selectedGroup, groups }) => {
-          if (selectedGroup) {
-            setNavigation([...navigation, selectedGroup]);
-          }
+            if (groupId) {
+              const group = await adminClient.groups.findOne({ id: groupId });
+              return { group, groups: group.subGroups! };
+            } else {
+              return {
+                groups: _.differenceBy(allGroups, existingUserGroups, "id"),
+              };
+            }
+          },
+          async ({ group: selectedGroup, groups }) => {
+            if (selectedGroup) {
+              setNavigation([...navigation, selectedGroup]);
+            }
 
-          groups.forEach((group: Group) => {
-            group.checked = !!selectedRows.find((r) => r.id === group.id);
-          });
-          setGroups(groups);
-        },
-        errorHandler
-      ),
-    [groupId]
-  );
+            groups.forEach((group: Group) => {
+              group.checked = !!selectedRows.find((r) => r.id === group.id);
+            });
+            setGroups(groups);
+          },
+          errorHandler
+        ),
+      [groupId]
+    );
+  }
+
+  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}
-      title={`Join groups for user ${username}`}
+      title={
+        username ? `Join groups for user ${username}` : "Select groups to join"
+      }
       isOpen={open}
       onClose={onClose}
       actions={[
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index 3f7bfcf2ac..fda4c86889 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -2,10 +2,14 @@ import React, { useEffect, useState } from "react";
 import {
   ActionGroup,
   Button,
+  Chip,
+  ChipGroup,
   FormGroup,
+  InputGroup,
   Select,
   SelectOption,
   Switch,
+  TextArea,
   TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -18,6 +22,8 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { asyncStateFetch, useAdminClient } from "../context/auth/AdminClient";
 import { useErrorHandler } from "react-error-boundary";
 import moment from "moment";
+import { JoinGroupDialog } from "./JoinGroupDialog";
+import GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation";
 
 export type UserFormProps = {
   form: UseFormMethods<UserRepresentation>;
@@ -45,6 +51,10 @@ export const UserForm = ({
 
   const watchUsernameInput = watch("username");
   const [timestamp, setTimestamp] = useState(null);
+  const [chips, setChips] = useState<(string | undefined)[]>([]);
+
+  const [list, setList] = useState(false);
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (editMode) {
@@ -56,7 +66,7 @@ export const UserForm = ({
         handleError
       );
     }
-  }, []);
+  }, [chips]);
 
   const setupForm = (user: UserRepresentation) => {
     reset();
@@ -90,6 +100,82 @@ export const UserForm = ({
     setRequiredUserActionsDropdownOpen(false);
   };
 
+  const deleteItem = (id: string) => {
+    const copyOfChips = chips;
+    console.log("care", id);
+
+    setChips(copyOfChips.filter((item) => item !== id));
+
+    // const index = copyOfChips.indexOf(id);
+    // if (index !== -1) {
+    //   copyOfChips.splice(index, 1);
+    //   setChips(copyOfChips);
+    // }
+  };
+
+  const deleteCategory = () => {
+    setChips([]);
+  };
+
+  const addChips = async (groups: GroupRepresentation[]): Promise<void> => {
+    const newGroups = groups;
+
+    const newGroupNames: (string | undefined)[] = newGroups!.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())
+
+  };
+
+  console.log(watchUsernameInput)
+
+
+  const addGroups = async (groups: GroupRepresentation[]): Promise<void> => {
+    const newGroups = groups;
+
+    newGroups.forEach(async (group) => {
+      try {
+        await adminClient.users.addToGroup({
+          id: id,
+          groupId: group.id!,
+        });
+        setList(true);
+        // refresh();
+        // addAlert(t("users:addedGroupMembership"), AlertVariant.success);
+      } catch (error) {
+        // addAlert(
+        //   t("users:addedGroupMembershipError", { error }),
+        //   AlertVariant.danger
+        // );
+      }
+    });
+  };
+
+  const toggleModal = () => {
+    setOpen(!open);
+  };
+
   return (
     <FormAccess
       isHorizontal
@@ -97,6 +183,15 @@ export const UserForm = ({
       role="manage-users"
       className="pf-u-mt-lg"
     >
+      {open && (
+        <JoinGroupDialog
+          open={open}
+          onClose={() => setOpen(!open)}
+          onConfirm={editMode ? addGroups : addChips}
+          toggleDialog={() => toggleModal()}
+          chips={chips}
+        />
+      )}
       {editMode ? (
         <>
           <FormGroup
@@ -295,6 +390,53 @@ export const UserForm = ({
           )}
         />
       </FormGroup>
+      {!editMode && (
+        <FormGroup
+          label={t("common:groups")}
+          fieldId="kc-groups"
+          validated={errors.requiredActions ? "error" : "default"}
+          helperTextInvalid={t("common:required")}
+          labelIcon={
+            <HelpItem
+              helpText={t("requiredUserActionsHelpText")}
+              forLabel={t("requiredUserActions")}
+              forID="required-user-actions-label"
+            />
+          }
+        >
+          <Controller
+            name="groups"
+            defaultValue={[]}
+            typeAheadAriaLabel="Select an action"
+            control={control}
+            render={() => (
+              <>
+                <InputGroup>
+                  <ChipGroup categoryName={" "} onClick={deleteCategory}>
+                    {chips.map((currentChip) => (
+                      <Chip
+                        key={currentChip}
+                        onClick={() => deleteItem(currentChip!)}
+                      >
+                        {currentChip}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                  <Button
+                    id="kc-join-groups-button"
+                    onClick={toggleModal}
+                    variant="secondary"
+                    // isDisabled={!watchUsernameInput}
+                  >
+                    {t("users:joinGroups")}
+                  </Button>
+                </InputGroup>
+              </>
+            )}
+          />
+        </FormGroup>
+      )}
+
       <ActionGroup>
         <Button
           data-testid={!editMode ? "create-user" : "save-user"}
diff --git a/src/user/messages.json b/src/user/messages.json
index 9269dac8c1..809e306abe 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -10,6 +10,7 @@
     "noGroups": "No groups",
     "noGroupsText": "You haven't added this user to any groups. Join a group to get started.",
     "joinGroup": "Join Group",
+    "joinGroups": "Join Groups",
     "searchForGroups": "Search for groups",
     "leave": "Leave",
     "leaveGroup": "Leave group {{name}}?",
diff --git a/src/user/user-section.css b/src/user/user-section.css
index aa29384b53..420f767c97 100644
--- a/src/user/user-section.css
+++ b/src/user/user-section.css
@@ -6,3 +6,17 @@ button.pf-c-button.pf-m-primary.kc-join-group-button {
   margin-left: var(--pf-global--spacer--md);
   margin-right: var(--pf-global--spacer--xl);
 }
+
+.pf-c-chip-group,
+.pf-c-chip-group__list {
+  width: 100%;
+}
+
+button#kc-join-groups-button {
+  height: min-content;
+}
+
+.pf-c-chip-group.pf-m-category {
+  margin-right: var(--pf-global--spacer--md);
+  padding: var(--pf-global--spacer--xs);
+}

From 033388bb67fda0830005a3bc1e7aed75005ea227 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 20 Apr 2021 08:22:36 -0400
Subject: [PATCH 6/9] 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 (
     <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"
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index fda4c86889..7f5996dc54 100644
--- a/src/user/UserForm.tsx
+++ b/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));
-
-    // 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>
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<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>
     </>
   );

From cbce18f5f7e06150c3f227d2314a85a9d34fef0b Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 20 Apr 2021 11:08:33 -0400
Subject: [PATCH 7/9] navigate to subgroups in modal

---
 src/user/JoinGroupDialog.tsx | 70 ++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx
index 318db6c744..8c473c1fce 100644
--- a/src/user/JoinGroupDialog.tsx
+++ b/src/user/JoinGroupDialog.tsx
@@ -63,52 +63,44 @@ export const JoinGroupDialog = ({
 
   const { id } = useParams<{ id: string }>();
 
-  if (id) {
-    useEffect(
-      () =>
-        asyncStateFetch(
-          async () => {
+  useEffect(
+    () =>
+      asyncStateFetch(
+        async () => {
+          const allGroups = await adminClient.groups.find();
+
+          if (groupId) {
+            const group = await adminClient.groups.findOne({ id: groupId });
+            return { group, groups: group.subGroups! };
+          } else if (id) {
             const existingUserGroups = await adminClient.users.listGroups({
               id,
             });
-            const allGroups = await adminClient.groups.find();
 
-            if (groupId) {
-              const group = await adminClient.groups.findOne({ id: groupId });
-              return { group, groups: group.subGroups! };
-            } else {
-              return {
-                groups: _.differenceBy(allGroups, existingUserGroups, "id"),
-              };
-            }
-          },
-          async ({ group: selectedGroup, groups }) => {
-            if (selectedGroup) {
-              setNavigation([...navigation, selectedGroup]);
-            }
-
-            groups.forEach((group: Group) => {
-              group.checked = !!selectedRows.find((r) => r.id === group.id);
-            });
-            setGroups(groups);
-          },
-          errorHandler
-        ),
-      [groupId]
-    );
-  } else if (!id) {
-    useEffect(() => {
-      return asyncStateFetch(
-        () => {
-          return Promise.resolve(adminClient.groups.find());
+            return {
+              groups: _.differenceBy(allGroups, existingUserGroups, "id"),
+            };
+          } else
+            return {
+              groups: allGroups,
+            };
         },
-        (groups) => {
-          setGroups([...groups.filter((row) => !chips.includes(row.name))]);
+        async ({ group: selectedGroup, groups }) => {
+          if (selectedGroup) {
+            setNavigation([...navigation, selectedGroup]);
+          }
+
+          groups.forEach((group: Group) => {
+            group.checked = !!selectedRows.find((r) => r.id === group.id);
+          });
+          id
+            ? setGroups(groups)
+            : setGroups([...groups.filter((row) => !chips.includes(row.name))]);
         },
         errorHandler
-      );
-    }, []);
-  }
+      ),
+    [groupId]
+  );
 
   return (
     <Modal

From 68066d093e5a121c1d4544766c7a229cf2ca5df8 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 21 Apr 2021 09:53:21 -0400
Subject: [PATCH 8/9] address PR feedback from Mark

---
 src/user/JoinGroupDialog.tsx | 2 +-
 src/user/messages.json       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx
index 8c473c1fce..feaf843e63 100644
--- a/src/user/JoinGroupDialog.tsx
+++ b/src/user/JoinGroupDialog.tsx
@@ -106,7 +106,7 @@ export const JoinGroupDialog = ({
     <Modal
       variant={ModalVariant.small}
       title={
-        username ? `Join groups for user ${username}` : "Select groups to join"
+        username ? t("users:joinGroupsFor") + username : t("users:selectGroups")
       }
       isOpen={open}
       onClose={onClose}
diff --git a/src/user/messages.json b/src/user/messages.json
index 809e306abe..417de6fa22 100644
--- a/src/user/messages.json
+++ b/src/user/messages.json
@@ -11,6 +11,8 @@
     "noGroupsText": "You haven't added this user to any groups. Join a group to get started.",
     "joinGroup": "Join Group",
     "joinGroups": "Join Groups",
+    "joinGroupsFor": "Join groups for user ",
+    "selectGroups": "Select groups to join",
     "searchForGroups": "Search for groups",
     "leave": "Leave",
     "leaveGroup": "Leave group {{name}}?",
@@ -57,7 +59,5 @@
     "consents": "Consents",
     "noConsents": "No consents",
     "noConsentsText": "The consents will only be recorded when users try to access a client that is configured to require consent. In that case, users will get a consent page which asks them to grant access to the client."
-
-
   }
 }

From 1791daee8048b10fb8a173e7ad289db360cada79 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 21 Apr 2021 09:55:14 -0400
Subject: [PATCH 9/9] remove comment in cypress test

---
 cypress/integration/users_test.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cypress/integration/users_test.spec.ts b/cypress/integration/users_test.spec.ts
index faebcf4871..70c1531937 100644
--- a/cypress/integration/users_test.spec.ts
+++ b/cypress/integration/users_test.spec.ts
@@ -16,7 +16,6 @@ describe("Group creation", () => {
   const loginPage = new LoginPage();
   const masthead = new Masthead();
   const sidebarPage = new SidebarPage();
-  const listingPage = new ListingPage();
   const groupModal = new GroupModal();
 
   beforeEach(function () {
@@ -37,7 +36,6 @@ describe("Group creation", () => {
     masthead.checkNotificationMessage("Group created");
 
     sidebarPage.goToGroups();
-    // listingPage.searchItem(groupName, false).itemExist(groupName);
   }
 
   it("Add groups to be joined", () => {