paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

Add defaultLimit props to components

Browse Source 
Signed-off-by: Jake Crews <jake.crews@daveramsey.com>
This commit is contained in:
Jake Crews
2022-08-25 14:47:50 -05:00
parent 723113296b
commit a82ac17adb
6 changed files with 146 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/sweet-fishes-taste.md
+2 -2
View File
@@ -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.
plugins/github-pull-requests-board/src/api/useGetPullRequestsFromRepository.ts
+94 -34
View File
@@ -23,46 +23,106 @@ export const useGetPullRequestsFromRepository = () => {
useOctokitGraphQl<GraphQlPullRequests<PullRequestsNumber[]>>();
const fn = React.useRef(
async (repo: string): Promise<PullRequestsNumber[]> => {
async (
repo: string,
defaultLimit?: number,
): Promise<PullRequestsNumber[]> => {
const [organisation, repositoryName] = repo.split('/');
const pullRequestEdges = [];
let result: GraphQlPullRequests<PullRequestsNumber[]> | 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<GraphQlPullRequests<PullRequestsNumber[]>>,
repositoryName: string,
organisation: string,
defaultLimit: number,
): Promise<PullRequestsNumber[]> {
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<GraphQlPullRequests<PullRequestsNumber[]>>,
repositoryName: string,
organisation: string,
): Promise<PullRequestsNumber[]> {
const pullRequestEdges: PullRequestsNumber[] = [];
let result: GraphQlPullRequests<PullRequestsNumber[]> | 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;
}
plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx
+12 -3
View File
@@ -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<PRCardFormating[]>([]);
const { repositories } = useUserRepositories();
const { loading, pullRequests, refreshPullRequests } =
usePullRequestsByTeam(repositories);
const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam(
repositories,
defaultLimit,
);
const header = (
<InfoCardHeader onRefresh={refreshPullRequests}>
plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx
+12 -3
View File
@@ -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<PRCardFormating[]>([]);
const { repositories } = useUserRepositories();
const { loading, pullRequests, refreshPullRequests } =
usePullRequestsByTeam(repositories);
const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam(
repositories,
defaultLimit,
);
const header = (
<InfoCardHeader onRefresh={refreshPullRequests}>
plugins/github-pull-requests-board/src/hooks/usePullRequestsByTeam.tsx
+9 -3
View File
@@ -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<PullRequestsColumn[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const getPullRequests = useGetPullRequestsFromRepository();
@@ -27,7 +30,10 @@ export function usePullRequestsByTeam(repositories: string[]) {
const getPRsPerRepository = useCallback(
async (repository: string): Promise<PullRequests> => {
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(
plugins/github-pull-requests-board/src/plugin.ts
+17 -12
View File
@@ -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,
}),
);