feat: Created PullRequestCardPolicies and PullRequestCardReviewers components.

Signed-off-by: Marley Powell <Marley.Powell@exclaimer.com>

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx

@@ -19,6 +19,8 @@ import { Card, CardContent, CardHeader, Link } from '@material-ui/core';
 import { AutoCompleteIcon } from '../AutoCompleteIcon';
 import { Avatar } from '@backstage/core-components';
 import { PullRequest } from '../../../../api/types';
+import { PullRequestCardPolicies } from './PullRequestCardPolicies';
+import { PullRequestCardReviewers } from './PullRequestCardReviewers';
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -33,15 +35,18 @@ const useStyles = makeStyles(
     cardHeaderSimplified: {
       paddingBottom: theme.spacing(2),
     },
-    content: {
-      display: 'flex',
-      flexDirection: 'row',
-    },
     cardHeaderAction: {
       display: 'flex',
       alignSelf: 'center',
       margin: 0,
     },
+    content: {
+      display: 'flex',
+      flexDirection: 'row',
+    },
+    policies: {
+      flex: 1,
+    },
   }),
   { name: 'PullRequestCard' },
 );
@@ -90,7 +95,16 @@ export const PullRequestCard = ({
         }}
       />
 
-      {!simplified && <CardContent className={classes.content} />}
+      {!simplified && (
+        <CardContent className={classes.content}>
+          <PullRequestCardPolicies
+            policies={pullRequest.policies}
+            className={classes.policies}
+          />
+
+          <PullRequestCardReviewers reviewers={pullRequest.reviewers} />
+        </CardContent>
+      )}
     </Card>
   );
 };

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicies.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 {
+  PolicyInProgressIcon,
+  PolicyIssueIcon,
+  PolicyRequiredIcon,
+  PullRequestCardPolicy,
+} from './PullRequestCardPolicy';
+
+import { Policy } from '../../../../api/types';
+import React from 'react';
+
+function getPullRequestCardPolicy(policy: Policy): JSX.Element | null {
+  switch (policy.type) {
+    case 'Build':
+      switch (policy.status) {
+        case 'Running':
+          return (
+            <PullRequestCardPolicy
+              policy={policy}
+              icon={<PolicyInProgressIcon />}
+            />
+          );
+        case 'Rejected':
+          return (
+            <PullRequestCardPolicy policy={policy} icon={<PolicyIssueIcon />} />
+          );
+        case 'Queued':
+          return (
+            <PullRequestCardPolicy
+              policy={policy}
+              icon={<PolicyRequiredIcon />}
+            />
+          );
+        default:
+          return null;
+      }
+    case 'MinimumReviewers':
+      return (
+        <PullRequestCardPolicy policy={policy} icon={<PolicyRequiredIcon />} />
+      );
+    case 'Status':
+    case 'Comments':
+      return (
+        <PullRequestCardPolicy policy={policy} icon={<PolicyIssueIcon />} />
+      );
+    default:
+      return null;
+  }
+}
+
+type PullRequestCardProps = {
+  policies: Policy[];
+  className: string;
+};
+
+export const PullRequestCardPolicies = ({
+  policies,
+  className,
+}: PullRequestCardProps) => (
+  <div className={className}>{policies.map(getPullRequestCardPolicy)}</div>
+);

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 { styled, withStyles } from '@material-ui/core/styles';
+
+import CancelIcon from '@material-ui/icons/Cancel';
+import GroupWorkIcon from '@material-ui/icons/GroupWork';
+import { Policy } from '../../../../api/types';
+import React from 'react';
+import WatchLaterIcon from '@material-ui/icons/WatchLater';
+
+export const PolicyRequiredIcon = withStyles(
+  theme => ({
+    root: {
+      color: theme.palette.info.main,
+    },
+  }),
+  { name: 'PolicyRequiredIcon' },
+)(WatchLaterIcon);
+
+export const PolicyIssueIcon = withStyles(
+  theme => ({
+    root: {
+      color: theme.palette.error.main,
+    },
+  }),
+  { name: 'PolicyIssueIcon' },
+)(CancelIcon);
+
+export const PolicyInProgressIcon = withStyles(
+  theme => ({
+    root: {
+      color: theme.palette.info.main,
+    },
+  }),
+  { name: 'PolicyInProgressIcon' },
+)(GroupWorkIcon);
+
+const PullRequestCardPolicyContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+});
+
+type PullRequestCardPolicyProps = {
+  policy: Policy;
+  icon: React.ReactNode;
+};
+
+export const PullRequestCardPolicy = ({
+  policy,
+  icon,
+}: PullRequestCardPolicyProps) => (
+  <PullRequestCardPolicyContainer>
+    {icon} <span>{policy.text}</span>
+  </PullRequestCardPolicyContainer>
+);

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewer.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { Avatar } from '@backstage/core-components';
+import React from 'react';
+import { Reviewer } from '../../../../api/types';
+import { Tooltip } from '@material-ui/core';
+
+type PullRequestCardReviewerProps = {
+  reviewer: Reviewer;
+};
+
+export const PullRequestCardReviewer = ({
+  reviewer,
+}: PullRequestCardReviewerProps) => (
+  <Tooltip title={reviewer.displayName}>
+    <Avatar
+      displayName={reviewer.displayName}
+      picture={reviewer.imageUrl}
+      customStyles={{
+        width: '2.5rem',
+        height: '2.5rem',
+        fontSize: '1rem',
+        border: '0.3rem solid silver',
+      }}
+    />
+  </Tooltip>
+);

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewers.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { PullRequestCardReviewer } from './PullRequestCardReviewer';
+import React from 'react';
+import { Reviewer } from '../../../../api/types';
+import { styled } from '@material-ui/core/styles';
+
+const PullRequestCardReviewersContainer = styled('div')({
+  '& > *': {
+    marginTop: 4,
+    marginBottom: 4,
+  },
+});
+
+type PullRequestCardReviewersProps = {
+  reviewers: Reviewer[];
+};
+
+export const PullRequestCardReviewers = ({
+  reviewers,
+}: PullRequestCardReviewersProps) => (
+  <PullRequestCardReviewersContainer>
+    {reviewers.map(reviewer => (
+      <PullRequestCardReviewer reviewer={reviewer} />
+    ))}
+  </PullRequestCardReviewersContainer>
+);