Merge branch 'main' into I-36-use-pre-built-frontend-image

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -8,6 +8,7 @@ import nacl from "tweetnacl";
 import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 
+import { envMapping } from "../../../public/data/frequentConstants";
 import {
   decryptAssymmetric,
   encryptAssymmetric,
@@ -16,13 +17,6 @@ import Button from "../buttons/Button";
 import InputField from "../InputField";
 import ListBox from "../Listbox";
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 const expiryMapping = {
   "1 day": 86400,
   "7 days": 604800,

frontend/components/basic/table/ServiceTokenTable.js

@@ -2,18 +2,10 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 
+import { reverseEnvMapping } from "../../../public/data/frequentConstants";
 import guidGenerator from "../../utilities/randomId";
 import Button from "../buttons/Button";
 
-const roles = ["admin", "user"];
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
-
 /**
  * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
  * #TODO: add the possibility of choosing and doing operations on multiple users.

frontend/components/dashboard/DashboardInputField.js

@@ -1,27 +1,10 @@
-import React from "react";
+import React, { useRef } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import guidGenerator from "../utilities/randomId";
 
-/**
- * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
- * @param {string} text - the value of the input in the Dashboard Input Field
- * @returns
- */
-const findReferences = (text) => {
-  var splitText = text.split("${");
-  let textArray = [splitText[0]];
-  for (var i = 1; i < splitText.length; i++) {
-    let insideBrackets = "${" + splitText[i].split("}")[0];
-    if (splitText[i].includes("}")) {
-      insideBrackets += "}";
-    }
-    textArray.push(insideBrackets);
-    textArray.push(splitText[i].split("}")[1]);
-  }
-  return textArray;
-};
+const REGEX = /([$]{.*?})/g;
 
 /**
  * This component renders the input fields on the dashboard
@@ -42,6 +25,12 @@ const DashboardInputField = ({
   blurred,
   duplicates
 }) => {
+  const ref = useRef(null);
+  const syncScroll = (e) => {
+    ref.current.scrollTop = e.target.scrollTop;
+    ref.current.scrollLeft = e.target.scrollLeft;
+  };
+  
   if (type === "varName") {
     const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
     const hasDuplicates = duplicates?.includes(value);
@@ -76,52 +65,54 @@ const DashboardInputField = ({
     return (
       <div className="flex-col w-full">
         <div
-          className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
+          className={`group relative whitespace-pre	flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value, index)}
-            type={type}
             value={value}
+            onChange={(e) => onChangeHandler(e.target.value, index)}
+            onScroll={syncScroll}
             className={`${
               blurred
                 ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
                 : ""
-            } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
+            } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
             spellCheck="false"
           />
-          <div
+          <div 
+            ref={ref} 
             className={`${
               blurred
                 ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                 : ""
-            } flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
+            } flex flex-row whitespace-pre font-mono absolute z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
           >
-            {findReferences(value).map((texts, id) => {
-              if (id % 2 == 0 || texts.length <= 2) {
-                return (
-                  <span className="ph-no-capture" key={id}>
-                    {texts}
-                  </span>
-                );
-              }
-              return (
-                <span className="ph-no-capture text-yellow" key={id}>
-                  {texts.slice(0, 2)}
-                  <span className="ph-no-capture text-yellow-200/80">
-                    {texts.slice(2, texts.length - 1)}
-                  </span>
-                  {texts.slice(texts.length - 1, texts.length) == "}" ? (
-                    <span className="ph-no-capture text-yellow">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
+            {
+              value
+              .split(REGEX)
+              .map((word, id) => {
+                if (word.match(REGEX) !== null) {
+                  return (
+                    <span className="ph-no-capture text-yellow" key={id}>
+                      {word.slice(0, 2)}
+                      <span className="ph-no-capture text-yellow-200/80">
+                        {word.slice(2, word.length - 1)}
+                      </span>
+                      {word.slice(word.length - 1, word.length) == "}" ? (
+                        <span className="ph-no-capture text-yellow">
+                          {word.slice(word.length - 1, word.length)}
+                        </span>
+                      ) : (
+                        <span className="ph-no-capture text-yellow-400">
+                          {word.slice(word.length - 1, word.length)}
+                        </span>
+                      )}
                     </span>
-                  ) : (
-                    <span className="ph-no-capture text-yellow-400">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
-                    </span>
-                  )}
-                </span>
-              );
-            })}
+                  );
+                } else {
+                  return <span key={id} className="ph-no-capture">{word}</span>;
+                }
+              })
+            }
           </div>
           {blurred && (
             <div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
@@ -137,7 +128,7 @@ const DashboardInputField = ({
                   />
                 ))}
             </div>
-          )}
+          )} 
         </div>
       </div>
     );

frontend/components/utilities/secrets/getSecretsForProject.js

@@ -1,5 +1,6 @@
 import getSecrets from "~/pages/api/files/GetSecrets";
 
+import { envMapping } from "../../../public/data/frequentConstants";
 import guidGenerator from "../randomId";
 
 const {
@@ -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

@@ -2,6 +2,8 @@ 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 {
   decryptAssymmetric,
@@ -12,12 +14,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/next.config.js

@@ -2,11 +2,19 @@
 
 const ContentSecurityPolicy = `
 	default-src 'self';
+<<<<<<< HEAD
 	script-src 'self' https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
+=======
+	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
+>>>>>>> main
 	style-src 'self' https://rsms.me 'unsafe-inline';
-	child-src https://infisical.com https://api.stripe.com;
+	child-src https://api.stripe.com;
 	frame-src https://js.stripe.com/ https://api.stripe.com;
+<<<<<<< HEAD
 	connect-src 'self' ws: wss: https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
+=======
+	connect-src 'self' https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com;
+>>>>>>> main
 	img-src 'self' https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src;
 	font-src 'self' https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;  

frontend/pages/dashboard/[id].js

@@ -34,19 +34,13 @@ import pushKeys from "~/components/utilities/secrets/pushKeys";
 import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
 import guidGenerator from "~/utilities/randomId";
 
+import { envMapping } from "../../public/data/frequentConstants";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 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",
-};
-
 /**
  * This component represent a single row for an environemnt variable on the dashboard
  * @param {object} obj

frontend/pages/integrations/[id].js

@@ -17,6 +17,11 @@ import getSecretsForProject from "~/components/utilities/secrets/getSecretsForPr
 import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
 import guidGenerator from "~/utilities/randomId";
 
+import { 
+  envMapping, 
+  frameworks, 
+  reverseEnvMapping
+} from "../../public/data/frequentConstants";
 import deleteIntegration from "../api/integrations/DeleteIntegration";
 import deleteIntegrationAuth from "../api/integrations/DeleteIntegrationAuth";
 import getIntegrationApps from "../api/integrations/GetIntegrationApps";
@@ -27,20 +32,6 @@ import startIntegration from "../api/integrations/StartIntegration";
 
 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 +239,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 +256,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 +281,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 +294,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 +344,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
+};