feat: display tags in test run page (#378)

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseDetailDialog.tsx

@@ -1,5 +1,15 @@
 import { useState, useEffect, useContext } from 'react';
-import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Avatar, Textarea } from '@heroui/react';
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Avatar,
+  Textarea,
+  Chip,
+} from '@heroui/react';
 import { testTypes, templates } from '@/config/selection';
 import { RunMessages } from '@/types/run';
 import { CaseType, StepType } from '@/types/case';
@@ -103,6 +113,21 @@ export default function TestCaseDetailDialog({
               <div>{testTypeMessages[testTypes[testCase.type].uid]}</div>
             </div>
           </div>
+
+          <div className="my-2">
+            <p className={'font-bold'}>{messages.tags}</p>
+            <div className="flex gap-1 flex-wrap mt-1">
+              {testCase.Tags && testCase.Tags.length > 0 ? (
+                testCase.Tags.map((tag) => (
+                  <Chip key={tag.id} size="sm" variant="flat">
+                    {tag.name}
+                  </Chip>
+                ))
+              ) : (
+                <span>-</span>
+              )}
+            </div>
+          </div>
         </ModalBody>
         <ModalBody>
           {templates[testCase.template].uid === 'text' ? (

frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx

@@ -13,6 +13,7 @@ import {
   DropdownItem,
   Selection,
   SortDescriptor,
+  Chip,
 } from '@heroui/react';
 import { ChevronDown, MoveDiagonal, MoreVertical, CopyPlus, CopyMinus } from 'lucide-react';
 import TestCaseDetailDialog from './TestCaseDetailDialog';
@@ -56,6 +57,7 @@ export default function TestCaseSelector({
     { name: messages.id, uid: 'id', sortable: true },
     { name: messages.title, uid: 'title', sortable: true },
     { name: messages.priority, uid: 'priority', sortable: true },
+    { name: messages.tags, uid: 'tags', sortable: false },
     { name: messages.status, uid: 'runStatus', sortable: true },
     { name: messages.actions, uid: 'actions' },
   ];
@@ -129,6 +131,20 @@ export default function TestCaseSelector({
             <TestCasePriority priorityValue={cellValue as number} priorityMessages={priorityMessages} />
           </div>
         );
+      case 'tags':
+        return (
+          <div className={`flex gap-1 flex-wrap ${isIncluded ? '' : notIncludedCaseClass}`}>
+            {testCase.Tags && testCase.Tags.length > 0 ? (
+              testCase.Tags.map((tag) => (
+                <Chip key={tag.id} size="sm" variant="flat">
+                  {tag.name}
+                </Chip>
+              ))
+            ) : (
+              <span>-</span>
+            )}
+          </div>
+        );
       case 'runStatus':
         return (
           <Dropdown>