diff --git a/.changeset/brown-eyes-yell.md b/.changeset/brown-eyes-yell.md new file mode 100644 index 0000000000..5ed4140bba --- /dev/null +++ b/.changeset/brown-eyes-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-github-pull-requests-board': patch +--- + +The `EntityTeamPullRequestsContent` and `EntityTeamPullRequestsCard` support the ability to view the labels/tags added to each PR diff --git a/plugins/github-pull-requests-board/src/api/useGetPullRequestDetails.ts b/plugins/github-pull-requests-board/src/api/useGetPullRequestDetails.ts index a276c8fe9d..75f4d37cf4 100644 --- a/plugins/github-pull-requests-board/src/api/useGetPullRequestDetails.ts +++ b/plugins/github-pull-requests-board/src/api/useGetPullRequestDetails.ts @@ -60,6 +60,12 @@ export const useGetPullRequestDetails = () => { mergeable state reviewDecision + labels(first: 10) { + nodes { + id + name + } + } isDraft createdAt author { diff --git a/plugins/github-pull-requests-board/src/components/Card/Card.tsx b/plugins/github-pull-requests-board/src/components/Card/Card.tsx index 3a47fca696..320e166358 100644 --- a/plugins/github-pull-requests-board/src/components/Card/Card.tsx +++ b/plugins/github-pull-requests-board/src/components/Card/Card.tsx @@ -16,6 +16,7 @@ import React, { PropsWithChildren, FunctionComponent } from 'react'; import { Box, Paper, CardActionArea } from '@material-ui/core'; import CardHeader from './CardHeader'; +import { Label } from '../../utils/types'; type Props = { title: string; @@ -27,6 +28,7 @@ type Props = { repositoryName: string; isDraft: boolean; repositoryIsArchived: boolean; + labels?: Label[]; }; const Card: FunctionComponent = (props: PropsWithChildren) => { @@ -40,6 +42,7 @@ const Card: FunctionComponent = (props: PropsWithChildren) => { repositoryName, isDraft, repositoryIsArchived, + labels, children, } = props; @@ -57,6 +60,7 @@ const Card: FunctionComponent = (props: PropsWithChildren) => { repositoryName={repositoryName} isDraft={isDraft} repositoryIsArchived={repositoryIsArchived} + labels={labels} /> {children} diff --git a/plugins/github-pull-requests-board/src/components/Card/CardHeader.test.tsx b/plugins/github-pull-requests-board/src/components/Card/CardHeader.test.tsx new file mode 100644 index 0000000000..3171bff10f --- /dev/null +++ b/plugins/github-pull-requests-board/src/components/Card/CardHeader.test.tsx @@ -0,0 +1,57 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { screen } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import CardHeader from './CardHeader'; + +const props = { + title: 'Fix problem', + createdAt: 'createdAt', + updatedAt: 'updatedAt', + authorName: 'user1246', + authorAvatar: 'authorAvatar', + repositoryName: 'NewRepository', + repositoryIsArchived: false, + isDraft: false, + labels: [ + { + id: '01h82', + name: 'bug', + }, + { + id: 'id2904', + name: 'documentation', + }, + ], +}; + +describe('', () => { + it('finds labels in PR Card Header when PR includes labels', async () => { + await renderInTestApp(); + expect(screen.getByText('bug')).toBeInTheDocument(); + expect(screen.getByText('documentation')).toBeInTheDocument(); + }); + + it('does not find labels in PR Card Header when PR does not include labels', async () => { + const propsWithNoLabels = { + ...props, + labels: [], + }; + await renderInTestApp(); + expect(screen.queryByRole('listitem')).not.toBeInTheDocument(); + }); +}); diff --git a/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx b/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx index bb6f3e564d..c59349b95f 100644 --- a/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx +++ b/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx @@ -14,11 +14,13 @@ * limitations under the License. */ import React, { FunctionComponent } from 'react'; -import { Typography, Box, Tooltip } from '@material-ui/core'; +import { Typography, Box, Tooltip, Chip } from '@material-ui/core'; import { getElapsedTime } from '../../utils/functions'; import { UserHeader } from '../UserHeader'; import { DraftPrIcon } from '../icons/DraftPr'; import UnarchiveIcon from '@material-ui/icons/Unarchive'; +import { Label } from '../../utils/types'; +import { useFormClasses } from './styles'; type Props = { title: string; @@ -29,9 +31,12 @@ type Props = { repositoryName: string; isDraft: boolean; repositoryIsArchived: boolean; + labels?: Label[]; }; const CardHeader: FunctionComponent = (props: Props) => { + const classes = useFormClasses(); + const { title, createdAt, @@ -41,6 +46,7 @@ const CardHeader: FunctionComponent = (props: Props) => { repositoryName, isDraft, repositoryIsArchived, + labels, } = props; return ( @@ -80,6 +86,17 @@ const CardHeader: FunctionComponent = (props: Props) => { )} + {labels && ( + + {labels.map(data => { + return ( +
  • + +
    • + ); + })} +     + )} ); }; diff --git a/plugins/github-pull-requests-board/src/components/Card/styles.ts b/plugins/github-pull-requests-board/src/components/Card/styles.ts new file mode 100644 index 0000000000..2da12cb15e --- /dev/null +++ b/plugins/github-pull-requests-board/src/components/Card/styles.ts @@ -0,0 +1,39 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { makeStyles } from '@material-ui/core'; + +export const useFormClasses = makeStyles(() => ({ + labelItem: { + display: 'flex', + position: 'relative', + boxSizing: 'border-box', + textAlign: 'left', + alignItems: 'center', + paddingTop: 2, + paddingBottom: 2, + justifyContent: 'flex-start', + textDecoration: 'none', + paddingLeft: 2, + paddingRight: 2, + }, + tagBox: { + display: 'flex', + flexWrap: 'wrap', + alignItems: 'center', + maxWidth: 750, + }, +})); diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx index 4965e1fbba..219e587971 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx @@ -59,6 +59,9 @@ jest.mock('../../hooks/usePullRequestsByTeam', () => { }, isArchived: isArchived, }, + labels: { + nodes: [], + }, isDraft: isDraft, author: { login: authorLogin, 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 ea605327ab..25ef32362b 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx @@ -113,6 +113,7 @@ const EntityTeamPullRequestsCard = (props: EntityTeamPullRequestsCardProps) => { latestReviews, repository, isDraft, + labels, }, index, ) => @@ -135,6 +136,7 @@ const EntityTeamPullRequestsCard = (props: EntityTeamPullRequestsCardProps) => { repositoryName={repository.name} repositoryIsArchived={repository.isArchived} isDraft={isDraft} + labels={labels.nodes} /> ), )} diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx index 58faa7fb70..35c323a4f1 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx @@ -59,6 +59,9 @@ jest.mock('../../hooks/usePullRequestsByTeam', () => { }, isArchived: isArchived, }, + labels: { + nodes: [], + }, isDraft: isDraft, author: { login: authorLogin, 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 662e6f4265..f901acb119 100644 --- a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.tsx @@ -105,6 +105,7 @@ const EntityTeamPullRequestsContent = ( latestReviews, repository, isDraft, + labels, }, index, ) => @@ -127,6 +128,7 @@ const EntityTeamPullRequestsContent = ( repositoryName={repository.name} repositoryIsArchived={repository.isArchived} isDraft={isDraft} + labels={labels.nodes} /> ), )} diff --git a/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx b/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx index fa3ce4eb9c..e9ad2aeab6 100644 --- a/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx +++ b/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx @@ -19,7 +19,7 @@ import { getChangeRequests, getCommentedReviews, } from '../../utils/functions'; -import { Reviews, Author } from '../../utils/types'; +import { Reviews, Author, Label } from '../../utils/types'; import { Card } from '../Card'; import { UserHeaderList } from '../UserHeaderList'; @@ -33,6 +33,7 @@ type Props = { repositoryName: string; repositoryIsArchived: boolean; isDraft: boolean; + labels?: Label[]; }; const PullRequestCard: FunctionComponent = (props: Props) => { @@ -46,6 +47,7 @@ const PullRequestCard: FunctionComponent = (props: Props) => { repositoryName, repositoryIsArchived, isDraft, + labels, } = props; const approvedReviews = getApprovedReviews(reviews); @@ -63,6 +65,7 @@ const PullRequestCard: FunctionComponent = (props: Props) => { prUrl={url} isDraft={isDraft} repositoryIsArchived={repositoryIsArchived} + labels={labels} > {!!approvedReviews.length && (