added more options in the context menu (#3676)

fixes: #3607

apps/admin-ui/public/resources/en/groups.json

@@ -3,6 +3,7 @@
   "groupDetails": "Group details",
   "childGroups": "Child groups",
   "createGroup": "Create group",
+  "createChildGroup": "Create child group",
   "groupName": "Group name",
   "searchForGroups": "Search for groups",
   "searchFor": "Search for:",

apps/admin-ui/src/groups/GroupTable.tsx

@@ -29,8 +29,10 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
 
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [selectedRows, setSelectedRows] = useState<GroupRepresentation[]>([]);
+
+  const [rename, setRename] = useState<GroupRepresentation>();
+  const [isCreateModalOpen, toggleCreateOpen] = useToggle();
   const [showDelete, toggleShowDelete] = useToggle();
   const [move, setMove] = useState<GroupRepresentation>();
 
@@ -99,10 +101,6 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
     );
   };
 
-  const handleModalToggle = () => {
-    setIsCreateModalOpen(!isCreateModalOpen);
-  };
-
   return (
     <>
       <DeleteGroup
@@ -115,6 +113,39 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
           setSelectedRows([]);
         }}
       />
+      {rename && (
+        <GroupsModal
+          id={rename.id}
+          rename={rename.name}
+          refresh={() => {
+            refresh();
+            viewRefresh();
+          }}
+          handleModalToggle={() => setRename(undefined)}
+        />
+      )}
+      {isCreateModalOpen && (
+        <GroupsModal
+          id={selectedRows[0]?.id || id}
+          handleModalToggle={toggleCreateOpen}
+          refresh={() => {
+            setSelectedRows([]);
+            refresh();
+            viewRefresh();
+          }}
+        />
+      )}
+      {move && (
+        <MoveDialog
+          source={move}
+          refresh={() => {
+            setMove(undefined);
+            refresh();
+            viewRefresh();
+          }}
+          onClose={() => setMove(undefined)}
+        />
+      )}
       <KeycloakDataTable
         key={`${id}${key}`}
         onSelect={(rows) => setSelectedRows([...rows])}
@@ -139,7 +170,7 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
               />
             </ToolbarItem>
             <GroupToolbar
-              toggleCreate={handleModalToggle}
+              toggleCreate={toggleCreateOpen}
               toggleDelete={toggleShowDelete}
               kebabDisabled={selectedRows!.length === 0}
             />
@@ -149,6 +180,13 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
           !isManager
             ? []
             : [
+                {
+                  title: t("rename"),
+                  onRowClick: async (group) => {
+                    setRename(group);
+                    return false;
+                  },
+                },
                 {
                   title: t("moveTo"),
                   onRowClick: async (group) => {
@@ -156,6 +194,17 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
                     return false;
                   },
                 },
+                {
+                  title: t("createChildGroup"),
+                  onRowClick: async (group) => {
+                    setSelectedRows([group]);
+                    toggleCreateOpen();
+                    return false;
+                  },
+                },
+                {
+                  isSeparator: true,
+                },
                 {
                   title: t("common:delete"),
                   onRowClick: async (group: GroupRepresentation) => {
@@ -181,31 +230,10 @@ export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
               `noGroupsInThis${id ? "SubGroup" : "Realm"}Instructions`
             )}
             primaryActionText={t("createGroup")}
-            onPrimaryAction={handleModalToggle}
+            onPrimaryAction={toggleCreateOpen}
           />
         }
       />
-      {isCreateModalOpen && (
-        <GroupsModal
-          id={id}
-          handleModalToggle={handleModalToggle}
-          refresh={() => {
-            refresh();
-            viewRefresh();
-          }}
-        />
-      )}
-      {move && (
-        <MoveDialog
-          source={move}
-          refresh={() => {
-            setMove(undefined);
-            refresh();
-            viewRefresh();
-          }}
-          onClose={() => setMove(undefined)}
-        />
-      )}
     </>
   );
 };

apps/admin-ui/src/groups/components/GroupTree.tsx

@@ -5,6 +5,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownPosition,
+  DropdownSeparator,
   KebabToggle,
   TreeView,
   TreeViewDataItem,
@@ -35,12 +36,23 @@ const GroupTreeContextMenu = ({
   const { t } = useTranslation("groups");
 
   const [isOpen, toggleOpen] = useToggle();
+  const [renameOpen, toggleRenameOpen] = useToggle();
   const [createOpen, toggleCreateOpen] = useToggle();
   const [moveOpen, toggleMoveOpen] = useToggle();
   const [deleteOpen, toggleDeleteOpen] = useToggle();
 
   return (
     <>
+      {renameOpen && (
+        <GroupsModal
+          id={group.id}
+          rename={group.name}
+          refresh={() => {
+            refresh();
+          }}
+          handleModalToggle={toggleRenameOpen}
+        />
+      )}
       {createOpen && (
         <GroupsModal
           id={group.id}
@@ -63,12 +75,16 @@ const GroupTreeContextMenu = ({
         isPlain
         position={DropdownPosition.right}
         dropdownItems={[
-          <DropdownItem key="create" onClick={toggleCreateOpen}>
-            {t("createGroup")}
+          <DropdownItem key="rename" onClick={toggleRenameOpen}>
+            {t("rename")}
           </DropdownItem>,
           <DropdownItem key="move" onClick={toggleMoveOpen}>
             {t("moveTo")}
           </DropdownItem>,
+          <DropdownItem key="create" onClick={toggleCreateOpen}>
+            {t("createChildGroup")}
+          </DropdownItem>,
+          <DropdownSeparator key="separator" />,
           <DropdownItem key="delete" onClick={toggleDeleteOpen}>
             {t("common:delete")}
           </DropdownItem>,