diff --git a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
index 0a9301d56..4cbd1362d 100644
--- a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
+++ b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx
@@ -62,7 +62,7 @@ export const IdentityProjectRow = ({
});
}}
>
-
{project.name} |
+ {project.name} |
{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
roles.length > 1 ? ` (+${roles.length - 1})` : ""
}`} |
diff --git a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx b/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx
index a005ad1c8..86d6185f5 100644
--- a/frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx
+++ b/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 (
-
-
-
-
- | Name |
- Role |
- Added On |
- |
-
-
-
- {isLoading && }
- {!isLoading &&
- projectMemberships?.map((membership) => {
- return (
-
- );
- })}
-
-
- {!isLoading && !projectMemberships?.length && (
-
- )}
-
+
+
setSearch(e.target.value)}
+ leftIcon={
}
+ placeholder="Search projects..."
+ />
+
+
+
+
+ |
+
+ Name
+
+
+
+
+ |
+
+ Role |
+ Added On |
+ |
+
+
+
+ {isLoading && }
+ {!isLoading &&
+ filteredProjectMemberships.slice(offset, perPage * page).map((membership) => {
+ return (
+
+ );
+ })}
+
+
+ {Boolean(filteredProjectMemberships.length) && (
+
+ )}
+ {!isLoading && !filteredProjectMemberships?.length && (
+
+ )}
+
+
);
};
diff --git a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx
index ab50937d9..eda562055 100644
--- a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx
+++ b/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) => {
{isLoading && }
{!isLoading &&
- filteredProjects?.slice(offset, limit * page)?.map((membership) => {
+ filteredProjectMemberships.slice(offset, perPage * page).map((membership) => {
return (
{
})}
- {Boolean(filteredProjects.length) && (
+ {Boolean(filteredProjectMemberships.length) && (
)}
- {!isLoading && !filteredProjects?.length && (
+ {!isLoading && !filteredProjectMemberships?.length && (