From 5351c6767b1f4105ed192de87596ec32f601efba Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 27 Jul 2024 07:01:16 +0900
Subject: [PATCH] feat: test case detail dialog

---
 .../runs/[runId]/TestCaseDetailDialog.tsx     | 20 ++++++++++++++-----
 .../runs/[runId]/TestCaseSelector.tsx         | 10 +++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
index 61ba36c..1d27e70 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx
@@ -109,14 +109,24 @@ export default function TestCaseDetailDialog({
           {templates[testCase.template].uid === 'text' ? (
             <>
               <p className={'font-bold mt-2'}>{messages.testDetail}</p>
-              <div className="flex my-2">
+              <div className="flex gap-2 my-2">
                 <div className="w-1/2">
-                  <p className={'font-bold'}>{messages.preconditions}</p>
-                  <div>{testCase.preConditions}</div>
+                  <Textarea
+                    isReadOnly
+                    size="sm"
+                    variant="flat"
+                    label={messages.preconditions}
+                    value={testCase.preConditions}
+                  />
                 </div>
                 <div className="w-1/2">
-                  <p className={'font-bold'}>{messages.expectedResult}</p>
-                  <div>{testCase.expectedResults}</div>
+                  <Textarea
+                    isReadOnly
+                    size="sm"
+                    variant="flat"
+                    label={messages.expectedResult}
+                    value={testCase.expectedResults}
+                  />
                 </div>
               </div>
             </>
diff --git a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
index f70f83b..dc6bf5d 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, ReactNode } from 'react';
 import {
   Table,
   TableHeader,
@@ -129,7 +129,7 @@ export default function TestCaseSelector({
     return isIncluded;
   };
 
-  const renderCell = (testCase: CaseType, columnKey: Key) => {
+  const renderCell = (testCase: CaseType, columnKey: string): ReactNode => {
     const cellValue = testCase[columnKey as keyof CaseType];
     const isIncluded = isCaseIncluded(testCase);
     const runStatus = testCase.RunCases && testCase.RunCases.length > 0 ? testCase.RunCases[0].status : 0;
@@ -144,13 +144,13 @@ export default function TestCaseSelector({
             endContent={<MoveDiagonal size={12} className="text-transparent group-hover:text-inherit" />}
             onPress={() => showTestCaseDetailDialog(testCase.id)}
           >
-            {cellValue}
+            {cellValue as string}
           </Button>
         );
       case 'priority':
         return (
           <div className={isIncluded ? '' : notIncludedCaseClass}>
-            <TestCasePriority priorityValue={cellValue} priorityMessages={priorityMessages} />
+            <TestCasePriority priorityValue={cellValue as number} priorityMessages={priorityMessages} />
           </div>
         );
       case 'runStatus':
@@ -219,7 +219,7 @@ export default function TestCaseSelector({
           </Dropdown>
         );
       default:
-        return cellValue;
+        return cellValue as string;
     }
   };