Merging upstream changes.

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;
@@ -174,6 +172,7 @@ const Integration = ({
               <Button
                 text="Start Integration"
                 onButtonPressed={async () => {
+                  const siteId = apps.find((app) => app.name === integrationApp).siteId ? apps.find((app) => app.name === integrationApp).siteId : null;
                   const result = await updateIntegration({
                     integrationId: integration._id,
                     environment: envMapping[integrationEnvironment],
@@ -181,7 +180,7 @@ const Integration = ({
                     isActive: true,
                     target: integrationTarget ? integrationTarget.toLowerCase() : null,
                     context: integrationContext ? reverseContextNetlifyMapping[integrationContext] : null,
-                    siteId: apps.find((app) => app.name === integrationApp).siteId
+                    siteId
                   });
                   router.reload();
                 }}

frontend/components/utilities/config/index.ts

@@ -4,6 +4,8 @@ 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 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 +13,6 @@ export {
   POSTHOG_HOST,
   STRIPE_PRODUCT_PRO,
   STRIPE_PRODUCT_STARTER,
-};
+  CLIENT_ID_HEROKU,
+  CLIENT_ID_NETLIFY
+};

frontend/pages/api/integrations/GetIntegrationOptions.ts

@@ -0,0 +1,21 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+const getIntegrationOptions = () => {
+  return SecurityClient.fetchCall(
+    '/api/v1/integration-auth/integration-options',
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return (await res.json()).integrationOptions;
+    } else {
+      console.log('Failed to get (cloud) integration options');
+    }
+  });
+};
+
+export default getIntegrationOptions;

frontend/pages/integrations/[id].js

@@ -8,9 +8,9 @@ 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 getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
+import getIntegrationOptions from "../api/integrations/GetIntegrationOptions";
 import getBot from "../api/bot/getBot";
 import setBotActiveStatus from "../api/bot/setBotActiveStatus";
 import getLatestFileKey from "../api/workspace/getLatestFileKey";
@@ -22,20 +22,24 @@ const {
 } = require('../../components/utilities/cryptography/crypto');
 const crypto = require("crypto");
 
-import axios from "axios";
-
 export default function Integrations() {
+  const [cloudIntegrationOptions, setCloudIntegrationOptions] = useState([]);
   const [integrationAuths, setIntegrationAuths] = useState([]);
   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();
 
   useEffect(async () => {
     try {
+      // get cloud integration options
+      setCloudIntegrationOptions(
+        await getIntegrationOptions()
+      );
+
       // get project integration authorizations
       setIntegrationAuths(
         await getWorkspaceAuthorizations({
@@ -117,19 +121,18 @@ export default function Integrations() {
    * @returns 
    */
   const handleIntegrationOption = async ({ integrationOption }) => {
+
     try {
       // generate CSRF token for OAuth2 code-token exchange 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}`;
@@ -140,7 +143,12 @@ export default function Integrations() {
         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=${window.location.origin}/netlify`;
           break;
+        // case 'Fly.io':
+        //   console.log('fly.io');
+        //   setIntegrationAccessTokenDialogOpen(true);
+        //   break;
       }
     } catch (err) {
       console.log(err);
@@ -166,7 +174,7 @@ export default function Integrations() {
       }
       
       // case: bot is not active -> open modal to activate bot
-      setIsActivateBotOpen(true);
+      setIsActivateBotDialogOpen(true);
     } catch (err) {
       console.error(err);
     }
@@ -196,20 +204,24 @@ 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}
-          setSelectedIntegrationOption={setSelectedIntegrationOption}
-          integrationOptionPress={integrationOptionPress}
-          integrationAuths={integrationAuths}
-        />
+        {cloudIntegrationOptions.length > 0 ? (
+          <CloudIntegrationSection 
+            cloudIntegrationOptions={cloudIntegrationOptions}
+            setSelectedIntegrationOption={setSelectedIntegrationOption}
+            integrationOptionPress={integrationOptionPress}
+            integrationAuths={integrationAuths}
+          />
+        ) : (
+          <div></div>
+        )}
         <FrameworkIntegrationSection 
           frameworks={frameworkIntegrationOptions} 
         />

frontend/public/json/cloudIntegrations.json

@@ -1,84 +0,0 @@
-[
-    {
-        "name": "Heroku",
-        "slug": "heroku",
-        "image": "Heroku",
-        "isAvailable": true,
-        "type": "oauth2",
-        "clientId": "7b1311a1-1cb2-4938-8adf-f37a399ec41b",
-        "docsLink": ""
-    },
-    {
-        "name": "Vercel",
-        "slug": "vercel",
-        "image": "Vercel",
-        "isAvailable": true,
-        "type": "vercel",
-        "clientId": "",
-        "docsLink": ""
-    },
-    {
-        "name": "Netlify",
-        "slug": "netlify",
-        "image": "Netlify",
-        "isAvailable": true,
-        "type": "oauth2",
-        "clientId": "fYWBhD3gt0pT62UIwYrlGRcy--pPVLYIQad6ORrES9o",
-        "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",
-        "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": ""
-    }
-]