Update the list of integrations in the app

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -15,13 +15,7 @@ import {
 import Button from "../buttons/Button";
 import InputField from "../InputField";
 import ListBox from "../Listbox";
-
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
+import { envMapping } from "../../../public/data/frequentConstants";
 
 const expiryMapping = {
   "1 day": 86400,

frontend/components/basic/table/ServiceTokenTable.js

@@ -4,15 +4,7 @@ import { faX } from "@fortawesome/free-solid-svg-icons";
 
 import guidGenerator from "../../utilities/randomId";
 import Button from "../buttons/Button";
-
-const roles = ["admin", "user"];
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
+import { reverseEnvMapping } from "../../../public/data/frequentConstants";
 
 /**
  * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.

frontend/components/utilities/secrets/getSecretsForProject.js

@@ -1,6 +1,7 @@
 import getSecrets from "~/pages/api/files/GetSecrets";
 
 import guidGenerator from "../randomId";
+import { envMapping } from "../../../public/data/frequentConstants";
 
 const {
   decryptAssymmetric,
@@ -9,13 +10,6 @@ const {
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 const getSecretsForProject = async ({
   env,
   setFileState,

frontend/components/utilities/secrets/pushKeys.js

@@ -1,6 +1,7 @@
 import uploadSecrets from "~/pages/api/files/UploadSecrets";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 import getWorkspaceKeys from "~/pages/api/workspace/getWorkspaceKeys";
+import { envMapping } from "../../../public/data/frequentConstants";
 
 const crypto = require("crypto");
 const {
@@ -12,12 +13,6 @@ const {
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
 
 const pushKeys = async (obj, workspaceId, env) => {
   let sharedKey = await getLatestFileKey(workspaceId);

frontend/pages/dashboard/[id].js

@@ -39,13 +39,7 @@ import getUser from "../api/user/getUser";
 import checkUserAction from "../api/userActions/checkUserAction";
 import registerUserAction from "../api/userActions/registerUserAction";
 import getWorkspaces from "../api/workspace/getWorkspaces";
-
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
+import { envMapping } from "../../public/data/frequentConstants";
 
 /**
  * This component represent a single row for an environemnt variable on the dashboard

frontend/pages/integrations/[id].js

@@ -24,23 +24,10 @@ import getIntegrations from "../api/integrations/GetIntegrations";
 import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 import startIntegration from "../api/integrations/StartIntegration";
+import { envMapping, reverseEnvMapping, frameworks } from "../../public/data/frequentConstants";
 
 const crypto = require("crypto");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
-
 const Integration = ({ projectIntegration }) => {
   const [integrationEnvironment, setIntegrationEnvironment] = useState(
     reverseEnvMapping[projectIntegration.environment]
@@ -248,7 +235,7 @@ export default function Integrations() {
           )}
           <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
             <div className="flex flex-row justify-start items-center text-3xl">
-              <p className="font-semibold mr-4">Available Integrations</p>
+              <p className="font-semibold mr-4">Platform & Cloud Integrations</p>
             </div>
             <p className="mr-4 text-base text-gray-400">
               Click on the itegration you want to connect. This will let your
@@ -265,7 +252,7 @@ export default function Integrations() {
               reach out support@infisical.com.
             </p>
           </div>
-          <div className="grid gap-4 grid-cols-3 grid-rows-3 mx-6 mt-4 max-w-5xl">
+          <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 mt-4 max-w-5xl">
             {Object.keys(integrations).map((integration) => (
               <div
                 className={`relative ${
@@ -290,12 +277,12 @@ export default function Integrations() {
                 >
                   <Image
                     src={`/images/integrations/${integrations[integration].name}.png`}
-                    height={100}
-                    width={100}
+                    height={70}
+                    width={70}
                     alt="integration logo"
                   ></Image>
                   {integrations[integration].name.split(" ").length > 2 ? (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
                       <div>{integrations[integration].name.split(" ")[0]}</div>
                       <div className="text-base">
                         {integrations[integration].name.split(" ")[1]}{" "}
@@ -303,7 +290,7 @@ export default function Integrations() {
                       </div>
                     </div>
                   ) : (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-2xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
                       {integrations[integration].name}
                     </div>
                   )}
@@ -353,6 +340,35 @@ export default function Integrations() {
               </div>
             ))}
           </div>
+          <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+            <div className="flex flex-row justify-start items-center text-3xl">
+              <p className="font-semibold mr-4">Framework Integrations</p>
+            </div>
+            <p className="mr-4 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) => (
+              <div key={framework.name}>
+                <a
+                  href={framework.link}
+                  rel="noopener"
+                  className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr hover:from-sky-400 hover:to-primary duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
+                >
+                  <div className={`font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
+                    {framework?.image && <Image
+                      src={`/images/integrations/${framework.image}.png`}
+                      height={framework?.name ? 60 : 90}
+                      width={framework?.name ? 60 : 90}
+                      alt="integration logo"
+                    ></Image>}
+                    {framework?.name && framework?.image && <div className="h-2"></div>}
+                    {framework?.name && framework.name}
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

frontend/public/data/frequentConstants.ts

@@ -0,0 +1,82 @@
+const envMapping = {
+  Development: "dev",
+  Staging: "staging",
+  Production: "prod",
+  Testing: "test",
+};
+  
+const reverseEnvMapping = {
+  dev: "Development",
+  staging: "Staging",
+  prod: "Production",
+  test: "Testing",
+};
+
+const frameworks = [{
+    "name": "Docker",
+    "image": "Docker",
+    "link": "https://infisical.com/docs/integrations/platforms/docker"
+  }, {
+    "name": "Docker Compose",
+    "image": "Docker Compose",
+    "link": "https://infisical.com/docs/integrations/platforms/docker-compose"
+  }, {
+    "name": "React",
+    "image": "React",
+    "link": "https://infisical.com/docs/integrations/frameworks/react"
+  }, {
+    "name": "Vue",
+    "image": "Vue",
+    "link": "https://infisical.com/docs/integrations/frameworks/vue"
+  }, {
+    "image": "Express",
+    "link": "https://infisical.com/docs/integrations/frameworks/express"
+  },{
+    "image": "Next.js",
+    "link": "https://infisical.com/docs/integrations/frameworks/nextjs"
+  }, {
+    "name": "Django",
+    "image": "Django",
+    "link": "https://infisical.com/docs/integrations/frameworks/django"
+  }, {
+    "name": "NestJS",
+    "image": "NestJS",
+    "link": "https://infisical.com/docs/integrations/frameworks/nestjs"
+  }, {
+    "name": "Nuxt",
+    "image": "Nuxt",
+    "link": "https://infisical.com/docs/integrations/frameworks/nuxt"
+  }, {
+    "name": "Gatsby",
+    "image": "Gatsby",
+    "link": "https://infisical.com/docs/integrations/frameworks/gatsby"
+  }, {
+    "name": "Remix",
+    "image": "Remix",
+    "link": "https://infisical.com/docs/integrations/frameworks/remix"
+  }, {
+    "name": "Vite",
+    "image": "Vite",
+    "link": "https://infisical.com/docs/integrations/frameworks/vite"
+  }, {
+    "image": "Fiber",
+    "link": "https://infisical.com/docs/integrations/frameworks/fiber"
+  }, {
+    "name": "Flask",
+    "image": "Flask",
+    "link": "https://infisical.com/docs/integrations/frameworks/flask"
+  }, {
+    "name": "Laravel",
+    "image": "Laravel",
+    "link": "https://infisical.com/docs/integrations/frameworks/laravel"
+  }, {
+    "image": "Rails",
+    "link": "https://infisical.com/docs/integrations/frameworks/rails"
+  }
+]
+
+export {
+  envMapping,
+  frameworks,
+  reverseEnvMapping
+};