add labels to card

Signed-off-by: Ceri Goff <ceri.goff@aa.com>

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> = (props: PropsWithChildren<Props>) => {
@@ -40,6 +42,7 @@ const Card: FunctionComponent<Props> = (props: PropsWithChildren<Props>) => {
     repositoryName,
     isDraft,
     repositoryIsArchived,
+    labels,
     children,
   } = props;
 
@@ -57,6 +60,7 @@ const Card: FunctionComponent<Props> = (props: PropsWithChildren<Props>) => {
               repositoryName={repositoryName}
               isDraft={isDraft}
               repositoryIsArchived={repositoryIsArchived}
+              labels={labels}
             />
             {children}
           </Box>

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('<CardHeader/>', () => {
+  it('finds labels in PR Card Header when PR includes labels', async () => {
+    await renderInTestApp(<CardHeader {...props} />);
+    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(<CardHeader {...propsWithNoLabels} />);
+    expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+  });
+});

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: Props) => {
+  const classes = useFormClasses();
+
   const {
     title,
     createdAt,
@@ -41,6 +46,7 @@ const CardHeader: FunctionComponent<Props> = (props: Props) => {
     repositoryName,
     isDraft,
     repositoryIsArchived,
+    labels,
   } = props;
 
   return (
@@ -80,6 +86,17 @@ const CardHeader: FunctionComponent<Props> = (props: Props) => {
           </Typography>
         )}
       </Box>
+      {labels && (
+        <Box display="flex" alignItems="center" flexWrap="wrap" paddingTop={1}>
+          {labels.map(data => {
+            return (
+              <li key={data.id} className={classes.labelItem}>
+                <Chip color="primary" label={data.name} size="small" />
+              </li>
+            );
+          })}
+        </Box>
+      )}
     </>
   );
 };

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: Props) => {
@@ -46,6 +47,7 @@ const PullRequestCard: FunctionComponent<Props> = (props: Props) => {
     repositoryName,
     repositoryIsArchived,
     isDraft,
+    labels,
   } = props;
 
   const approvedReviews = getApprovedReviews(reviews);
@@ -63,6 +65,7 @@ const PullRequestCard: FunctionComponent<Props> = (props: Props) => {
       prUrl={url}
       isDraft={isDraft}
       repositoryIsArchived={repositoryIsArchived}
+      labels={labels}
     >
       {!!approvedReviews.length && (
         <UserHeaderList