matrix/authentication-service
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2025-11-21 23:00:50 +03:00
Code Activity

frontend: show pagination total count in more lists

Browse Source
This commit is contained in:
Quentin Gliech
2023-07-21 19:14:59 +02:00
parent bbc50edb60
commit c454f5604b
7 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/schema.graphql
View File

@@ -832,6 +832,10 @@ type UpstreamOAuth2LinkConnection {
A list of nodes. A list of nodes.
""" """
nodes: [UpstreamOAuth2Link!]! nodes: [UpstreamOAuth2Link!]!
"""
Identifies the total count of items in the connection.
"""
totalCount: Int!
} }
""" """

2
frontend/src/components/CompatSessionList.tsx
View File

@@ -56,6 +56,7 @@ const QUERY = graphql(/* GraphQL */ `
} }
} }
totalCount
pageInfo { pageInfo {
hasNextPage hasNextPage
hasPreviousPage hasPreviousPage
@@ -123,6 +124,7 @@ const CompatSessionList: React.FC<{ userId: string }> = ({ userId }) => {
<PaginationControls <PaginationControls
onPrev={prevPage ? (): void => paginate(prevPage) : null} onPrev={prevPage ? (): void => paginate(prevPage) : null}
onNext={nextPage ? (): void => paginate(nextPage) : null} onNext={nextPage ? (): void => paginate(nextPage) : null}
count={compatSessionList.totalCount}
disabled={pending} disabled={pending}
/> />
{compatSessionList.edges.map((n) => ( {compatSessionList.edges.map((n) => (

2
frontend/src/components/OAuth2SessionList.tsx
View File

@@ -57,6 +57,7 @@ const QUERY = graphql(/* GraphQL */ `
} }
} }
totalCount
pageInfo { pageInfo {
hasNextPage hasNextPage
hasPreviousPage hasPreviousPage
@@ -128,6 +129,7 @@ const OAuth2SessionList: React.FC<Props> = ({ userId }) => {
<PaginationControls <PaginationControls
onPrev={prevPage ? (): void => paginate(prevPage) : null} onPrev={prevPage ? (): void => paginate(prevPage) : null}
onNext={nextPage ? (): void => paginate(nextPage) : null} onNext={nextPage ? (): void => paginate(nextPage) : null}
count={oauth2Sessions.totalCount}
disabled={pending} disabled={pending}
/> />
{oauth2Sessions.edges.map((n) => ( {oauth2Sessions.edges.map((n) => (

4
frontend/src/components/PaginationControls.tsx
View File

@@ -37,7 +37,9 @@ const PaginationControls: React.FC<Props> = ({
> >
Previous Previous
</Button> </Button>
<div className="text-center">{count && <>Total: {count}</>}</div> <div className="text-center">
{count !== undefined ? <>Total: {count}</> : null}
</div>
<Button <Button
kind="secondary" kind="secondary"
size="sm" size="sm"

12
frontend/src/gql/gql.ts
View File

@@ -31,13 +31,13 @@ const documents = {
types.CompatSession_SessionFragmentDoc, types.CompatSession_SessionFragmentDoc,
"\n mutation EndCompatSession($id: ID!) {\n endCompatSession(input: { compatSessionId: $id }) {\n status\n compatSession {\n id\n finishedAt\n }\n }\n }\n": "\n mutation EndCompatSession($id: ID!) {\n endCompatSession(input: { compatSessionId: $id }) {\n status\n compatSession {\n id\n finishedAt\n }\n }\n }\n":
types.EndCompatSessionDocument, types.EndCompatSessionDocument,
"\n query CompatSessionList(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n compatSessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n node {\n id\n ...CompatSession_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n": "\n query CompatSessionList(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n compatSessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n node {\n id\n ...CompatSession_session\n }\n }\n\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n":
types.CompatSessionListDocument, types.CompatSessionListDocument,
"\n fragment OAuth2Session_session on Oauth2Session {\n id\n scope\n createdAt\n finishedAt\n client {\n id\n clientId\n clientName\n clientUri\n }\n }\n": "\n fragment OAuth2Session_session on Oauth2Session {\n id\n scope\n createdAt\n finishedAt\n client {\n id\n clientId\n clientName\n clientUri\n }\n }\n":
types.OAuth2Session_SessionFragmentDoc, types.OAuth2Session_SessionFragmentDoc,
"\n mutation EndOAuth2Session($id: ID!) {\n endOauth2Session(input: { oauth2SessionId: $id }) {\n status\n oauth2Session {\n id\n ...OAuth2Session_session\n }\n }\n }\n": "\n mutation EndOAuth2Session($id: ID!) {\n endOauth2Session(input: { oauth2SessionId: $id }) {\n status\n oauth2Session {\n id\n ...OAuth2Session_session\n }\n }\n }\n":
types.EndOAuth2SessionDocument, types.EndOAuth2SessionDocument,
"\n query OAuth2SessionListQuery(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n oauth2Sessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n cursor\n node {\n id\n ...OAuth2Session_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n": "\n query OAuth2SessionListQuery(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n oauth2Sessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n cursor\n node {\n id\n ...OAuth2Session_session\n }\n }\n\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n":
types.OAuth2SessionListQueryDocument, types.OAuth2SessionListQueryDocument,
"\n fragment UserEmail_email on UserEmail {\n id\n email\n createdAt\n confirmedAt\n }\n": "\n fragment UserEmail_email on UserEmail {\n id\n email\n createdAt\n confirmedAt\n }\n":
types.UserEmail_EmailFragmentDoc, types.UserEmail_EmailFragmentDoc,
@@ -133,8 +133,8 @@ export function graphql(
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */
export function graphql( export function graphql(
source: "\n query CompatSessionList(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n compatSessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n node {\n id\n ...CompatSession_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n" source: "\n query CompatSessionList(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n compatSessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n node {\n id\n ...CompatSession_session\n }\n }\n\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"
): typeof documents["\n query CompatSessionList(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n compatSessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n node {\n id\n ...CompatSession_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"]; ): typeof documents["\n query CompatSessionList(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n compatSessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n node {\n id\n ...CompatSession_session\n }\n }\n\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"];
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */
@@ -151,8 +151,8 @@ export function graphql(
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */
export function graphql( export function graphql(
source: "\n query OAuth2SessionListQuery(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n oauth2Sessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n cursor\n node {\n id\n ...OAuth2Session_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n" source: "\n query OAuth2SessionListQuery(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n oauth2Sessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n cursor\n node {\n id\n ...OAuth2Session_session\n }\n }\n\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"
): typeof documents["\n query OAuth2SessionListQuery(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n oauth2Sessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n cursor\n node {\n id\n ...OAuth2Session_session\n }\n }\n\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"]; ): typeof documents["\n query OAuth2SessionListQuery(\n $userId: ID!\n $first: Int\n $after: String\n $last: Int\n $before: String\n ) {\n user(id: $userId) {\n id\n oauth2Sessions(\n first: $first\n after: $after\n last: $last\n before: $before\n ) {\n edges {\n cursor\n node {\n id\n ...OAuth2Session_session\n }\n }\n\n totalCount\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n"];
/** /**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/ */

12
frontend/src/gql/graphql.ts
View File

@@ -636,6 +636,8 @@ export type UpstreamOAuth2LinkConnection = {
nodes: Array<UpstreamOAuth2Link>; nodes: Array<UpstreamOAuth2Link>;
/** Information to aid in pagination. */ /** Information to aid in pagination. */
pageInfo: PageInfo; pageInfo: PageInfo;
/** Identifies the total count of items in the connection. */
totalCount: Scalars["Int"]["output"];
}; };
/** An edge in a connection. */ /** An edge in a connection. */
@@ -1000,6 +1002,7 @@ export type CompatSessionListQuery = {
id: string; id: string;
compatSessions: { compatSessions: {
__typename?: "CompatSessionConnection"; __typename?: "CompatSessionConnection";
totalCount: number;
edges: Array<{ edges: Array<{
__typename?: "CompatSessionEdge"; __typename?: "CompatSessionEdge";
node: { __typename?: "CompatSession"; id: string } & { node: { __typename?: "CompatSession"; id: string } & {
@@ -1068,6 +1071,7 @@ export type OAuth2SessionListQueryQuery = {
id: string; id: string;
oauth2Sessions: { oauth2Sessions: {
__typename?: "Oauth2SessionConnection"; __typename?: "Oauth2SessionConnection";
totalCount: number;
edges: Array<{ edges: Array<{
__typename?: "Oauth2SessionEdge"; __typename?: "Oauth2SessionEdge";
cursor: string; cursor: string;
@@ -2174,6 +2178,10 @@ export const CompatSessionListDocument = {
], ],
}, },
}, },
{
kind: "Field",
name: { kind: "Name", value: "totalCount" },
},
{ {
kind: "Field", kind: "Field",
name: { kind: "Name", value: "pageInfo" }, name: { kind: "Name", value: "pageInfo" },
@@ -2502,6 +2510,10 @@ export const OAuth2SessionListQueryDocument = {
], ],
}, },
}, },
{
kind: "Field",
name: { kind: "Name", value: "totalCount" },
},
{ {
kind: "Field", kind: "Field",
name: { kind: "Name", value: "pageInfo" }, name: { kind: "Name", value: "pageInfo" },

11
frontend/src/gql/schema.ts
View File

@@ -1793,6 +1793,17 @@ export default {
}, },
args: [], args: [],
}, },
{
name: "totalCount",
type: {
kind: "NON_NULL",
ofType: {
kind: "SCALAR",
name: "Any",
},
},
args: [],
},
], ],
interfaces: [], interfaces: [],
}, },