From 71e83b1d0858316fa8ca3fc201628d7e35cccc0c Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Wed, 24 Apr 2024 22:42:22 +0900
Subject: [PATCH] Test run editor UI

---
 .../runs/[runId]/TestCaseSelector.tsx         | 25 +++++++++++--------
 frontend/config/selection.ts                  |  8 +++---
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx b/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
index e4f37b2..209495b 100644
--- a/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
+++ b/frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
@@ -7,7 +7,6 @@ import {
   TableRow,
   TableCell,
   Button,
-  Chip,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
@@ -23,7 +22,7 @@ import {
   Circle,
   CircleCheck,
   CircleX,
-  CircleSlash2
+  CircleSlash2,
 } from "lucide-react";
 import { priorities, testRunCaseStatus } from "@/config/selection";
 import { CaseType } from "@/types/case";
@@ -69,11 +68,11 @@ export default function TestCaseSelector({
   }, [sortDescriptor, cases]);
 
   const notIncludedCaseClass = "text-neutral-200 dark:text-neutral-600";
-  const chipBaseClass = "border-none gap-1 text-default-600";
+  const chipBaseClass = "flex items-center text-default-600";
 
   const renderStatusIcon = (uid: string) => {
     if (uid === "untested") {
-      return <Circle size={16} color="#d4d4d8"/>;
+      return <Circle size={16} color="#d4d4d8" />;
     } else if (uid === "passed") {
       return <CircleCheck size={16} color="#17c964" />;
     } else if (uid === "failed") {
@@ -90,16 +89,18 @@ export default function TestCaseSelector({
     switch (columnKey) {
       case "priority":
         return (
-          <Chip
+          <div
             className={
               isIncluded ? chipBaseClass : chipBaseClass + notIncludedCaseClass
             }
-            color={priorities[cellValue].color}
-            size="sm"
-            variant="dot"
           >
-            {priorities[cellValue].name}
-          </Chip>
+            <Circle
+              size={8}
+              color={isIncluded ? priorities[cellValue].color : "#d4d4d8"}
+              fill={isIncluded ? priorities[cellValue].color : "#d4d4d8"}
+            />
+            <div className="ms-3">{priorities[cellValue].name}</div>
+          </div>
         );
       case "runStatus":
         return (
@@ -115,7 +116,9 @@ export default function TestCaseSelector({
                 }
                 endContent={isIncluded && <ChevronDown size={16} />}
               >
-                {isIncluded && testRunCaseStatus[cellValue].name}
+                <span className="w-12">
+                  {isIncluded && testRunCaseStatus[cellValue].name}
+                </span>
               </Button>
             </DropdownTrigger>
             <DropdownMenu aria-label="test case actions">
diff --git a/frontend/config/selection.ts b/frontend/config/selection.ts
index a9cea56..0aac229 100644
--- a/frontend/config/selection.ts
+++ b/frontend/config/selection.ts
@@ -1,8 +1,8 @@
 const priorities = [
-  { name: "Critical", uid: "critical", color: "danger" },
-  { name: "High", uid: "high", color: "warning" },
-  { name: "Medium", uid: "medium", color: "secondary" },
-  { name: "Low", uid: "low", color: "success" },
+  { name: "Critical", uid: "critical", color: "#d00002" },
+  { name: "High", uid: "high", color: "#ee6b4e" },
+  { name: "Medium", uid: "medium", color: "#fccb69" },
+  { name: "Low", uid: "low", color: "#0b62e8" },
 ];
 
 const testTypes = [