Merge pull request #246 from kimatata/develop

backend/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .env
-public/uploads/
+public/uploads/*
+!public/uploads/dummy.txt

backend/migrations/20250712000000-rename-path-to-filename-in-attachments.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface) => {
+    // Rename column 'path' to 'filename' in 'Attachments' table
+    await queryInterface.renameColumn('Attachments', 'path', 'filename');
+  },
+
+  down: async (queryInterface) => {
+    // Revert column name from 'filename' back to 'path'
+    await queryInterface.renameColumn('Attachments', 'filename', 'path');
+  },
+};

backend/models/attachments.js

@@ -8,7 +8,7 @@ function defineAttachment(sequelize, DataTypes) {
       type: DataTypes.STRING,
       allowNull: true,
     },
-    path: {
+    filename: {
       type: DataTypes.STRING,
       allowNull: false,
     },

backend/routes/attachments/delete.js

@@ -1,9 +1,9 @@
+const fs = require('fs');
+const path = require('path');
 const express = require('express');
 const router = express.Router();
-const path = require('path');
-const fs = require('fs');
-const defineAttachment = require('../../models/attachments');
 const { DataTypes } = require('sequelize');
+const defineAttachment = require('../../models/attachments');
 
 module.exports = function (sequelize) {
   const Attachment = defineAttachment(sequelize, DataTypes);
@@ -21,9 +21,7 @@ module.exports = function (sequelize) {
 
       // delete file from folder
       const uploadDir = path.join(__dirname, '../../public/uploads');
-      const url = attachment.path;
+      const filePath = path.join(uploadDir, attachment.filename);
-      const fileName = url.substring(url.lastIndexOf('/') + 1);
-      const filePath = path.join(uploadDir, fileName);
       fs.unlink(filePath, (err) => {
         if (err) {
           console.error('Error deleting file:', err);

backend/routes/attachments/download.js

@@ -1,9 +1,9 @@
+const fs = require('fs');
+const path = require('path');
 const express = require('express');
 const router = express.Router();
-const path = require('path');
-const fs = require('fs');
-const defineAttachment = require('../../models/attachments');
 const { DataTypes } = require('sequelize');
+const defineAttachment = require('../../models/attachments');
 
 module.exports = function (sequelize) {
   const Attachment = defineAttachment(sequelize, DataTypes);
@@ -16,8 +16,7 @@ module.exports = function (sequelize) {
         return res.status(404).send('Attachment not found');
       }
 
-      const filename = attachment.path.split('/').pop();
+      const filePath = path.join(__dirname, `../../public/uploads/${attachment.filename}`);
-      const filePath = path.join(__dirname, `../../public/uploads/${filename}`);
 
       if (!fs.existsSync(filePath)) {
         return res.status(404).json({ error: 'File not found' });

backend/routes/attachments/new.js

@@ -1,11 +1,11 @@
+const fs = require('fs');
+const path = require('path');
 const express = require('express');
 const router = express.Router();
-const path = require('path');
-const fs = require('fs');
 const multer = require('multer');
+const { DataTypes } = require('sequelize');
 const defineAttachment = require('../../models/attachments');
 const defineCaseAttachment = require('../../models/caseAttachments');
-const { DataTypes } = require('sequelize');
 
 module.exports = function (sequelize) {
   const Attachment = defineAttachment(sequelize, DataTypes);
@@ -55,11 +55,9 @@ module.exports = function (sequelize) {
         return res.status(400).json({ error: 'No files uploaded' });
       }
 
-      const host = req.get('host');
-      const protocol = req.protocol;
       const attachmentsData = files.map((file) => ({
         title: file.originalname,
-        path: `${protocol}://${host}/uploads/${file.filename}`,
+        filename: file.filename,
       }));
 
       const newAttachments = await Attachment.bulkCreate(attachmentsData, {
@@ -74,6 +72,7 @@ module.exports = function (sequelize) {
       await t.commit();
       res.json(newAttachments);
     } catch (error) {
+      console.error(error);
       await t.rollback();
       res.status(500).json({ error: 'Internal server error' });
     }

backend/routes/health/index.js

@@ -0,0 +1,10 @@
+const express = require('express');
+const router = express.Router();
+
+module.exports = function () {
+  router.get('/', async (req, res) => {
+    res.json({ status: 'ok' });
+  });
+
+  return router;
+};

backend/routes/index.js

@@ -3,7 +3,7 @@ const router = express.Router();
 
 // "/" GET
 router.get('/', (req, res) => {
-  res.send('Test Case Management API Server');
+  res.send('This is UnitTCMS API server');
 });
 
 module.exports = router;

backend/seeders/seed.js

@@ -550,19 +550,18 @@ module.exports = {
       },
     ]);
 
-    const backendOrigin = process.env.BACKEND_ORIGIN || 'http://localhost:8001';
     await queryInterface.bulkInsert('attachments', [
       {
         title: 'Selenium logo',
         detail: '',
-        path: `${backendOrigin}/uploads/861px-Selenium_Logo.png`,
+        filename: '861px-Selenium_Logo.png',
         createdAt: new Date(),
         updatedAt: new Date(),
       },
       {
         title: 'vitest logo',
         detail: '',
-        path: `${backendOrigin}/uploads/logo-shadow.svg`,
+        filename: 'logo-shadow.svg',
         createdAt: new Date(),
         updatedAt: new Date(),
       },

backend/server.js

@@ -39,6 +39,10 @@ const sequelize = new Sequelize({
 const indexRoute = require('./routes/index');
 app.use('/', indexRoute);
 
+// "/health"
+const healthIndexRoute = require('./routes/health/index')();
+app.use('/health', healthIndexRoute);
+
 // "users"
 const usersIndexRoute = require('./routes/users/index')(sequelize);
 const usersFindRoute = require('./routes/users/find')(sequelize);

docker-compose.yaml

@@ -10,6 +10,7 @@ services:
       - IS_DEMO=false # set to true to seed the database
     volumes:
       - db-data:/app/backend/database
+      - ./backend/public/uploads:/app/backend/public/uploads
 
 volumes:
   db-data:

frontend/components/Footer.tsx

@@ -0,0 +1,18 @@
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
+import { LocaleCodeType } from '@/types/locale';
+
+type Props = {
+  locale: LocaleCodeType;
+};
+
+export default function Footer({ locale }: Props) {
+  return (
+    <div className="w-full text-center py-2 px-6 flex flex-wrap justify-center items-center gap-4">
+      <div>Copyright © 2024-present UnitTCMS</div>
+
+      <Link href={'/health'} locale={locale} className={`${NextUiLinkClasses} text-gray-500 hover:text-gray-700`}>
+        Status
+      </Link>
+    </div>
+  );
+}

frontend/messages/en.json

@@ -114,6 +114,14 @@
     "not_own_any_projects": "You don't own any projects.",
     "find_projects": "Find projects"
   },
+  "Health": {
+    "health_check": "Health Check",
+    "status": "Status",
+    "ok": "OK",
+    "error": "Error",
+    "api_server": "API Server",
+    "unittcms_version": "UnitTCMS Version"
+  },
   "Admin": {
     "user_management": "User Management",
     "avatar": "Avatar",

frontend/messages/ja.json

@@ -133,6 +133,14 @@
     "lost_admin_auth": "管理者権限を失いました",
     "at_least": "最低1人以上の管理者が必要です。"
   },
+  "Health": {
+    "health_check": "ヘルスチェック",
+    "status": "ステータス",
+    "ok": "正常",
+    "error": "エラー",
+    "api_server": "APIサーバー",
+    "unittcms_version": "UnitTCMS バージョン"
+  },
   "Projects": {
     "project_list": "プロジェクト一覧",
     "new_project": "新規プロジェクト",

frontend/src/app/[locale]/HeaderNavbarMenu.tsx

@@ -97,13 +97,6 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
             <p className="font-bold text-inherit ms-1">UnitTCMS</p>
           </Link>
         </NavbarBrand>
-        <NavbarItem className="hidden md:block">
-          <Chip size="sm" variant="flat">
-            <Link className="data-[active=true]:text-primary data-[active=true]:font-medium" href="/" locale={locale}>
-              1.0.0-beta.14
-            </Link>
-          </Chip>
-        </NavbarItem>
         {commonLinks.map((link) =>
           link.isExternal ? (
             <NavbarItem key={link.uid} className="hidden md:block">

frontend/src/app/[locale]/LandingPage.tsx

@@ -6,6 +6,7 @@ import DemoImage from './DemoImage';
 import { title, subtitle } from '@/components/primitives';
 import { PageType } from '@/types/base';
 import { LocaleCodeType } from '@/types/locale';
+import Footer from '@/components/Footer';
 
 export default function LandingPage({ params }: PageType) {
   const t = useTranslations('Index');
@@ -98,9 +99,7 @@ export default function LandingPage({ params }: PageType) {
       </div>
 
       <Divider className="my-12" />
-      <div className="w-full text-center py-2">
+      <Footer locale={params.locale as LocaleCodeType} />
-        <div>Copyright © 2024-present UnitTCMS</div>
-      </div>
     </section>
   );
 }

frontend/src/app/[locale]/PaneMainTitle.tsx

@@ -1,5 +1,4 @@
 import { Button, Link as NextUiLink } from '@heroui/react';
-import { MoveUpRight } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { title, subtitle } from '@/components/primitives';
 import { LocaleCodeType } from '@/types/locale';

frontend/src/app/[locale]/health/HealthPage.tsx

@@ -0,0 +1,85 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { Table, TableBody, TableRow, TableHeader, TableCell, Chip, TableColumn } from '@heroui/react';
+import { LocaleCodeType } from '@/types/locale';
+import { HealthMessages } from '@/types/health';
+import Config from '@/config/config';
+const apiServer = Config.apiServer;
+
+type Props = {
+  messages: HealthMessages;
+  locale: LocaleCodeType;
+};
+
+async function fetchHealth() {
+  const url = `${apiServer}/health`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.log('Error fetching health data:', error);
+  }
+}
+
+export default function HealthPage({ messages, locale }: Props) {
+  const [isFetching, setIsFetching] = useState<boolean>(true);
+  const [status, setStatus] = useState<string>('loading...');
+  const apiOrigin = Config.apiServer;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        setIsFetching(true);
+        const data = await fetchHealth();
+        setStatus(data.status);
+        setIsFetching(false);
+      } catch (error: any) {
+        console.error('Error in effect:', error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, [locale]);
+
+  return (
+    <>
+      <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+        <div className="w-full p-3 flex items-center justify-between">
+          <h3 className="font-bold">{messages.health_check}</h3>
+        </div>
+
+        <Table hideHeader aria-label="API server status">
+          <TableHeader>
+            <TableColumn>dummy</TableColumn>
+            <TableColumn>dummy</TableColumn>
+          </TableHeader>
+          <TableBody>
+            <TableRow key="1">
+              <TableCell>{messages.unittcms_version}</TableCell>
+              <TableCell>1.0.0-beta.15</TableCell>
+            </TableRow>
+            <TableRow key="2">
+              <TableCell>{messages.api_server}</TableCell>
+              <TableCell>{apiOrigin}</TableCell>
+            </TableRow>
+            <TableRow key="3">
+              <TableCell>{messages.status}</TableCell>
+              <TableCell>
+                {isFetching ? (
+                  <Chip>Loading...</Chip>
+                ) : (
+                  <Chip color={status === 'ok' ? 'success' : 'danger'}>{status}</Chip>
+                )}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}

frontend/src/app/[locale]/health/page.tsx

@@ -0,0 +1,32 @@
+import { getTranslations } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
+import HealthPage from './HealthPage';
+import { PageType } from '@/types/base';
+import { LocaleCodeType } from '@/types/locale';
+import { HealthMessages } from '@/types/health';
+
+export async function generateMetadata({ params: { locale } }: { params: { locale: LocaleCodeType } }) {
+  const t = await getTranslations({ locale, namespace: 'Health' });
+  return {
+    title: `${t('health_check')} | UnitTCMS`,
+    robots: { index: false, follow: false },
+  };
+}
+
+export default function Page({ params }: PageType) {
+  const t = useTranslations('Health');
+  const messages: HealthMessages = {
+    health_check: t('health_check'),
+    status: t('status'),
+    ok: t('ok'),
+    error: t('error'),
+    api_server: t('api_server'),
+    unittcms_version: t('unittcms_version'),
+  };
+
+  return (
+    <div className="w-full flex items-center justify-center">
+      <HealthPage messages={messages} locale={params.locale as LocaleCodeType} />
+    </div>
+  );
+}

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

@@ -1,8 +1,11 @@
 import { Image, Button, Tooltip, Card, CardBody } from '@heroui/react';
-import { AttachmentType, CaseMessages } from '@/types/case';
 import { Trash, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react';
-import { isImage } from './isImage';
 import { ChangeEvent, DragEvent } from 'react';
+import { isImage } from './isImage';
+import { AttachmentType, CaseMessages } from '@/types/case';
+import Config from '@/config/config';
+
+const apiServer = Config.apiServer;
 
 type Props = {
   isDisabled: boolean;
@@ -23,8 +26,8 @@ export default function CaseAttachmentsEditor({
   onFilesInput,
   messages,
 }: Props) {
-  let images: AttachmentType[] = [];
+  const images: AttachmentType[] = [];
-  let others: AttachmentType[] = [];
+  const others: AttachmentType[] = [];
 
   attachments.forEach((attachment) => {
     if (isImage(attachment)) {
@@ -39,7 +42,11 @@ export default function CaseAttachmentsEditor({
         {images.map((image, index) => (
           <Card key={index} radius="sm" className="mt-2 me-2 max-w-md">
             <CardBody>
-              <Image alt={image.title} src={image.path} className="object-cover h-40 w-40" />
+              <Image
+                alt={image.title}
+                src={`${apiServer}/uploads/${image.filename}`}
+                className="object-cover h-40 w-40"
+              />
               <div className="flex items-center justify-between">
                 <p>{image.title}</p>
                 <Tooltip content={messages.delete}>

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.test.ts

@@ -22,16 +22,16 @@ describe('attachment control', () => {
       id: 1,
       title: '',
       detail: '',
-      path: '',
+      filename: '',
       createdAt: new Date(),
       updatedAt: new Date(),
       caseAttachments: sampleCaseAttachment,
     };
 
-    sampleAttachment.path = 'public/uploads/abc.png';
+    sampleAttachment.filename = 'abc.png';
     expect(isImage(sampleAttachment)).toBe(true);
 
-    sampleAttachment.path = 'public/uploads/abc.mp3';
+    sampleAttachment.filename = 'abc.mp3';
     expect(isImage(sampleAttachment)).toBe(false);
   });
 });

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/isImage.ts

@@ -1,8 +1,8 @@
 import { AttachmentType } from '@/types/case';
 
 function isImage(attachmentFile: AttachmentType) {
-  let path = attachmentFile.path;
+  const filename = attachmentFile.filename;
-  let extension = path.substring(path.lastIndexOf('.') + 1).toLowerCase();
+  const extension = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
   if (
     extension === 'png' ||
     extension === 'jpg' ||

frontend/types/case.ts

@@ -53,7 +53,7 @@ type AttachmentType = {
   id: number;
   title: string;
   detail: string;
-  path: string;
+  filename: string;
   createdAt: Date;
   updatedAt: Date;
   caseAttachments: CaseAttachmentType;

frontend/types/health.ts

@@ -0,0 +1,8 @@
+export type HealthMessages = {
+  health_check: string;
+  status: string;
+  ok: string;
+  error: string;
+  api_server: string;
+  unittcms_version: string;
+};