improvement: move user groups to own tab and add pagination/search/sort to groups tables

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -7,7 +7,7 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 import { isTabSection, TabSections } from "@app/views/Org/Types";
 
-import { OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
+import { OrgGroupsTab, OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
 
 export const MembersPage = withPermission(
   () => {
@@ -25,9 +25,9 @@ export const MembersPage = withPermission(
     const updateSelectedTab = (tab: string) => {
       router.push({
         pathname: router.pathname,
-        query: { ...router.query, selectedTab: tab },
+        query: { ...router.query, selectedTab: tab }
       });
-    }
+    };
 
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
@@ -36,16 +36,20 @@ export const MembersPage = withPermission(
           <Tabs value={activeTab} onValueChange={updateSelectedTab}>
             <TabList>
               <Tab value={TabSections.Member}>Users</Tab>
+              <Tab value={TabSections.Groups}>Groups</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
                 </div>
               </Tab>
-            <Tab value={TabSections.Roles}>Organization Roles</Tab>
+              <Tab value={TabSections.Roles}>Organization Roles</Tab>
             </TabList>
             <TabPanel value={TabSections.Member}>
               <OrgMembersTab />
             </TabPanel>
+            <TabPanel value={TabSections.Groups}>
+              <OrgGroupsTab />
+            </TabPanel>
             <TabPanel value={TabSections.Identities}>
               <OrgIdentityTab />
             </TabPanel>

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx

@@ -1,9 +1,10 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import {
   faArrowDown,
   faArrowUp,
   faEllipsis,
   faMagnifyingGlass,
+  faSearch,
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -19,6 +20,7 @@ import {
   EmptyState,
   IconButton,
   Input,
+  Pagination,
   Select,
   SelectItem,
   Table,
@@ -31,7 +33,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useDebounce } from "@app/hooks";
+import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -59,14 +61,10 @@ enum GroupsOrderBy {
 }
 
 export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
-  const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
-  const [debouncedSearch] = useDebounce(searchGroupsFilter.trim());
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
-  const { isLoading, data: groups } = useGetOrganizationGroups(orgId);
+  const { isLoading, data: groups = [] } = useGetOrganizationGroups(orgId);
   const { mutateAsync: updateMutateAsync } = useUpdateGroup();
-  const [orderBy, setOrderBy] = useState(GroupsOrderBy.Name);
-  const [orderDirection, setOrderDirection] = useState(OrderByDirection.ASC);
 
   const { data: roles } = useGetOrgRoles(orgId);
 
@@ -90,12 +88,27 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
     }
   };
 
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    orderBy,
+    setOrderBy,
+    setOrderDirection,
+    toggleOrderDirection
+  } = usePagination<GroupsOrderBy>(GroupsOrderBy.Name, { initPerPage: 20 });
+
   const filteredGroups = useMemo(() => {
-    const filtered = debouncedSearch
+    const filtered = search
       ? groups?.filter(
           ({ name, slug }) =>
-            name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
-            slug.toLowerCase().includes(debouncedSearch.toLowerCase())
+            name.toLowerCase().includes(search.toLowerCase()) ||
+            slug.toLowerCase().includes(search.toLowerCase())
         )
       : groups;
 
@@ -113,13 +126,11 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
     });
 
     return orderDirection === OrderByDirection.ASC ? ordered : ordered?.reverse();
-  }, [debouncedSearch, groups, orderBy, orderDirection]);
+  }, [search, groups, orderBy, orderDirection]);
 
   const handleSort = (column: GroupsOrderBy) => {
     if (column === orderBy) {
-      setOrderDirection((prev) =>
-        prev === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
-      );
+      toggleOrderDirection();
       return;
     }
 
@@ -127,11 +138,17 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
     setOrderDirection(OrderByDirection.ASC);
   };
 
+  useResetPageHelper({
+    totalCount: filteredGroups.length,
+    offset,
+    setPage
+  });
+
   return (
     <div>
       <Input
-        value={searchGroupsFilter}
-        onChange={(e) => setSearchGroupsFilter(e.target.value)}
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
         placeholder="Search groups..."
       />
@@ -202,143 +219,160 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
           <TBody>
             {isLoading && <TableSkeleton columns={4} innerKey="org-groups" />}
             {!isLoading &&
-              filteredGroups?.map(({ id, name, slug, role, customRole }) => {
-                return (
-                  <Tr className="h-10" key={`org-group-${id}`}>
-                    <Td>{name}</Td>
-                    <Td>{slug}</Td>
-                    <Td>
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Groups}
-                      >
-                        {(isAllowed) => {
-                          return (
-                            <Select
-                              value={role === "custom" ? (customRole?.slug as string) : role}
-                              isDisabled={!isAllowed}
-                              className="w-48 bg-mineshaft-600"
-                              dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                              onValueChange={(selectedRole) =>
-                                handleChangeRole({
-                                  id,
-                                  role: selectedRole
-                                })
-                              }
+              filteredGroups
+                .slice(offset, perPage * page)
+                .map(({ id, name, slug, role, customRole }) => {
+                  return (
+                    <Tr className="h-10" key={`org-group-${id}`}>
+                      <Td>{name}</Td>
+                      <Td>{slug}</Td>
+                      <Td>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Edit}
+                          a={OrgPermissionSubjects.Groups}
+                        >
+                          {(isAllowed) => {
+                            return (
+                              <Select
+                                value={role === "custom" ? (customRole?.slug as string) : role}
+                                isDisabled={!isAllowed}
+                                className="w-48 bg-mineshaft-600"
+                                dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                                onValueChange={(selectedRole) =>
+                                  handleChangeRole({
+                                    id,
+                                    role: selectedRole
+                                  })
+                                }
+                              >
+                                {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
+                                  <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
+                                    {roleName}
+                                  </SelectItem>
+                                ))}
+                              </Select>
+                            );
+                          }}
+                        </OrgPermissionCan>
+                      </Td>
+                      <Td>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild className="rounded-lg">
+                            <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                            </div>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="start" className="p-1">
+                            <DropdownMenuItem
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                createNotification({
+                                  text: "Copied group ID to clipboard",
+                                  type: "info"
+                                });
+                                navigator.clipboard.writeText(id);
+                              }}
                             >
-                              {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
-                                <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
-                                  {roleName}
-                                </SelectItem>
-                              ))}
-                            </Select>
-                          );
-                        }}
-                      </OrgPermissionCan>
-                    </Td>
-                    <Td>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
-                          <DropdownMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              createNotification({
-                                text: "Copied group ID to clipboard",
-                                type: "info"
-                              });
-                              navigator.clipboard.writeText(id);
-                            }}
-                          >
-                            Copy Group ID
-                          </DropdownMenuItem>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("groupMembers", {
-                                    groupId: id,
-                                    slug
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                              >
-                                Manage Users
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("group", {
-                                    groupId: id,
-                                    name,
-                                    slug,
-                                    role,
-                                    customRole
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                              >
-                                Edit Group
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Groups}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("deleteGroup", {
-                                    groupId: id,
-                                    name
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                              >
-                                Delete Group
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </Td>
-                  </Tr>
-                );
-              })}
+                              Copy Group ID
+                            </DropdownMenuItem>
+                            <OrgPermissionCan
+                              I={OrgPermissionActions.Edit}
+                              a={OrgPermissionSubjects.Identity}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("groupMembers", {
+                                      groupId: id,
+                                      slug
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                >
+                                  Manage Users
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
+                            <OrgPermissionCan
+                              I={OrgPermissionActions.Edit}
+                              a={OrgPermissionSubjects.Identity}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("group", {
+                                      groupId: id,
+                                      name,
+                                      slug,
+                                      role,
+                                      customRole
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                >
+                                  Edit Group
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
+                            <OrgPermissionCan
+                              I={OrgPermissionActions.Delete}
+                              a={OrgPermissionSubjects.Groups}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    isAllowed
+                                      ? "hover:!bg-red-500 hover:!text-white"
+                                      : "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("deleteGroup", {
+                                      groupId: id,
+                                      name
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                >
+                                  Delete Group
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </Td>
+                    </Tr>
+                  );
+                })}
           </TBody>
         </Table>
-        {filteredGroups?.length === 0 && (
+        {Boolean(filteredGroups.length) && (
+          <Pagination
+            count={filteredGroups.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={setPerPage}
+          />
+        )}
+        {!isLoading && !filteredGroups?.length && (
           <EmptyState
-            title={groups?.length === 0 ? "No groups found" : "No groups match search"}
-            icon={faUsers}
+            title={
+              groups.length
+                ? "No organization groups match search..."
+                : "No organization groups found"
+            }
+            icon={groups.length ? faSearch : faUsers}
           />
         )}
       </TableContainer>

frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx

@@ -1,6 +1,5 @@
 import { motion } from "framer-motion";
 
-import { OrgGroupsSection } from "../OrgGroupsTab/components";
 import { OrgMembersSection } from "./components";
 
 export const OrgMembersTab = () => {
@@ -13,7 +12,6 @@ export const OrgMembersTab = () => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <OrgMembersSection />
-      <OrgGroupsSection />
     </motion.div>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -171,7 +171,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
     setOrderBy,
     setOrderDirection,
     toggleOrderDirection
-  } = usePagination<OrgMembersOrderBy>(OrgMembersOrderBy.Name);
+  } = usePagination<OrgMembersOrderBy>(OrgMembersOrderBy.Name, { initPerPage: 20 });
 
   const filteredUsers = useMemo(
     () =>

frontend/src/views/Org/Types/TabSections.ts

@@ -1,9 +1,10 @@
-export enum TabSections {
-  Member = "members",
-  Roles = "roles",
-  Identities = "identities"
-}
-
-export const isTabSection = (value: string): value is TabSections => {
-  return (Object.values(TabSections) as string[]).includes(value);
-}
+export enum TabSections {
+  Member = "members",
+  Groups = "groups",
+  Roles = "roles",
+  Identities = "identities"
+}
+
+export const isTabSection = (value: string): value is TabSections => {
+  return (Object.values(TabSections) as string[]).includes(value);
+};

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -6,9 +6,14 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import { isTabSection,TabSections } from "../Types";
-import { IdentityTab, MembersTab,ProjectRoleListTab, ServiceTokenTab } from "./components";
-
+import { isTabSection, TabSections } from "../Types";
+import {
+  GroupsTab,
+  IdentityTab,
+  MembersTab,
+  ProjectRoleListTab,
+  ServiceTokenTab
+} from "./components";
 
 export const MembersPage = withProjectPermission(
   () => {
@@ -26,9 +31,9 @@ export const MembersPage = withProjectPermission(
     const updateSelectedTab = (tab: string) => {
       router.push({
         pathname: router.pathname,
-        query: { ...router.query, selectedTab: tab },
+        query: { ...router.query, selectedTab: tab }
       });
-    }
+    };
 
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
@@ -37,6 +42,7 @@ export const MembersPage = withProjectPermission(
           <Tabs value={activeTab} onValueChange={updateSelectedTab}>
             <TabList>
               <Tab value={TabSections.Member}>Users</Tab>
+              <Tab value={TabSections.Groups}>Groups</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
@@ -48,6 +54,9 @@ export const MembersPage = withProjectPermission(
             <TabPanel value={TabSections.Member}>
               <MembersTab />
             </TabPanel>
+            <TabPanel value={TabSections.Groups}>
+              <GroupsTab />
+            </TabPanel>
             <TabPanel value={TabSections.Identities}>
               <IdentityTab />
             </TabPanel>

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx

@@ -1,4 +1,12 @@
-import { faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faMagnifyingGlass,
+  faSearch,
+  faTrash,
+  faUsers
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
@@ -6,6 +14,8 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
   IconButton,
+  Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -17,7 +27,9 @@ import {
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useListWorkspaceGroups } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { GroupRoles } from "./GroupRoles";
@@ -32,76 +44,159 @@ type Props = {
   ) => void;
 };
 
+enum GroupsOrderBy {
+  Name = "name"
+}
+
 export const GroupTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
-  const { data, isLoading } = useListWorkspaceGroups(currentWorkspace?.id || "");
+
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    orderBy,
+    toggleOrderDirection
+  } = usePagination(GroupsOrderBy.Name, { initPerPage: 20 });
+
+  const { data: groupMemberships = [], isLoading } = useListWorkspaceGroups(
+    currentWorkspace?.id || ""
+  );
+
+  const filteredGroupMemberships = useMemo(() => {
+    const filtered = search
+      ? groupMemberships?.filter(
+          ({ group: { name, slug } }) =>
+            name.toLowerCase().includes(search.toLowerCase()) ||
+            slug.toLowerCase().includes(search.toLowerCase())
+        )
+      : groupMemberships;
+
+    const ordered = filtered?.sort((a, b) =>
+      a.group.name.toLowerCase().localeCompare(b.group.name.toLowerCase())
+    );
+
+    return orderDirection === OrderByDirection.ASC ? ordered : ordered?.reverse();
+  }, [search, groupMemberships, orderBy, orderDirection]);
+
+  useResetPageHelper({
+    totalCount: filteredGroupMemberships.length,
+    offset,
+    setPage
+  });
+
   return (
-    <TableContainer>
-      <Table>
-        <THead>
-          <Tr>
-            <Th>Name</Th>
-            <Th>Role</Th>
-            <Th>Added on</Th>
-            <Th className="w-5" />
-          </Tr>
-        </THead>
-        <TBody>
-          {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
-          {!isLoading &&
-            data &&
-            data.length > 0 &&
-            data.map(({ group: { id, name }, roles, createdAt }) => {
-              return (
-                <Tr className="group h-10" key={`st-v3-${id}`}>
-                  <Td>{name}</Td>
-                  <Td>
-                    <ProjectPermissionCan
-                      I={ProjectPermissionActions.Edit}
-                      a={ProjectPermissionSub.Groups}
-                    >
-                      {(isAllowed) => (
-                        <GroupRoles roles={roles} disableEdit={!isAllowed} groupId={id} />
-                      )}
-                    </ProjectPermissionCan>
-                  </Td>
-                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                  <Td className="flex justify-end">
-                    <ProjectPermissionCan
-                      I={ProjectPermissionActions.Delete}
-                      a={ProjectPermissionSub.Groups}
-                    >
-                      {(isAllowed) => (
-                        <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                          <Tooltip content="Remove">
-                            <IconButton
-                              onClick={() => {
-                                handlePopUpOpen("deleteGroup", {
-                                  id,
-                                  name
-                                });
-                              }}
-                              colorSchema="danger"
-                              variant="plain"
-                              ariaLabel="update"
-                              className="ml-4"
-                              isDisabled={!isAllowed}
-                            >
-                              <FontAwesomeIcon icon={faTrash} />
-                            </IconButton>
-                          </Tooltip>
-                        </div>
-                      )}
-                    </ProjectPermissionCan>
-                  </Td>
-                </Tr>
-              );
-            })}
-        </TBody>
-      </Table>
-      {!isLoading && data?.length === 0 && (
-        <EmptyState title="No groups have been added to this project" icon={faServer} />
-      )}
-    </TableContainer>
+    <div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search members..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className="ml-2"
+                    ariaLabel="sort"
+                    onClick={toggleOrderDirection}
+                  >
+                    <FontAwesomeIcon
+                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>Role</Th>
+              <Th>Added on</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
+            {!isLoading &&
+              filteredGroupMemberships &&
+              filteredGroupMemberships.length > 0 &&
+              filteredGroupMemberships
+                .slice(offset, perPage * page)
+                .map(({ group: { id, name }, roles, createdAt }) => {
+                  return (
+                    <Tr className="group h-10" key={`st-v3-${id}`}>
+                      <Td>{name}</Td>
+                      <Td>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Edit}
+                          a={ProjectPermissionSub.Groups}
+                        >
+                          {(isAllowed) => (
+                            <GroupRoles roles={roles} disableEdit={!isAllowed} groupId={id} />
+                          )}
+                        </ProjectPermissionCan>
+                      </Td>
+                      <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                      <Td className="flex justify-end">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Delete}
+                          a={ProjectPermissionSub.Groups}
+                        >
+                          {(isAllowed) => (
+                            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                              <Tooltip content="Remove">
+                                <IconButton
+                                  onClick={() => {
+                                    handlePopUpOpen("deleteGroup", {
+                                      id,
+                                      name
+                                    });
+                                  }}
+                                  colorSchema="danger"
+                                  variant="plain"
+                                  ariaLabel="update"
+                                  className="ml-4"
+                                  isDisabled={!isAllowed}
+                                >
+                                  <FontAwesomeIcon icon={faTrash} />
+                                </IconButton>
+                              </Tooltip>
+                            </div>
+                          )}
+                        </ProjectPermissionCan>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+          </TBody>
+        </Table>
+        {Boolean(filteredGroupMemberships.length) && (
+          <Pagination
+            count={filteredGroupMemberships.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={setPerPage}
+          />
+        )}
+        {!isLoading && !filteredGroupMemberships?.length && (
+          <EmptyState
+            title={
+              groupMemberships.length
+                ? "No project groups match search..."
+                : "No project groups found"
+            }
+            icon={groupMemberships.length ? faSearch : faUsers}
+          />
+        )}
+      </TableContainer>
+    </div>
   );
 };

frontend/src/views/Project/MembersPage/components/MembersTab/MembersTab.tsx

@@ -1,12 +1,8 @@
 import { motion } from "framer-motion";
 
-import { useWorkspace } from "@app/context";
-
-import { GroupsSection } from "../GroupsTab/components";
 import { MembersSection } from "./components";
 
 export const MembersTab = () => {
-  const { currentWorkspace } = useWorkspace();
   return (
     <motion.div
       key="panel-project-members"
@@ -16,7 +12,6 @@ export const MembersTab = () => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <MembersSection />
-      {currentWorkspace?.version && currentWorkspace.version > 1 && <GroupsSection />}
     </motion.div>
   );
 };

frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx

@@ -86,7 +86,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
     setOrderBy,
     setOrderDirection,
     toggleOrderDirection
-  } = usePagination<MembersOrderBy>(MembersOrderBy.Name);
+  } = usePagination<MembersOrderBy>(MembersOrderBy.Name, { initPerPage: 20 });
 
   const { data: members = [], isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);