improvement: add pagination, sort and filtering to identity projects table with minor UI adjustments

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx

@@ -62,7 +62,7 @@ export const IdentityProjectRow = ({
         });
       }}
     >
-      <Td>{project.name}</Td>
+      <Td className="max-w-0 truncate">{project.name}</Td>
       <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx

@@ -1,7 +1,18 @@
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faFolder,
+  faMagnifyingGlass,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   EmptyState,
+  IconButton,
+  Input,
+  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -10,7 +21,9 @@ import {
   THead,
   Tr
 } from "@app/components/v2";
+import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetIdentityProjectMemberships } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityProjectRow } from "./IdentityProjectRow";
@@ -23,36 +36,115 @@ type Props = {
   ) => void;
 };
 
+enum IdentityProjectsOrderBy {
+  Name = "name"
+}
+
 export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) => {
-  const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
+  const { data: projectMemberships = [], isLoading } = useGetIdentityProjectMemberships(identityId);
+
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    toggleOrderDirection
+  } = usePagination(IdentityProjectsOrderBy.Name, { initPerPage: 10 });
+
+  const filteredProjectMemberships = useMemo(
+    () =>
+      projectMemberships
+        ?.filter((membership) =>
+          membership.project.name.toLowerCase().includes(search.trim().toLowerCase())
+        )
+        .sort((a, b) => {
+          const [membershipOne, membershipTwo] =
+            orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+          return membershipOne.project.name
+            .toLowerCase()
+            .localeCompare(membershipTwo.project.name.toLowerCase());
+        }) ?? [],
+    [projectMemberships, orderDirection, search]
+  );
+
+  useResetPageHelper({
+    totalCount: filteredProjectMemberships.length,
+    offset,
+    setPage
+  });
+
   return (
-    <TableContainer>
+    <div>
-      <Table>
+      <Input
-        <THead>
+        value={search}
-          <Tr>
+        onChange={(e) => setSearch(e.target.value)}
-            <Th>Name</Th>
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            <Th>Role</Th>
+        placeholder="Search projects..."
-            <Th>Added On</Th>
+      />
-            <Th className="w-5" />
+      <TableContainer className="mt-4">
-          </Tr>
+        <Table>
-        </THead>
+          <THead>
-        <TBody>
+            <Tr>
-          {isLoading && <TableSkeleton columns={4} innerKey="identity-project-memberships" />}
+              <Th className="w-2/3">
-          {!isLoading &&
+                <div className="flex items-center">
-            projectMemberships?.map((membership) => {
+                  Name
-              return (
+                  <IconButton
-                <IdentityProjectRow
+                    variant="plain"
-                  key={`identity-project-membership-${membership.id}`}
+                    className="ml-2"
-                  membership={membership}
+                    ariaLabel="sort"
-                  handlePopUpOpen={handlePopUpOpen}
+                    onClick={toggleOrderDirection}
-                />
+                  >
-              );
+                    <FontAwesomeIcon
-            })}
+                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
-        </TBody>
+                    />
-      </Table>
+                  </IconButton>
-      {!isLoading && !projectMemberships?.length && (
+                </div>
-        <EmptyState title="This identity has not been assigned to any projects" icon={faFolder} />
+              </Th>
-      )}
+
-    </TableContainer>
+              <Th>Role</Th>
+              <Th>Added On</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={4} innerKey="identity-project-memberships" />}
+            {!isLoading &&
+              filteredProjectMemberships.slice(offset, perPage * page).map((membership) => {
+                return (
+                  <IdentityProjectRow
+                    key={`identity-project-membership-${membership.id}`}
+                    membership={membership}
+                    handlePopUpOpen={handlePopUpOpen}
+                  />
+                );
+              })}
+          </TBody>
+        </Table>
+        {Boolean(filteredProjectMemberships.length) && (
+          <Pagination
+            count={filteredProjectMemberships.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={setPerPage}
+          />
+        )}
+        {!isLoading && !filteredProjectMemberships?.length && (
+          <EmptyState
+            title={
+              projectMemberships.length
+                ? "No projects match search..."
+                : "This identity has not been assigned to any projects"
+            }
+            icon={projectMemberships.length ? faSearch : faFolder}
+          />
+        )}
+      </TableContainer>
+    </div>
   );
 };

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx

@@ -49,7 +49,6 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
     perPage,
     setPerPage,
     offset,
-    limit,
     orderDirection,
     toggleOrderDirection
   } = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 });
@@ -59,7 +58,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
     membershipId
   );
 
-  const filteredProjects = useMemo(
+  const filteredProjectMemberships = useMemo(
     () =>
       projectMemberships
         ?.filter((membership) =>
@@ -77,7 +76,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
   );
 
   useResetPageHelper({
-    totalCount: filteredProjects.length,
+    totalCount: filteredProjectMemberships.length,
     offset,
     setPage
   });
@@ -116,7 +115,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
           <TBody>
             {isLoading && <TableSkeleton columns={3} innerKey="user-project-memberships" />}
             {!isLoading &&
-              filteredProjects?.slice(offset, limit * page)?.map((membership) => {
+              filteredProjectMemberships.slice(offset, perPage * page).map((membership) => {
                 return (
                   <UserProjectRow
                     key={`user-project-membership-${membership.id}`}
@@ -127,16 +126,16 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
               })}
           </TBody>
         </Table>
-        {Boolean(filteredProjects.length) && (
+        {Boolean(filteredProjectMemberships.length) && (
           <Pagination
-            count={filteredProjects.length}
+            count={filteredProjectMemberships.length}
             page={page}
             perPage={perPage}
             onChangePage={setPage}
             onChangePerPage={setPerPage}
           />
         )}
-        {!isLoading && !filteredProjects?.length && (
+        {!isLoading && !filteredProjectMemberships?.length && (
           <EmptyState
             title={
               projectMemberships.length