Apply i18n

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

@@ -1,5 +1,5 @@
 import { Image, Button, Tooltip, Card, CardBody } from "@nextui-org/react";
-import { AttachmentType } from "../../../../../../../../types/case";
+import { AttachmentType, CaseMessages } from "@/types/case";
 import { Trash, ArrowDownToLine } from "lucide-react";
 
 type Props = {
@@ -9,12 +9,14 @@ type Props = {
     downloadFileName: string
   ) => void;
   onAttachmentDelete: (attachmentId: number) => void;
+  messages: CaseMessages,
 };
 
 export default function CaseAttachmentsEditor({
   attachments = [],
   onAttachmentDownload,
   onAttachmentDelete,
+  messages,
 }: Props) {
   let images = [];
   let others = [];
@@ -48,7 +50,7 @@ export default function CaseAttachmentsEditor({
               />
               <div className="flex items-center justify-between">
                 <p>{image.title}</p>
-                <Tooltip content="Delete">
+                <Tooltip content={messages.delete}>
                   <Button
                     isIconOnly
                     size="sm"
@@ -70,7 +72,7 @@ export default function CaseAttachmentsEditor({
             <div className="flex items-center justify-between">
               <p>{file.title}</p>
               <div>
-                <Tooltip content="Download">
+                <Tooltip content={messages.download}>
                   <Button
                     isIconOnly
                     size="sm"
@@ -80,7 +82,7 @@ export default function CaseAttachmentsEditor({
                     <ArrowDownToLine size={16} />
                   </Button>
                 </Tooltip>
-                <Tooltip content="Delete">
+                <Tooltip content={messages.delete}>
                   <Button
                     isIconOnly
                     size="sm"

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

@@ -170,7 +170,7 @@ export default function CaseEditor({
     <>
       <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
         <div className="flex items-center">
-          <Tooltip content="Back to cases" placement="left">
+          <Tooltip content={params.messages.backToCases} placement="left">
             <Button
               isIconOnly
               size="sm"
@@ -198,20 +198,20 @@ export default function CaseEditor({
             setIsUpdating(false);
           }}
         >
-          {isUpdating ? "Updating..." : "Update"}
+          {isUpdating ? params.messages.updating : params.messages.update}
         </Button>
       </div>
 
       <div className="p-5">
-        <h6 className="font-bold">Basic</h6>
+        <h6 className="font-bold">{params.messages.basic}</h6>
         <Input
           size="sm"
           type="text"
           variant="bordered"
-          label="Title"
+          label={params.messages.title}
           value={testCase.title}
           isInvalid={isTitleInvalid}
-          errorMessage={isTitleInvalid ? "please enter title" : ""}
+          errorMessage={isTitleInvalid ? params.messages.pleaseEnterTitle : ""}
           onChange={(e) => {
             setTestCase({ ...testCase, title: e.target.value });
           }}
@@ -221,8 +221,8 @@ export default function CaseEditor({
         <Textarea
           size="sm"
           variant="bordered"
-          label="Description"
-          placeholder="Test case description"
+          label={params.messages.description}
+          placeholder={params.messages.testCaseDescription}
           value={testCase.description}
           onValueChange={(changeValue) => {
             setTestCase({ ...testCase, description: changeValue });
@@ -249,7 +249,7 @@ export default function CaseEditor({
                 fill={priorities[testCase.priority].color}
               />
             }
-            label="Priority"
+            label={params.messages.priority}
             className="mt-3 max-w-xs"
           >
             {priorities.map((priority, index) => (
@@ -272,12 +272,12 @@ export default function CaseEditor({
               );
               setTestCase({ ...testCase, type: index });
             }}
-            label="type"
+            label={params.messages.type}
             className="mt-3 max-w-xs"
           >
             {testTypes.map((type, index) => (
               <SelectItem key={type.uid} value={index}>
-                {type.name}
+                {params.messages[type.uid]}
               </SelectItem>
             ))}
           </Select>
@@ -295,27 +295,26 @@ export default function CaseEditor({
               );
               setTestCase({ ...testCase, template: index });
             }}
-            label="template"
+            label={params.messages.template}
             className="mt-3 max-w-xs"
           >
             {templates.map((template, index) => (
               <SelectItem key={template.uid} value={index}>
-                {template.name}
+                {params.messages[template.uid]}
               </SelectItem>
             ))}
           </Select>
         </div>
 
         <Divider className="my-6" />
-        {templates[testCase.template].name === "Text" ? (
+        {templates[testCase.template].uid === "text" ? (
           <div>
-            <h6 className="font-bold">Test Detail</h6>
+            <h6 className="font-bold">{params.messages.testDetail}</h6>
             <div className="flex">
               <Textarea
                 size="sm"
                 variant="bordered"
-                label="PreConditions"
-                placeholder="PreConditions"
+                label={params.messages.preconditions}
                 value={testCase.preConditions}
                 onValueChange={(changeValue) => {
                   setTestCase({ ...testCase, preConditions: changeValue });
@@ -326,8 +325,7 @@ export default function CaseEditor({
               <Textarea
                 size="sm"
                 variant="bordered"
-                label="ExpectedResults"
-                placeholder="ExpectedResults"
+                label={params.messages.expectedResult}
                 value={testCase.expectedResults}
                 onValueChange={(changeValue) => {
                   setTestCase({ ...testCase, expectedResults: changeValue });
@@ -339,7 +337,7 @@ export default function CaseEditor({
         ) : (
           <div>
             <div className="flex items-center">
-              <h6 className="font-bold">Steps</h6>
+              <h6 className="font-bold">{params.messages.steps}</h6>
               <Button
                 startContent={<Plus size={16} />}
                 size="sm"
@@ -347,7 +345,7 @@ export default function CaseEditor({
                 className="ms-3"
                 onPress={() => onPlusClick(1)}
               >
-                New Step
+                {params.messages.newStep}
               </Button>
             </div>
             <CaseStepsEditor
@@ -366,12 +364,13 @@ export default function CaseEditor({
               }}
               onStepPlus={onPlusClick}
               onStepDelete={onDeleteClick}
+              messages={params.messages}
             />
           </div>
         )}
 
         <Divider className="my-6" />
-        <h6 className="font-bold">Attachments</h6>
+        <h6 className="font-bold">{params.messages.attachments}</h6>
         <CaseAttachmentsEditor
           attachments={testCase.Attachments}
           onAttachmentDownload={(
@@ -379,6 +378,7 @@ export default function CaseEditor({
             downloadFileName: string
           ) => fetchDownloadAttachment(attachmentId, downloadFileName)}
           onAttachmentDelete={onAttachmentDelete}
+          messages={params.messages}
         />
         <div
           className="flex items-center justify-center w-96 mt-3"
@@ -392,11 +392,13 @@ export default function CaseEditor({
             <div className="flex flex-col items-center justify-center pt-5 pb-6">
               <ArrowUpFromLine />
               <p className="mb-2 text-sm text-neutral-500 dark:text-neutral-400">
-                <span className="font-semibold">Click to upload</span> or drag
-                and drop
+                <span className="font-semibold">
+                  {params.messages.clickToUpload}
+                </span>
+                <span>{params.messages.orDragAndDrop}</span>
               </p>
               <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                Max. file size: 50 MB
+                {params.messages.maxFileSize}: 50 MB
               </p>
             </div>
             <input

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

@@ -1,5 +1,5 @@
 import { Textarea, Button, Tooltip } from "@nextui-org/react";
-import { StepType } from "../../../../../../../../types/case";
+import { CaseMessages, StepType } from "@/types/case";
 import { Plus, Trash } from "lucide-react";
 
 type Props = {
@@ -7,6 +7,7 @@ type Props = {
   onStepUpdate: (stepId: number, step: StepType) => void;
   onStepPlus: (newStepNo: number) => void;
   onStepDelete: (stepId: number) => void;
+  messages: CaseMessages;
 };
 
 export default function StepsEditor({
@@ -14,6 +15,7 @@ export default function StepsEditor({
   onStepUpdate,
   onStepPlus,
   onStepDelete,
+  messages,
 }: Props) {
   // sort steps by junction table's column
   const sortedSteps = steps.slice().sort((a, b) => {
@@ -32,8 +34,7 @@ export default function StepsEditor({
           <Textarea
             size="sm"
             variant="bordered"
-            label="Details of the step"
-            placeholder="Details of the step"
+            label={messages.detailsOfTheStep}
             value={step.step}
             onValueChange={(changeValue) => {
               onStepUpdate(step.id, { ...step, step: changeValue });
@@ -44,8 +45,7 @@ export default function StepsEditor({
           <Textarea
             size="sm"
             variant="bordered"
-            label="Expected Result"
-            placeholder="Expected Result"
+            label={messages.expectedResult}
             value={step.result}
             onValueChange={(changeValue) => {
               onStepUpdate(step.id, { ...step, result: changeValue });
@@ -53,7 +53,7 @@ export default function StepsEditor({
             className="mt-3 ms-1"
           />
           <div className="mt-3 ms-1">
-            <Tooltip content="Delete this step" placement="left">
+            <Tooltip content={messages.deleteThisStep} placement="left">
               <Button
                 isIconOnly
                 size="sm"
@@ -63,7 +63,7 @@ export default function StepsEditor({
                 <Trash size={16} />
               </Button>
             </Tooltip>
-            <Tooltip content="Insert step" placement="left">
+            <Tooltip content={messages.insertStep} placement="left">
               <Button
                 isIconOnly
                 size="sm"

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

@@ -13,10 +13,51 @@ export default function Page({
 }) {
   const t = useTranslations("Case");
   const messages = {
+    backToCases: t("back_to_cases"),
+    updating: t("updating"),
+    update: t("update"),
+    basic: t("basic"),
+    title: t("title"),
+    pleaseEnterTitle: t("please_enter_title"),
+    description: t("description"),
+    testCaseDescription: t("test_case_description"),
+    priority: t("priority"),
     critical: t("critical"),
     high: t("high"),
     medium: t("medium"),
     low: t("low"),
+    type: t("type"),
+    other: t("other"),
+    security: t("security"),
+    performance: t("performance"),
+    accessibility: t("accessibility"),
+    functional: t("functional"),
+    acceptance: t("acceptance"),
+    usability: t("usability"),
+    smokeSanity: t("smoke_sanity"),
+    compatibility: t("compatibility"),
+    destructive: t("destructive"),
+    regression: t("regression"),
+    automated: t("automated"),
+    manual: t("manual"),
+    template: t("template"),
+    testDetail: t("test_detail"),
+    preconditions: t("preconditions"),
+    step: t("step"),
+    text: t("text"),
+    steps: t("steps"),
+    newStep: t("new_step"),
+    detailsOfTheStep: t("details_of_the_step"),
+    expectedResult: t("expected_result"),
+    deleteThisStep: t("delete_this_step"),
+    insertStep: t("insert_step"),
+    attachments: t("attachments"),
+    delete: t("delete"),
+    download: t("download"),
+    deleteFile: t("delete_file"),
+    clickToUpload: t("click_to_upload"),
+    orDragAndDrop: t("or_drag_and_drop"),
+    maxFileSize: t("max_file_size"),
   };
 
   return (