Added translations to the sidebar

frontend/components/dashboard/CommentField.tsx

@@ -1,9 +1,13 @@
+import { useTranslation } from "next-i18next";
+
 /**
  * This is the text field where people can add comments to particular secrets.
  */
 const CommentField = ({ comment, modifyComment, position }: { comment: string; modifyComment: (value: string, posistion: number) => void; position: number;}) => {
+  const { t } = useTranslation();
+
   return <div className={`relative mt-4 px-4 pt-4`}>
-    <p className='text-sm text-bunker-300'>Comments & notes</p>
+    <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.comments")}</p>
     <textarea 
       className="bg-bunker-800 h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
       value={comment}

frontend/components/dashboard/GenerateSecretMenu.tsx

@@ -1,4 +1,5 @@
 import { Fragment,useState } from 'react';
+import { useTranslation } from "next-i18next";
 import { faShuffle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
@@ -10,6 +11,7 @@ import { Menu, Transition } from '@headlessui/react';
  */
 const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: string, position: number) => void; position: number; }) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
+  const { t } = useTranslation();
 
   return <Menu as="div" className="relative inline-block text-left">
     <div>
@@ -51,8 +53,8 @@ const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: st
             icon={faShuffle}
           />
           <div className="text-sm justify-between flex flex-row w-full">
-            <p>Generate Random Hex</p>
-            <p>digits</p>
+            <p>{t("dashboard:sidebar.generate-random-hex")}</p>
+            <p>{t("dashboard:sidebar.digits")}</p>
           </div>
         </div>
         <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">

frontend/components/dashboard/SideBar.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useTranslation } from "next-i18next";
 import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SecretVersionList from 'ee/components/SecretVersionList';
@@ -69,17 +70,18 @@ const SideBar = ({
   setSharedToHide 
 }: SideBarProps) => {
   const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
+  const { t } = useTranslation();
 
   return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between'>
     <div className='h-min overflow-y-auto'>
       <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
-        <p className="font-semibold text-lg text-bunker-200">Secret</p>
+        <p className="font-semibold text-lg text-bunker-200">{t("dashboard:sidebar.secret")}</p>
         <div className='p-1' onClick={() => toggleSidebar("None")}>
           <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
         </div>
       </div>
       <div className='mt-4 px-4 pointer-events-none'>
-        <p className='text-sm text-bunker-300'>Key</p>
+        <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.key")}</p>
         <DashboardInputField
           onChangeHandler={modifyKey}
           type="varName"
@@ -91,7 +93,7 @@ const SideBar = ({
       </div>
       {data.filter(secret => secret.type == "shared")[0]?.value 
         ? <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
-        <p className='text-sm text-bunker-300'>Value</p>
+        <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.value")}</p>
         <DashboardInputField
           onChangeHandler={modifyValue}
           type="value"
@@ -105,13 +107,13 @@ const SideBar = ({
         </div>
       </div>
         : <div className='px-4 text-sm text-bunker-300 pt-4'>
-          <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Note:</span>
-          This secret is personal. It is not shared with any of your teammates.
+          <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>{t("common:note")}:</span>
+          {t("dashboard:sidebar.personal-explanation")}
         </div>}
       <div className='mt-4 px-4'>
         {data.filter(secret => secret.type == "shared")[0]?.value &&
         <div className='flex flex-row items-center justify-between my-2 pl-1 pr-2'>
-          <p className='text-sm text-bunker-300'>Override value with a personal value</p>
+          <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.override")}</p>
           <Toggle 
             enabled={overrideEnabled} 
             setEnabled={setOverrideEnabled} 
@@ -154,7 +156,7 @@ const SideBar = ({
     </div>
     <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
       <Button
-        text="Save Changes"
+        text={String(t("common:save-changes"))}
         onButtonPressed={savePush}
         color="primary"
         size="md"

frontend/ee/components/SecretVersionList.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { useTranslation } from "next-i18next";
 import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import getSecretVersions from 'ee/api/secrets/GetSecretVersions';
@@ -25,6 +26,7 @@ interface EncrypetedSecretVersionListProps {
  */
 const SecretVersionList = ({ secretId }: { secretId: string; }) => {
   const router = useRouter();
+  const { t } = useTranslation();
   const [secretVersions, setSecretVersions] = useState<DecryptedSecretVersionListProps[]>([{createdAt: "123", value: "124"}]);
 
   useEffect(() => {
@@ -67,7 +69,7 @@ const SecretVersionList = ({ secretId }: { secretId: string; }) => {
   }, []);
 
   return <div className='w-full h-52 px-4 mt-4 text-sm text-bunker-300 overflow-x-none'>
-  <p className=''>Version History</p>
+  <p className=''>{t("dashboard:sidebar.version-history")}</p>
   <div className='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none'>
     <div className='h-48 overflow-y-auto overflow-x-none'>
       {secretVersions?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))

frontend/pages/dashboard/[id].tsx

@@ -422,8 +422,8 @@ export default function Dashboard() {
         <title>{t("common:head-title", { title: t("dashboard:title") })}</title>
         <link rel="icon" href="/infisical.ico" />
         <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("dashboard:og-title")} />
-        <meta name="og:description" content={t("dashboard:og-description")} />
+        <meta property="og:title" content={String(t("dashboard:og-title"))} />
+        <meta name="og:description" content={String(t("dashboard:og-description"))} />
       </Head>
       <div className="flex flex-row">
         {sidebarSecretId != "None" && <SideBar 
@@ -494,13 +494,13 @@ export default function Dashboard() {
               {(data?.length !== 0 || buttonReady) && (
                 <div className={`flex justify-start max-w-sm mt-2`}>
                   <Button
-                    text={t("common:save-changes")}
+                    text={String(t("common:save-changes"))}
                     onButtonPressed={savePush}
                     color="primary"
                     size="md"
                     active={buttonReady}
                     iconDisabled={faCheck}
-                    textDisabled={t("common:saved")}
+                    textDisabled={String(t("common:saved"))}
                   />
                 </div>
               )}
@@ -525,7 +525,7 @@ export default function Dashboard() {
                         className="pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
                         value={searchKeys}
                         onChange={(e) => setSearchKeys(e.target.value)}
-                        placeholder={t("dashboard:search-keys")}
+                        placeholder={String(t("dashboard:search-keys"))}
                       />
                     </div>
                     <div className="ml-2 min-w-max flex flex-row items-start justify-start">
@@ -558,7 +558,7 @@ export default function Dashboard() {
                     </div>
                     <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
                       <Button
-                        text={t("dashboard:add-key")}
+                        text={String(t("dashboard:add-key"))}
                         onButtonPressed={addRow}
                         color="mineshaft"
                         icon={faPlus}

frontend/public/locales/en/common.json

@@ -8,7 +8,6 @@
   "last-name": "Last Name",
   "logout": "Log Out",
   "validate-required": "Please input your {{name}}",
-
   "maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes.",
   "click-to-copy": "Click to copy",
   "project-id": "Project ID",
@@ -22,5 +21,6 @@
   "environment": "Environment",
   "expired-in": "Expires in",
   "language": "Language",
-  "search": "Search..."
+  "search": "Search...",
+  "note": "Note"
 }

frontend/public/locales/en/dashboard.json

@@ -15,5 +15,16 @@
     "title": "Good job!",
     "line1": "Congrats on adding more secrets.",
     "line2": "Here is how to connect them to your codebase."
+  },
+  "sidebar": {
+    "secret": "Secret",
+    "key": "Key",
+    "value": "Value",
+    "override": "Override value with a personal value",
+    "version-history": "Version History",
+    "comments": "Comments & Notes",
+    "personal-explanation": "This secret is personal. It is not shared with any of your teammates.",
+    "generate-random-hex": "Generate Random Hex",
+    "digits": "digits"
   }
 }

frontend/public/locales/ko/common.json

@@ -18,9 +18,9 @@
   "role": "Role",
   "role_admin": "admin",
   "display-name": "표시 이름",
-
   "environment": "환경",
   "expired-in": "만료 기한:",
   "language": "언어",
-  "search": "검색하기..."
+  "search": "검색하기...",
+  "note": "Note"
 }

frontend/public/locales/ko/dashboard.json

@@ -15,5 +15,16 @@
     "title": "좋았어요!",
     "line1": "더 많은 시크릿들을 추가한 것을 축하합니다.",
     "line2": "코드와 연결하는 사용하는 방법을 한번 알아보지 않을래요?"
+  },
+  "sidebar": {
+    "secret": "Secret",
+    "key": "Key",
+    "value": "Value",
+    "override": "Override value with a personal value",
+    "version-history": "Version History",
+    "comments": "Comments & Notes",
+    "personal-explanation": "This secret is personal. It is not shared with any of your teammates.",
+    "generate-random-hex": "Generate Random Hex",
+    "digits": "digits"
   }
 }