chore: update frontend dependencies and fix deprecated method use (#140)

frontend/package.json

@@ -9,34 +9,34 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.3.6",
+    "@nextui-org/react": "^2.6.11",
-    "@nextui-org/theme": "^2.2.3",
+    "@nextui-org/theme": "^2.4.5",
-    "@react-aria/ssr": "^3.8.0",
+    "@react-aria/ssr": "^3.9.7",
-    "@react-aria/visually-hidden": "^3.8.15",
+    "@react-aria/visually-hidden": "^3.8.19",
-    "@types/node": "22.7.7",
+    "@types/node": "22.13.5",
-    "@types/react": "18.2.21",
+    "@types/react": "18.3.18",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "18.3.5",
-    "apexcharts": "^3.53.0",
+    "apexcharts": "^4.5.0",
-    "autoprefixer": "10.4.16",
+    "autoprefixer": "10.4.20",
-    "boring-avatars": "^1.10.2",
+    "boring-avatars": "^1.11.2",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "eslint": "8.48.0",
+    "eslint": "8.57.1",
-    "eslint-config-next": "14.0.2",
+    "eslint-config-next": "14.2.24",
-    "framer-motion": "^11.2.6",
+    "framer-motion": "^11.18.2",
-    "intl-messageformat": "^10.5.14",
+    "intl-messageformat": "^10.7.15",
-    "lucide-react": "^0.372.0",
+    "lucide-react": "^0.475.0",
-    "next": "^14.2.13",
+    "next": "^14.2.24",
-    "next-intl": "^3.12.0",
+    "next-intl": "^3.26.5",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.4.4",
-    "postcss": "8.4.47",
+    "postcss": "8.5.3",
     "react": "^18.3.1",
-    "react-apexcharts": "^1.4.1",
+    "react-apexcharts": "^1.7.0",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
-    "react-toastify": "^10.0.5",
+    "react-toastify": "^10.0.6",
     "sharp": "^0.33.5",
-    "tailwind-variants": "^0.1.18",
+    "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.17",
-    "typescript": "5.0.4"
+    "typescript": "5.7.3"
   }
 }

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

@@ -3,7 +3,7 @@ import { Button, DropdownTrigger, Dropdown, DropdownMenu, DropdownItem } from '@
 import { ChevronDown, PenTool, ArrowRightFromLine, ArrowRightToLine } from 'lucide-react';
 import { useContext } from 'react';
 import { TokenContext } from '@/utils/TokenProvider';
-import { useRouter } from '@/src/navigation';
+import { useRouter } from '@/src/i18n/routing';
 import { AccountDropDownMessages } from '@/types/user';
 import UserAvatar from '@/components/UserAvatar';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useContext } from 'react';
 import { TokenContext } from '@/utils/TokenProvider';
-import { Link, useRouter } from '@/src/navigation';
+import { Link, useRouter } from '@/src/i18n/routing';
 import { usePathname } from 'next/navigation';
 import Image from 'next/image';
 import {
@@ -144,7 +144,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
           <DropdownAccount messages={messages} locale={locale} onItemPress={() => {}} />
           <DropdownLanguage locale={locale} onChangeLocale={changeLocale} />
         </div>
-        <NavbarMenuToggle className="md:hidden" onPress={() => setIsMenuOpen(!isMenuOpen)} />
+        <NavbarMenuToggle className="md:hidden" onChange={() => setIsMenuOpen(!isMenuOpen)} />
       </NavbarContent>
 
       <NavbarMenu>

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

@@ -1,7 +1,7 @@
 import { title, subtitle } from '@/components/primitives';
 import { Button, Link as NextUiLink } from '@nextui-org/react';
 import { MoveUpRight } from 'lucide-react';
-import { Link } from '@/src/navigation';
+import { Link } from '@/src/i18n/routing';
 import { useTranslations } from 'next-intl';
 import { LocaleCodeType } from '@/types/locale';
 

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

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
-import { Link, NextUiLinkClasses } from '@/src/navigation';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { Button, Card, CardHeader, CardFooter } from '@nextui-org/react';
 import { TokenContext } from '@/utils/TokenProvider';
 import Avatar from 'boring-avatars';

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

@@ -2,14 +2,14 @@
 import React from 'react';
 import { useState, useContext } from 'react';
 import { Input, Button, Card, CardHeader, CardBody } from '@nextui-org/react';
-import { Link } from '@/src/navigation';
+import { Link } from '@/src/i18n/routing';
 import { ChevronRight, Eye, EyeOff } from 'lucide-react';
 import { UserType, AuthMessages } from '@/types/user';
 import { roles } from '@/config/selection';
 import { signUp, signIn, signInAsGuest } from './authControl';
 import { isValidEmail, isValidPassword } from './validate';
 import { TokenContext } from '@/utils/TokenProvider';
-import { useRouter } from '@/src/navigation';
+import { useRouter } from '@/src/i18n/routing';
 import Config from '@/config/config';
 import { LocaleCodeType } from '@/types/locale';
 const isDemoSite = Config.isDemoSite;

frontend/src/app/[locale]/admin/AdminPage.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useContext } from 'react';
 import { UserType, AdminMessages } from '@/types/user';
 import { TokenContext } from '@/utils/TokenProvider';
 import { ToastContext } from '@/utils/ToastProvider';
-import { useRouter } from '@/src/navigation';
+import { useRouter } from '@/src/i18n/routing';
 import UsersTable from './UsersTable';
 import Config from '@/config/config';
 import { LocaleCodeType } from '@/types/locale';

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -62,7 +62,7 @@ export default function ProjectsPage({ messages, projectDialogMessages, locale }
       <div className="w-full p-3 flex items-center justify-between">
         <h3 className="font-bold">{messages.projectList}</h3>
         <div>
-          <Button startContent={<Plus size={16} />} size="sm" color="primary" onClick={openDialogForCreate}>
+          <Button startContent={<Plus size={16} />} size="sm" color="primary" onPress={openDialogForCreate}>
             {messages.newProject}
           </Button>
         </div>

frontend/src/app/[locale]/projects/ProjectsTable.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback, ReactNode } from 'react';
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react';
-import { Link, NextUiLinkClasses } from '@/src/navigation';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { ProjectType, ProjectsMessages } from '@/types/project';
 import dayjs from 'dayjs';
 import PublicityChip from '@/components/PublicityChip';

frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react';
 import { Listbox, ListboxItem } from '@nextui-org/react';
 import { Home, Files, FlaskConical, Users, Settings } from 'lucide-react';
-import { usePathname, useRouter } from '@/src/navigation';
+import { usePathname, useRouter } from '@/src/i18n/routing';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
 import { ProjectMessages } from '@/types/project';
 
@@ -87,7 +87,7 @@ export default function Sidebar({ messages, locale }: Props) {
           <ListboxItem
             key={itr.key}
             startContent={itr.startContent}
-            onClick={() => handleTabClick(itr.key)}
+            onPress={() => handleTabClick(itr.key)}
             className={currentKey === itr.key ? selectedClass : baseClass}
           >
             {itr.text}

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

@@ -30,10 +30,10 @@ export default function FolderEditMenu({ folder, isDisabled, onEditClick, onDele
         </Button>
       </DropdownTrigger>
       <DropdownMenu aria-label="Static Actions" disabledKeys={disabledKeys}>
-        <DropdownItem key="edit" onClick={() => onEditClick(folder)}>
+        <DropdownItem key="edit" onPress={() => onEditClick(folder)}>
           {messages.editFolder}
         </DropdownItem>
-        <DropdownItem key="delete" className="text-danger" color="danger" onClick={() => onDeleteClick(folder.id)}>
+        <DropdownItem key="delete" className="text-danger" color="danger" onPress={() => onDeleteClick(folder.id)}>
           {messages.deleteFolder}
         </DropdownItem>
       </DropdownMenu>

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

@@ -3,7 +3,7 @@ import { FolderType, FoldersMessages } from '@/types/folder';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Listbox, ListboxItem } from '@nextui-org/react';
 import { Folder, Plus } from 'lucide-react';
-import { usePathname, useRouter } from '@/src/navigation';
+import { usePathname, useRouter } from '@/src/i18n/routing';
 import { TokenContext } from '@/utils/TokenProvider';
 import useGetCurrentIds from '@/utils/useGetCurrentIds';
 import FolderDialog from './FolderDialog';
@@ -124,7 +124,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
           variant="bordered"
           className="m-2"
           isDisabled={!context.isProjectDeveloper(Number(projectId))}
-          onClick={openDialogForCreate}
+          onPress={openDialogForCreate}
         >
           {messages.newFolder}
         </Button>
@@ -132,7 +132,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
           {folders.map((folder, index) => (
             <ListboxItem
               key={index}
-              onClick={() => router.push(`/projects/${projectId}/folders/${folder.id}/cases`, { locale: locale })}
+              onPress={() => router.push(`/projects/${projectId}/folders/${folder.id}/cases`, { locale: locale })}
               startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
               className={selectedFolder && folder.id === selectedFolder.id ? selectedClass : baseClass}
               endContent={

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

@@ -14,7 +14,7 @@ import {
   Selection,
   SortDescriptor,
 } from '@nextui-org/react';
-import { Link, NextUiLinkClasses } from '@/src/navigation';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { Plus, MoreVertical, Trash } from 'lucide-react';
 import { CaseType, CasesMessages } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
@@ -104,6 +104,7 @@ export default function TestCaseTable({
             </DropdownTrigger>
             <DropdownMenu aria-label="test case actions">
               <DropdownItem
+                key="delete-case"
                 className="text-danger"
                 isDisabled={isDisabled}
                 onPress={() => handleDeleteCase(testCase.id)}

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

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect, useContext, ChangeEvent, DragEvent } from 'react';
 import { Input, Textarea, Select, SelectItem, Button, Divider, Tooltip } from '@nextui-org/react';
-import { useRouter } from '@/src/navigation';
+import { useRouter } from '@/src/i18n/routing';
 import { Save, Plus, ArrowLeft, Circle } from 'lucide-react';
 import { priorities, testTypes, templates } from '@/config/selection';
 import CaseStepsEditor from './CaseStepsEditor';

frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx

@@ -95,7 +95,7 @@ export default function MembersPage({ projectId, messages, locale }: Props) {
           size="sm"
           color="primary"
           isDisabled={!context.isProjectManager(Number(projectId))}
-          onClick={() => setIsDialogOpen(true)}
+          onPress={() => setIsDialogOpen(true)}
         >
           {messages.addMember}
         </Button>

frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx

@@ -92,7 +92,7 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
             isDisabled={isDisabled}
             color="danger"
             variant="light"
-            onClick={() => {
+            onPress={() => {
               if (member.User.id) {
                 onDeleteMember(member.User.id);
               }

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

@@ -104,7 +104,7 @@ export default function RunsPage({ projectId, locale, messages }: Props) {
             size="sm"
             isDisabled={!context.isProjectReporter(Number(projectId))}
             color="primary"
-            onClick={openDialogForCreate}
+            onPress={openDialogForCreate}
           >
             {messages.newRun}
           </Button>

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

@@ -13,7 +13,7 @@ import {
   DropdownItem,
   SortDescriptor,
 } from '@nextui-org/react';
-import { Link, NextUiLinkClasses } from '@/src/navigation';
+import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { MoreVertical } from 'lucide-react';
 import { RunsMessages, RunType } from '@/types/run';
 import dayjs from 'dayjs';
@@ -94,7 +94,7 @@ export default function RunsTable({ projectId, isDisabled, runs, onDeleteRun, me
               </Button>
             </DropdownTrigger>
             <DropdownMenu aria-label="run actions" disabledKeys={disabledKeys}>
-              <DropdownItem className="text-danger" key="delete" onClick={() => onDeleteRun(run.id)}>
+              <DropdownItem className="text-danger" key="delete" onPress={() => onDeleteRun(run.id)}>
                 {messages.deleteRun}
               </DropdownItem>
             </DropdownMenu>

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

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { useState, useEffect, useContext } from 'react';
-import { useRouter } from '@/src/navigation';
+import { useRouter } from '@/src/i18n/routing';
 import {
   Button,
   Input,
@@ -307,14 +307,16 @@ export default function RunEditor({
                 </DropdownTrigger>
                 <DropdownMenu aria-label="test case select actions">
                   <DropdownItem
+                    key="include"
                     startContent={<CopyPlus size={16} />}
-                    onClick={() => handleBulkIncludeExcludeCases(true)}
+                    onPress={() => handleBulkIncludeExcludeCases(true)}
                   >
                     {messages.includeInRun}
                   </DropdownItem>
                   <DropdownItem
+                    key="exclude"
                     startContent={<CopyMinus size={16} />}
-                    onClick={() => handleBulkIncludeExcludeCases(false)}
+                    onPress={() => handleBulkIncludeExcludeCases(false)}
                   >
                     {messages.excludeFromRun}
                   </DropdownItem>

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -9,7 +9,7 @@ import { TokenContext } from '@/utils/TokenProvider';
 import { deleteProject, fetchProject, updateProject } from '@/utils/projectsControl';
 import { ProjectDialogMessages, ProjectType } from '@/types/project';
 import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
-import { useRouter } from '@/src/navigation';
+import { useRouter } from '@/src/i18n/routing';
 import ProjectDialog from '@/components/ProjectDialog';
 import { UserType } from '@/types/user';
 import { findUser } from '@/utils/usersControl';
@@ -94,7 +94,7 @@ export default function SettingsPage({ projectId, messages, projectDialogMessage
             size="sm"
             color="danger"
             isDisabled={!context.isProjectOwner(Number(projectId))}
-            onClick={() => setIsDeleteConfirmDialogOpen(true)}
+            onPress={() => setIsDeleteConfirmDialogOpen(true)}
           >
             {messages.deleteProject}
           </Button>
@@ -103,7 +103,7 @@ export default function SettingsPage({ projectId, messages, projectDialogMessage
             size="sm"
             color="primary"
             isDisabled={!context.isProjectOwner(Number(projectId))}
-            onClick={() => setIsProjectDialogOpen(true)}
+            onPress={() => setIsProjectDialogOpen(true)}
             className="ms-2"
           >
             {messages.editProject}

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

@@ -3,8 +3,7 @@
 import * as React from 'react';
 import { NextUIProvider } from '@nextui-org/react';
 import { useRouter } from 'next/navigation';
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { ThemeProvider as NextThemesProvider, ThemeProviderProps } from 'next-themes';
-import { ThemeProviderProps } from 'next-themes/dist/types';
 import ToastProvider from '@/utils/ToastProvider';
 import { ToastProps } from '@/types/toast';
 import TokenProvider from '@/utils/TokenProvider';

frontend/src/i18n.ts

@@ -1,13 +0,0 @@
-import { notFound } from 'next/navigation';
-import { getRequestConfig } from 'next-intl/server';
-import { LocaleCodeType } from '@/types/locale';
-
-const locales: LocaleCodeType[] = ['en', 'ja'];
-
-export default getRequestConfig(async ({ locale }) => {
-  if (!locales.includes(locale as any)) notFound();
-
-  return {
-    messages: (await import(`../messages/${locale}.json`)).default,
-  };
-});

frontend/src/i18n/request.ts

@@ -0,0 +1,15 @@
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+
+  if (!locale || !routing.locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
+  };
+});

frontend/src/i18n/routing.ts

@@ -0,0 +1,15 @@
+import { createNavigation } from 'next-intl/navigation';
+import { defineRouting } from 'next-intl/routing';
+
+export const routing = defineRouting({
+  locales: ['en', 'ja'],
+  defaultLocale: 'en',
+  localePrefix: {
+    mode: 'always',
+  },
+});
+
+export const { Link, redirect, usePathname, useRouter, getPathname } = createNavigation(routing);
+
+export const NextUiLinkClasses =
+  'data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-medium text-primary hover:underline hover:opacity-80 active:opacity-disabled transition-opacity underline-offset-4 dark:text-white';

frontend/src/middleware.ts

@@ -1,11 +1,7 @@
 import createMiddleware from 'next-intl/middleware';
-import { locales, localePrefix } from './navigation';
+import { routing } from './i18n/routing';
 
-export default createMiddleware({
+export default createMiddleware(routing);
-  defaultLocale: 'en',
-  localePrefix,
-  locales,
-});
 
 export const config = {
   matcher: ['/', '/(ja|en)/:path*'],

frontend/src/navigation.ts

@@ -1,9 +0,0 @@
-import { createSharedPathnamesNavigation } from 'next-intl/navigation';
-
-export const locales = ['en', 'ja'] as const;
-export const localePrefix = 'always';
-
-export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation({ locales, localePrefix });
-
-export const NextUiLinkClasses =
-  'data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-medium text-primary hover:underline hover:opacity-80 active:opacity-disabled transition-opacity underline-offset-4 dark:text-white';

frontend/utils/TokenProvider.tsx

@@ -2,7 +2,7 @@
 import { createContext, useState, useEffect, useContext } from 'react';
 import { ProjectRoleType, TokenContextType, TokenType } from '@/types/user';
 import { TokenProps } from '@/types/user';
-import { useRouter, usePathname } from '@/src/navigation';
+import { useRouter, usePathname } from '@/src/i18n/routing';
 import {
   isSignedIn as tokenIsSinedIn,
   isAdmin as tokenIsAdmin,