If there is no reviewer, display a red chip that says "No Reviewer".

objectcomputing · Oct 15, 2024 · 3477ed6 · 3477ed6
1 parent 55281f5
commit 3477ed6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/web-ui/src/components/reviews/TeamReviews.jsx b/web-ui/src/components/reviews/TeamReviews.jsx
@@ -782,13 +782,17 @@ const TeamReviews = ({ onBack, periodId }) => {
   };
 
   const renderReviewer = (member, reviewer) => {
+    const hasReviewer = !!reviewer.name;
     const backgroundColor = reviewer.approved ?
                               'var(--checkins-palette-action-green)' :
-                              'var(--checkins-palette-action-yellow)';
+                              (hasReviewer ?
+                                'var(--checkins-palette-action-yellow)' :
+                                'var(--checkins-palette-action-red)');
     const request = getReviewRequest(member, reviewer);
     const selfReviewRequest = getSelfReviewRequest(member);
     const variant = 'outlined';
-    const statusLabel = `${reviewer.name}: ${getReviewStatus(request)}`;
+    const reviewerName = reviewer.name ?? "No Reviewer";
+    const statusLabel = `${reviewerName}: ${getReviewStatus(request)}`;
     const url = getReviewerURL(request, selfReviewRequest);
 
     return (url ?
@@ -802,9 +806,9 @@ const TeamReviews = ({ onBack, periodId }) => {
           </Link> :
           <Chip
             key={reviewer.id}
-            label={openMode ? statusLabel : reviewer.name}
+            label={openMode ? statusLabel : reviewerName}
             variant={variant}
-            onDelete={canUpdate && !openMode ?
+            onDelete={canUpdate && !openMode && hasReviewer ?
                           () => deleteReviewer(member, reviewer) : null}
             style={{backgroundColor: backgroundColor}}
           />);

diff --git a/web-ui/src/styles/variables.css b/web-ui/src/styles/variables.css
@@ -66,6 +66,7 @@
   --checkins-palette-action-disabled: var(--action-disabled);
   --checkins-palette-action-yellow: lightyellow;
   --checkins-palette-action-green: lightgreen;
+  --checkins-palette-action-red: darkred;
 
   &[data-mui-color-scheme='dark'] {
     --primary-text: color-mix(in oklab, var(--white), var(--black) 10%);