From a82ac17adbf0586864213bc76126cf19d2a02a81 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 25 Aug 2022 14:47:50 -0500 Subject: [PATCH] Add defaultLimit props to components Signed-off-by: Jake Crews --- .changeset/sweet-fishes-taste.md | 4 +- .../api/useGetPullRequestsFromRepository.ts | 128 +++++++++++++----- .../EntityTeamPullRequestsCard.tsx | 15 +- .../EntityTeamPullRequestsContent.tsx | 15 +- .../src/hooks/usePullRequestsByTeam.tsx | 12 +- .../github-pull-requests-board/src/plugin.ts | 29 ++-- 6 files changed, 146 insertions(+), 57 deletions(-) diff --git a/.changeset/sweet-fishes-taste.md b/.changeset/sweet-fishes-taste.md index f064cd459d..9ece1a85da 100644 --- a/.changeset/sweet-fishes-taste.md +++ b/.changeset/sweet-fishes-taste.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-github-pull-requests-board': patch +'@backstage/plugin-github-pull-requests-board': minor --- -The PR dashboard will now show more than 10 pull requests at one time. +Add optional `defaultLimit` prop to `EntityTeamPullRequestsCard` and `EntityTeamPullRequestsContent` to limit the number of PRs shown per repository. Excluding this prop will result in showing all PRs for each repository. diff --git a/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts b/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts index 89812ef54b..c12066735e 100644 --- a/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts +++ b/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts @@ -23,46 +23,106 @@ export const useGetPullRequestsFromRepository = () => { useOctokitGraphQl>(); const fn = React.useRef( - async (repo: string): Promise => { + async ( + repo: string, + defaultLimit?: number, + ): Promise => { const [organisation, repositoryName] = repo.split('/'); - const pullRequestEdges = []; - let result: GraphQlPullRequests | undefined = - undefined; - do { - result = await graphql( - ` - query ($name: String!, $owner: String!, $endCursor: String) { - repository(name: $name, owner: $owner) { - pullRequests(states: OPEN, first: 100, after: $endCursor) { - edges { - node { - number - } - } - pageInfo { - hasNextPage - endCursor - } - } - } - } - `, - { - name: repositoryName, - owner: organisation, - endCursor: result - ? result.repository.pullRequests.pageInfo.endCursor - : undefined, - }, + if (defaultLimit) { + return getLimitedPullRequestEdges( + graphql, + repositoryName, + organisation, + defaultLimit, ); + } - pullRequestEdges.push(...result.repository.pullRequests.edges); - } while (result.repository.pullRequests.pageInfo.hasNextPage); - - return pullRequestEdges; + return await getAllPullRequestEdges( + graphql, + repositoryName, + organisation, + ); }, ); return fn.current; }; + +async function getLimitedPullRequestEdges( + graphql: ( + path: string, + options?: any, + ) => Promise>, + repositoryName: string, + organisation: string, + defaultLimit: number, +): Promise { + const result = await graphql( + ` + query ($name: String!, $owner: String!, $defaultLimit: Int) { + repository(name: $name, owner: $owner) { + pullRequests(states: OPEN, first: $defaultLimit) { + edges { + node { + number + } + } + } + } + } + `, + { + name: repositoryName, + owner: organisation, + defaultLimit: defaultLimit, + }, + ); + + return result.repository.pullRequests.edges; +} + +async function getAllPullRequestEdges( + graphql: ( + path: string, + options?: any, + ) => Promise>, + repositoryName: string, + organisation: string, +): Promise { + const pullRequestEdges: PullRequestsNumber[] = []; + let result: GraphQlPullRequests | undefined = undefined; + + do { + result = await graphql( + ` + query ($name: String!, $owner: String!, $endCursor: String) { + repository(name: $name, owner: $owner) { + pullRequests(states: OPEN, first: 100, after: $endCursor) { + edges { + node { + number + } + } + pageInfo { + hasNextPage + endCursor + } + } + } + } + `, + { + name: repositoryName, + owner: organisation, + endCursor: result + ? result.repository.pullRequests.pageInfo.endCursor + : undefined, + }, + ); + + pullRequestEdges.push(...result.repository.pullRequests.edges); + } while (result.repository.pullRequests.pageInfo.hasNextPage); + + return pullRequestEdges; +} diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx index b19651536a..2c40e4dad4 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx @@ -28,11 +28,20 @@ import { PRCardFormating } from '../../utils/types'; import { DraftPrIcon } from '../icons/DraftPr'; import { useUserRepositories } from '../../hooks/useUserRepositories'; -const EntityTeamPullRequestsCard: FunctionComponent = () => { +export interface EntityTeamPullRequestsCardProps { + defaultLimit?: number; +} + +const EntityTeamPullRequestsCard: FunctionComponent< + EntityTeamPullRequestsCardProps +> = (props: EntityTeamPullRequestsCardProps) => { + const { defaultLimit = 100 } = props; const [infoCardFormat, setInfoCardFormat] = useState([]); const { repositories } = useUserRepositories(); - const { loading, pullRequests, refreshPullRequests } = - usePullRequestsByTeam(repositories); + const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam( + repositories, + defaultLimit, + ); const header = ( diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx index 33980e2364..0d38ce7bf2 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx @@ -26,11 +26,20 @@ import { PRCardFormating } from '../../utils/types'; import { DraftPrIcon } from '../icons/DraftPr'; import { useUserRepositories } from '../../hooks/useUserRepositories'; -const EntityTeamPullRequestsContent: FunctionComponent = () => { +export interface EntityTeamPullRequestsContentProps { + defaultLimit?: number; +} + +const EntityTeamPullRequestsContent: FunctionComponent< + EntityTeamPullRequestsContentProps +> = (props: EntityTeamPullRequestsContentProps) => { + const { defaultLimit } = props; const [infoCardFormat, setInfoCardFormat] = useState([]); const { repositories } = useUserRepositories(); - const { loading, pullRequests, refreshPullRequests } = - usePullRequestsByTeam(repositories); + const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam( + repositories, + defaultLimit, + ); const header = ( diff --git a/plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx b/plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx index 234a0baefd..0f623ecbe3 100644 --- a/plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx +++ b/plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx @@ -19,7 +19,10 @@ import { PullRequests, PullRequestsColumn } from '../utils/types'; import { useGetPullRequestsFromRepository } from '../api/useGetPullRequestsFromRepository'; import { useGetPullRequestDetails } from '../api/useGetPullRequestDetails'; -export function usePullRequestsByTeam(repositories: string[]) { +export function usePullRequestsByTeam( + repositories: string[], + defaultLimit?: number, +) { const [pullRequests, setPullRequests] = useState([]); const [loading, setLoading] = useState(true); const getPullRequests = useGetPullRequestsFromRepository(); @@ -27,7 +30,10 @@ export function usePullRequestsByTeam(repositories: string[]) { const getPRsPerRepository = useCallback( async (repository: string): Promise => { - const pullRequestsNumbers = await getPullRequests(repository); + const pullRequestsNumbers = await getPullRequests( + repository, + defaultLimit, + ); const pullRequestsWithDetails = await Promise.all( pullRequestsNumbers.map(({ node }) => @@ -37,7 +43,7 @@ export function usePullRequestsByTeam(repositories: string[]) { return pullRequestsWithDetails; }, - [getPullRequests, getPullRequestDetails], + [getPullRequests, getPullRequestDetails, defaultLimit], ); const getPRsFromTeam = useCallback( diff --git a/plugins/github-pull-requests-board/src/plugin.ts b/plugins/github-pull-requests-board/src/plugin.ts index 87aea76d31..c0514f335c 100644 --- a/plugins/github-pull-requests-board/src/plugin.ts +++ b/plugins/github-pull-requests-board/src/plugin.ts @@ -18,6 +18,8 @@ import { createComponentExtension, createRoutableExtension, } from '@backstage/core-plugin-api'; +import { EntityTeamPullRequestsCardProps } from './components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard'; +import { EntityTeamPullRequestsContentProps } from './components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent'; import { rootRouteRef } from './routes'; const githubPullRequestsBoardPlugin = createPlugin({ @@ -28,7 +30,9 @@ const githubPullRequestsBoardPlugin = createPlugin({ }); /** @public */ -export const EntityTeamPullRequestsCard = githubPullRequestsBoardPlugin.provide( +export const EntityTeamPullRequestsCard: ( + props: EntityTeamPullRequestsCardProps, +) => JSX.Element | null = githubPullRequestsBoardPlugin.provide( createComponentExtension({ name: 'EntityTeamPullRequestsCard', component: { @@ -41,14 +45,15 @@ export const EntityTeamPullRequestsCard = githubPullRequestsBoardPlugin.provide( ); /** @public */ -export const EntityTeamPullRequestsContent = - githubPullRequestsBoardPlugin.provide( - createRoutableExtension({ - name: 'PullRequestPage', - component: () => - import('./components/EntityTeamPullRequestsContent').then( - m => m.EntityTeamPullRequestsContent, - ), - mountPoint: rootRouteRef, - }), - ); +export const EntityTeamPullRequestsContent: ( + props: EntityTeamPullRequestsContentProps, +) => JSX.Element | null = githubPullRequestsBoardPlugin.provide( + createRoutableExtension({ + name: 'PullRequestPage', + component: () => + import('./components/EntityTeamPullRequestsContent').then( + m => m.EntityTeamPullRequestsContent, + ), + mountPoint: rootRouteRef, + }), +);