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;