translate(frontend): update namespace names, move translate keys, tra…

…nslate some keys into korean

frontend/.eslintrc.json

@@ -4,6 +4,7 @@
     "simple-import-sort"
   ],
   "rules": {
+    "i18n-ally-translation-missing": "off",
     "react-hooks/exhaustive-deps": "off",
     "simple-import-sort/exports": "warn",
     "simple-import-sort/imports": [

frontend/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"i18n-ally.localesPaths": [
+		"locales",
+		"public/locales"
+	]
+}

frontend/components/basic/dialog/AddIncidentContactDialog.js

@@ -1,4 +1,5 @@
 import { Fragment, useState } from "react";
+import useTranslate from "next-translate/useTranslation";
 import { Dialog, Transition } from "@headlessui/react";
 
 import addIncidentContact from "~/pages/api/organization/addIncidentContact";
@@ -14,6 +15,7 @@ const AddIncidentContactDialog = ({
   setIncidentContacts,
 }) => {
   let [incidentContactEmail, setIncidentContactEmail] = useState("");
+  const { t } = useTranslate();
 
   const submit = () => {
     setIncidentContacts(
@@ -59,17 +61,16 @@ const AddIncidentContactDialog = ({
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-400"
                   >
-                    Add an Incident Contact
+                    {t("section-incident:add-dialog.title")}
                   </Dialog.Title>
                   <div className="mt-2 mb-2">
                     <p className="text-sm text-gray-500">
-                      This contact will be notified in the unlikely event of a
-                      severe incident.
+                      {t("section-incident:add-dialog.description")}
                     </p>
                   </div>
                   <div className="max-h-28">
                     <InputField
-                      label="Email"
+                      label={t("common:email")}
                       onChangeHandler={setIncidentContactEmail}
                       type="varName"
                       value={incidentContactEmail}
@@ -81,7 +82,7 @@ const AddIncidentContactDialog = ({
                     <Button
                       onButtonPressed={submit}
                       color="mineshaft"
-                      text="Add Incident Contact"
+                      text={t("section-incident.add-dialog.add-incident")}
                       size="md"
                     />
                   </div>

frontend/components/basic/dialog/AddProjectMemberDialog.js

@@ -52,25 +52,25 @@ const AddProjectMemberDialog = ({
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-400 z-50"
                     >
-                      {t("settings:add-member-dialog.add-member-to-project")}
+                      {t("section-members:add-dialog.add-member-to-project")}
                     </Dialog.Title>
                   ) : (
                     <Dialog.Title
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-400 z-50"
                     >
-                      {t("settings:add-member-dialog.already-all-invited")}
+                      {t("section-members:add-dialog.already-all-invited")}
                     </Dialog.Title>
                   )}
                   <div className="mt-2 mb-4">
                     {data?.length > 0 ? (
                       <div className="flex flex-col">
                         <p className="text-sm text-gray-500">
-                          {t("settings:add-member-dialog.user-will-email")}
+                          {t("section-members:add-dialog.user-will-email")}
                         </p>
                         <div className="">
                           <Trans
-                            i18nKey="settings:add-member-dialog.looking-add"
+                            i18nKey="section-members:add-dialog.looking-add"
                             components={[
                               // eslint-disable-next-line react/jsx-key
                               <button
@@ -93,16 +93,14 @@ const AddProjectMemberDialog = ({
                                       "?invite"
                                   )
                                 }
-                              >
-                                click here.
-                              </button>,
+                              />,
                             ]}
                           />
                         </div>
                       </div>
                     ) : (
                       <p className="text-sm text-gray-500">
-                        {t("settings:add-member-dialog.add-user-org-first")}
+                        {t("section-members:add-dialog.add-user-org-first")}
                       </p>
                     )}
                   </div>
@@ -122,7 +120,7 @@ const AddProjectMemberDialog = ({
                         <Button
                           onButtonPressed={submitModal}
                           color="mineshaft"
-                          text={t("settings:add-member-dialog.add-member")}
+                          text={t("section-members:add-member")}
                           size="md"
                         />
                       </div>
@@ -132,7 +130,7 @@ const AddProjectMemberDialog = ({
                           router.push("/settings/org/" + router.query.id)
                         }
                         color="mineshaft"
-                        text={t("settings:add-member-dialog.add-user-to-org")}
+                        text={t("section-members:add-dialog.add-user-to-org")}
                         size="md"
                       />
                     )}

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -1,5 +1,6 @@
 import { Fragment, useState } from "react";
 import { useRouter } from "next/router";
+import useTranslate from "next-translate/useTranslation";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Dialog, Transition } from "@headlessui/react";
@@ -41,6 +42,7 @@ const AddServiceTokenDialog = ({
   const [serviceTokenEnv, setServiceTokenEnv] = useState("Development");
   const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day");
   const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
+  const { t } = useTranslate();
 
   const generateServiceToken = async () => {
     const latestFileKey = await getLatestFileKey(workspaceId);
@@ -134,21 +136,20 @@ const AddServiceTokenDialog = ({
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-400 z-50"
                     >
-                      Add a service token for {workspaceName}
+                      {t("section-token:add-dialog.title", {
+                        target: workspaceName,
+                      })}
                     </Dialog.Title>
                     <div className="mt-2 mb-4">
                       <div className="flex flex-col">
                         <p className="text-sm text-gray-500">
-                          Specify the name, environment, and expiry period. When
-                          a token is generated, you will only be able to see it
-                          once before it disappears. Make sure to save it
-                          somewhere.
+                          {t("section-token:add-dialog.description")}
                         </p>
                       </div>
                     </div>
                     <div className="max-h-28 mb-2">
                       <InputField
-                        label="Service Token Name"
+                        label={t("section-token:add-dialog.name")}
                         onChangeHandler={setServiceTokenName}
                         type="varName"
                         value={serviceTokenName}
@@ -167,7 +168,7 @@ const AddServiceTokenDialog = ({
                           "Testing",
                         ]}
                         width="full"
-                        text="Environment: "
+                        text={`t("common:environment"): `}
                       />
                     </div>
                     <div className="max-h-28">
@@ -176,16 +177,16 @@ const AddServiceTokenDialog = ({
                         onChange={setServiceTokenExpiresIn}
                         data={["1 day", "7 days", "1 month"]}
                         width="full"
-                        text="Expires in: "
+                        text={`t("common:expired-in"): `}
                       />
                     </div>
                     <div className="max-w-max">
                       <div className="mt-6 flex flex-col justify-start w-max">
                         <Button
                           onButtonPressed={() => generateServiceToken()}
                           color="mineshaft"
-                          text="Add Service Token"
-                          textDisabled="Add Service Token"
+                          text={t("section-token:add-dialog.add")}
+                          textDisabled={t("section-token:add-dialog.add")}
                           size="md"
                           active={serviceTokenName == "" ? false : true}
                         />
@@ -198,13 +199,14 @@ const AddServiceTokenDialog = ({
                       as="h3"
                       className="text-lg font-medium leading-6 text-gray-400 z-50"
                     >
-                      Copy your service token
+                      {t("section-token:add-dialog.copy-service-token")}
                     </Dialog.Title>
                     <div className="mt-2 mb-4">
                       <div className="flex flex-col">
                         <p className="text-sm text-gray-500">
-                          Once you close this popup, you will never see your
-                          service token again
+                          {t(
+                            "section-token:add-dialog.copy-service-token-description"
+                          )}
                         </p>
                       </div>
                     </div>
@@ -234,7 +236,7 @@ const AddServiceTokenDialog = ({
                             )}
                           </button>
                           <span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
-                            Click to Copy
+                            {t("common.click-to-copy")}
                           </span>
                         </div>
                       </div>

frontend/i18n.js

@@ -1,16 +1,27 @@
 const workaround = require("next-translate/lib/cjs/plugin/utils.js");
 
 workaround.defaultLoader =
-	"(l, n) => import(`@next-translate-root/locales/${l}.json`).then(m => m?.default[n] ?? {} )";
+  "(l, n) => import(`@next-translate-root/locales/${l}.json`).then(m => m?.default[n] ?? {} )";
 
 module.exports = {
-	locales: ["en-US", "ko-KR"],
-	defaultLocale: "en-US",
-	pages: {
-		"*": ["common", "nav"],
-		"rgx:^/(login|signup)": ["auth"],
-		"rgx:^/settings": ["settings"],
-		"/dashboard/[id]": ["dashboard"],
-		"/users/[id]": ["settings"],
-	},
+  locales: ["en-US", "ko-KR"],
+  defaultLocale: "en-US",
+  pages: {
+    "*": ["common", "nav"],
+    "/login": ["login"],
+    "/signup": ["signup", "form-password"],
+    "rgx:^/(login|signup)": ["auth"],
+    "rgx:^/settings": ["settings"],
+    "/dashboard/[id]": ["dashboard"],
+    "/users/[id]": ["settings-members", "section-members"],
+    "/settings/project/[id]": ["settings-project", "section-token"],
+    "/settings/org/[id]": [
+      "settings-org",
+      "section-incident",
+      "section-members",
+    ],
+    "/settings/personal/[id]": ["settings-personal"],
+    "/settings/billing/[id]": ["billing"],
+    "/integrations/[id]": ["integrations"],
+  },
 };