improvement: add pagination, filtering and sort to users projects table with minor UI improvements

frontend/src/hooks/usePagination.tsx

@@ -3,9 +3,16 @@ import { useState } from "react";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useDebounce } from "@app/hooks/useDebounce";
 
-export const usePagination = <T extends string>(initialOrderBy: T) => {
+export const usePagination = <T extends string>(
+  initialOrderBy: T,
+  {
+    initPerPage = 100
+  }: {
+    initPerPage?: number;
+  } = {}
+) => {
   const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(100);
+  const [perPage, setPerPage] = useState(initPerPage);
   const [orderDirection, setOrderDirection] = useState(OrderByDirection.ASC);
   const [orderBy, setOrderBy] = useState<T>(initialOrderBy);
   const [search, setSearch] = useState("");
@@ -26,6 +33,10 @@ export const usePagination = <T extends string>(initialOrderBy: T) => {
     search,
     setSearch,
     orderBy,
-    setOrderBy
+    setOrderBy,
+    toggleOrderDirection: () =>
+      setOrderDirection((prev) =>
+        prev === OrderByDirection.DESC ? OrderByDirection.ASC : OrderByDirection.DESC
+      )
   };
 };

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

@@ -58,7 +58,7 @@ export const UserProjectRow = ({
         });
       }}
     >
-      <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/UserPage/components/UserProjectsSection/UserProjectsTable.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,
@@ -11,7 +22,9 @@ import {
   Tr
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrgMembershipProjectMemberships } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { UserProjectRow } from "./UserProjectRow";
@@ -21,42 +34,117 @@ type Props = {
   handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromProject"]>, data?: {}) => void;
 };
 
+enum UserProjectsOrderBy {
+  Name = "Name"
+}
+
 export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    limit,
+    orderDirection,
+    toggleOrderDirection
+  } = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 });
 
-  const { data: projectMemberships, isLoading } = useGetOrgMembershipProjectMemberships(
+  const { data: projectMemberships = [], isLoading } = useGetOrgMembershipProjectMemberships(
     orgId,
     membershipId
   );
 
+  const filteredProjects = 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: filteredProjects.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 className="w-5" />
+      />
-          </Tr>
+      <TableContainer className="mt-4">
-        </THead>
+        <Table>
-        <TBody>
+          <THead>
-          {isLoading && <TableSkeleton columns={3} innerKey="user-project-memberships" />}
+            <Tr>
-          {!isLoading &&
+              <Th className="w-2/3">
-            projectMemberships?.map((membership) => {
+                <div className="flex items-center">
-              return (
+                  Name
-                <UserProjectRow
+                  <IconButton
-                  key={`user-project-membership-${membership.id}`}
+                    variant="plain"
-                  membership={membership}
+                    className="ml-2"
-                  handlePopUpOpen={handlePopUpOpen}
+                    ariaLabel="sort"
-                />
+                    onClick={toggleOrderDirection}
-              );
+                  >
-            })}
+                    <FontAwesomeIcon
-        </TBody>
+                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
-      </Table>
+                    />
-      {!isLoading && !projectMemberships?.length && (
+                  </IconButton>
-        <EmptyState title="This user has not been assigned to any projects" icon={faFolder} />
+                </div>
-      )}
+              </Th>
-    </TableContainer>
+              <Th>Role</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={3} innerKey="user-project-memberships" />}
+            {!isLoading &&
+              filteredProjects?.slice(offset, limit * page)?.map((membership) => {
+                return (
+                  <UserProjectRow
+                    key={`user-project-membership-${membership.id}`}
+                    membership={membership}
+                    handlePopUpOpen={handlePopUpOpen}
+                  />
+                );
+              })}
+          </TBody>
+        </Table>
+        <Pagination
+          count={filteredProjects.length}
+          page={page}
+          perPage={perPage}
+          onChangePage={setPage}
+          onChangePerPage={setPerPage}
+        />
+        {!isLoading && !filteredProjects?.length && (
+          <EmptyState
+            title={
+              projectMemberships.length
+                ? "No projects match search..."
+                : "This user has not been assigned to any projects"
+            }
+            icon={projectMemberships.length ? faSearch : faFolder}
+          />
+        )}
+      </TableContainer>
+    </div>
   );
 };