Modify frontend to be compatible with full-loop for bot-based integrations

backend/src/controllers/integrationController.ts

@@ -1,11 +1,9 @@
 import { Request, Response } from 'express';
 import { readFileSync } from 'fs';
 import * as Sentry from '@sentry/node';
-import axios from 'axios';
+import { Integration, Bot, BotKey } from '../models';
-import { Integration } from '../models';
+import { EventService } from '../services';
-import { decryptAsymmetric } from '../utils/crypto';
+import { eventPushSecrets } from '../events';
-import { decryptSecrets } from '../helpers/secret';
-import { PRIVATE_KEY } from '../config';
 
 interface Key {
 	encryptedKey: string;
@@ -55,26 +53,40 @@ export const getIntegrations = async (req: Request, res: Response) => {
  * @param res
  * @returns
  */
-export const modifyIntegration = async (req: Request, res: Response) => {
+export const updateIntegration = async (req: Request, res: Response) => {
 	let integration;
 	
 	try {
-		const { update } = req.body;
+		const { app, environment, isActive } = req.body;
 
 		integration = await Integration.findOneAndUpdate(
 			{
 				_id: req.integration._id
 			},
-			update,
+			{
+				app,
+				environment,
+				isActive
+			},
 			{
 				new: true
 			}
 		);
+		
+		if (integration) {
+
+			// trigger event - push secrets
+			EventService.handleEvent({
+				event: eventPushSecrets({
+					workspaceId: integration.workspace.toString()
+				})
+			});
+		}
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);
 		return res.status(400).send({
-			message: 'Failed to modify integration'
+			message: 'Failed to update integration'
 		});
 	}
 
@@ -84,7 +96,8 @@ export const modifyIntegration = async (req: Request, res: Response) => {
 };
 
 /**
- * Delete integration with id [integrationId]
+ * Delete integration with id [integrationId] and deactivate bot if there are
+ * no integrations left
  * @param req
  * @param res
  * @returns
@@ -97,6 +110,29 @@ export const deleteIntegration = async (req: Request, res: Response) => {
 		deletedIntegration = await Integration.findOneAndDelete({
 			_id: integrationId
 		});
+		
+		if (!deletedIntegration) throw new Error('Failed to find integration');
+		
+		const integrations = await Integration.find({
+			workspace: deletedIntegration.workspace
+		});
+			
+		if (integrations.length === 0) {
+			// case: no integrations left, deactivate bot
+			const bot = await Bot.findOneAndUpdate({
+				workspace: deletedIntegration.workspace
+			}, {
+				isActive: false
+			}, {
+				new: true
+			});
+			
+			if (bot) {
+				await BotKey.deleteOne({
+					bot: bot._id
+				});
+			}
+		}
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);

backend/src/controllers/secretController.ts

@@ -62,14 +62,6 @@ export const pushSecrets = async (req: Request, res: Response) => {
 			keys
 		});
 		
-		// trigger event
-		EventService.handleEvent({
-			event: eventPushSecrets({
-				workspaceId,
-				environment,
-				secrets
-			})
-		});
 		
 		if (postHogClient) {
 			postHogClient.capture({
@@ -84,6 +76,13 @@ export const pushSecrets = async (req: Request, res: Response) => {
 			});
 		}
 
+		// trigger event - push secrets
+		EventService.handleEvent({
+			event: eventPushSecrets({
+				workspaceId
+			})
+		});
+
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);

backend/src/events/secret.ts

@@ -16,25 +16,18 @@ interface PushSecret {
  * Return event for pushing secrets
  * @param {Object} obj
  * @param {String} obj.workspaceId - id of workspace to push secrets to
- * @param {String} obj.environment - environment for secrets
- * @param {PushSecret[]} obj.secrets - secrets to push
  * @returns 
  */
 const eventPushSecrets = ({
     workspaceId,
-    environment,
-    secrets
 }: {
     workspaceId: string;
-    environment: string;
-    secrets: PushSecret[];
 }) => {
     return ({
         name: EVENT_PUSH_SECRETS,
         workspaceId,
         payload: {
-            environment,
+
-            secrets
         }
     });
 }

backend/src/helpers/integration.ts

@@ -73,20 +73,18 @@ const handleOAuthExchangeHelper = async ({
             accessExpiresAt: res.accessExpiresAt
         });
 
-        // initializes an integration after exchange
+        // initialize new integration after exchange
-        await Integration.findOneAndUpdate(
+        await new Integration({
-            { workspace: workspaceId, integration },
+            workspace: workspaceId,
-            {
+            environment: ENV_DEV,
-                workspace: workspaceId,
+            isActive: false,
-                environment: ENV_DEV,
+            app: null,
-                isActive: false,
+            integration,
-                app: null,
+            integrationAuth: integrationAuth._id
-                integration,
+        }).save();
-                integrationAuth: integrationAuth._id
+        
-            },
-            { upsert: true, new: true }
-        );
     } catch (err) {
+        console.error('in', err);
         Sentry.setUser(null);
         Sentry.captureException(err);
         throw new Error('Failed to handle OAuth2 code-token exchange')

backend/src/models/integration.ts

@@ -37,8 +37,7 @@ const integrationSchema = new Schema<IIntegration>(
 		app: {
 			// name of app in provider
 			type: String,
-			default: null,
+			default: null
-			required: true
 		},
 		integration: {
 			type: String,

backend/src/routes/integration.ts

@@ -18,10 +18,12 @@ router.patch(
 		acceptedRoles: [ADMIN, MEMBER],
 		acceptedStatuses: [GRANTED]
 	}),
-	param('integrationId'),
+	param('integrationId').exists().trim(),
-	body('update'),
+	body('app').exists().trim(),
+	body('environment').exists().trim(),
+	body('isActive').exists().isBoolean(),
 	validateRequest,
-	integrationController.modifyIntegration
+	integrationController.updateIntegration
 );
 
 router.delete(
@@ -31,7 +33,7 @@ router.delete(
 		acceptedRoles: [ADMIN, MEMBER],
 		acceptedStatuses: [GRANTED]
 	}),
-	param('integrationId'),
+	param('integrationId').exists().trim(),
 	validateRequest,
 	integrationController.deleteIntegration
 );

frontend/components/basic/dialog/ActivateBotDialog.js

@@ -0,0 +1,91 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
+import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus";
+import { 
+    decryptAssymmetric,
+    encryptAssymmetric
+} from "../../utilities/cryptography/crypto";
+import Button from "../buttons/Button";
+
+const ActivateBotDialog = ({
+    isOpen,
+    closeModal,
+    selectedIntegrationOption,
+    handleBotActivate,
+    handleIntegrationOption
+}) => {
+    
+    const submit = async () => {
+        try {
+            // 1. activate bot
+            await handleBotActivate();
+            
+            // 2. start integration
+            await handleIntegrationOption({
+                integrationOption: selectedIntegrationOption
+            });
+        } catch (err) {
+            console.log(err);
+        }
+        
+        closeModal();
+    }
+
+    return (
+        <div>
+            <Transition appear show={isOpen} as={Fragment}>
+                <Dialog as="div" className="relative z-10" onClose={closeModal}>
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div className="fixed inset-0 bg-black bg-opacity-70" />
+                    </Transition.Child>
+                    <div className="fixed inset-0 overflow-y-auto">
+                        <div className="flex min-h-full items-center justify-center p-4 text-center">
+                            <Transition.Child
+                                as={Fragment}
+                                enter="ease-out duration-300"
+                                enterFrom="opacity-0 scale-95"
+                                enterTo="opacity-100 scale-100"
+                                leave="ease-in duration-200"
+                                leaveFrom="opacity-100 scale-100"
+                                leaveTo="opacity-0 scale-95"
+                            >
+                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                                <Dialog.Title
+                                    as="h3"
+                                    className="text-lg font-medium leading-6 text-gray-400"
+                                >
+                                    Grant Infisical access to your secrets
+                                </Dialog.Title>
+                                <div className="mt-2 mb-2">
+                                    <p className="text-sm text-gray-500">
+                                        Enabling platform integrations lets Infisical decrypt your secrets so they can be forwarded to the platforms.
+                                    </p>
+                                </div>
+                                <div className="mt-6 max-w-max">
+                                    <Button 
+                                        onButtonPressed={submit}
+                                        color="mineshaft"
+                                        text="Grant access"
+                                        size="md"
+                                    />
+                                </div>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </Dialog>
+            </Transition>
+        </div>
+    );
+}
+
+export default ActivateBotDialog;

frontend/components/utilities/attemptLogin.js

@@ -74,7 +74,7 @@ const attemptLogin = async (
             tag,
             privateKey,
           });
-
+          
           const userOrgs = await getOrganizations();
           const userOrgsData = userOrgs.map((org) => org._id);
 

frontend/components/utilities/secrets/pushKeysIntegration.js

@@ -0,0 +1,74 @@
+import publicKeyInfical from "~/pages/api/auth/publicKeyInfisical";
+import changeHerokuConfigVars from "~/pages/api/integrations/ChangeHerokuConfigVars";
+
+const crypto = require("crypto");
+const {
+  encryptSymmetric,
+  encryptAssymmetric,
+} = require("../cryptography/crypto");
+const nacl = require("tweetnacl");
+nacl.util = require("tweetnacl-util");
+
+const pushKeysIntegration = async ({ obj, integrationId }) => {
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+  let randomBytes = crypto.randomBytes(16).toString("hex");
+
+  const secrets = Object.keys(obj).map((key) => {
+    // encrypt key
+    const {
+      ciphertext: ciphertextKey,
+      iv: ivKey,
+      tag: tagKey,
+    } = encryptSymmetric({
+      plaintext: key,
+      key: randomBytes,
+    });
+
+    // encrypt value
+    const {
+      ciphertext: ciphertextValue,
+      iv: ivValue,
+      tag: tagValue,
+    } = encryptSymmetric({
+      plaintext: obj[key],
+      key: randomBytes,
+    });
+
+    const visibility = "shared";
+
+    return {
+      ciphertextKey,
+      ivKey,
+      tagKey,
+      hashKey: crypto.createHash("sha256").update(key).digest("hex"),
+      ciphertextValue,
+      ivValue,
+      tagValue,
+      hashValue: crypto.createHash("sha256").update(obj[key]).digest("hex"),
+      type: visibility,
+    };
+  });
+
+  // obtain public keys of all receivers (i.e. members in workspace)
+  let publicKeyInfisical = await publicKeyInfical();
+
+  publicKeyInfisical = (await publicKeyInfisical.json()).publicKey;
+
+  // assymmetrically encrypt key with each receiver public keys
+
+  const { ciphertext, nonce } = encryptAssymmetric({
+    plaintext: randomBytes,
+    publicKey: publicKeyInfisical,
+    privateKey: PRIVATE_KEY,
+  });
+
+  const key = {
+    encryptedKey: ciphertext,
+    nonce,
+  };
+
+  changeHerokuConfigVars({ integrationId, key, secrets });
+};
+
+export default pushKeysIntegration;

frontend/pages/api/integrations/ChangeHerokuConfigVars.js

@@ -0,0 +1,25 @@
+import SecurityClient from "~/utilities/SecurityClient";
+
+const changeHerokuConfigVars = ({ integrationId, key, secrets }) => {
+  return SecurityClient.fetchCall(
+    "/api/v1/integration/" + integrationId + "/sync",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        key,
+        secrets,
+      }),
+    }
+  ).then(async (res) => {
+    if (res.status == 200) {
+      return res;
+    } else {
+      console.log("Failed to sync secrets to Heroku");
+    }
+  });
+};
+
+export default changeHerokuConfigVars;

frontend/pages/api/integrations/StartIntegration.js

@@ -1,33 +0,0 @@
-import SecurityClient from "~/utilities/SecurityClient";
-
-/**
- * This route starts the integration after teh default one if gonna set up.
- * @param {*} integrationId
- * @returns
- */
-const startIntegration = ({ integrationId, appName, environment }) => {
-  return SecurityClient.fetchCall(
-    "/api/v1/integration/" + integrationId,
-    {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        update: {
-          app: appName,
-          environment,
-          isActive: true,
-        },
-      }),
-    }
-  ).then(async (res) => {
-    if (res.status == 200) {
-      return res;
-    } else {
-      console.log("Failed to start an integration");
-    }
-  });
-};
-
-export default startIntegration;

frontend/pages/api/integrations/updateIntegration.js

@@ -0,0 +1,42 @@
+import SecurityClient from "~/utilities/SecurityClient";
+
+/**
+ * This route starts the integration after teh default one if gonna set up.
+ * Update integration with id [integrationId] to sync envars from the project's
+ * [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
+ * @returns
+ */
+const updateIntegration = ({ 
+  integrationId, 
+  app, 
+  environment, 
+  isActive 
+}) => { 
+  return SecurityClient.fetchCall(
+    "/api/v1/integration/" + integrationId,
+    {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        app,
+        environment,
+        isActive
+      }),
+    }
+  ).then(async (res) => {
+    if (res.status == 200) {
+      return res;
+    } else {
+      console.log("Failed to start an integration");
+    }
+  });
+};
+
+export default updateIntegration;

frontend/pages/integrations/[id].js

@@ -27,16 +27,16 @@ import getIntegrationApps from "../api/integrations/GetIntegrationApps";
 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 updateIntegration from "../api/integrations/updateIntegration";
 import getBot from "../api/bot/getBot";
 import setBotActiveStatus from "../api/bot/setBotActiveStatus";
 import getLatestFileKey from "../api/workspace/getLatestFileKey";
+import ActivateBotDialog from "~/components/basic/dialog/ActivateBotDialog";
 
 const {
   decryptAssymmetric,
   encryptAssymmetric
 } = require('../../components/utilities/cryptography/crypto');
-
 const crypto = require("crypto");
 
 const Integration = ({ projectIntegration }) => {
@@ -120,10 +120,11 @@ const Integration = ({ projectIntegration }) => {
             <Button
               text="Start Integration"
               onButtonPressed={async () => {
-                const result = await startIntegration({
+                const result = await updateIntegration({
                   integrationId: projectIntegration._id,
                   environment: envMapping[integrationEnvironment],
-                  appName: integrationApp,
+                  app: integrationApp,
+                  isActive: true
                 });
                 router.reload();
               }}
@@ -151,39 +152,43 @@ const Integration = ({ projectIntegration }) => {
 };
 
 export default function Integrations() {
-  const [integrations, setIntegrations] = useState();
+  const [integrations, setIntegrations] = useState({});
-  const [projectIntegrations, setProjectIntegrations] = useState();
+  const [projectIntegrations, setProjectIntegrations] = useState([]);
   const [authorizations, setAuthorizations] = useState();
   const router = useRouter();
   const [csrfToken, setCsrfToken] = useState("");
   const [bot, setBot] = useState(null);
+  const [isActivateBotOpen, setIsActivateBotOpen] = useState(false);
+  const [selectedIntegrationOption, setSelectedIntegrationOption] = useState(null); 
 
   useEffect(async () => {
-    const tempCSRFToken = crypto.randomBytes(16).toString("hex");
-    setCsrfToken(tempCSRFToken);
-    localStorage.setItem("latestCSRFToken", tempCSRFToken);
-
-    let projectAuthorizations = await getWorkspaceAuthorizations({
-      workspaceId: router.query.id,
-    });
-    setAuthorizations(projectAuthorizations);
-
-    const projectIntegrations = await getWorkspaceIntegrations({
-      workspaceId: router.query.id,
-    });
-    setProjectIntegrations(projectIntegrations);
-    
-    const bot = await getBot({
-      workspaceId: router.query.id
-    });
-    
-    setBot(bot.bot);
-
     try {
+      // generate CSRF token for OAuth2 code-token exchange integrations
+      const tempCSRFToken = crypto.randomBytes(16).toString("hex");
+      setCsrfToken(tempCSRFToken);
+      localStorage.setItem("latestCSRFToken", tempCSRFToken);
+
+      let projectAuthorizations = await getWorkspaceAuthorizations({
+        workspaceId: router.query.id,
+      });
+      setAuthorizations(projectAuthorizations);
+
+      const projectIntegrations = await getWorkspaceIntegrations({
+        workspaceId: router.query.id,
+      });
+
+      setProjectIntegrations(projectIntegrations);
+      
+      const bot = await getBot({
+        workspaceId: router.query.id
+      });
+      
+      setBot(bot.bot);
+
       const integrationsData = await getIntegrations();
       setIntegrations(integrationsData);
-    } catch (error) {
+    } catch (err) {
-      console.log("Error", error);
+      console.log(err);
     }
   }, []);
 
@@ -191,7 +196,7 @@ export default function Integrations() {
    * Toggle activate/deactivate bot
    */
   const handleBotActivate = async () => {
-    const k = await getLatestFileKey({ workspaceId: router.query.id });
+    const key = await getLatestFileKey({ workspaceId: router.query.id });
     try {
       if (bot) {
         let botKey;
@@ -200,9 +205,9 @@ export default function Integrations() {
           
           const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
           const WORKSPACE_KEY = decryptAssymmetric({
-            ciphertext: k.latestKey.encryptedKey,
+            ciphertext: key.latestKey.encryptedKey,
-            nonce: k.latestKey.nonce,
+            nonce: key.latestKey.nonce,
-            publicKey: k.latestKey.sender.publicKey,
+            publicKey: key.latestKey.sender.publicKey,
             privateKey: PRIVATE_KEY
           });
 
@@ -230,7 +235,45 @@ export default function Integrations() {
       console.error(err);
     }
   }
+  
+  /**
+   * Start integration for a given integration option [integrationOption]
+   * @param {Object} obj 
+   * @param {Object} obj.integrationOption - an integration option
+   * @returns 
+   */
+  const handleIntegrationOption = async ({ integrationOption }) => {
+    // TODO: modularize
+    switch (integrationOption.name) {
+      case 'Heroku':
+        window.location = `https://id.heroku.com/oauth/authorize?client_id=7b1311a1-1cb2-4938-8adf-f37a399ec41b&response_type=code&scope=write-protected&state=${csrfToken}`;
+        return;
+    }
+    
+  }
 
+  /**
+   * Call [handleIntegrationOption] if bot is active, else open dialog for user to grant
+   * permission to share secretes with Infisical prior to starting any integration
+   * @param {Object} obj 
+   * @param {String} obj.integrationOption - an integration option
+   * @returns 
+   */
+  const integrationOptionPress = ({ integrationOption }) => {
+    try {
+      if (bot.isActive) {
+        // case: bot is active -> proceed with integration
+        handleIntegrationOption({ integrationOption });
+        return;
+      }
+      
+      // case: bot is not active -> open modal to activate bot
+      setIsActivateBotOpen(true);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
   return integrations ? (
     <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
       <Head>
@@ -246,39 +289,32 @@ export default function Integrations() {
       <div className="flex flex-row">
         <div className="w-full max-h-96 pb-2 h-screen max-h-[calc(100vh-10px)] overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
           <NavHeader pageName="Project Integrations" isProjectRelated={true} />
-          <div className="flex flex-col justify-between items-start mx-4 mt-6 mb-4 text-xl max-w-5xl px-2">
+          <ActivateBotDialog 
-            <div className="flex flex-row justify-start items-center text-3xl">
+            isOpen={isActivateBotOpen}
-              <p className="font-semibold mr-4">Current Project Integrations</p>
+            closeModal={() => setIsActivateBotOpen(false)}
-            </div>
+            selectedIntegrationOption={selectedIntegrationOption}
-            <button onClick={() => handleBotActivate()}>
+            handleBotActivate={handleBotActivate}
-              {(bot && bot?.isActive) ? 'Deactivate bot' : 'Activate bot'}
+            handleIntegrationOption={handleIntegrationOption}
-              </button>
+          />
-            <p className="mr-4 text-base text-gray-400">
+          {projectIntegrations.length > 0 && (
-              Manage your integrations of Infisical with third-party services.
+            <>
-            </p>
+              <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
-          </div>
+                <div className="flex flex-row justify-start items-center text-3xl">
-          {projectIntegrations.length > 0 ? (
+                  <p className="font-semibold mr-4">Current Project Integrations</p>
-            projectIntegrations.map((projectIntegration) => (
-              <Integration
-                key={guidGenerator()}
-                projectIntegration={projectIntegration}
-              />
-            ))
-          ) : (
-            <div className="flex flex-col max-w-5xl justify-center bg-white/5 p-6 rounded-md mx-6 mt-8">
-              <div className="relative px-4 flex flex-col text-gray-400 items-center justify-center">
-                <div className="mb-1">
-                  You {"don't"} have any integrations set up yet. When you do,
-                  they will appear here.
-                </div>
-                <div className="">
-                  To start, click on any of the options below. It takes 5 clicks
-                  to set up.
                 </div>
+                <p className="text-base text-gray-400">
+                  Manage your integrations of Infisical with third-party services.
+                </p>
               </div>
-            </div>
+              {projectIntegrations.map((projectIntegration) => (
+                <Integration
+                  key={guidGenerator()}
+                  projectIntegration={projectIntegration}
+                />
+              ))}
+            </>
           )}
-          <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-col justify-between items-start mx-4 ${projectIntegrations.length > 0 ? 'mt-12' : 'mt-6'} 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">Platform & Cloud Integrations</p>
             </div>
@@ -302,30 +338,24 @@ export default function Integrations() {
               <div
                 className={`relative ${
                   ["Heroku"].includes(integrations[integration].name)
-                    ? ""
+                    ? "hover:bg-white/10 duration-200 cursor-pointer"
                     : "opacity-50"
-                }`}
+                } flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
+                onClick={() => {
+                  if (!["Heroku"].includes(integrations[integration].name)) return;
+                  setSelectedIntegrationOption(integrations[integration]);
+                  integrationOptionPress({
+                    integrationOption: integrations[integration]
+                  });
+                }}
                 key={integrations[integration].name}
               >
-                <a
-                  href={`${
-                    ["Heroku"].includes(integrations[integration].name)
-                      ? `https://id.heroku.com/oauth/authorize?client_id=7b1311a1-1cb2-4938-8adf-f37a399ec41b&response_type=code&scope=write-protected&state=${csrfToken}`
-                      : "#"
-                  }`}
-                  rel="noopener"
-                  className={`relative flex flex-row bg-white/5 h-32 rounded-md p-4 items-center ${
-                    ["Heroku"].includes(integrations[integration].name)
-                      ? "hover:bg-white/10 duration-200 cursor-pointer"
-                      : "cursor-default grayscale"
-                  }`}
-                >
                   <Image
                     src={`/images/integrations/${integrations[integration].name}.png`}
                     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-4 max-w-xs">
                       <div>{integrations[integration].name.split(" ")[0]}</div>
@@ -339,7 +369,6 @@ export default function Integrations() {
                       {integrations[integration].name}
                     </div>
                   )}
-                </a>
                 {["Heroku"].includes(integrations[integration].name) &&
                   authorizations
                     .map((authorization) => authorization.integration)