Apply i18n

2024-05-05 18:39:05 +09:00
parent b0f3852bb2
commit ce078bb132
9 changed files with 157 additions and 39 deletions
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
@@ -4,13 +4,15 @@ import { Button } from "@nextui-org/react";
 import { Plus } from "lucide-react";
 import RunsTable from "./RunsTable";
 import { fetchRuns, createRun, deleteRun } from "./runsControl";
+import { RunsMessages } from "@/types/run";

 type Props = {
  projectId: string;
  locale: string;
+  messages: RunsMessages;
 };

-export default function RunsPage({ projectId, locale }: Props) {
+export default function RunsPage({ projectId, locale, messages }: Props) {
  const [runs, setRuns] = useState([]);

  useEffect(() => {
@@ -50,7 +52,7 @@ export default function RunsPage({ projectId, locale }: Props) {
  return (
    <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
      <div className="w-full p-3 flex items-center justify-between">
-        <h3 className="font-bold">Runs</h3>
+        <h3 className="font-bold">{messages.runs}</h3>
        <div>
          <Button
            startContent={<Plus size={16} />}
@@ -58,7 +60,7 @@ export default function RunsPage({ projectId, locale }: Props) {
            color="primary"
            onClick={onCreateClick}
          >
-            New Run
+            {messages.newRun}
          </Button>
        </div>
      </div>
@@ -67,6 +69,7 @@ export default function RunsPage({ projectId, locale }: Props) {
        projectId={projectId}
        runs={runs}
        onDeleteRun={onDeleteClick}
+        messages={messages}
        locale={locale}
      />
    </div>
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx
@@ -15,21 +15,14 @@ import {
 } from "@nextui-org/react";
 import { Link, NextUiLinkClasses } from "@/src/navigation";
 import { MoreVertical } from "lucide-react";
-import { RunType } from "@/types/run";
+import { RunsMessages, RunType } from "@/types/run";
 import dayjs from "dayjs";

-const headerColumns = [
-  { name: "ID", uid: "id", sortable: true },
-  { name: "Name", uid: "name", sortable: true },
-  { name: "Description", uid: "description", sortable: true },
-  { name: "Last update", uid: "updatedAt", sortable: true },
-  { name: "Actions", uid: "actions" },
-];
-
 type Props = {
  projectId: string;
  runs: RunType[];
  onDeleteRun: (runId: number) => void;
+  messages: RunsMessages;
  locale: string;
 };

@@ -37,8 +30,17 @@ export default function RunsTable({
  projectId,
  runs,
  onDeleteRun,
+  messages,
  locale,
 }: Props) {
+  const headerColumns = [
+    { name: messages.id, uid: "id", sortable: true },
+    { name: messages.name, uid: "name", sortable: true },
+    { name: messages.description, uid: "description", sortable: true },
+    { name: messages.lastUpdate, uid: "updatedAt", sortable: true },
+    { name: messages.actions, uid: "actions" },
+  ];
+
  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
    column: "id",
    direction: "ascending",
@@ -97,7 +99,7 @@ export default function RunsTable({
                className="text-danger"
                onClick={() => onDeleteRun(run.id)}
              >
-                Delete run
+                {messages.deleteRun}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
@@ -146,7 +148,7 @@ export default function RunsTable({
            </TableColumn>
          )}
        </TableHeader>
-        <TableBody emptyContent={"No runs found"} items={sortedItems}>
+        <TableBody emptyContent={messages.noRunsFound} items={sortedItems}>
          {(item) => (
            <TableRow key={item.id}>
              {(columnKey) => (
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -35,7 +35,7 @@ import {
  RunCaseType,
  RunCaseInfoType,
  RunStatusCountType,
-  RunsMessages,
+  RunMessages,
 } from "@/types/run";
 import { CaseType } from "@/types/case";
 import { FolderType } from "@/types/folder";
@@ -64,11 +64,16 @@ const defaultTestRun = {
 type Props = {
  projectId: string;
  runId: string;
-  messages: RunsMessages;
+  messages: RunMessages;
  locale: string;
 };

-export default function RunEditor({ projectId, runId, messages, locale }: Props) {
+export default function RunEditor({
+  projectId,
+  runId,
+  messages,
+  locale,
+}: Props) {
  const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
  const [folders, setFolders] = useState([]);
  const [runCases, setRunCases] = useState<RunCaseType[]>([]);
@@ -218,7 +223,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
    <>
      <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 runs">
+          <Tooltip content={messages.backToRuns}>
            <Button
              isIconOnly
              size="sm"
@@ -243,7 +248,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
            setIsUpdating(false);
          }}
        >
-          {isUpdating ? "Updating..." : "Update"}
+          {isUpdating ? messages.updating : messages.update}
        </Button>
      </div>

@@ -252,7 +257,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
          <div>
            <div className="w-96 h-72">
              <div className="flex items-center">
-                <h4 className="font-bold">Progress</h4>
+                <h4 className="font-bold">{messages.progress}</h4>
                <Tooltip content="Refresh">
                  <Button
                    isIconOnly
@@ -273,10 +278,10 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
              size="sm"
              type="text"
              variant="bordered"
-              label="Name"
+              label={messages.title}
              value={testRun.name}
              isInvalid={isNameInvalid}
-              errorMessage={isNameInvalid ? "please enter name" : ""}
+              errorMessage={isNameInvalid ? messages.pleaseEnter : ""}
              onChange={(e) => {
                setTestRun({ ...testRun, name: e.target.value });
              }}
@@ -286,8 +291,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
            <Textarea
              size="sm"
              variant="bordered"
-              label="Description"
-              placeholder="Test run description"
+              label={messages.description}
              value={testRun.description}
              onValueChange={(changeValue) => {
                setTestRun({ ...testRun, description: changeValue });
@@ -307,12 +311,12 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
                  );
                  setTestRun({ ...testRun, state: index });
                }}
-                label="status"
+                label={messages.status}
                className="mt-3 max-w-xs"
              >
-                {testRunStatus.map((state, index) => (
-                  <SelectItem key={state.uid} value={index}>
-                    {state.name}
+                {testRunStatus.map((status, index) => (
+                  <SelectItem key={status.uid} value={index}>
+                    {messages[status.uid]}
                  </SelectItem>
                ))}
              </Select>
@@ -322,7 +326,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)

        <Divider className="my-6" />
        <div className="flex items-center justify-between">
-          <h6 className="h-8 font-bold">Select test cases</h6>
+          <h6 className="h-8 font-bold">{messages.selectTestCase}</h6>
          <div>
            {(selectedKeys.size > 0 || selectedKeys === "all") && (
              <Dropdown>
@@ -332,7 +336,7 @@ export default function RunEditor({ projectId, runId, messages, locale }: Props)
                    color="primary"
                    endContent={<ChevronDown size={16} />}
                  >
-                    Test case selection
+                    {messages.testCaseSelection}
                  </Button>
                </DropdownTrigger>
                <DropdownMenu aria-label="test case select actions">
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/page.tsx
@@ -6,10 +6,22 @@ export default function Page({
 }: {
  params: { projectId: string; runId: string; locale: string };
 }) {
-  const t = useTranslations("Runs");
+  const t = useTranslations("Run");
  const messages = {
+    backToRuns: t("back_to_runs"),
+    updating: t("updating"),
+    update: t("update"),
+    progress: t("progress"),
    id: t("id"),
    title: t("title"),
+    pleaseEnter: t("please_enter"),
+    description: t("description"),
+    new: t("new"),
+    inProgress: t("inProgress"),
+    underReview: t("underReview"),
+    rejected: t("rejected"),
+    done: t("done"),
+    closed: t("closed"),
    priority: t("priority"),
    actions: t("actions"),
    status: t("status"),
@@ -22,6 +34,8 @@ export default function Page({
    failed: t("failed"),
    retest: t("retest"),
    skipped: t("skipped"),
+    selectTestCase: t("select_test_case"),
+    testCaseSelection: t("test_case_selection"),
    includeInRun: t("include_in_run"),
    excludeFromRun: t("exclude_from_run"),
    noCasesFound: t("no_cases_found"),
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
@@ -1,13 +1,31 @@
 import RunsPage from "./RunsPage";
+import { useTranslations } from "next-intl";

 export default function Page({
  params,
 }: {
  params: { projectId: string; locale: string };
 }) {
+  const t = useTranslations("Runs");
+  const messages = {
+    runs: t("runs"),
+    id: t("id"),
+    name: t("name"),
+    description: t("description"),
+    lastUpdate: t("last_update"),
+    actions: t("actions"),
+    newRun: t("new_run"),
+    deleteRun: t("delete_run"),
+    noRunsFound: t("no_runs_found"),
+  };
+
  return (
    <>
-      <RunsPage projectId={params.projectId} locale={params.locale} />
+      <RunsPage
+        projectId={params.projectId}
+        locale={params.locale}
+        messages={messages}
+      />
    </>
  );
 }