From b585da59e1361fc215a4ef8db92e900b7b282e39 Mon Sep 17 00:00:00 2001
From: Marley Powell <Marley.Powell@exclaimer.com>
Date: Thu, 11 Nov 2021 13:56:14 +0000
Subject: [PATCH] refactor: Reworked policy icon logic.

Signed-off-by: Marley Powell <Marley.Powell@exclaimer.com>
---
 .../PullRequestCardPolicies.tsx               | 59 +++----------------
 .../PullRequestCard/PullRequestCardPolicy.tsx | 39 +++++++++---
 2 files changed, 39 insertions(+), 59 deletions(-)

diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicies.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicies.tsx
index 21fe7ba034..e520b480d6 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicies.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicies.tsx
@@ -14,59 +14,10 @@
  * limitations under the License.
  */
 
-import {
-  Policy,
-  PolicyEvaluationStatus,
-  PolicyType,
-} from '@backstage/plugin-azure-devops-common';
-import {
-  PolicyInProgressIcon,
-  PolicyIssueIcon,
-  PolicyRequiredIcon,
-  PullRequestCardPolicy,
-} from './PullRequestCardPolicy';
-
+import { Policy } from '@backstage/plugin-azure-devops-common';
+import { PullRequestCardPolicy } from './PullRequestCardPolicy';
 import React from 'react';
 
-function getPullRequestCardPolicy(policy: Policy): JSX.Element | null {
-  switch (policy.type) {
-    case PolicyType.Build:
-      switch (policy.status) {
-        case PolicyEvaluationStatus.Running:
-          return (
-            <PullRequestCardPolicy
-              policy={policy}
-              icon={<PolicyInProgressIcon />}
-            />
-          );
-        case PolicyEvaluationStatus.Rejected:
-          return (
-            <PullRequestCardPolicy policy={policy} icon={<PolicyIssueIcon />} />
-          );
-        case PolicyEvaluationStatus.Queued:
-          return (
-            <PullRequestCardPolicy
-              policy={policy}
-              icon={<PolicyRequiredIcon />}
-            />
-          );
-        default:
-          return null;
-      }
-    case PolicyType.MinimumReviewers:
-      return (
-        <PullRequestCardPolicy policy={policy} icon={<PolicyRequiredIcon />} />
-      );
-    case PolicyType.Status:
-    case PolicyType.Comments:
-      return (
-        <PullRequestCardPolicy policy={policy} icon={<PolicyIssueIcon />} />
-      );
-    default:
-      return null;
-  }
-}
-
 type PullRequestCardProps = {
   policies: Policy[];
   className: string;
@@ -76,5 +27,9 @@ export const PullRequestCardPolicies = ({
   policies,
   className,
 }: PullRequestCardProps) => (
-  <div className={className}>{policies.map(getPullRequestCardPolicy)}</div>
+  <div className={className}>
+    {policies.map(policy => (
+      <PullRequestCardPolicy policy={policy} />
+    ))}
+  </div>
 );
diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
index 22f9bca39b..42343a8b27 100644
--- a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
+++ b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
@@ -14,15 +14,19 @@
  * limitations under the License.
  */
 
+import {
+  Policy,
+  PolicyEvaluationStatus,
+  PolicyType,
+} from '@backstage/plugin-azure-devops-common';
 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 '@backstage/plugin-azure-devops-common';
 import React from 'react';
 import WatchLaterIcon from '@material-ui/icons/WatchLater';
 
-export const PolicyRequiredIcon = withStyles(
+const PolicyRequiredIcon = withStyles(
   theme => ({
     root: {
       color: theme.palette.info.main,
@@ -31,7 +35,7 @@ export const PolicyRequiredIcon = withStyles(
   { name: 'PolicyRequiredIcon' },
 )(WatchLaterIcon);
 
-export const PolicyIssueIcon = withStyles(
+const PolicyIssueIcon = withStyles(
   theme => ({
     root: {
       color: theme.palette.error.main,
@@ -40,7 +44,7 @@ export const PolicyIssueIcon = withStyles(
   { name: 'PolicyIssueIcon' },
 )(CancelIcon);
 
-export const PolicyInProgressIcon = withStyles(
+const PolicyInProgressIcon = withStyles(
   theme => ({
     root: {
       color: theme.palette.info.main,
@@ -49,6 +53,29 @@ export const PolicyInProgressIcon = withStyles(
   { name: 'PolicyInProgressIcon' },
 )(GroupWorkIcon);
 
+function getPolicyIcon(policy: Policy): JSX.Element | null {
+  switch (policy.type) {
+    case PolicyType.Build:
+      switch (policy.status) {
+        case PolicyEvaluationStatus.Running:
+          return <PolicyInProgressIcon />;
+        case PolicyEvaluationStatus.Rejected:
+          return <PolicyIssueIcon />;
+        case PolicyEvaluationStatus.Queued:
+          return <PolicyRequiredIcon />;
+        default:
+          return null;
+      }
+    case PolicyType.MinimumReviewers:
+      return <PolicyRequiredIcon />;
+    case PolicyType.Status:
+    case PolicyType.Comments:
+      return <PolicyIssueIcon />;
+    default:
+      return null;
+  }
+}
+
 const PullRequestCardPolicyContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
@@ -57,14 +84,12 @@ const PullRequestCardPolicyContainer = styled('div')({
 
 type PullRequestCardPolicyProps = {
   policy: Policy;
-  icon: JSX.Element;
 };
 
 export const PullRequestCardPolicy = ({
   policy,
-  icon,
 }: PullRequestCardPolicyProps) => (
   <PullRequestCardPolicyContainer>
-    {icon} <span>{policy.text}</span>
+    {getPolicyIcon(policy)} <span>{policy.text}</span>
   </PullRequestCardPolicyContainer>
 );