Merge pull request #245 from Infisical/more-integrations

Render & Fly.io integrations, reduce page reloads for integrations page.
2026-10-14 13:22:08 +00:00 · 2023-01-22 00:20:09 +07:00
parent 68b7e6e5ab 6969593b38
commit 0c24671d8b
48 changed files with 1155 additions and 349 deletions
@@ -8,7 +8,7 @@ interface BotKey {
 interface Props {
  botId: string;
  isActive: boolean;
-  botKey: BotKey;
+  botKey?: BotKey;
 }

 /**
@@ -17,7 +17,7 @@ const deleteIntegration = ({ integrationId }: Props) =>
    }
  }).then(async (res) => {
    if (res && res.status === 200) {
-      return (await res.json()).workspace;
+      return (await res.json()).integration;
    }
    console.log('Failed to delete an integration');
    return undefined;
@@ -17,7 +17,7 @@ const deleteIntegrationAuth = ({ integrationAuthId }: Props) =>
    }
  }).then(async (res) => {
    if (res && res.status === 200) {
-      return res;
+      return (await res.json()).integrationAuth;
    }
    console.log('Failed to delete an integration authorization');
    return undefined;
@@ -0,0 +1,31 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+interface Props {
+    integrationAuthId: string;
+}
+/**
+ * This route creates a new integration based on the integration authorization with id [integrationAuthId]
+ * @param {Object} obj
+ * @param {String} obj.accessToken - id of integration authorization for which to create the integration
+ * @returns
+ */
+const createIntegration = ({ 
+    integrationAuthId
+}: Props) =>
+  SecurityClient.fetchCall('/api/v1/integration', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+        integrationAuthId
+    })
+  }).then(async (res) => {
+    if (res && res.status === 200) {
+      return (await res.json()).integration;
+    }
+    console.log('Failed to create integration');
+    return undefined;
+  });
+
+export default createIntegration;
@@ -0,0 +1,42 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+interface Props {
+    workspaceId: string | null;
+    integration: string | undefined;
+    accessToken: string;
+}
+/**
+ * This route creates a new integration authorization for integration [integration]
+ * that requires the user to input their access token manually (e.g. Render). It
+ * saves access token [accessToken] under that integration for workspace with id
+ * [workspaceId].
+ * @param {Object} obj
+ * @param {String} obj.workspaceId - id of workspace to authorize integration for
+ * @param {String} obj.integration - integration
+ * @param {String} obj.accessToken - access token to save
+ * @returns
+ */
+const saveIntegrationAccessToken = ({ 
+    workspaceId,
+    integration,
+    accessToken
+}: Props) =>
+  SecurityClient.fetchCall(`/api/v1/integration-auth/access-token`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+        workspaceId,
+        integration,
+        accessToken
+    })
+  }).then(async (res) => {
+    if (res && res.status === 200) {
+      return (await res.json()).integrationAuth;
+    }
+    console.log('Failed to save integration access token');
+    return undefined;
+  });
+
+export default saveIntegrationAccessToken;
@@ -6,32 +6,29 @@ import SecurityClient from '@app/components/utilities/SecurityClient';
 * [environment] to the integration [app] with active state [isActive]
 * @param {Object} obj
 * @param {String} obj.integrationId - id of integration
- * @param {String} obj.app - name of app
- * @param {String} obj.environment - project environment to push secrets from
 * @param {Boolean} obj.isActive - active state
- * @param {String} obj.target - (optional) target (environment) for Vercel integration
- * @param {String} obj.context - (optional) context (environment) for Netlify integration
- * @param {String} obj.siteId - (optional) app (site_id) for Netlify integration
+ * @param {String} obj.environment - project environment to push secrets from
+ * @param {String} obj.app - name of app
+ * @param {String} obj.appId - (optional) app ID for integration
+ * @param {String} obj.targetEnvironment - target environment for integration
 * @param {String} obj.owner - (optional) owner login of repo for GitHub integration
 * @returns
 */
 const updateIntegration = ({
  integrationId,
-  app,
-  environment,
  isActive,
-  target,
-  context,
-  siteId,
+  environment,
+  app,
+  appId,
+  targetEnvironment,
  owner
 }: {
  integrationId: string;
-  app: string;
-  environment: string;
  isActive: boolean;
-  target: string | null;
-  context: string | null;
-  siteId: string | null;
+  environment: string;
+  app: string;
+  appId: string | null;
+  targetEnvironment: string | null;
  owner: string | null;
 }) =>
  SecurityClient.fetchCall(`/api/v1/integration/${integrationId}`, {
@@ -43,14 +40,13 @@ const updateIntegration = ({
      app,
      environment,
      isActive,
-      target,
-      context,
-      siteId,
+      appId,
+      targetEnvironment,
      owner
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
-      return res;
+      return (await res.json()).integration;
    }
    console.log('Failed to start an integration');
    return undefined;
@@ -7,6 +7,7 @@ import { useTranslation } from 'next-i18next';
 import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';

 import ActivateBotDialog from '@app/components/basic/dialog/ActivateBotDialog';
+import IntegrationAccessTokenDialog from '@app/components/basic/dialog/IntegrationAccessTokenDialog';
 import CloudIntegrationSection from '@app/components/integrations/CloudIntegrationSection';
 import FrameworkIntegrationSection from '@app/components/integrations/FrameworkIntegrationSection';
 import IntegrationSection from '@app/components/integrations/IntegrationSection';
@@ -19,27 +20,63 @@ import {
 } from '../../components/utilities/cryptography/crypto';
 import getBot from '../api/bot/getBot';
 import setBotActiveStatus from '../api/bot/setBotActiveStatus';
+import createIntegration from '../api/integrations/createIntegration';
+import deleteIntegration from '../api/integrations/DeleteIntegration';
 import getIntegrationOptions from '../api/integrations/GetIntegrationOptions';
 import getWorkspaceAuthorizations from '../api/integrations/getWorkspaceAuthorizations';
 import getWorkspaceIntegrations from '../api/integrations/getWorkspaceIntegrations';
+import saveIntegrationAccessToken from '../api/integrations/saveIntegrationAccessToken';
 import getAWorkspace from '../api/workspace/getAWorkspace';
 import getLatestFileKey from '../api/workspace/getLatestFileKey';

+interface IntegrationAuth {
+  _id: string;
+  integration: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface Integration {
+  _id: string;
+  isActive: boolean;
+  app: string | null;
+  appId: string | null;
+  createdAt: string;
+  updatedAt: string;
+  environment: string;
+  integration: string;
+  targetEnvironment: string;
+  workspace: string;
+  integrationAuth: string;
+}
+
+interface IntegrationOption {
+  clientId: string;
+  clientSlug?: string; // vercel-integration specific
+  docsLink: string;
+  image: string;
+  isAvailable: boolean;
+  name: string;
+  slug: string;
+  type: string;
+}
+
 export default function Integrations() {
  const [cloudIntegrationOptions, setCloudIntegrationOptions] = useState([]);
-  const [integrationAuths, setIntegrationAuths] = useState([]);
+  const [integrationAuths, setIntegrationAuths] = useState<IntegrationAuth[]>([]);
  const [environments, setEnvironments] = useState<
    {
      name: string;
      slug: string;
    }[]
  >([]);
-  const [integrations, setIntegrations] = useState([]);
+  const [integrations, setIntegrations] = useState<Integration[]>([]);
  // TODO: These will have its type when migratiing towards react-query
  const [bot, setBot] = useState<any>(null);
  const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
-  // const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(true);
-  const [selectedIntegrationOption, setSelectedIntegrationOption] = useState(null);
+  const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(false);
+  const [selectedIntegrationOption, setSelectedIntegrationOption] = useState<IntegrationOption | null>(null);

  const router = useRouter();
  const workspaceId = router.query.id as string;
@@ -72,7 +109,7 @@ export default function Integrations() {
        // get project bot
        setBot(await getBot({ workspaceId }));
      } catch (err) {
-        console.log(err);
+        console.error(err);
      }
    })();
  }, []);
@@ -118,7 +155,7 @@ export default function Integrations() {
          (
            await setBotActiveStatus({
              botId: bot._id,
-              isActive: !bot.isActive,
+              isActive: true,
              botKey
            })
          ).bot
@@ -128,9 +165,9 @@ export default function Integrations() {
      console.error(err);
    }
  };
-
+  
  /**
-   * Start integration for a given integration option [integrationOption]
+   * Handle integration option authorization for a given integration option [integrationOption]
   * @param {Object} obj
   * @param {Object} obj.integrationOption - an integration option
   * @param {String} obj.name
@@ -138,45 +175,68 @@ export default function Integrations() {
   * @param {String} obj.docsLink
   * @returns
   */
-  const handleIntegrationOption = async ({ integrationOption }: { integrationOption: any }) => {
+  const handleIntegrationOption = async ({
+    integrationOption,
+    accessToken
+  }: { 
+    integrationOption: IntegrationOption,
+    accessToken?: string;
+  }) => {
    try {
-      // generate CSRF token for OAuth2 code-token exchange integrations
-      const state = crypto.randomBytes(16).toString('hex');
-      localStorage.setItem('latestCSRFToken', state);
+      if (integrationOption.type === 'oauth') {
+        // integration is of type OAuth

-      switch (integrationOption.name) {
-        case 'Heroku':
-          window.location.assign(
-            `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
-          );
-          break;
-        case 'Vercel':
-          window.location.assign(
-            `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`
-          );
-          break;
-        case 'Netlify':
-          window.location.assign(
-            `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`
-          );
-          break;
-        case 'GitHub':
-          window.location.assign(
-            `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`
-          );
-          break;
-        default:
-          break;
-        // case 'Fly.io':
-        //   console.log('fly.io');
-        //   setIntegrationAccessTokenDialogOpen(true);
-        //   break;
+        // generate CSRF token for OAuth2 code-token exchange integrations
+        const state = crypto.randomBytes(16).toString('hex');
+        localStorage.setItem('latestCSRFToken', state);
+
+        switch (integrationOption.slug) {
+          case 'heroku':
+            window.location.assign(
+              `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
+            );
+            break;
+          case 'vercel':
+            window.location.assign(
+              `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`
+            );
+            break;
+          case 'netlify':
+            window.location.assign(
+              `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`
+            );
+            break;
+          case 'github':
+            window.location.assign(
+              `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`
+            );
+            break;
+          default:
+            break;
+        }
+        return;
+      } if (integrationOption.type === 'pat') {
+        // integration is of type personal access token
+        const integrationAuth = await saveIntegrationAccessToken({
+            workspaceId: localStorage.getItem('projectData.id'),
+            integration: integrationOption.slug,
+            accessToken: accessToken ?? ''
+        });
+
+        setIntegrationAuths([...integrationAuths, integrationAuth])
+
+        const integration = await createIntegration({
+          integrationAuthId: integrationAuth._id
+        });
+        
+        setIntegrations([...integrations, integration]); 
+        return;
      }
    } catch (err) {
      console.log(err);
    }
  };
-
+  
  /**
   * Open dialog to activate bot if bot is not active.
   * Otherwise, start integration [integrationOption]
@@ -186,20 +246,94 @@ export default function Integrations() {
   * @param {String} integrationOption.docsLink
   * @returns
   */
-  const integrationOptionPress = (integrationOption: any) => {
+  const integrationOptionPress = async (integrationOption: IntegrationOption) => {
    try {
-      if (bot.isActive) {
-        // case: bot is active -> proceed with integration
+      const integrationAuthX = integrationAuths.find((integrationAuth) => integrationAuth.integration === integrationOption.slug);
+      
+      if (!integrationAuthX) {
+        // case: integration has not been authorized before
+        
+        if (integrationOption.type === 'pat') {
+          // case: integration requires user to input their personal access token for that integration
+          setIntegrationAccessTokenDialogOpen(true);
+          return;
+        }
+        
+        // case: integration does not require user to input their personal access token (i.e. it's an OAuth2 integration)
        handleIntegrationOption({ integrationOption });
        return;
      }
-
-      // case: bot is not active -> open modal to activate bot
-      setIsActivateBotDialogOpen(true);
+      
+      // case: integration has been authorized before
+      // -> create new integration
+      const integration = await createIntegration({
+        integrationAuthId: integrationAuthX._id
+      });
+      
+      setIntegrations([...integrations, integration]);
    } catch (err) {
      console.error(err);
    }
  };
+  
+  /**
+   * Handle deleting integration authorization [integrationAuth] and corresponding integrations from state where applicable
+   * @param {Object} obj
+   * @param {IntegrationAuth} obj.integrationAuth - integrationAuth to delete
+   */
+  const handleDeleteIntegrationAuth = async ({ integrationAuth: deletedIntegrationAuth }: { integrationAuth: IntegrationAuth }) => {
+    try {
+      const newIntegrations = integrations.filter((integration) => integration.integrationAuth !== deletedIntegrationAuth._id);
+      setIntegrationAuths(integrationAuths.filter((integrationAuth) => integrationAuth._id !== deletedIntegrationAuth._id));
+      setIntegrations(newIntegrations);
+      
+      // handle updating bot
+      if (newIntegrations.length < 1) {
+        // case: no integrations left
+        setBot(
+            (
+              await setBotActiveStatus({
+                botId: bot._id,
+                isActive: false
+              })
+            ).bot
+          );
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
+  /**
+   * Handle deleting integration [integration]
+   * @param {Object} obj
+   * @param {Integration} obj.integration - integration to delete
+   */
+  const handleDeleteIntegration = async ({ integration }: { integration: Integration }) => {
+    try {
+      const deletedIntegration = await deleteIntegration({
+        integrationId: integration._id
+      });
+      
+      const newIntegrations = integrations.filter((i) => i._id !== deletedIntegration._id);
+      setIntegrations(newIntegrations);
+
+      // handle updating bot
+      if (newIntegrations.length < 1) {
+        // case: no integrations left
+        setBot(
+            (
+              await setBotActiveStatus({
+                botId: bot._id,
+                isActive: false
+              })
+            ).bot
+          );
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }

  return (
    <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
@@ -217,22 +351,37 @@ export default function Integrations() {
          closeModal={() => setIsActivateBotDialogOpen(false)}
          selectedIntegrationOption={selectedIntegrationOption}
          handleBotActivate={handleBotActivate}
-          handleIntegrationOption={handleIntegrationOption}
+          integrationOptionPress={integrationOptionPress}
        />
-        {/* <IntegrationAccessTokenDialog
+        <IntegrationAccessTokenDialog
          isOpen={isIntegrationAccessTokenDialogOpen}
          closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
          selectedIntegrationOption={selectedIntegrationOption}
-          handleBotActivate={handleBotActivate}
          handleIntegrationOption={handleIntegrationOption}
-        /> */}
-        <IntegrationSection integrations={integrations} environments={environments} />
+          
+        />
+        <IntegrationSection 
+          integrations={integrations} 
+          setIntegrations={setIntegrations}
+          bot={bot}
+          setBot={setBot}
+          environments={environments} 
+          handleDeleteIntegration={handleDeleteIntegration}
+        />
        {cloudIntegrationOptions.length > 0 && bot ? (
          <CloudIntegrationSection
            cloudIntegrationOptions={cloudIntegrationOptions}
            setSelectedIntegrationOption={setSelectedIntegrationOption as any}
-            integrationOptionPress={integrationOptionPress as any}
+            integrationOptionPress={(integrationOption: IntegrationOption) => {
+             if (!bot.isActive) {
+                // case: bot is not active -> open modal to activate bot
+                setIsActivateBotDialogOpen(true);
+                return;
+              } 
+              integrationOptionPress(integrationOption)
+            }}
            integrationAuths={integrationAuths}
+            handleDeleteIntegrationAuth={handleDeleteIntegrationAuth}
          />
        ) : (
          <div />