From 2748133bd0c57429c760e8222824cdc12f176df3 Mon Sep 17 00:00:00 2001
From: Ankush Deshmukh <ankush25d@gmail.com>
Date: Fri, 10 Nov 2023 13:06:23 +0530
Subject: [PATCH] Fix: Show Priority icon in custom analytics table. (#2744)

---
 packages/ui/src/icons/priority-icon.tsx       | 21 +++++++++++--------
 .../analytics/custom-analytics/table.tsx      |  1 -
 web/components/inbox/issue-card.tsx           |  8 +++----
 .../filters/applied-filters/priority.tsx      | 12 +----------
 web/components/project/priority-select.tsx    | 10 +--------
 5 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 36c6fa18f..2c2e012e9 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -18,18 +18,21 @@ export const PriorityIcon: React.FC<IPriorityIcon> = ({
 }) => {
   if (!className || className === "") className = "h-3.5 w-3.5";
 
+  // Convert to lowercase for string comparison
+  const lowercasePriority = priority?.toLowerCase();
+
   return (
     <>
-      {priority === "urgent" ? (
-        <AlertCircle className={`${className}`} />
-      ) : priority === "high" ? (
-        <SignalHigh className={`${className}`} />
-      ) : priority === "medium" ? (
-        <SignalMedium className={`${className}`} />
-      ) : priority === "low" ? (
-        <SignalLow className={`${className}`} />
+      {lowercasePriority === "urgent" ? (
+        <AlertCircle className={`text-red-500 ${className}`} />
+      ) : lowercasePriority === "high" ? (
+        <SignalHigh className={`text-orange-500 ${className}`} />
+      ) : lowercasePriority === "medium" ? (
+        <SignalMedium className={`text-yellow-500 ${className}`} />
+      ) : lowercasePriority === "low" ? (
+        <SignalLow className={`text-green-500 ${className}`} />
       ) : (
-        <Ban className={`${className}`} />
+        <Ban className={`text-custom-text-200 ${className}`} />
       )}
     </>
   );
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index 5c7bb1146..1d578b0d8 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -69,7 +69,6 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                   }`}
                 >
                   {params.x_axis === "priority" ? (
-                    // TODO: incorrect priority icon being rendered
                     <PriorityIcon priority={item.name as TIssuePriorities} />
                   ) : (
                     <span
diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx
index 223ef6821..56f6b6dcc 100644
--- a/web/components/inbox/issue-card.tsx
+++ b/web/components/inbox/issue-card.tsx
@@ -45,13 +45,13 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               <div
                 className={`grid h-6 w-6 place-items-center rounded border items-center shadow-sm ${
                   issue.priority === "urgent"
-                    ? "border-red-500/20 bg-red-500/20 text-red-500"
+                    ? "border-red-500/20 bg-red-500/20"
                     : issue.priority === "high"
-                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    ? "border-orange-500/20 bg-orange-500/20"
                     : issue.priority === "medium"
-                    ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                    ? "border-yellow-500/20 bg-yellow-500/20"
                     : issue.priority === "low"
-                    ? "border-green-500/20 bg-green-500/20 text-green-500"
+                    ? "border-green-500/20 bg-green-500/20"
                     : "border-custom-border-200"
                 }`}
               >
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index 198589a26..2ea704b84 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -20,17 +20,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
         <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
           <PriorityIcon
             priority={priority as TIssuePriorities}
-            className={`h-3 w-3 ${
-              priority === "urgent"
-                ? "text-red-500"
-                : priority === "high"
-                ? "text-orange-500"
-                : priority === "medium"
-                ? "text-yellow-500"
-                : priority === "low"
-                ? "text-green-500"
-                : ""
-            }`}
+            className={`h-3 w-3`}
           />
           {priority}
           <button
diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx
index b7323642e..9c12e6433 100644
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@@ -74,15 +74,7 @@ export const PrioritySelect: React.FC<Props> = ({
       <div className="flex items-center gap-2">
         <PriorityIcon
           priority={value}
-          className={`h-3.5 w-3.5 ${
-            value === "high"
-              ? "text-orange-500"
-              : value === "medium"
-              ? "text-yellow-500"
-              : value === "low"
-              ? "text-green-500"
-              : "text-custom-text-200"
-          } ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
+          className={`h-3.5 w-3.5 ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
         />
         {showTitle && <span className="capitalize text-xs">{value}</span>}
       </div>