Merge pull request #486 from Infisical/vercel-preview-branches

Add support for syncing to Vercel preview branches

backend/src/controllers/v1/integrationAuthController.ts

@@ -12,6 +12,10 @@ import {
 	getTeams,
 	revokeAccess 
 } from '../../integrations';
+import {
+	INTEGRATION_VERCEL_API_URL
+} from '../../variables';
+import request from '../../config/request';
 
 /***
  * Return integration authorization with id [integrationAuthId]
@@ -188,25 +192,60 @@ export const getIntegrationAuthApps = async (req: Request, res: Response) => {
  * @returns 
  */
 export const getIntegrationAuthTeams = async (req: Request, res: Response) => {
-	let teams;
+	const teams = await getTeams({
-	try {
+		integrationAuth: req.integrationAuth,
-		teams = await getTeams({
+		accessToken: req.accessToken
-			integrationAuth: req.integrationAuth,
+	});
-			accessToken: req.accessToken
-		});
-	} catch (err) {
-		Sentry.setUser({ email: req.user.email });
-		Sentry.captureException(err);
-		return res.status(400).send({
-		message: "Failed to get integration authorization teams"
-		});
-	}
 	
 	return res.status(200).send({
 		teams
 	});
 }
 
+/**
+ * Return list of available Vercel (preview) branches
+ * @param req 
+ * @param res 
+ */
+export const getIntegrationAuthVercelBranches = async (req: Request, res: Response) => {
+	const { integrationAuthId } = req.params;
+	const appId = req.query.appId as string;
+	
+	interface VercelBranch {
+		ref: string;
+		lastCommit: string;
+		isProtected: boolean;
+	}
+
+	const params = new URLSearchParams({
+		projectId: appId,
+		...(req.integrationAuth.teamId ? {
+			teamId: req.integrationAuth.teamId
+		} : {})
+	});
+
+	let branches: string[] = [];
+	
+	if (appId && appId !== '') {
+		const { data }: { data: VercelBranch[] } = await request.get(
+			`${INTEGRATION_VERCEL_API_URL}/v1/integrations/git-branches`,
+			{
+				params,
+				headers: {
+					Authorization: `Bearer ${req.accessToken}`,
+					'Accept-Encoding': 'application/json'
+				}
+			}
+		);
+		
+		branches = data.map((b) => b.ref);
+	}
+
+	return res.status(200).send({
+		branches
+	});
+}
+
 /**
  * Delete integration authorization with id [integrationAuthId]
  * @param req

backend/src/integrations/apps.ts

@@ -184,6 +184,7 @@ const getAppsVercel = async ({
 
     apps = res.projects.map((a: any) => ({
       name: a.name,
+      appId: a.id
     }));
   } catch (err) {
     Sentry.setUser(null);

backend/src/integrations/sync.ts

@@ -608,6 +608,7 @@ const syncSecretsVercel = async ({
     key: string;
     value: string;
     target: string[];
+    gitBranch?: string;
   }
   
   try {
@@ -621,46 +622,7 @@ const syncSecretsVercel = async ({
           }
         : {}),
     };
-    
+      
-    // const res = (
-    //   await Promise.all(
-    //     (
-    //       await request.get(
-    //         `${INTEGRATION_VERCEL_API_URL}/v9/projects/${integration.app}/env`,
-    //         {
-    //           params,
-    //           headers: {
-    //               Authorization: `Bearer ${accessToken}`,
-    //               'Accept-Encoding': 'application/json'
-    //           }
-    //       }
-    //   ))
-    //   .data
-    //   .envs
-    //   .filter((secret: VercelSecret) => secret.target.includes(integration.targetEnvironment))
-    //   .map(async (secret: VercelSecret) => {
-    //     if (secret.type === 'encrypted') {
-    //       // case: secret is encrypted -> need to decrypt
-    //       const decryptedSecret = (await request.get(
-    //           `${INTEGRATION_VERCEL_API_URL}/v9/projects/${integration.app}/env/${secret.id}`,
-    //           {
-    //             params,
-    //             headers: {
-    //                 Authorization: `Bearer ${accessToken}`,
-    //                 'Accept-Encoding': 'application/json'
-    //             }
-    //           }
-    //       )).data;
-
-    //       return decryptedSecret;
-    //     }
-
-    //     return secret;
-    //   }))).reduce((obj: any, secret: any) => ({
-    //       ...obj,
-    //       [secret.key]: secret
-    //   }), {});
-    
     const vercelSecrets: VercelSecret[] = (await request.get(
       `${INTEGRATION_VERCEL_API_URL}/v9/projects/${integration.app}/env`,
       {
@@ -673,7 +635,21 @@ const syncSecretsVercel = async ({
     ))
     .data
     .envs
-    .filter((secret: VercelSecret) => secret.target.includes(integration.targetEnvironment));
+    .filter((secret: VercelSecret) => { 
+      if (!secret.target.includes(integration.targetEnvironment)) {
+        // case: secret does not have the same target environment
+        return false;
+      }
+
+      if (integration.targetEnvironment === 'preview' && integration.path && integration.path !== secret.gitBranch) {
+        // case: secret on preview environment does not have same target git branch
+        return false;
+      }
+
+      return true;
+    });
+
+    // return secret.target.includes(integration.targetEnvironment);
 
     const res: { [key: string]: VercelSecret } = {};
 
@@ -696,7 +672,7 @@ const syncSecretsVercel = async ({
         res[vercelSecret.key] = vercelSecret;
       }
     }
-
+    
     const updateSecrets: VercelSecret[] = [];
     const deleteSecrets: VercelSecret[] = [];
     const newSecrets: VercelSecret[] = [];
@@ -710,6 +686,9 @@ const syncSecretsVercel = async ({
           value: secrets[key],
           type: "encrypted",
           target: [integration.targetEnvironment],
+          ...(integration.path ? {
+            gitBranch: integration.path
+          } : {})
         });
       }
     });
@@ -726,7 +705,10 @@ const syncSecretsVercel = async ({
             type: res[key].type,
             target: res[key].target.includes(integration.targetEnvironment) 
             ? [...res[key].target] 
-            : [...res[key].target, integration.targetEnvironment]
+            : [...res[key].target, integration.targetEnvironment],
+            ...(integration.path ? {
+              gitBranch: integration.path
+            } : {})
           });
         }
       } else {
@@ -737,6 +719,9 @@ const syncSecretsVercel = async ({
           value: res[key].value,
           type: "encrypted", // value doesn't matter
           target: [integration.targetEnvironment],
+          ...(integration.path ? {
+            gitBranch: integration.path
+          } : {})
         });
       }
     });

backend/src/models/integration.ts

@@ -78,6 +78,7 @@ const integrationSchema = new Schema<IIntegration>(
     },
     path: {
       // aws-parameter-store-specific path
+      // (also) vercel preview-branch
       type: String,
       default: null
     },

backend/src/routes/v1/integrationAuth.ts

@@ -91,6 +91,21 @@ router.get(
 	integrationAuthController.getIntegrationAuthTeams
 );
 
+router.get(
+	'/:integrationAuthId/vercel/branches',
+	requireAuth({
+        acceptedAuthModes: ['jwt']
+    }),
+	requireIntegrationAuthorizationAuth({
+		acceptedRoles: [ADMIN, MEMBER]
+	}),
+	param('integrationAuthId').exists().isString(),
+	query('appId').exists().isString(),
+	query('teamId').optional().isString(),
+	validateRequest,
+	integrationAuthController.getIntegrationAuthVercelBranches
+);
+
 router.delete(
 	'/:integrationAuthId',
 	requireAuth({

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -1,4 +1,6 @@
 export {
     useGetIntegrationAuthApps,
     useGetIntegrationAuthById,
-    useGetIntegrationAuthTeams} from './queries';
+    useGetIntegrationAuthTeams,
+    useGetIntegrationAuthVercelBranches
+} from './queries';

frontend/src/hooks/api/integrationAuth/queries.tsx

@@ -5,12 +5,20 @@ import { apiRequest } from "@app/config/request";
 import {
     App,
     IntegrationAuth,
-    Team} from './types';
+    Team
+} from './types';
 
 const integrationAuthKeys = {
     getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuth'] as const,
     getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) => [{ integrationAuthId, teamId }, 'integrationAuthApps'] as const,
-    getIntegrationAuthTeams: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthTeams'] as const
+    getIntegrationAuthTeams: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthTeams'] as const,
+    getIntegrationAuthVercelBranches: ({
+        integrationAuthId,
+        appId,
+    }: {
+        integrationAuthId: string;
+        appId: string;
+    }) => [{ integrationAuthId, appId }, 'integrationAuthVercelBranches']
 }
 
 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -38,6 +46,22 @@ const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
     return data.teams;
 }
 
+const fetchIntegrationAuthVercelBranches = async ({
+    integrationAuthId,
+    appId
+}: {
+    integrationAuthId: string;
+    appId: string;
+}) => {
+    const { data: { branches } } = await apiRequest.get<{ branches: string[] }>(`/api/v1/integration-auth/${integrationAuthId}/vercel/branches`, {
+        params: {
+            appId
+        }
+    });
+    
+    return branches;
+};
+
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
     return useQuery({
         queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
@@ -46,7 +70,6 @@ export const useGetIntegrationAuthById = (integrationAuthId: string) => {
     });
 }
 
-// TODO: fix to teamId
 export const useGetIntegrationAuthApps = ({
     integrationAuthId,
     teamId
@@ -70,4 +93,24 @@ export const useGetIntegrationAuthTeams = (integrationAuthId: string) => {
         queryFn: () =>  fetchIntegrationAuthTeams(integrationAuthId),
         enabled: true
     });
-}
+}
+
+export const useGetIntegrationAuthVercelBranches = ({
+    integrationAuthId,
+    appId,
+}: {
+    integrationAuthId: string;
+    appId: string;
+}) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthVercelBranches({
+            integrationAuthId,
+            appId,
+        }),
+        queryFn: () => fetchIntegrationAuthVercelBranches({
+            integrationAuthId,
+            appId,
+        }),
+        enabled: true
+    });
+}

frontend/src/pages/integrations/gitlab/create.tsx

@@ -109,7 +109,6 @@ export default function GitLabCreateIntegrationPage() {
         <CardTitle className='text-center'>GitLab Integration</CardTitle>
         <FormControl
           label="Project Environment"
-          className='mt-4'
         >
           <Select
             value={selectedSourceEnvironment}
@@ -125,7 +124,6 @@ export default function GitLabCreateIntegrationPage() {
         </FormControl>
         <FormControl
           label="GitLab Integration Type"
-          className='mt-4'
         >
           <Select
             value={targetEntity}
@@ -144,7 +142,6 @@ export default function GitLabCreateIntegrationPage() {
         {targetEntity === 'group' && targetTeamId && (
           <FormControl
             label="GitLab Group"
-            className='mt-4'
           >
             <Select
               value={targetTeamId}
@@ -167,7 +164,6 @@ export default function GitLabCreateIntegrationPage() {
         )}
         <FormControl
           label="GitLab Project"
-          className='mt-4'
         >
           <Select
             value={targetAppId}

frontend/src/pages/integrations/vercel/create.tsx

@@ -4,14 +4,18 @@ import queryString from 'query-string';
 
 import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
 import {
-    Button, 
+  Button, 
-    Card, 
+  Card, 
-    CardTitle, 
+  CardTitle, 
-    FormControl, 
+  FormControl, 
-    Select, 
+  Select, 
-    SelectItem 
+  SelectItem
 } from '../../../components/v2';
-import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthVercelBranches
+} from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
@@ -24,20 +28,28 @@ const vercelEnvironments = [
 export default function VercelCreateIntegrationPage() {
     const router = useRouter();
 
-    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetAppId, setTargetAppId] = useState('');
+    const [targetEnvironment, setTargetEnvironment] = useState('');
+    const [targetBranch, setTargetBranch] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
 
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
     const { data: integrationAuthApps } = useGetIntegrationAuthApps({
       integrationAuthId: integrationAuthId as string ?? ''
     });
     
-    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const { data: branches } = useGetIntegrationAuthVercelBranches({
-    const [targetApp, setTargetApp] = useState('');
+      integrationAuthId: integrationAuthId as string,
-    const [targetEnvironment, setTargetEnvironment] = useState('');
+      appId: targetAppId,
-    
+    });
-    const [isLoading, setIsLoading] = useState(false);
     
+    const filteredBranches = branches
+      ?.filter((branchName) => branchName !== 'main')
+      .concat('');
+      
     useEffect(() => {
         if (workspace) {
             setSelectedSourceEnvironment(workspace.environments[0].slug);
@@ -45,15 +57,15 @@ export default function VercelCreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        if (integrationAuthApps) {
+      if (integrationAuthApps) {
-          if (integrationAuthApps.length > 0) {
+        if (integrationAuthApps.length > 0) {
-            setTargetApp(integrationAuthApps[0].name);
+          setTargetAppId(integrationAuthApps[0].appId as string);
-            setTargetEnvironment(vercelEnvironments[0].slug);
+          setTargetEnvironment(vercelEnvironments[0].slug);
-          } else {
+        } else {
-            setTargetApp('none');
+          setTargetAppId('none');
-            setTargetEnvironment(vercelEnvironments[0].slug);
+          setTargetEnvironment(vercelEnvironments[0].slug);
-          }
         }
+      }
     }, [integrationAuthApps]);
         
     const handleButtonClick = async () => {
@@ -61,15 +73,22 @@ export default function VercelCreateIntegrationPage() {
             if (!integrationAuth?._id) return;
 
             setIsLoading(true);
+            
+            const targetApp = integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.appId === targetAppId);
+            
+            if (!targetApp || !targetApp.appId) return;
+            
+            const path = (targetEnvironment === 'preview' && targetBranch !== '') ? targetBranch : null;
+
             await createIntegration({
               integrationAuthId: integrationAuth?._id,
               isActive: true,
-              app: targetApp,
+              app: targetApp.name,
-              appId: null,
+              appId: targetApp.appId,
               sourceEnvironment: selectedSourceEnvironment,
               targetEnvironment,
               owner: null,
-              path: null,
+              path,
               region: null
             }); 
             
@@ -82,7 +101,7 @@ export default function VercelCreateIntegrationPage() {
         }
     }
     
-    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp && targetEnvironment) ? (
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetAppId && targetEnvironment) ? (
     <div className="h-full w-full flex justify-center items-center">
       <Card className="max-w-md p-8 rounded-md">
         <CardTitle className='text-center'>Vercel Integration</CardTitle>
@@ -106,14 +125,14 @@ export default function VercelCreateIntegrationPage() {
           label="Vercel App"
         >
           <Select
-            value={targetApp}
+            value={targetAppId}
-            onValueChange={(val) => setTargetApp(val)}
+            onValueChange={(val) => setTargetAppId(val)}
             className='w-full border border-mineshaft-500'
             isDisabled={integrationAuthApps.length === 0}
           >
             {integrationAuthApps.length > 0 ? (
               integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                <SelectItem value={integrationAuthApp.appId as string} key={`target-app-${integrationAuthApp.appId as string}`}>
                   {integrationAuthApp.name}
                 </SelectItem>
               ))
@@ -139,6 +158,23 @@ export default function VercelCreateIntegrationPage() {
             ))}
           </Select>
         </FormControl>
+        {targetEnvironment === 'preview' && filteredBranches && (
+          <FormControl
+            label="Vercel Preview Branch (Optional)"
+          >
+            <Select
+              value={targetBranch}
+              onValueChange={(val) => setTargetBranch(val)}
+              className='w-full border border-mineshaft-500'
+            >
+              {filteredBranches.map((branchName) => (
+                <SelectItem value={branchName} key={`target-branch-${branchName}`}>
+                  {branchName}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
         <Button 
           onClick={handleButtonClick}
           color="mineshaft"