From 216de5a26f4739d6e127c5ece654c62acd3a121d Mon Sep 17 00:00:00 2001 From: Ceri Goff Date: Tue, 18 Apr 2023 11:42:25 -0500 Subject: [PATCH] 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 && (