Include locale on all links and routers

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

@@ -21,7 +21,7 @@ export default function LangSwitch(params: { locale: string }) {
 
   async function changeLocale(nextLocale: string) {
     let newPathname;
-    if (params.locale.length < 4) {
+    if (pathname.length < 4) {
       // when root path
       router.push("/", { locale: nextLocale });
     } else {

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

@@ -43,17 +43,6 @@ export default function RootLayout({
           <div className="relative flex flex-col min-h-screen light:bg-neutral-50 dark:bg-neutral-800">
             <Header locale={locale} />
             <main>{children}</main>
-            {/* <footer className="w-full flex items-center justify-center py-3">
-              <Link
-                isExternal
-                className="flex items-center gap-1 text-current"
-                href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
-                title="nextui.org homepage"
-              >
-                <span className="text-default-600">Powered by</span>
-                <p className="text-primary">NextUI</p>
-              </Link>
-            </footer> */}
           </div>
         </Providers>
       </body>

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

@@ -14,9 +14,10 @@ import {
 
 export type Props = {
   messages: ProjectsMessages;
+  locale: string;
 };
 
-export default function ProjectsPage({ messages }: Props) {
+export default function ProjectsPage({ messages, locale }: Props) {
   const [projects, setProjects] = useState([]);
 
   useEffect(() => {
@@ -101,6 +102,7 @@ export default function ProjectsPage({ messages }: Props) {
           onEditProject={onEditClick}
           onDeleteProject={onDeleteClick}
           messages={messages}
+          locale={locale}
         />
 
         <ProjectDialog

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

@@ -12,8 +12,8 @@ import {
   DropdownMenu,
   DropdownItem,
   SortDescriptor,
-  Link,
 } from "@nextui-org/react";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { MoreVertical } from "lucide-react";
 import { ProjectType, ProjectsMessages } from "@/types/project";
 import dayjs from "dayjs";
@@ -23,6 +23,7 @@ type Props = {
   onEditProject: (project: ProjectType) => void;
   onDeleteProject: (projectId: number) => void;
   messages: ProjectsMessages;
+  locale: string;
 };
 
 export default function ProjectsTable({
@@ -30,6 +31,7 @@ export default function ProjectsTable({
   onEditProject,
   onDeleteProject,
   messages,
+  locale,
 }: Props) {
   const headerColumns = [
     { name: messages.id, uid: "id", sortable: true },
@@ -67,9 +69,9 @@ export default function ProjectsTable({
       case "name":
         return (
           <Link
-            underline="hover"
             href={`/projects/${project.id}/home`}
-            className="text-blue-500"
+            locale={locale}
+            className={NextUiLinkClasses}
           >
             {cellValue}
           </Link>

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

@@ -2,10 +2,14 @@
 import { useState, useEffect } from "react";
 import { Listbox, ListboxItem } from "@nextui-org/react";
 import { Home, Files, FlaskConical } from "lucide-react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname, useRouter } from "@/src/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
 
-export default function Sidebar() {
+export type Props = {
+  locale: string;
+};
+
+export default function Sidebar({ locale }: Props) {
   const { projectId } = useGetCurrentIds();
   const router = useRouter();
   const pathname = usePathname();
@@ -16,11 +20,11 @@ export default function Sidebar() {
 
   const handleTabClick = (key: string) => {
     if (key === "home") {
-      router.push(`/projects/${projectId}/home`);
+      router.push(`/projects/${projectId}/home`, { locale: locale });
     } else if (key === "cases") {
-      router.push(`/projects/${projectId}/folders`);
+      router.push(`/projects/${projectId}/folders`, { locale: locale });
     } else if (key === "runs") {
-      router.push(`/projects/${projectId}/runs`);
+      router.push(`/projects/${projectId}/runs`, { locale: locale });
     }
   };
 
@@ -58,13 +62,8 @@ export default function Sidebar() {
 
   return (
     <div className="w-64 border-r-1 dark:border-neutral-700">
-      <Listbox
+      <Listbox aria-label="Listbox Variants" variant="light" className="p-0">
-        aria-label="Listbox Variants"
+        {tabItems.map((itr) => (
-        variant="light"
-        className="p-0"
-        onClick={() => router.push(`/projects/${projectId}/home`)}
-      >
-        {tabItems.map((itr, index) => (
           <ListboxItem
             key={itr.key}
             startContent={itr.startContent}

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

@@ -4,7 +4,7 @@ import { FolderType } from "@/types/folder";
 import { useEffect, useState } from "react";
 import { Button, Listbox, ListboxItem } from "@nextui-org/react";
 import { Folder, Plus } from "lucide-react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname, useRouter } from "@/src/navigation";
 import useGetCurrentIds from "@/utils/useGetCurrentIds";
 import FolderDialog from "./FolderDialog";
 import FolderEditMenu from "./FolderEditMenu";
@@ -18,9 +18,10 @@ import {
 
 type Props = {
   projectId: string;
+  locale: string;
 };
 
-export default function FoldersPane({ projectId }: Props) {
+export default function FoldersPane({ projectId, locale }: Props) {
   const router = useRouter();
   const pathname = usePathname();
   const [folders, setFolders] = useState([]);
@@ -68,7 +69,7 @@ export default function FoldersPane({ projectId }: Props) {
 
   const onDeleteClick = async (folderId: number) => {
     await deleteFolder(folderId);
-    router.push(`/projects/${projectId}/folders`);
+    router.push(`/projects/${projectId}/folders`, { locale: locale });
   };
 
   useEffect(() => {
@@ -86,7 +87,8 @@ export default function FoldersPane({ projectId }: Props) {
         if (pathname === `/projects/${projectId}/folders`) {
           const smallestFolderId = Math.min(...data.map((folder) => folder.id));
           router.push(
-            `/projects/${projectId}/folders/${smallestFolderId}/cases`
+            `/projects/${projectId}/folders/${smallestFolderId}/cases`,
+            { locale: locale }
           );
         }
       } catch (error: any) {
@@ -117,7 +119,10 @@ export default function FoldersPane({ projectId }: Props) {
             <ListboxItem
               key={index}
               onClick={() =>
-                router.push(`/projects/${projectId}/folders/${folder.id}/cases`)
+                router.push(
+                  `/projects/${projectId}/folders/${folder.id}/cases`,
+                  { locale: locale }
+                )
               }
               startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
               className={

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

@@ -6,9 +6,10 @@ import { fetchCases, createCase, deleteCase, deleteCases } from "./caseControl";
 type Props = {
   projectId: string;
   folderId: string;
+  locale: string;
 };
 
-export default function CasesPane({ projectId, folderId }: Props) {
+export default function CasesPane({ projectId, folderId, locale }: Props) {
   const [cases, setCases] = useState([]);
   useEffect(() => {
     async function fetchDataEffect() {
@@ -50,6 +51,7 @@ export default function CasesPane({ projectId, folderId }: Props) {
         onCreateCase={() => handleCreateCase(folderId)}
         onDeleteCase={handleDeleteCase}
         onDeleteCases={handleDeleteCases}
+        locale={locale}
       />
     </>
   );

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

@@ -13,8 +13,8 @@ import {
   DropdownItem,
   Selection,
   SortDescriptor,
-  Link,
 } from "@nextui-org/react";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { Plus, MoreVertical, Trash, Circle } from "lucide-react";
 
 const headerColumns = [
@@ -48,6 +48,7 @@ type Props = {
   onCreateCase: () => void;
   onDeleteCase: (caseId: number) => void;
   onDeleteCases: (selectedCases: string[]) => void;
+  locale: string;
 };
 
 export default function TestCaseTable({
@@ -56,6 +57,7 @@ export default function TestCaseTable({
   onCreateCase,
   onDeleteCase,
   onDeleteCases,
+  locale,
 }: Props) {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
@@ -81,9 +83,9 @@ export default function TestCaseTable({
       case "title":
         return (
           <Link
-            underline="hover"
             href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
-            className="dark:text-white"
+            locale={locale}
+            className={NextUiLinkClasses}
           >
             {cellValue}
           </Link>

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

@@ -9,7 +9,7 @@ import {
   Divider,
   Tooltip,
 } from "@nextui-org/react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/src/navigation";
 import { Save, Plus, ArrowLeft, ArrowUpFromLine, Circle } from "lucide-react";
 import { priorities, testTypes, templates } from "@/config/selection";
 import CaseStepsEditor from "./CaseStepsEditor";
@@ -40,7 +40,12 @@ const defaultTestCase = {
 export default function CaseEditor({
   params,
 }: {
-  params: { projectId: string; folderId: string; caseId: string };
+  params: {
+    projectId: string;
+    folderId: string;
+    caseId: string;
+    locale: string;
+  };
 }) {
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
@@ -171,7 +176,8 @@ export default function CaseEditor({
               className="rounded-full bg-neutral-50 dark:bg-neutral-600"
               onPress={() =>
                 router.push(
-                  `/projects/${params.projectId}/folders/${params.folderId}/cases`
+                  `/projects/${params.projectId}/folders/${params.folderId}/cases`,
+                  { locale: params.locale }
                 )
               }
             >

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

@@ -3,7 +3,12 @@ import CaseEditor from "./CaseEditor";
 export default function Page({
   params,
 }: {
-  params: { projectId: string; folderId: string; caseId: string };
+  params: {
+    projectId: string;
+    folderId: string;
+    caseId: string;
+    locale: string;
+  };
 }) {
   return (
     <CaseEditor
@@ -11,6 +16,7 @@ export default function Page({
         projectId: params.projectId,
         folderId: params.folderId,
         caseId: params.caseId,
+        locale: params.locale,
       }}
     />
   );

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

@@ -3,11 +3,15 @@ import CasesPane from "./CasesPane";
 export default function Page({
   params,
 }: {
-  params: { projectId: string; folderId: string };
+  params: { projectId: string; folderId: string; locale: string };
 }) {
   return (
     <>
-      <CasesPane projectId={params.projectId} folderId={params.folderId} />
+      <CasesPane
+        projectId={params.projectId}
+        folderId={params.folderId}
+        locale={params.locale}
+      />
     </>
   );
 }

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

@@ -5,11 +5,11 @@ export default function FoldersLayout({
   params,
 }: {
   children: React.ReactNode;
-  params: { projectId: string };
+  params: { projectId: string; locale: string };
 }) {
   return (
     <div className="flex w-full">
-      <FoldersPane projectId={params.projectId} />
+      <FoldersPane projectId={params.projectId} locale={params.locale} />
       <div className="flex-grow w-full">{children}</div>
     </div>
   );

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

@@ -1,14 +1,16 @@
-import Sidebar from "./sidebar";
+import Sidebar from "./Sidebar";
 
 export default function SidebarLayout({
   children,
+  params: { locale },
 }: {
   children: React.ReactNode;
+  params: { locale: string };
 }) {
   return (
     <>
       <div className="flex border-t-1 dark:border-neutral-700 min-h-[calc(100vh-64px)]">
-        <Sidebar />
+        <Sidebar locale={locale} />
         <div className="flex w-full">
           <div className="flex-grow">{children}</div>
         </div>

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

@@ -7,9 +7,10 @@ import { fetchRuns, createRun, deleteRun } from "./runsControl";
 
 type Props = {
   projectId: string;
+  locale: string;
 };
 
-export default function RunsPage({ projectId }: Props) {
+export default function RunsPage({ projectId, locale }: Props) {
   const [runs, setRuns] = useState([]);
 
   useEffect(() => {
@@ -66,6 +67,7 @@ export default function RunsPage({ projectId }: Props) {
         projectId={projectId}
         runs={runs}
         onDeleteRun={onDeleteClick}
+        locale={locale}
       />
     </div>
   );

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

@@ -12,8 +12,8 @@ import {
   DropdownMenu,
   DropdownItem,
   SortDescriptor,
-  Link,
 } from "@nextui-org/react";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { MoreVertical } from "lucide-react";
 import { RunType } from "@/types/run";
 import dayjs from "dayjs";
@@ -30,9 +30,15 @@ type Props = {
   projectId: string;
   runs: RunType[];
   onDeleteRun: (runId: number) => void;
+  locale: string;
 };
 
-export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
+export default function RunsTable({
+  projectId,
+  runs,
+  onDeleteRun,
+  locale,
+}: Props) {
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: "id",
     direction: "ascending",
@@ -61,9 +67,9 @@ export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
       case "name":
         return (
           <Link
-            underline="hover"
             href={`/projects/${projectId}/runs/${run.id}`}
-            className="text-blue-500"
+            locale={locale}
+            className={NextUiLinkClasses}
           >
             {cellValue}
           </Link>

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

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/src/navigation";
 import {
   Button,
   Input,
@@ -63,9 +63,10 @@ const defaultTestRun = {
 type Props = {
   projectId: string;
   runId: string;
+  locale: string;
 };
 
-export default function RunEditor({ projectId, runId }: Props) {
+export default function RunEditor({ projectId, runId, locale }: Props) {
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState([]);
   const [runCases, setRunCases] = useState<RunCaseType[]>([]);
@@ -220,7 +221,9 @@ export default function RunEditor({ projectId, runId }: Props) {
               isIconOnly
               size="sm"
               className="rounded-full bg-neutral-50 dark:bg-neutral-600"
-              onPress={() => router.push(`/projects/${projectId}/runs`)}
+              onPress={() =>
+                router.push(`/projects/${projectId}/runs`, { locale: locale })
+              }
             >
               <ArrowLeft size={16} />
             </Button>

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

@@ -3,7 +3,13 @@ import RunEditor from "./RunEditor";
 export default function Page({
   params,
 }: {
-  params: { projectId: string; runId: string };
+  params: { projectId: string; runId: string; locale: string };
 }) {
-  return <RunEditor projectId={params.projectId} runId={params.runId} />;
+  return (
+    <RunEditor
+      projectId={params.projectId}
+      runId={params.runId}
+      locale={params.locale}
+    />
+  );
 }

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

@@ -1,9 +1,13 @@
 import RunsPage from "./RunsPage";
 
-export default function Page({ params }: { params: { projectId: string } }) {
+export default function Page({
+  params,
+}: {
+  params: { projectId: string; locale: string };
+}) {
   return (
     <>
-      <RunsPage projectId={params.projectId} />
+      <RunsPage projectId={params.projectId} locale={params.locale} />
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 import ProjectsPage from "./ProjectsPage";
 import { useTranslations } from "next-intl";
 
-export default function Page() {
+export default function Page(params: { locale }) {
   const t = useTranslations("Projects");
   const messages = {
     projects: t("projects"),
@@ -23,7 +23,7 @@ export default function Page() {
   };
   return (
     <>
-      <ProjectsPage messages={messages} />
+      <ProjectsPage messages={messages} locale={params.locale} />
     </>
   );
 }

frontend/src/navigation.ts

@@ -5,3 +5,6 @@ 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";