From 723113296b644dfbf7847b6186f221eecb1de6b5 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Tue, 23 Aug 2022 08:58:44 -0500 Subject: [PATCH 01/10] [Github Pull Requests Board] Show more than 10 PRs at one time Signed-off-by: Jake Crews --- .changeset/sweet-fishes-taste.md | 5 ++ .../api/useGetPullRequestsFromRepository.ts | 46 ++++++++++++------- .../src/utils/types.tsx | 4 ++ 3 files changed, 39 insertions(+), 16 deletions(-) create mode 100644 .changeset/sweet-fishes-taste.md diff --git a/.changeset/sweet-fishes-taste.md b/.changeset/sweet-fishes-taste.md new file mode 100644 index 0000000000..f064cd459d --- /dev/null +++ b/.changeset/sweet-fishes-taste.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-github-pull-requests-board': patch +--- + +The PR dashboard will now show more than 10 pull requests at one time. diff --git a/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts b/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts index bd5df89833..89812ef54b 100644 --- a/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts +++ b/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts @@ -26,27 +26,41 @@ export const useGetPullRequestsFromRepository = () => { async (repo: string): Promise => { const [organisation, repositoryName] = repo.split('/'); - const { repository } = await graphql( - ` - query ($name: String!, $owner: String!) { - repository(name: $name, owner: $owner) { - pullRequests(states: OPEN, first: 10) { - edges { - node { - number + 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, - }, - ); + `, + { + name: repositoryName, + owner: organisation, + endCursor: result + ? result.repository.pullRequests.pageInfo.endCursor + : undefined, + }, + ); - return repository.pullRequests.edges; + pullRequestEdges.push(...result.repository.pullRequests.edges); + } while (result.repository.pullRequests.pageInfo.hasNextPage); + + return pullRequestEdges; }, ); diff --git a/plugins/github-pull-requests-board/src/utils/types.tsx b/plugins/github-pull-requests-board/src/utils/types.tsx index a2b121a1b8..a1e2dbfda3 100644 --- a/plugins/github-pull-requests-board/src/utils/types.tsx +++ b/plugins/github-pull-requests-board/src/utils/types.tsx @@ -23,6 +23,10 @@ export type GraphQlPullRequests = { repository: { pullRequests: { edges: T; + pageInfo: { + hasNextPage: boolean; + endCursor?: string; + }; }; }; }; From a82ac17adbf0586864213bc76126cf19d2a02a81 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 25 Aug 2022 14:47:50 -0500 Subject: [PATCH 02/10] 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, + }), +); From dc70e0219e71a456750c4cc1d732231be95b89bd Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 25 Aug 2022 15:26:21 -0500 Subject: [PATCH 03/10] Fix api reporting Signed-off-by: Jake Crews --- .../github-pull-requests-board/api-report.md | 20 ++++++++++++++++--- .../EntityTeamPullRequestsCard.tsx | 1 + .../EntityTeamPullRequestsCard/index.ts | 1 + .../EntityTeamPullRequestsContent.tsx | 1 + .../EntityTeamPullRequestsContent/index.ts | 1 + .../github-pull-requests-board/src/index.ts | 2 ++ 6 files changed, 23 insertions(+), 3 deletions(-) diff --git a/plugins/github-pull-requests-board/api-report.md b/plugins/github-pull-requests-board/api-report.md index 1657d455b5..f6631e1d56 100644 --- a/plugins/github-pull-requests-board/api-report.md +++ b/plugins/github-pull-requests-board/api-report.md @@ -5,13 +5,27 @@ ```ts /// -import { FunctionComponent } from 'react'; +// @public (undocumented) +export const EntityTeamPullRequestsCard: ( + props: EntityTeamPullRequestsCardProps, +) => JSX.Element | null; // @public (undocumented) -export const EntityTeamPullRequestsCard: FunctionComponent<{}>; +export interface EntityTeamPullRequestsCardProps { + // (undocumented) + defaultLimit?: number; +} // @public (undocumented) -export const EntityTeamPullRequestsContent: FunctionComponent<{}>; +export const EntityTeamPullRequestsContent: ( + props: EntityTeamPullRequestsContentProps, +) => JSX.Element | null; + +// @public (undocumented) +export interface EntityTeamPullRequestsContentProps { + // (undocumented) + defaultLimit?: number; +} // (No @packageDocumentation comment for this package) ``` 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 2c40e4dad4..9f0cff33ef 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx @@ -28,6 +28,7 @@ import { PRCardFormating } from '../../utils/types'; import { DraftPrIcon } from '../icons/DraftPr'; import { useUserRepositories } from '../../hooks/useUserRepositories'; +/** @public */ export interface EntityTeamPullRequestsCardProps { defaultLimit?: number; } diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/index.ts b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/index.ts index bac16f1424..5c82402f7f 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/index.ts +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { default as EntityTeamPullRequestsCard } from './EntityTeamPullRequestsCard'; +export type { EntityTeamPullRequestsCardProps } from './EntityTeamPullRequestsCard'; 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 0d38ce7bf2..64be8e6710 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx @@ -26,6 +26,7 @@ import { PRCardFormating } from '../../utils/types'; import { DraftPrIcon } from '../icons/DraftPr'; import { useUserRepositories } from '../../hooks/useUserRepositories'; +/** @public */ export interface EntityTeamPullRequestsContentProps { defaultLimit?: number; } diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/index.ts b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/index.ts index c2be57464c..032e698a21 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/index.ts +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { default as EntityTeamPullRequestsContent } from './EntityTeamPullRequestsContent'; +export type { EntityTeamPullRequestsContentProps } from './EntityTeamPullRequestsContent'; diff --git a/plugins/github-pull-requests-board/src/index.ts b/plugins/github-pull-requests-board/src/index.ts index d9cffaa468..c93c1732b8 100644 --- a/plugins/github-pull-requests-board/src/index.ts +++ b/plugins/github-pull-requests-board/src/index.ts @@ -17,3 +17,5 @@ export { EntityTeamPullRequestsCard, EntityTeamPullRequestsContent, } from './plugin'; +export type { EntityTeamPullRequestsCardProps } from './components/EntityTeamPullRequestsCard'; +export type { EntityTeamPullRequestsContentProps } from './components/EntityTeamPullRequestsContent'; From 60b0adb112133eb8149b04af5f6759755c0da5ff Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 25 Aug 2022 16:00:45 -0500 Subject: [PATCH 04/10] fix linter Signed-off-by: Jake Crews --- plugins/github-pull-requests-board/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/github-pull-requests-board/package.json b/plugins/github-pull-requests-board/package.json index 1b57aaddcf..920282e091 100644 --- a/plugins/github-pull-requests-board/package.json +++ b/plugins/github-pull-requests-board/package.json @@ -45,6 +45,7 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "@octokit/rest": "^19.0.3", + "@types/react": "^16.13.1 || ^17.0.0", "moment": "^2.29.1", "react-use": "^17.2.4" }, @@ -61,7 +62,6 @@ "msw": "^0.45.0" }, "peerDependencies": { - "@types/react": "^16.13.1 || ^17.0.0", "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, From 5e901b67faf6c33af1f5c6f83d38dd474b784807 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 25 Aug 2022 18:53:18 -0500 Subject: [PATCH 05/10] Update package.json Signed-off-by: jakecrews74 --- plugins/github-pull-requests-board/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/github-pull-requests-board/package.json b/plugins/github-pull-requests-board/package.json index 920282e091..b5bcc182cd 100644 --- a/plugins/github-pull-requests-board/package.json +++ b/plugins/github-pull-requests-board/package.json @@ -45,7 +45,6 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "@octokit/rest": "^19.0.3", - "@types/react": "^16.13.1 || ^17.0.0", "moment": "^2.29.1", "react-use": "^17.2.4" }, @@ -58,6 +57,7 @@ "@testing-library/user-event": "^14.0.0", "@types/jest": "^26.0.7", "@types/node": "^16.11.26", + "@types/react": "^16.13.1 || ^17.0.0", "cross-fetch": "^3.1.5", "msw": "^0.45.0" }, From 6b5f0dd6d4b2a94e644652ed5391608d330885a5 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Fri, 26 Aug 2022 06:54:40 -0500 Subject: [PATCH 06/10] change from minor to patch suggestion Co-authored-by: Johan Haals Signed-off-by: Jake Crews --- .changeset/sweet-fishes-taste.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/sweet-fishes-taste.md b/.changeset/sweet-fishes-taste.md index 9ece1a85da..b64a3840ed 100644 --- a/.changeset/sweet-fishes-taste.md +++ b/.changeset/sweet-fishes-taste.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-github-pull-requests-board': minor +'@backstage/plugin-github-pull-requests-board': patch --- 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. From ded44b374dc5ad4fdfe7ef82abd674dc5dcc6f0f Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Fri, 26 Aug 2022 06:57:35 -0500 Subject: [PATCH 07/10] address pr comments with typing Signed-off-by: Jake Crews --- .../EntityTeamPullRequestsCard.tsx | 4 +-- .../EntityTeamPullRequestsContent.tsx | 6 ++--- .../github-pull-requests-board/src/plugin.ts | 27 +++++++++---------- 3 files changed, 16 insertions(+), 21 deletions(-) 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 9f0cff33ef..e22397082a 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx @@ -33,9 +33,7 @@ export interface EntityTeamPullRequestsCardProps { defaultLimit?: number; } -const EntityTeamPullRequestsCard: FunctionComponent< - EntityTeamPullRequestsCardProps -> = (props: EntityTeamPullRequestsCardProps) => { +const EntityTeamPullRequestsCard = (props: EntityTeamPullRequestsCardProps) => { const { defaultLimit = 100 } = props; const [infoCardFormat, setInfoCardFormat] = useState([]); const { repositories } = useUserRepositories(); 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 64be8e6710..22233e5adf 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx @@ -31,9 +31,9 @@ export interface EntityTeamPullRequestsContentProps { defaultLimit?: number; } -const EntityTeamPullRequestsContent: FunctionComponent< - EntityTeamPullRequestsContentProps -> = (props: EntityTeamPullRequestsContentProps) => { +const EntityTeamPullRequestsContent = ( + props: EntityTeamPullRequestsContentProps, +) => { const { defaultLimit } = props; const [infoCardFormat, setInfoCardFormat] = useState([]); const { repositories } = useUserRepositories(); diff --git a/plugins/github-pull-requests-board/src/plugin.ts b/plugins/github-pull-requests-board/src/plugin.ts index c0514f335c..c8c3b489d2 100644 --- a/plugins/github-pull-requests-board/src/plugin.ts +++ b/plugins/github-pull-requests-board/src/plugin.ts @@ -30,9 +30,7 @@ const githubPullRequestsBoardPlugin = createPlugin({ }); /** @public */ -export const EntityTeamPullRequestsCard: ( - props: EntityTeamPullRequestsCardProps, -) => JSX.Element | null = githubPullRequestsBoardPlugin.provide( +export const EntityTeamPullRequestsCard = githubPullRequestsBoardPlugin.provide( createComponentExtension({ name: 'EntityTeamPullRequestsCard', component: { @@ -45,15 +43,14 @@ export const EntityTeamPullRequestsCard: ( ); /** @public */ -export const EntityTeamPullRequestsContent: ( - props: EntityTeamPullRequestsContentProps, -) => JSX.Element | null = githubPullRequestsBoardPlugin.provide( - createRoutableExtension({ - name: 'PullRequestPage', - component: () => - import('./components/EntityTeamPullRequestsContent').then( - m => m.EntityTeamPullRequestsContent, - ), - mountPoint: rootRouteRef, - }), -); +export const EntityTeamPullRequestsContent = + githubPullRequestsBoardPlugin.provide( + createRoutableExtension({ + name: 'PullRequestPage', + component: () => + import('./components/EntityTeamPullRequestsContent').then( + m => m.EntityTeamPullRequestsContent, + ), + mountPoint: rootRouteRef, + }), + ); From 9ad1ae83bc10f4b2c2f6db1015c452913b622205 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Fri, 26 Aug 2022 07:20:17 -0500 Subject: [PATCH 08/10] Fix compilation issues Signed-off-by: Jake Crews --- plugins/github-pull-requests-board/api-report.md | 4 ++-- plugins/github-pull-requests-board/package.json | 2 +- .../EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx | 2 +- .../EntityTeamPullRequestsContent.tsx | 2 +- plugins/github-pull-requests-board/src/plugin.ts | 2 -- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/plugins/github-pull-requests-board/api-report.md b/plugins/github-pull-requests-board/api-report.md index f6631e1d56..c00b9b1d2b 100644 --- a/plugins/github-pull-requests-board/api-report.md +++ b/plugins/github-pull-requests-board/api-report.md @@ -8,7 +8,7 @@ // @public (undocumented) export const EntityTeamPullRequestsCard: ( props: EntityTeamPullRequestsCardProps, -) => JSX.Element | null; +) => JSX.Element; // @public (undocumented) export interface EntityTeamPullRequestsCardProps { @@ -19,7 +19,7 @@ export interface EntityTeamPullRequestsCardProps { // @public (undocumented) export const EntityTeamPullRequestsContent: ( props: EntityTeamPullRequestsContentProps, -) => JSX.Element | null; +) => JSX.Element; // @public (undocumented) export interface EntityTeamPullRequestsContentProps { diff --git a/plugins/github-pull-requests-board/package.json b/plugins/github-pull-requests-board/package.json index b5bcc182cd..1b57aaddcf 100644 --- a/plugins/github-pull-requests-board/package.json +++ b/plugins/github-pull-requests-board/package.json @@ -57,11 +57,11 @@ "@testing-library/user-event": "^14.0.0", "@types/jest": "^26.0.7", "@types/node": "^16.11.26", - "@types/react": "^16.13.1 || ^17.0.0", "cross-fetch": "^3.1.5", "msw": "^0.45.0" }, "peerDependencies": { + "@types/react": "^16.13.1 || ^17.0.0", "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, 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 e22397082a..d8a7503ba6 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { FunctionComponent, useState } from 'react'; +import React, { useState } from 'react'; import { Grid, Typography } from '@material-ui/core'; import FullscreenIcon from '@material-ui/icons/Fullscreen'; 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 22233e5adf..9b5292d920 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { FunctionComponent, useState } from 'react'; +import React, { useState } from 'react'; import { Grid, Typography } from '@material-ui/core'; import { Progress, InfoCard } from '@backstage/core-components'; diff --git a/plugins/github-pull-requests-board/src/plugin.ts b/plugins/github-pull-requests-board/src/plugin.ts index c8c3b489d2..87aea76d31 100644 --- a/plugins/github-pull-requests-board/src/plugin.ts +++ b/plugins/github-pull-requests-board/src/plugin.ts @@ -18,8 +18,6 @@ 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({ From 38b8d76cefbe78cd5b404f98cca2c3f6f95b7e70 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Fri, 26 Aug 2022 07:35:02 -0500 Subject: [PATCH 09/10] type-deps linter Signed-off-by: Jake Crews --- plugins/github-pull-requests-board/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/github-pull-requests-board/package.json b/plugins/github-pull-requests-board/package.json index 1b57aaddcf..b5bcc182cd 100644 --- a/plugins/github-pull-requests-board/package.json +++ b/plugins/github-pull-requests-board/package.json @@ -57,11 +57,11 @@ "@testing-library/user-event": "^14.0.0", "@types/jest": "^26.0.7", "@types/node": "^16.11.26", + "@types/react": "^16.13.1 || ^17.0.0", "cross-fetch": "^3.1.5", "msw": "^0.45.0" }, "peerDependencies": { - "@types/react": "^16.13.1 || ^17.0.0", "react": "^16.13.1 || ^17.0.0", "react-dom": "^16.13.1 || ^17.0.0" }, From 85284132b8b9cb76ef10d77af29ed53435dccb0d Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Mon, 29 Aug 2022 10:55:51 -0500 Subject: [PATCH 10/10] when no limit prop default to orginal functionality Signed-off-by: Jake Crews --- .changeset/sweet-fishes-taste.md | 2 +- .../github-pull-requests-board/api-report.md | 4 +- .../api/useGetPullRequestsFromRepository.ts | 69 ++++++------------- .../EntityTeamPullRequestsCard.tsx | 6 +- .../EntityTeamPullRequestsContent.tsx | 6 +- .../src/hooks/usePullRequestsByTeam.tsx | 6 +- 6 files changed, 34 insertions(+), 59 deletions(-) diff --git a/.changeset/sweet-fishes-taste.md b/.changeset/sweet-fishes-taste.md index b64a3840ed..8d1fcfc790 100644 --- a/.changeset/sweet-fishes-taste.md +++ b/.changeset/sweet-fishes-taste.md @@ -2,4 +2,4 @@ '@backstage/plugin-github-pull-requests-board': patch --- -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. +Add optional `pullRequestLimit` prop to `EntityTeamPullRequestsCard` and `EntityTeamPullRequestsContent` to limit the number of PRs shown per repository. Excluding this prop will default the number of pull requests shown to 10 per repository (the existing functionality). diff --git a/plugins/github-pull-requests-board/api-report.md b/plugins/github-pull-requests-board/api-report.md index c00b9b1d2b..81097118af 100644 --- a/plugins/github-pull-requests-board/api-report.md +++ b/plugins/github-pull-requests-board/api-report.md @@ -13,7 +13,7 @@ export const EntityTeamPullRequestsCard: ( // @public (undocumented) export interface EntityTeamPullRequestsCardProps { // (undocumented) - defaultLimit?: number; + pullRequestLimit?: number; } // @public (undocumented) @@ -24,7 +24,7 @@ export const EntityTeamPullRequestsContent: ( // @public (undocumented) export interface EntityTeamPullRequestsContentProps { // (undocumented) - defaultLimit?: number; + pullRequestLimit?: number; } // (No @packageDocumentation comment for this package) diff --git a/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts b/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts index c12066735e..2295a01442 100644 --- a/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts +++ b/plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts @@ -18,6 +18,9 @@ import React from 'react'; import { GraphQlPullRequests, PullRequestsNumber } from '../utils/types'; import { useOctokitGraphQl } from './useOctokitGraphQl'; +const PULL_REQUEST_LIMIT = 10; +const GITHUB_GRAPHQL_MAX_ITEMS = 100; + export const useGetPullRequestsFromRepository = () => { const graphql = useOctokitGraphQl>(); @@ -25,23 +28,16 @@ export const useGetPullRequestsFromRepository = () => { const fn = React.useRef( async ( repo: string, - defaultLimit?: number, + pullRequestLimit?: number, ): Promise => { + const limit = pullRequestLimit ?? PULL_REQUEST_LIMIT; const [organisation, repositoryName] = repo.split('/'); - if (defaultLimit) { - return getLimitedPullRequestEdges( - graphql, - repositoryName, - organisation, - defaultLimit, - ); - } - - return await getAllPullRequestEdges( + return await getPullRequestEdges( graphql, repositoryName, organisation, + limit, ); }, ); @@ -49,46 +45,14 @@ export const useGetPullRequestsFromRepository = () => { 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( +async function getPullRequestEdges( graphql: ( path: string, options?: any, ) => Promise>, repositoryName: string, organisation: string, + pullRequestLimit: number, ): Promise { const pullRequestEdges: PullRequestsNumber[] = []; let result: GraphQlPullRequests | undefined = undefined; @@ -96,9 +60,14 @@ async function getAllPullRequestEdges( do { result = await graphql( ` - query ($name: String!, $owner: String!, $endCursor: String) { + query ( + $name: String! + $owner: String! + $first: Int + $endCursor: String + ) { repository(name: $name, owner: $owner) { - pullRequests(states: OPEN, first: 100, after: $endCursor) { + pullRequests(states: OPEN, first: $first, after: $endCursor) { edges { node { number @@ -115,6 +84,10 @@ async function getAllPullRequestEdges( { name: repositoryName, owner: organisation, + first: + pullRequestLimit > GITHUB_GRAPHQL_MAX_ITEMS + ? GITHUB_GRAPHQL_MAX_ITEMS + : pullRequestLimit, endCursor: result ? result.repository.pullRequests.pageInfo.endCursor : undefined, @@ -122,6 +95,8 @@ async function getAllPullRequestEdges( ); pullRequestEdges.push(...result.repository.pullRequests.edges); + + if (pullRequestEdges.length >= pullRequestLimit) return pullRequestEdges; } 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 d8a7503ba6..2ae33c6b07 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx @@ -30,16 +30,16 @@ import { useUserRepositories } from '../../hooks/useUserRepositories'; /** @public */ export interface EntityTeamPullRequestsCardProps { - defaultLimit?: number; + pullRequestLimit?: number; } const EntityTeamPullRequestsCard = (props: EntityTeamPullRequestsCardProps) => { - const { defaultLimit = 100 } = props; + const { pullRequestLimit } = props; const [infoCardFormat, setInfoCardFormat] = useState([]); const { repositories } = useUserRepositories(); const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam( repositories, - defaultLimit, + pullRequestLimit, ); 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 9b5292d920..de1dda2fb8 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx @@ -28,18 +28,18 @@ import { useUserRepositories } from '../../hooks/useUserRepositories'; /** @public */ export interface EntityTeamPullRequestsContentProps { - defaultLimit?: number; + pullRequestLimit?: number; } const EntityTeamPullRequestsContent = ( props: EntityTeamPullRequestsContentProps, ) => { - const { defaultLimit } = props; + const { pullRequestLimit } = props; const [infoCardFormat, setInfoCardFormat] = useState([]); const { repositories } = useUserRepositories(); const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam( repositories, - defaultLimit, + pullRequestLimit, ); 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 0f623ecbe3..2e6553f778 100644 --- a/plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx +++ b/plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx @@ -21,7 +21,7 @@ import { useGetPullRequestDetails } from '../api/useGetPullRequestDetails'; export function usePullRequestsByTeam( repositories: string[], - defaultLimit?: number, + pullRequestLimit?: number, ) { const [pullRequests, setPullRequests] = useState([]); const [loading, setLoading] = useState(true); @@ -32,7 +32,7 @@ export function usePullRequestsByTeam( async (repository: string): Promise => { const pullRequestsNumbers = await getPullRequests( repository, - defaultLimit, + pullRequestLimit, ); const pullRequestsWithDetails = await Promise.all( @@ -43,7 +43,7 @@ export function usePullRequestsByTeam( return pullRequestsWithDetails; }, - [getPullRequests, getPullRequestDetails, defaultLimit], + [getPullRequests, getPullRequestDetails, pullRequestLimit], ); const getPRsFromTeam = useCallback(