From 6cbd89fd09824dc8fde9976678f1adbba340ac34 Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Tue, 18 Apr 2023 11:41:19 -0500 Subject: [PATCH 1/8] add tags and labels Signed-off-by: Ceri Goff --- .../src/components/Card/styles.ts | 39 +++++++++++++++++++ .../src/utils/types.tsx | 8 ++++ 2 files changed, 47 insertions(+) create mode 100644 plugins/github-pull-requests-board/src/components/Card/styles.ts 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/utils/types.tsx b/plugins/github-pull-requests-board/src/utils/types.tsx index 4c80052731..8a8ba7e171 100644 --- a/plugins/github-pull-requests-board/src/utils/types.tsx +++ b/plugins/github-pull-requests-board/src/utils/types.tsx @@ -76,6 +76,11 @@ export type Repository = { isArchived: boolean; }; +export type Labels = { + id: string; + name: string; +}; + export type PullRequest = { id: string; repository: Repository; @@ -89,6 +94,9 @@ export type PullRequest = { state: string; reviewDecision: ReviewDecision | null; isDraft: boolean; + labels: { + nodes: Labels[]; + }; createdAt: string; author: Author; }; From 216de5a26f4739d6e127c5ece654c62acd3a121d Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Tue, 18 Apr 2023 11:42:25 -0500 Subject: [PATCH 2/8] add labels to card Signed-off-by: Ceri Goff --- .../src/components/Card/Card.tsx | 4 ++ .../src/components/Card/CardHeader.test.tsx | 57 +++++++++++++++++++ .../src/components/Card/CardHeader.tsx | 19 ++++++- .../PullRequestCard/PullRequestCard.tsx | 5 +- 4 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 plugins/github-pull-requests-board/src/components/Card/CardHeader.test.tsx 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..7ffe9c5412 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 { Labels } from '../../utils/types'; type Props = { title: string; @@ -27,6 +28,7 @@ type Props = { repositoryName: string; isDraft: boolean; repositoryIsArchived: boolean; + labels?: Labels[]; }; 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..71dcf2a7de 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 { Labels } from '../../utils/types'; +import { useFormClasses } from './styles'; type Props = { title: string; @@ -29,9 +31,12 @@ type Props = { repositoryName: string; isDraft: boolean; repositoryIsArchived: boolean; + labels?: Labels[]; }; 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/PullRequestCard/PullRequestCard.tsx b/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx index fa3ce4eb9c..409a479b58 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, Labels } from '../../utils/types'; import { Card } from '../Card'; import { UserHeaderList } from '../UserHeaderList'; @@ -33,6 +33,7 @@ type Props = { repositoryName: string; repositoryIsArchived: boolean; isDraft: boolean; + labels?: Labels[]; }; 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 && ( Date: Tue, 18 Apr 2023 11:42:57 -0500 Subject: [PATCH 3/8] grab labels from graphql call Signed-off-by: Ceri Goff --- .../src/api/useGetPullRequestDetails.ts | 6 ++++++ 1 file changed, 6 insertions(+) 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 { From 24b2b42de71ae130bdd0aeae9bb7d9f30e9dbdf0 Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Tue, 18 Apr 2023 11:43:35 -0500 Subject: [PATCH 4/8] add to pull request entities Signed-off-by: Ceri Goff --- .../EntityTeamPullRequestsCard.test.tsx | 3 +++ .../EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.tsx | 2 ++ .../EntityTeamPullRequestsContent.test.tsx | 3 +++ .../EntityTeamPullRequestsContent.tsx | 2 ++ 4 files changed, 10 insertions(+) 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} /> ), )} From cf125c36569facdc1fe8c5dd424b97aa9d2ab007 Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Tue, 18 Apr 2023 11:45:36 -0500 Subject: [PATCH 5/8] add changeset Signed-off-by: Ceri Goff --- .changeset/brown-eyes-yell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/brown-eyes-yell.md diff --git a/.changeset/brown-eyes-yell.md b/.changeset/brown-eyes-yell.md new file mode 100644 index 0000000000..228d90f10d --- /dev/null +++ b/.changeset/brown-eyes-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-github-pull-requests-board': minor +--- + +**BREAKING** The EntityTeamPullRequestsContent and EntityTeamPullRequestsCard support the ability to view the labels/tags added to each PR From 6f436a450b0d23eba2d5c240965f8e134350125d Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Tue, 18 Apr 2023 11:46:31 -0500 Subject: [PATCH 6/8] fix changeset Signed-off-by: Ceri Goff --- .changeset/brown-eyes-yell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/brown-eyes-yell.md b/.changeset/brown-eyes-yell.md index 228d90f10d..976c06cb4a 100644 --- a/.changeset/brown-eyes-yell.md +++ b/.changeset/brown-eyes-yell.md @@ -2,4 +2,4 @@ '@backstage/plugin-github-pull-requests-board': minor --- -**BREAKING** The EntityTeamPullRequestsContent and EntityTeamPullRequestsCard support the ability to view the labels/tags added to each PR +The `EntityTeamPullRequestsContent` and `EntityTeamPullRequestsCard` support the ability to view the labels/tags added to each PR From b5c6fe131a17d7d414ecc466cc6461060512fe45 Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Mon, 24 Apr 2023 11:33:23 -0500 Subject: [PATCH 7/8] change to minor to patch Signed-off-by: Ceri Goff --- .changeset/brown-eyes-yell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/brown-eyes-yell.md b/.changeset/brown-eyes-yell.md index 976c06cb4a..5ed4140bba 100644 --- a/.changeset/brown-eyes-yell.md +++ b/.changeset/brown-eyes-yell.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-github-pull-requests-board': minor +'@backstage/plugin-github-pull-requests-board': patch --- The `EntityTeamPullRequestsContent` and `EntityTeamPullRequestsCard` support the ability to view the labels/tags added to each PR From ae06a905e9b298e9a3bf7799768e39aff4a4ff77 Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Mon, 24 Apr 2023 11:35:13 -0500 Subject: [PATCH 8/8] change Labels type to Label Signed-off-by: Ceri Goff --- .../github-pull-requests-board/src/components/Card/Card.tsx | 4 ++-- .../src/components/Card/CardHeader.tsx | 4 ++-- .../src/components/PullRequestCard/PullRequestCard.tsx | 4 ++-- plugins/github-pull-requests-board/src/utils/types.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) 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 7ffe9c5412..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,7 +16,7 @@ import React, { PropsWithChildren, FunctionComponent } from 'react'; import { Box, Paper, CardActionArea } from '@material-ui/core'; import CardHeader from './CardHeader'; -import { Labels } from '../../utils/types'; +import { Label } from '../../utils/types'; type Props = { title: string; @@ -28,7 +28,7 @@ type Props = { repositoryName: string; isDraft: boolean; repositoryIsArchived: boolean; - labels?: Labels[]; + labels?: Label[]; }; const Card: FunctionComponent = (props: PropsWithChildren) => { 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 71dcf2a7de..c59349b95f 100644 --- a/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx +++ b/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx @@ -19,7 +19,7 @@ import { getElapsedTime } from '../../utils/functions'; import { UserHeader } from '../UserHeader'; import { DraftPrIcon } from '../icons/DraftPr'; import UnarchiveIcon from '@material-ui/icons/Unarchive'; -import { Labels } from '../../utils/types'; +import { Label } from '../../utils/types'; import { useFormClasses } from './styles'; type Props = { @@ -31,7 +31,7 @@ type Props = { repositoryName: string; isDraft: boolean; repositoryIsArchived: boolean; - labels?: Labels[]; + labels?: Label[]; }; const CardHeader: FunctionComponent = (props: Props) => { 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 409a479b58..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, Labels } from '../../utils/types'; +import { Reviews, Author, Label } from '../../utils/types'; import { Card } from '../Card'; import { UserHeaderList } from '../UserHeaderList'; @@ -33,7 +33,7 @@ type Props = { repositoryName: string; repositoryIsArchived: boolean; isDraft: boolean; - labels?: Labels[]; + labels?: Label[]; }; const PullRequestCard: FunctionComponent = (props: Props) => { diff --git a/plugins/github-pull-requests-board/src/utils/types.tsx b/plugins/github-pull-requests-board/src/utils/types.tsx index 8a8ba7e171..c82aea9f2d 100644 --- a/plugins/github-pull-requests-board/src/utils/types.tsx +++ b/plugins/github-pull-requests-board/src/utils/types.tsx @@ -76,7 +76,7 @@ export type Repository = { isArchived: boolean; }; -export type Labels = { +export type Label = { id: string; name: string; }; @@ -95,7 +95,7 @@ export type PullRequest = { reviewDecision: ReviewDecision | null; isDraft: boolean; labels: { - nodes: Labels[]; + nodes: Label[]; }; createdAt: string; author: Author;