Added translations to integrations

frontend/components/basic/dialog/ActivateBotDialog.js

@@ -1,12 +1,7 @@
 import { Fragment } from "react";
+import { useTranslation } from "next-i18next";
 import { Dialog, Transition } from "@headlessui/react";
 
-import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus";
-import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
-import { 
-    decryptAssymmetric,
-    encryptAssymmetric
-} from "../../utilities/cryptography/crypto";
 import Button from "../buttons/Button";
 
 const ActivateBotDialog = ({
@@ -16,6 +11,7 @@ const ActivateBotDialog = ({
     handleBotActivate,
     handleIntegrationOption
 }) => {
+    const { t } = useTranslation();
     
     const submit = async () => {
         try {
@@ -64,18 +60,18 @@ const ActivateBotDialog = ({
                                     as="h3"
                                     className="text-lg font-medium leading-6 text-gray-400"
                                 >
-                                    Grant Infisical access to your secrets
+                                    {t("integrations:grant-access-to-secrets")}
                                 </Dialog.Title>
                                 <div className="mt-2 mb-2">
                                     <p className="text-sm text-gray-500">
-                                        Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over.
+                                        {t("integrations:why-infisical-needs-access")}
                                     </p>
                                 </div>
                                 <div className="mt-6 max-w-max">
                                     <Button 
                                         onButtonPressed={submit}
                                         color="mineshaft"
-                                        text="Grant access"
+                                        text={t("integrations:grant-access-button")}
                                         size="md"
                                     />
                                 </div>

frontend/components/integrations/CloudIntegrationSection.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "next-i18next";
 
 import CloudIntegration from "./CloudIntegration";
 
@@ -24,12 +25,14 @@ const CloudIntegrationSection = ({
     integrationOptionPress,
     integrationAuths
 }: Props) => {
+    const { t } = useTranslation();
+
     return (
         <>
             <div className={`flex flex-col justify-between items-start m-4 mt-7 text-xl max-w-5xl px-2`}>
-                <h1 className="font-semibold text-3xl">Cloud Integrations</h1>
+                <h1 className="font-semibold text-3xl">{t("integrations:cloud-integrations")}</h1>
                 <p className="text-base text-gray-400">
-                    Click on an integration to begin syncing secrets to it.
+                    {t("integrations:click-to-start")}
                 </p>
             </div>
             <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 max-w-5xl">

frontend/components/integrations/FrameworkIntegrationSection.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "next-i18next";
 
 import FrameworkIntegration from "./FrameworkIntegration";
 
@@ -15,24 +16,26 @@ interface Props {
 }
 
 const FrameworkIntegrationSection = ({ frameworks }: Props) => {
-    return (
-      <>
-        <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
-          <h1 className="font-semibold text-3xl">Framework Integrations</h1>
-          <p className="text-base text-gray-400">
-            Click on a framework to get the setup instructions.
-          </p>
-        </div>
-        <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
-          {frameworks.map((framework) => (
-            <FrameworkIntegration 
-              framework={framework}
-              key={`framework-integration-${framework.slug}`}
-            />
-          ))}
-        </div>
-      </>
-    );
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+        <h1 className="font-semibold text-3xl">{t("integrations:framework-integrations")}</h1>
+        <p className="text-base text-gray-400">
+          {t("integrations:click-to-setup")}
+        </p>
+      </div>
+      <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+        {frameworks.map((framework) => (
+          <FrameworkIntegration 
+            framework={framework}
+            key={`framework-integration-${framework.slug}`}
+          />
+        ))}
+      </div>
+    </>
+  );
 }
 
 export default FrameworkIntegrationSection;

frontend/public/locales/en/integrations.json

@@ -5,5 +5,12 @@
   "no-integrations2": "To start, click on any of the options below. It takes 5 clicks to set up.",
   "available": "Platform & Cloud Integrations",
   "available-text1": "Click on the itegration you want to connect. This will let your environment variables flow automatically into selected third-party services.",
-  "available-text2": " Note: during an integration with Heroku, for security reasons, it is impossible to maintain end-to-end encryption. In theory, this lets Infisical decrypt yor environment variables. In practice, we can assure you that this will never be done, and it allows us to protect your secrets from bad actors online. The core Infisical service will always stay end-to-end encrypted. With any questions, reach out support@infisical.com."
+  "available-text2": "Note: during an integration with Heroku, for security reasons, it is impossible to maintain end-to-end encryption. In theory, this lets Infisical decrypt yor environment variables. In practice, we can assure you that this will never be done, and it allows us to protect your secrets from bad actors online. The core Infisical service will always stay end-to-end encrypted. With any questions, reach out support@infisical.com.",
+  "cloud-integrations": "Cloud Integrations",
+  "framework-integrations": "Framework Integrations",
+  "click-to-start": "Click on an integration to begin syncing secrets to it.",
+  "click-to-setup": "Click on a framework to get the setup instructions.",
+  "grant-access-to-secrets": "Grant Infisical access to your secrets",
+  "why-infisical-needs-access": "Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over.",
+  "grant-access-button": "Grant access"
 }

frontend/public/locales/ko/integrations.json

@@ -5,5 +5,12 @@
   "description": "외부 서비스와 함께 Infisical을 연동하고 관리하세요",
   "no-integrations1": "연동된 서비스가 없어요. 연동하게 된다면 이곳에서 표시돼요.",
   "no-integrations2": "시작하려면, 아래의 옵션을 클릭하세요. 대체로 5분 이내로 가능해요.",
-  "title": "프로젝트 연동"
+  "title": "프로젝트 연동",
+  "cloud-integrations": "Cloud Integrations",
+  "framework-integrations": "Framework Integrations",
+  "click-to-start": "Click on an integration to begin syncing secrets to it.",
+  "click-to-setup": "Click on a framework to get the setup instructions.",
+  "grant-access-to-secrets": "Grant Infisical access to your secrets",
+  "why-infisical-needs-access": "Most cloud integrations require Infisical to be able to decrypt your secrets so they can be forwarded over.",
+  "grant-access-button": "Grant access"
 }