fix: when no folders

backend/middleware/verifyVisible.js

@@ -39,7 +39,7 @@ function verifyVisibleMiddleware(sequelize) {
 
     // find project id from folderId
     const folder = await Folder.findByPk(folderId);
-    const projectId = folder && folder.id;
+    const projectId = folder && folder.projectId;
     if (!projectId) {
       return res.status(404).send('failed to find projectId');
     }
@@ -103,7 +103,7 @@ function verifyVisibleMiddleware(sequelize) {
 
     // find project id from runId
     const run = await Run.findByPk(runId);
-    const projectId = run && run.id;
+    const projectId = run && run.projectId;
     if (!projectId) {
       return res.status(404).send('failed to find projectId');
     }

frontend/messages/en.json

@@ -146,7 +146,8 @@
     "update": "Update",
     "please_enter": "Please enter folder name",
     "delete": "Delete",
-    "are_you_sure": "Are you sure you want to delete the folder?"
+    "are_you_sure": "Are you sure you want to delete the folder?",
+    "no_folders_found": "No folders found"
   },
   "Cases": {
     "test_case_list": "Test Case List",

frontend/messages/ja.json

@@ -145,7 +145,8 @@
     "update": "更新",
     "please_enter": "フォルダー名を入力してください",
     "delete": "削除",
-    "are_you_sure": "フォルダーを削除してもよろしいですか?"
+    "are_you_sure": "フォルダーを削除してもよろしいですか?",
+    "no_folders_found": "フォルダーがありません"
   },
   "Cases": {
     "test_case_list": "テストケース一覧",

frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx

@@ -33,15 +33,20 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
         return;
       }
       try {
-        const data = await fetchFolders(context.token.access_token, projectId);
-        setFolders(data);
+        const folders: FolderType[] = await fetchFolders(context.token.access_token, projectId);
+        setFolders(folders);
 
-        const selectedFolderFromUrl = data.find((folder) => folder.id === folderId);
-        setSelectedFolder(selectedFolderFromUrl);
+        // no folder on project
+        if (folders.length === 0) {
+          return;
+        }
+
+        const selectedFolderFromUrl = folders.find((folder) => folder.id === folderId);
+        setSelectedFolder(selectedFolderFromUrl ? selectedFolderFromUrl : null);
 
         // Redirect to the smallest folder ID page if the path is "projects/[projectId]/folders
         if (pathname === `/projects/${projectId}/folders`) {
-          const smallestFolderId = Math.min(...data.map((folder) => folder.id));
+          const smallestFolderId = Math.min(...folders.map((folder) => folder.id));
           router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale: locale });
         }
       } catch (error: any) {

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

@@ -54,9 +54,12 @@ export default function TestCaseTable({
   });
 
   const sortedItems = useMemo(() => {
-    return [...cases].sort((a: Case, b: Case) => {
-      const first = a[sortDescriptor.column as keyof Case] as number;
-      const second = b[sortDescriptor.column as keyof Case] as number;
+    if (cases.length === 0) {
+      return [];
+    }
+    return [...cases].sort((a: CaseType, b: CaseType) => {
+      const first = a[sortDescriptor.column as keyof CaseType] as number;
+      const second = b[sortDescriptor.column as keyof CaseType] as number;
       const cmp = first < second ? -1 : first > second ? 1 : 0;
 
       return sortDescriptor.direction === 'descending' ? -cmp : cmp;
@@ -67,8 +70,8 @@ export default function TestCaseTable({
     onDeleteCase(deleteCaseId);
   };
 
-  const renderCell = useCallback((testCase: Case, columnKey: Key) => {
-    const cellValue = testCase[columnKey as keyof Case];
+  const renderCell = useCallback((testCase: CaseType, columnKey: Key) => {
+    const cellValue = testCase[columnKey as keyof CaseType];
 
     switch (columnKey) {
       case 'id':

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

@@ -1,3 +1,13 @@
+import { useTranslations } from 'next-intl';
+
 export default function Page() {
-  return <>This is folders page.</>;
+  const t = useTranslations('Folders');
+
+  return (
+    <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
+      <div className="w-full p-3 flex items-center justify-between">
+        <h3 className="font-bold">{t('no_folders_found')}</h3>
+      </div>
+    </div>
+  );
 }