From 99923eea9d3f476eecb10e5f58562395df49991e Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sun, 21 Apr 2024 19:26:40 +0900
Subject: [PATCH] Set test run status icon

---
 .../runs/[runId]/TestCaseSelector.tsx         | 39 ++++++++++++++++---
 frontend/config/selection.ts                  | 17 +++++---
 frontend/package-lock.json                    |  8 ++--
 frontend/package.json                         |  2 +-
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx b/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
index 25946c4..01a9ef7 100644
--- a/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
+++ b/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
@@ -15,7 +15,16 @@ import {
   Selection,
   SortDescriptor,
 } from "@nextui-org/react";
-import { ChevronDown, MoreVertical, CopyPlus, CopyMinus } from "lucide-react";
+import {
+  ChevronDown,
+  MoreVertical,
+  CopyPlus,
+  CopyMinus,
+  Circle,
+  CircleCheck,
+  CircleX,
+  CircleSlash2
+} from "lucide-react";
 import { priorities, testRunCaseStatus } from "@/config/selection";
 import { CaseType } from "@/types/case";
 
@@ -60,6 +69,18 @@ export default function TestCaseSelector({
   const notIncludedCaseClass = "text-neutral-200 dark:text-neutral-600";
   const chipBaseClass = "border-none gap-1 text-default-600";
 
+  const renderStatusIcon = (uid: string) => {
+    if (uid === "untested") {
+      return <Circle size={16} color="#d4d4d8"/>;
+    } else if (uid === "passed") {
+      return <CircleCheck size={16} color="#17c964" />;
+    } else if (uid === "failed") {
+      return <CircleX size={16} color="#f31260" />;
+    } else if (uid === "skipped") {
+      return <CircleSlash2 size={16} color="#d4d4d8" />;
+    }
+  };
+
   const renderCell = (testCase: CaseType, columnKey: Key) => {
     const cellValue = testCase[columnKey as keyof CaseType];
     const isIncluded = testCase.isIncluded;
@@ -86,15 +107,23 @@ export default function TestCaseSelector({
                 size="sm"
                 variant="light"
                 isDisabled={!isIncluded}
-                endContent={isIncluded ? <ChevronDown size={16} /> : <></>}
+                startContent={
+                  isIncluded &&
+                  renderStatusIcon(testRunCaseStatus[cellValue].uid)
+                }
+                endContent={isIncluded && <ChevronDown size={16} />}
               >
-                {isIncluded ? testRunCaseStatus[cellValue].name : <></>}
+                {isIncluded && testRunCaseStatus[cellValue].name}
               </Button>
             </DropdownTrigger>
             <DropdownMenu aria-label="test case actions">
               {testRunCaseStatus.map((runCaseStatus, index) => (
-                <DropdownItem key={index} onClick={() => {}}>
-                  {testRunCaseStatus[index].name}
+                <DropdownItem
+                  key={index}
+                  startContent={renderStatusIcon(runCaseStatus.uid)}
+                  onClick={() => {}}
+                >
+                  {runCaseStatus.name}
                 </DropdownItem>
               ))}
             </DropdownMenu>
diff --git a/frontend/config/selection.ts b/frontend/config/selection.ts
index 872506e..a9cea56 100644
--- a/frontend/config/selection.ts
+++ b/frontend/config/selection.ts
@@ -40,13 +40,20 @@ const testRunStatus = [
   { name: "Rejected", uid: "rejected" },
   { name: "Done", uid: "done" },
   { name: "Closed", uid: "closed" },
-]
+];
 
 const testRunCaseStatus = [
   { name: "Untested", uid: "untested", color: "primary" },
   { name: "Passed", uid: "passed", color: "success" },
-  { name: "Failed", uid: "untested", color: "danger" },
-  { name: "Skipped", uid: "medium", color: "primary" },
-]
+  { name: "Failed", uid: "failed", color: "danger" },
+  { name: "Skipped", uid: "skipped", color: "primary" },
+];
 
-export { priorities, testTypes, automationStatus, templates, testRunStatus, testRunCaseStatus };
+export {
+  priorities,
+  testTypes,
+  automationStatus,
+  templates,
+  testRunStatus,
+  testRunCaseStatus,
+};
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5ee59b4..1a1bbf4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,7 +21,7 @@
         "eslint-config-next": "14.0.2",
         "framer-motion": "^10.16.4",
         "intl-messageformat": "^10.5.0",
-        "lucide-react": "^0.335.0",
+        "lucide-react": "^0.372.0",
         "next": "14.0.2",
         "next-themes": "^0.2.1",
         "postcss": "8.4.31",
@@ -5100,9 +5100,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.335.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.335.0.tgz",
-      "integrity": "sha512-FNmIG4JLdvpK86ZFJjrT0SnFEa95KhsiNokVicA5mWEf1oe+ujP2C/bTr0PVQzr/wzvZpzgxaOySq0O79q2oMA==",
+      "version": "0.372.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.372.0.tgz",
+      "integrity": "sha512-0cKdqmilHXWUwWAWnf6CrrjHD8YaqPMtLrmEHXolZusNTr9epULCsiJwIOHk2q1yFxdEwd96D4zShlAj67UJdA==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 85fedd8..a28fb86 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "eslint-config-next": "14.0.2",
     "framer-motion": "^10.16.4",
     "intl-messageformat": "^10.5.0",
-    "lucide-react": "^0.335.0",
+    "lucide-react": "^0.372.0",
     "next": "14.0.2",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",