From fdc2b107a3cc1774bf35a53507da83d822df96e6 Mon Sep 17 00:00:00 2001 From: Jonathan Date: Tue, 17 Jun 2025 17:14:03 +0200 Subject: [PATCH] Add pagination on people Signed-off-by: Bryan Frimin --- apps/console/src/components/SortableTable.tsx | 32 +++++++++++++++++-- apps/console/src/hooks/graph/PeopleGraph.ts | 9 +++--- .../PeopleGraphPaginatedFragment.graphql.ts | 6 ++-- .../PeopleGraphPaginatedQuery.graphql.ts | 10 +++--- .../__generated__/PeopleListQuery.graphql.ts | 10 +++--- .../organizations/people/PeopleListPage.tsx | 10 ++++-- 6 files changed, 56 insertions(+), 21 deletions(-) diff --git a/apps/console/src/components/SortableTable.tsx b/apps/console/src/components/SortableTable.tsx index 2dd0d4140..bce831f7f 100644 --- a/apps/console/src/components/SortableTable.tsx +++ b/apps/console/src/components/SortableTable.tsx @@ -1,4 +1,12 @@ -import { IconChevronTriangleDownSmall, Table, Th } from "@probo/ui"; +import { useTranslate } from "@probo/i18n"; +import { + Button, + IconChevronDown, + IconChevronTriangleDownSmall, + Spinner, + Table, + Th, +} from "@probo/ui"; import clsx from "clsx"; import { createContext, @@ -28,10 +36,17 @@ const defaultOrder = { export function SortableTable({ refetch, + hasNext, + loadNext, + isLoading, ...props }: ComponentProps & { refetch: (o: { order: Order }) => void; + hasNext: boolean; + loadNext: () => void; + isLoading: boolean; }) { + const { __ } = useTranslate(); const [order, setOrder] = useState(defaultOrder); const onOrderChange = (o: Order) => { startTransition(() => { @@ -41,7 +56,20 @@ export function SortableTable({ }; return ( - +
+
+ {hasNext && ( + + )} + ); } diff --git a/apps/console/src/hooks/graph/PeopleGraph.ts b/apps/console/src/hooks/graph/PeopleGraph.ts index 588ab6e19..e1968fdc1 100644 --- a/apps/console/src/hooks/graph/PeopleGraph.ts +++ b/apps/console/src/hooks/graph/PeopleGraph.ts @@ -3,6 +3,7 @@ import type { PeopleGraphQuery } from "./__generated__/PeopleGraphQuery.graphql" import { useLazyLoadQuery, useMutation, + usePaginationFragment, usePreloadedQuery, useRefetchableFragment, type PreloadedQuery, @@ -91,15 +92,15 @@ export function usePeopleQuery( queryRef: PreloadedQuery ) { const data = usePreloadedQuery(paginatedPeopleQuery, queryRef); - const [dataFragment, refetch] = useRefetchableFragment( + const pagination = usePaginationFragment( paginatedPeopleFragment, data.organization as PeopleGraphPaginatedFragment$key ); - const people = dataFragment?.peoples?.edges.map((edge) => edge.node); + const people = pagination.data.peoples?.edges.map((edge) => edge.node); return { + ...pagination, people, - refetch, - connectionId: dataFragment.peoples.__id, + connectionId: pagination.data.peoples.__id, }; } diff --git a/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedFragment.graphql.ts b/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedFragment.graphql.ts index ddc45ef56..a862c4110 100644 --- a/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedFragment.graphql.ts +++ b/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedFragment.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<<452165e3b8b1cdef4b8e62d53c8a73ed>> * @lightSyntaxTransform * @nogrep */ @@ -58,7 +58,7 @@ return { "name": "before" }, { - "defaultValue": 50, + "defaultValue": 1, "kind": "LocalArgument", "name": "first" }, @@ -247,6 +247,6 @@ return { }; })(); -(node as any).hash = "c163b7909a337efd22088852b9908045"; +(node as any).hash = "e1720a7dc0b7914edb8a07f63d5cf95a"; export default node; diff --git a/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedQuery.graphql.ts b/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedQuery.graphql.ts index 38fece81c..f3aae3659 100644 --- a/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedQuery.graphql.ts +++ b/apps/console/src/hooks/graph/__generated__/PeopleGraphPaginatedQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<43878b22fe8a689f41bcd506711ddb5f>> + * @generated SignedSource<<56d7fa0e53727e6a52fc6ab7bc805ceb>> * @lightSyntaxTransform * @nogrep */ @@ -57,7 +57,7 @@ v4 = [ { "kind": "Literal", "name": "first", - "value": 50 + "value": 1 } ]; return { @@ -233,7 +233,7 @@ return { ] } ], - "storageKey": "peoples(first:50)" + "storageKey": "peoples(first:1)" }, { "alias": null, @@ -256,12 +256,12 @@ return { ] }, "params": { - "cacheID": "b154e94ac7e783a492bc5aed7d44229d", + "cacheID": "838b4fd1617a05fcb681c1e533cc0a9f", "id": null, "metadata": {}, "name": "PeopleGraphPaginatedQuery", "operationKind": "query", - "text": "query PeopleGraphPaginatedQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n ...PeopleGraphPaginatedFragment\n }\n id\n }\n}\n\nfragment PeopleGraphPaginatedFragment on Organization {\n peoples(first: 50) {\n edges {\n node {\n id\n fullName\n primaryEmailAddress\n kind\n additionalEmailAddresses\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n" + "text": "query PeopleGraphPaginatedQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n ...PeopleGraphPaginatedFragment\n }\n id\n }\n}\n\nfragment PeopleGraphPaginatedFragment on Organization {\n peoples(first: 1) {\n edges {\n node {\n id\n fullName\n primaryEmailAddress\n kind\n additionalEmailAddresses\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n" } }; })(); diff --git a/apps/console/src/hooks/graph/__generated__/PeopleListQuery.graphql.ts b/apps/console/src/hooks/graph/__generated__/PeopleListQuery.graphql.ts index e720c10dc..daf5b3c5d 100644 --- a/apps/console/src/hooks/graph/__generated__/PeopleListQuery.graphql.ts +++ b/apps/console/src/hooks/graph/__generated__/PeopleListQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -46,7 +46,7 @@ v1 = { "name": "before" }, v2 = { - "defaultValue": 50, + "defaultValue": 1, "kind": "LocalArgument", "name": "first" }, @@ -329,16 +329,16 @@ return { ] }, "params": { - "cacheID": "a17ff68897dbcf3daa33b073bc83f1bb", + "cacheID": "e26cb4d1b42b5500dd12ee294ccce2e5", "id": null, "metadata": {}, "name": "PeopleListQuery", "operationKind": "query", - "text": "query PeopleListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 50\n $last: Int = null\n $order: PeopleOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...PeopleGraphPaginatedFragment_16fISc\n id\n }\n}\n\nfragment PeopleGraphPaginatedFragment_16fISc on Organization {\n peoples(first: $first, after: $after, last: $last, before: $before, orderBy: $order) {\n edges {\n node {\n id\n fullName\n primaryEmailAddress\n kind\n additionalEmailAddresses\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n" + "text": "query PeopleListQuery(\n $after: CursorKey = null\n $before: CursorKey = null\n $first: Int = 1\n $last: Int = null\n $order: PeopleOrder = null\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...PeopleGraphPaginatedFragment_16fISc\n id\n }\n}\n\nfragment PeopleGraphPaginatedFragment_16fISc on Organization {\n peoples(first: $first, after: $after, last: $last, before: $before, orderBy: $order) {\n edges {\n node {\n id\n fullName\n primaryEmailAddress\n kind\n additionalEmailAddresses\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n id\n}\n" } }; })(); -(node as any).hash = "c163b7909a337efd22088852b9908045"; +(node as any).hash = "e1720a7dc0b7914edb8a07f63d5cf95a"; export default node; diff --git a/apps/console/src/pages/organizations/people/PeopleListPage.tsx b/apps/console/src/pages/organizations/people/PeopleListPage.tsx index c48788812..141424cd2 100644 --- a/apps/console/src/pages/organizations/people/PeopleListPage.tsx +++ b/apps/console/src/pages/organizations/people/PeopleListPage.tsx @@ -32,7 +32,8 @@ export default function PeopleListPage({ queryRef: PreloadedQuery; }) { const { __ } = useTranslate(); - const { people, refetch, connectionId } = usePeopleQuery(queryRef); + const { people, refetch, connectionId, hasNext, loadNext, isLoadingNext } = + usePeopleQuery(queryRef); usePageTitle(__("Members")); @@ -48,7 +49,12 @@ export default function PeopleListPage({ - + {__("Name")}