feat: download test cases csv (#219)

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx

@@ -1,11 +1,11 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
-import { TokenContext } from '@/utils/TokenProvider';
 import TestCaseTable from './TestCaseTable';
-import { fetchCases, createCase, deleteCases } from '@/utils/caseControl';
+import CaseDialog from './CaseDialog';
+import { TokenContext } from '@/utils/TokenProvider';
+import { fetchCases, createCase, deleteCases, csvDownload } from '@/utils/caseControl';
 import { CaseType, CasesMessages } from '@/types/case';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
-import CaseDialog from './CaseDialog';
 import { PriorityMessages } from '@/types/priority';
 import { LocaleCodeType } from '@/types/locale';
 
@@ -74,6 +74,10 @@ export default function CasesPane({ projectId, folderId, messages, priorityMessa
     }
   };
 
+  const onCsvDownload = async () => {
+    await csvDownload(context.token.access_token, Number(folderId));
+  };
+
   return (
     <>
       <TestCaseTable
@@ -83,6 +87,7 @@ export default function CasesPane({ projectId, folderId, messages, priorityMessa
         onCreateCase={() => setIsCaseDialogOpen(true)}
         onDeleteCase={onDeleteCase}
         onDeleteCases={onDeleteCases}
+        onCsvDownload={onCsvDownload}
         messages={messages}
         priorityMessages={priorityMessages}
         locale={locale}

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -14,7 +14,7 @@ import {
   Selection,
   SortDescriptor,
 } from '@heroui/react';
-import { Plus, MoreVertical, Trash } from 'lucide-react';
+import { Plus, MoreVertical, Trash, Download } from 'lucide-react';
 import { Link } from '@/src/i18n/routing';
 import { CaseType, CasesMessages } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
@@ -28,6 +28,7 @@ type Props = {
   onCreateCase: () => void;
   onDeleteCase: (caseId: number) => void;
   onDeleteCases: (caseIds: number[]) => void;
+  onCsvDownload: () => void;
   messages: CasesMessages;
   priorityMessages: PriorityMessages;
   locale: LocaleCodeType;
@@ -40,6 +41,7 @@ export default function TestCaseTable({
   onCreateCase,
   onDeleteCase,
   onDeleteCases,
+  onCsvDownload,
   messages,
   priorityMessages,
   locale,
@@ -154,6 +156,7 @@ export default function TestCaseTable({
     <>
       <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
         <h3 className="font-bold">{messages.testCaseList}</h3>
+
         <div>
           {((selectedKeys !== 'all' && selectedKeys.size > 0) || selectedKeys === 'all') && (
             <Button
@@ -167,6 +170,16 @@ export default function TestCaseTable({
               {messages.delete}
             </Button>
           )}
+          <Button
+            startContent={<Download size={16} />}
+            size="sm"
+            variant="bordered"
+            isDisabled={isDisabled}
+            className="me-2"
+            onPress={onCsvDownload}
+          >
+            {messages.downloadCsv}
+          </Button>
           <Button
             startContent={<Plus size={16} />}
             size="sm"

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/page.tsx

@@ -1,7 +1,7 @@
-import { PriorityMessages } from '@/types/priority';
-import CasesPane from './CasesPane';
 import { getTranslations } from 'next-intl/server';
 import { useTranslations } from 'next-intl';
+import CasesPane from './CasesPane';
+import { PriorityMessages } from '@/types/priority';
 import { LocaleCodeType } from '@/types/locale';
 
 export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
@@ -25,6 +25,7 @@ export default function Page({ params }: { params: { projectId: string; folderId
     close: t('close'),
     areYouSure: t('are_you_sure'),
     newTestCase: t('new_test_case'),
+    downloadCsv: t('download_csv'),
     status: t('status'),
     noCasesFound: t('no_cases_found'),
     caseTitle: t('case_title'),