Add support for syncing to Vercel preview branches

2026-10-14 11:29:42 +00:00 · 2023-04-08 16:01:58 +03:00
parent a3093de55b
commit c175519d70
9 changed files with 211 additions and 93 deletions
@@ -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}
@@ -4,14 +4,18 @@ import queryString from 'query-string';

 import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
 import {
-    Button, 
-    Card, 
-    CardTitle, 
-    FormControl, 
-    Select, 
-    SelectItem 
+  Button, 
+  Card, 
+  CardTitle, 
+  FormControl, 
+  Select, 
+  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 [targetApp, setTargetApp] = useState('');
-    const [targetEnvironment, setTargetEnvironment] = useState('');
-    
-    const [isLoading, setIsLoading] = useState(false);
+    const { data: branches } = useGetIntegrationAuthVercelBranches({
+      integrationAuthId: integrationAuthId as string,
+      appId: targetAppId,
+    });
    
+    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.length > 0) {
-            setTargetApp(integrationAuthApps[0].name);
-            setTargetEnvironment(vercelEnvironments[0].slug);
-          } else {
-            setTargetApp('none');
-            setTargetEnvironment(vercelEnvironments[0].slug);
-          }
+      if (integrationAuthApps) {
+        if (integrationAuthApps.length > 0) {
+          setTargetAppId(integrationAuthApps[0].appId as string);
+          setTargetEnvironment(vercelEnvironments[0].slug);
+        } else {
+          setTargetAppId('none');
+          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,
-              appId: null,
+              app: targetApp.name,
+              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}
-            onValueChange={(val) => setTargetApp(val)}
+            value={targetAppId}
+            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"