Refactor integrations logic and replace hardcoded client ids with envars

frontend/components/integrations/CloudIntegration.tsx

@@ -87,6 +87,7 @@ const CloudIntegration = ({
                             )
                             .map((authorization) => authorization._id)[0],
                         });
+                        
                         router.reload();
                     }}
                     className="cursor-pointer w-max bg-red py-0.5 px-2 rounded-b-md text-xs flex flex-row items-center opacity-0 group-hover:opacity-100 duration-200"

frontend/components/integrations/Integration.tsx

@@ -17,8 +17,6 @@ import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps"
 import Button from "~/components/basic/buttons/Button";
 import ListBox from "~/components/basic/Listbox";
 
-// TODO: optimize laggy dropdown for app options
-
 interface Integration {
     app?: string;
     environment: string;

frontend/components/utilities/config/index.ts

@@ -4,6 +4,9 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL!;
+const CLIENT_ID_HEROKU = process.env.NEXT_PUBLIC_CLIENT_ID_HEROKU!;
+const CLIENT_ID_NETLIFY = process.env.NEXT_PUBLIC_CLIENT_ID_NETLIFY!;
 
 export {
   ENV,
@@ -11,4 +14,7 @@ export {
   POSTHOG_HOST,
   STRIPE_PRODUCT_PRO,
   STRIPE_PRODUCT_STARTER,
-};
+  SITE_URL,
+  CLIENT_ID_HEROKU,
+  CLIENT_ID_NETLIFY
+};

frontend/pages/integrations/[id].js

@@ -8,7 +8,8 @@ import FrameworkIntegrationSection from "~/components/integrations/FrameworkInte
 import CloudIntegrationSection from "~/components/integrations/CloudIntegrationSection";
 import IntegrationSection from "~/components/integrations/IntegrationSection";
 import frameworkIntegrationOptions from "../../public/json/frameworkIntegrations.json";
-import cloudIntegrationOptions from "../../public/json/cloudIntegrations.json";
+// import cloudIntegrationOptions from "../../public/json/cloudIntegrations.json";
+import { cloudIntegrationOptions } from "../../public/data/cloudIntegrations";
 import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 import getBot from "../api/bot/getBot";
@@ -29,7 +30,7 @@ export default function Integrations() {
   const [integrations, setIntegrations] = useState([]);
   const [bot, setBot] = useState(null);
   const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
-  const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(true);
+  // const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(true);
   const [selectedIntegrationOption, setSelectedIntegrationOption] = useState(null); 
 
   const router = useRouter();
@@ -122,22 +123,20 @@ export default function Integrations() {
       const state = crypto.randomBytes(16).toString("hex");
       localStorage.setItem('latestCSRFToken', state);
       
-      // TODO: Add CircleCI, Render, Fly.io
-      
       switch (integrationOption.name) {
         case 'Heroku':
           window.location = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
           break;
         case 'Vercel':
-          window.location = `https://vercel.com/integrations/infisical/new?state=${state}`;
+          window.location = `https://vercel.com/integrations/infisical-dev/new?state=${state}`;
           break;
         case 'Netlify':
-          window.location = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${integrationOption.redirectURL}&state=${state}`;
-          break;
-        case 'Fly.io':
-          console.log('fly.io');
-          setIntegrationAccessTokenDialogOpen(true);
+          window.location = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${integrationOption.redirectURL}`;
           break;
+        // case 'Fly.io':
+        //   console.log('fly.io');
+        //   setIntegrationAccessTokenDialogOpen(true);
+        //   break;
       }
     } catch (err) {
       console.log(err);
@@ -163,7 +162,7 @@ export default function Integrations() {
       }
       
       // case: bot is not active -> open modal to activate bot
-      setIsActivateBotOpen(true);
+      setIsActivateBotDialogOpen(true);
     } catch (err) {
       console.error(err);
     }
@@ -193,13 +192,13 @@ export default function Integrations() {
           handleBotActivate={handleBotActivate}
           handleIntegrationOption={handleIntegrationOption}
         />
-        <IntegrationAccessTokenDialog
+        {/* <IntegrationAccessTokenDialog
           isOpen={isIntegrationAccessTokenDialogOpen}
           closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
           selectedIntegrationOption={selectedIntegrationOption}
           handleBotActivate={handleBotActivate}
           handleIntegrationOption={handleIntegrationOption}
-        />
+        /> */}
         <IntegrationSection integrations={integrations} />
         <CloudIntegrationSection 
           cloudIntegrationOptions={cloudIntegrationOptions}

frontend/public/data/cloudIntegrations.js

@@ -0,0 +1,83 @@
+import {
+    SITE_URL,
+    CLIENT_ID_HEROKU,
+    CLIENT_ID_NETLIFY
+} from '../../components/utilities/config';
+
+const cloudIntegrationOptions = [
+    {
+        name: 'Heroku',
+        slug: 'heroku',
+        image: 'Heroku', 
+        isAvailable: true,
+        type: 'oauth2',
+        clientId: CLIENT_ID_HEROKU,
+        docsLink: ''
+    },
+    {
+        name: 'Vercel',
+        slug: 'vercel',
+        image: 'Vercel', 
+        isAvailable: true,
+        type: 'vercel',
+        clientId: '',
+        docsLink: ''
+    },
+    {
+        name: 'Netlify',
+        slug: 'netlify',
+        image: 'Netlify', 
+        isAvailable: true,
+        type: 'oauth2',
+        clientId: CLIENT_ID_NETLIFY,
+        redirectURL: `${SITE_URL}/netlify`,
+        docsLink: ''
+    },
+    {
+        name: 'Google Cloud Platform',
+        slug: 'gcp',
+        image: 'Google Cloud Platform', 
+        isAvailable: false,
+        type: '',
+        clientId: '',
+        docsLink: ''
+    },
+    {
+        name: 'Amazon Web Services',
+        slug: 'aws',
+        image: 'Amazon Web Services', 
+        isAvailable: false,
+        type: '',
+        clientId: '',
+        docsLink: ''
+    },
+    {
+        name: 'Microsoft Azure',
+        slug: 'azure',
+        image: 'Microsoft Azure', 
+        isAvailable: false,
+        type: '',
+        clientId: '',
+        docsLink: ''
+    },
+    {
+        name: 'Travis CI',
+        slug: 'travisci',
+        image: 'Travis CI', 
+        isAvailable: false,
+        type: '',
+        clientId: '',
+        docsLink: ''
+    },
+    {
+        name: 'Circle CI',
+        slug: 'circleci',
+        image: 'Circle CI', 
+        isAvailable: false,
+        type: '',
+        clientId: '',
+        docsLink: ''
+    }
+]
+
+export { cloudIntegrationOptions };

frontend/public/json/cloudIntegrations.json

@@ -27,15 +27,6 @@
         "redirectURL": "http://localhost:8080/netlify",
         "docsLink": ""
     },
-    {
-        "name": "Fly.io",
-        "slug": "flyio",
-        "image": "Google Cloud Platform",
-        "isAvailable": true,
-        "type": "accessToken",
-        "clientId": "",
-        "docsLink": ""
-    },
     {
         "name": "Google Cloud Platform",
         "slug": "gcp",