Merge pull request #5 from kimatata/toppage

Toppage

backend/seeders/seed.js

@@ -89,7 +89,7 @@ module.exports = {
         detail: "Test Plat's Manual test",
         userId: 1,
         isPublic: true,
-        createdAt: new Date(),
+        createdAt: new Date(2024, 5, 4),
         updatedAt: new Date(),
       },
       {
@@ -97,7 +97,15 @@ module.exports = {
         detail: 'リリース前総合評価',
         userId: 1,
         isPublic: true,
-        createdAt: new Date(),
+        createdAt: new Date(2024, 6, 10),
+        updatedAt: new Date(),
+      },
+      {
+        name: 'MS200',
+        detail: '',
+        userId: 1,
+        isPublic: true,
+        createdAt: new Date(2024, 6, 24),
         updatedAt: new Date(),
       },
     ]);
@@ -139,6 +147,20 @@ module.exports = {
         createdAt: new Date(),
         updatedAt: new Date(),
       },
+      {
+        name: 'Chart',
+        detail: '',
+        projectId: 1,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        name: 'Simulate',
+        detail: '',
+        projectId: 1,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
     ]);
 
     // Add runs table records
@@ -342,6 +364,104 @@ module.exports = {
         createdAt: new Date(),
         updatedAt: new Date(),
       },
+      {
+        title: 'Chart display',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 6,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        title: 'Chart update',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 6,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        title: 'Chart palette color change',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 6,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        title: 'Simlation exec',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 7,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        title: 'Simlation update',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 7,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        title: 'Simlation result palette color',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 7,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      {
+        title: 'Simlation button disable condition',
+        state: 1,
+        priority: 1,
+        type: 4,
+        automationStatus: 1,
+        description: '',
+        template: 0,
+        preConditions: '',
+        expectedResults: '',
+        folderId: 7,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
     ]);
 
     // Add steps table records
@@ -490,15 +610,64 @@ module.exports = {
         runId: 1,
         caseId: 1,
         status: 1,
-        createdAt: new Date(),
+        createdAt: new Date(2024, 5, 15),
-        updatedAt: new Date(),
+        updatedAt: new Date(2024, 5, 15),
       },
       {
         runId: 1,
         caseId: 2,
         status: 1,
-        createdAt: new Date(),
+        createdAt: new Date(2024, 5, 15),
-        updatedAt: new Date(),
+        updatedAt: new Date(2024, 5, 15),
+      },
+      {
+        runId: 1,
+        caseId: 13,
+        status: 1,
+        createdAt: new Date(2024, 5, 18),
+        updatedAt: new Date(2024, 5, 18),
+      },
+      {
+        runId: 1,
+        caseId: 14,
+        status: 1,
+        createdAt: new Date(2024, 5, 18),
+        updatedAt: new Date(2024, 5, 18),
+      },
+      {
+        runId: 1,
+        caseId: 15,
+        status: 1,
+        createdAt: new Date(2024, 5, 18),
+        updatedAt: new Date(2024, 5, 18),
+      },
+      {
+        runId: 1,
+        caseId: 16,
+        status: 0,
+        createdAt: new Date(2024, 5, 15),
+        updatedAt: new Date(2024, 5, 15),
+      },
+      {
+        runId: 1,
+        caseId: 17,
+        status: 0,
+        createdAt: new Date(2024, 5, 16),
+        updatedAt: new Date(2024, 5, 16),
+      },
+      {
+        runId: 1,
+        caseId: 18,
+        status: 2,
+        createdAt: new Date(2024, 5, 16),
+        updatedAt: new Date(2024, 5, 16),
+      },
+      {
+        runId: 1,
+        caseId: 19,
+        status: 3,
+        createdAt: new Date(2024, 5, 17),
+        updatedAt: new Date(2024, 5, 17),
       },
     ]);
 

frontend/config/config.ts

@@ -1,5 +1,8 @@
 const Config = {
   apiServer: process.env.NEXT_PUBLIC_BACKEND_ORIGIN || 'http://localhost:8001',
+
+  // set 'NEXT_PUBLIC_IS_DEMO=true' in frontend/.env
+  isDemoSite: process.env.NEXT_PUBLIC_IS_DEMO === 'true' || false,
 };
 
 export default Config;

frontend/messages/en.json

@@ -12,15 +12,20 @@
     "usability_detail": "The defined test cases can be used over and over again in test runs. The status of test runs and projects can be viewed graphically.",
     "universal_title": "Universal",
     "universal_detail": "Multi language support and dark theme allow anyone to use the system without any inconvenience.",
-    "organize_test_cases": "Organize test cases and manage tests graphically",
+    "project_title": "Project-Based",
-    "case_edit": "Test Cases",
+    "project_subtitle": "Manage test cases and test runs on a project-by-project basis. Our dashboard provides an at-a-glance view of the types of test cases and their progress for each project. This allows you to monitor project status in real-time and manage efficiently.",
-    "case_home": "Dashboard",
+    "case_management_title": "Test Case Management",
-    "case_run": "Test Runs"
+    "case_management_subtitle": "Create folders within projects and define test cases with ease using our modern and intuitive UI. Aattaching files enables detailed explanations of test cases, making it easy to share information across the entire team.",
+    "run_management_title": "Test Run Management",
+    "run_management_subtitle": "Defined test cases can be reused multiple times in test runs, enabling efficient test cycles. Additionally, you can visually monitor the status of test runs and projects.",
+    "member_management_title": "Member Management",
+    "member_management_subtitle": "Support team development by adding or removing members from projects. You can assign roles and set permissions for each member in detail. We provide three main roles: 'Administrator' who manages the entire project, 'Designer' who designs the tests, and 'Reporter' who executes the tests. "
   },
   "Header": {
     "title": "Open Source Test Case Management System",
     "description": "Integrate and manage all your software testing",
     "docs": "Docs",
+    "roadmap": "Roadmap",
     "projects": "Projects",
     "admin": "Administration",
     "account": "Account",
@@ -54,6 +59,7 @@
     "email_not_exist": "Email address not found",
     "signup_error": "Sign up failed",
     "signin_error": "Sign in failed",
+    "demo_page_warning": "This is a demo environment, any data you enter will be reset periodically.",
     "your_projects": "Your Projects",
     "public": "Public",
     "private": "Private",

frontend/messages/ja.json

@@ -12,15 +12,20 @@
     "usability_detail": "定義したテストケースはテストランで何度も繰り返し使用可能です。テストランやプロジェクトのステータスをグラフで確認できます。",
     "universal_title": "ユニバーサル",
     "universal_detail": "多言語対応やダークテーマ機能により誰もが不自由なく使うことができます。",
-    "organize_test_cases": "テストケースを整理とグラフィカルなテスト管理",
+    "project_title": "プロジェクトベース",
-    "case_edit": "テストケース",
+    "project_subtitle": "プロジェクトごとにテストケースやテスト実行を管理します。各プロジェクトのテストケースの種類や進捗状況を一目で把握できるダッシュボード機能により、プロジェクトのステータスをリアルタイムで監視し、効率的に管理することが可能です。",
-    "case_home": "ダッシュボード",
+    "case_management_title": "テストケース管理",
-    "case_run": "テストラン"
+    "case_management_subtitle": "プロジェクト内にフォルダーを作成し、テストケースを定義します。モダンで直感的なUIにより、フォルダーやテストケースの作成が簡単に行えます。ファイルを添付することでテストケースを詳細に説明し、チーム全体で共有することが可能です。",
+    "run_management_title": "テストラン管理",
+    "run_management_subtitle": "定義したテストケースはテストランで何度も繰り返し使用可能です。これにより、効率的なテストサイクルを実現します。さらに、テストランやプロジェクトのステータスを視覚的に把握できます。",
+    "member_management_title": "メンバー管理",
+    "member_management_subtitle": "プロジェクトにメンバーを追加/削除してチーム開発をサポートします。各メンバーに役割を設定し、権限を細かく管理することが可能です。プロジェクト全体を管理する「管理者」、テストの設計を行う「設計者」、テストの実行を担う「報告者」の3つの主要な役割を提供しています。"
   },
   "Header": {
     "title": "オープンソーステストケース管理システム",
     "description": "ソフトウェア開発にかかわるすべてのテストを統合管理",
     "docs": "ドキュメント",
+    "roadmap": "ロードマップ",
     "projects": "プロジェクト",
     "admin": "管理",
     "account": "アカウント",
@@ -53,6 +58,7 @@
     "email_not_exist": "メールアドレスが見つかりません",
     "signup_error": "新規登録に失敗しました",
     "signin_error": "サインインに失敗しました",
+    "demo_page_warning": "これはデモ環境です。入力したデータは定期的にリセットされます。",
     "your_projects": "保有プロジェクト",
     "public": "パブリック",
     "private": "プライベート",

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

@@ -0,0 +1,32 @@
+'use client';
+import { Image } from '@nextui-org/react';
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+
+type Props = {
+  imageName: string;
+  altText: string;
+};
+
+export default function DemoImage({ imageName, altText }: Props) {
+  const { theme, setTheme } = useTheme();
+  const [currentTheme, setCurrentTheme] = useState('light');
+
+  useEffect(() => {
+    if (theme) {
+      setCurrentTheme(theme);
+    }
+  }, [theme]);
+
+  return (
+    <>
+      <Image
+        src={`/top/${currentTheme}/${imageName}.png`}
+        alt={altText}
+        height={500}
+        shadow="md"
+        className="max-w-full"
+      />
+    </>
+  );
+}

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

@@ -4,9 +4,10 @@ import HeaderNavbarMenu from './HeaderNavbarMenu';
 export default function Header(params: { locale: string }) {
   const t = useTranslations('Header');
   const messages = {
-    docs: t('docs'),
     projects: t('projects'),
     admin: t('admin'),
+    docs: t('docs'),
+    roadmap: t('roadmap'),
     account: t('account'),
     signUp: t('signup'),
     signIn: t('signin'),

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

@@ -28,6 +28,7 @@ type NabbarMenuMessages = {
   projects: string;
   admin: string;
   docs: string;
+  roadmap: string;
   account: string;
   signUp: string;
   signIn: string;
@@ -58,6 +59,12 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
       label: messages.docs,
       isExternal: true,
     },
+    {
+      uid: 'roadmap',
+      href: 'https://kimatata.github.io/unittcms/docs/roadmap/',
+      label: messages.roadmap,
+      isExternal: true,
+    },
   ];
 
   const router = useRouter();
@@ -86,7 +93,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
         <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-alpha.13
+              1.0.0-beta
             </Link>
           </Chip>
         </NavbarItem>
@@ -95,12 +102,11 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
             <NavbarItem key={link.uid} className="hidden md:block">
               <NextUiLink
                 isExternal
-                href="https://kimatata.github.io/unittcms/docs/getstarted/selfhost"
+                href={link.href}
-                aria-label="docs"
                 showAnchorIcon
                 anchorIcon={<MoveUpRight size={12} className="ms-1" />}
               >
-                {messages.docs}
+                {link.label}
               </NextUiLink>
             </NavbarItem>
           ) : (
@@ -156,7 +162,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
                   title={link.label}
                   startContent={<MoveUpRight size={12} />}
                   onPress={() => {
-                    router.push(link.href, { locale: locale });
+                    window.open(link.href, '_blank');
                     setIsMenuOpen(false);
                   }}
                 />

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

@@ -1,76 +0,0 @@
-'use client';
-import { title } from '@/components/primitives';
-import { useState, useEffect } from 'react';
-import { Tabs, Tab, Image } from '@nextui-org/react';
-
-type PaneDemoImagesMessages = {
-  title: string;
-  caseEdit: string;
-  caseHome: string;
-  caseRun: string;
-};
-type Props = {
-  messages: PaneDemoImagesMessages;
-};
-
-export default function DemoImages({ messages }: Props) {
-  const [currentTab, setcurrentTab] = useState('edit');
-  const [currentImage, setcurrentImage] = useState({
-    src: '/top/caseEdit.png',
-    alt: messages.caseEdit,
-  });
-  const tabs = [
-    {
-      key: 'edit',
-      title: messages.caseEdit,
-      src: '/top/caseEdit.png',
-      alt: messages.caseEdit,
-    },
-    {
-      key: 'home',
-      title: messages.caseHome,
-      src: '/top/caseHome.png',
-      alt: messages.caseHome,
-    },
-    {
-      key: 'run',
-      title: messages.caseRun,
-      src: '/top/caseRun.png',
-      alt: messages.caseRun,
-    },
-  ];
-
-  useEffect(() => {
-    const found = tabs.find((tab) => tab.key === currentTab);
-    const newImage = { src: found.src, alt: found.title };
-    setcurrentImage(newImage);
-  }, [currentTab]);
-
-  return (
-    <>
-      <div className="flex flex-wrap lg:text-left text-center">
-        <div className="w-full lg:w-5/12 p-4">
-          <h2 className={title({ size: 'sm' })}>{messages.title}</h2>
-          <br />
-          <Tabs
-            aria-label="Options"
-            color={'primary'}
-            radius="full"
-            size="md"
-            className="mt-8"
-            selectedKey={currentTab}
-            onSelectionChange={setcurrentTab}
-          >
-            {tabs.map((tab) => (
-              <Tab key={tab.key} title={tab.title} />
-            ))}
-          </Tabs>
-        </div>
-
-        <div className="flex justify-center w-full lg:w-7/12 p-4">
-          <Image src={currentImage.src} alt={currentImage.alt} shadow="md" height={500} className="max-w-full" />
-        </div>
-      </div>
-    </>
-  );
-}

frontend/src/app/[locale]/account/authPage.tsx

@@ -10,6 +10,8 @@ import { signUp, signIn, signInAsGuest } from './authControl';
 import { isValidEmail, isValidPassword } from './validate';
 import { TokenContext } from '@/utils/TokenProvider';
 import { useRouter } from '@/src/navigation';
+import Config from '@/config/config';
+const isDemoSite = Config.isDemoSite;
 
 type Props = {
   isSignup: Boolean;
@@ -166,11 +168,14 @@ export default function AuthPage({ isSignup, messages, locale }: Props) {
               }}
             />
           )}
+
+          {isDemoSite && <div className="my-3 text-default-600">{messages.demoPageWarning}</div>}
+
           <div className="flex justify-end items-center mt-3">
             <Button color="primary" onPress={validate}>
               {messages.submitTitle}
             </Button>
-            {!isSignup && (
+            {!isSignup && isDemoSite && (
               <Button
                 className="ms-3 bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
                 onPress={handleSignInAsGuest}

frontend/src/app/[locale]/account/signin/page.tsx

@@ -20,6 +20,7 @@ export default function Page(params: { locale: string }) {
     emailNotExist: t('email_not_exist'),
     signupError: t('signup_error'),
     signinError: t('signin_error'),
+    demoPageWarning: t('demo_page_warning'),
   };
   return (
     <>

frontend/src/app/[locale]/account/signup/page.tsx

@@ -7,6 +7,7 @@ export default function Page(params: { locale: string }) {
     title: t('signup'),
     linkTitle: t('or_signin'),
     submitTitle: t('signup'),
+    signInAsGuest: t('signin_as_guest'),
     email: t('email'),
     username: t('username'),
     password: t('password'),
@@ -19,6 +20,7 @@ export default function Page(params: { locale: string }) {
     emailNotExist: t('email_not_exist'),
     signupError: t('signup_error'),
     signinError: t('signin_error'),
+    demoPageWarning: t('demo_page_warning'),
   };
   return (
     <>

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

@@ -1,18 +1,35 @@
 import { useTranslations } from 'next-intl';
-import { Divider } from '@nextui-org/react';
+import { Image, Divider } from '@nextui-org/react';
+import { title, subtitle } from '@/components/primitives';
 import PaneMainTitle from './PaneMainTitle';
 import PaneMainFeatures from './PaneMainFeatures';
-import PaneDemoImages from './PaneDemoImages';
+import DemoImage from './DemoImage';
 
 export default function Home(params: { locale: string }) {
   const t = useTranslations('Index');
 
-  const messages = {
+  const demoImages = [
-    title: t('organize_test_cases'),
+    {
-    caseEdit: t('case_edit'),
+      uid: 'project',
-    caseHome: t('case_home'),
+      title: t('project_title'),
-    caseRun: t('case_run'),
+      subTitle: t('project_subtitle'),
-  };
+    },
+    {
+      uid: 'case',
+      title: t('case_management_title'),
+      subTitle: t('case_management_subtitle'),
+    },
+    {
+      uid: 'run',
+      title: t('run_management_title'),
+      subTitle: t('run_management_subtitle'),
+    },
+    {
+      uid: 'member',
+      title: t('member_management_title'),
+      subTitle: t('member_management_subtitle'),
+    },
+  ];
 
   return (
     <section className="mx-auto max-w-screen-xl my-12">
@@ -63,7 +80,20 @@ export default function Home(params: { locale: string }) {
       </div>
 
       <Divider className="my-12" />
-      <PaneDemoImages messages={messages} />
+      <div className="flex flex-wrap lg:text-left text-center">
+        {demoImages.map((demoImage) => (
+          <div key={demoImage.uid} className="flex flex-wrap">
+            <div className="w-full lg:w-5/12 p-4">
+              <h2 className={title({ size: 'sm', color: 'pink' })}>{demoImage.title}</h2>
+              <h4 className={subtitle({ class: 'mt-4' })}>{demoImage.subTitle}</h4>
+            </div>
+
+            <div className="flex justify-center w-full lg:w-7/12 p-4">
+              <DemoImage imageName={demoImage.uid} altText={demoImage.title} />
+            </div>
+          </div>
+        ))}
+      </div>
 
       <Divider className="my-12" />
       <div className="w-full text-center py-2">

frontend/types/user.ts

@@ -61,6 +61,7 @@ export type AuthMessages = {
   emailNotExist: string;
   signupError: string;
   signinError: string;
+  demoPageWarning: string;
 };
 
 export type AdminMessages = {