Checkpoint GitLab integration group support

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

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

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

@@ -4,11 +4,13 @@ import { apiRequest } from "@app/config/request";
 
 import {
     App,
-    IntegrationAuth} from './types';
+    IntegrationAuth,
+    Team} from './types';
 
 const integrationAuthKeys = {
     getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuth'] as const,
-    getIntegrationAuthApps: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthApps'] as const,
+    getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) => [{ integrationAuthId, teamId }, 'integrationAuthApps'] as const,
+    getIntegrationAuthTeams: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthTeams'] as const
 }
 
 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -16,11 +18,27 @@ const fetchIntegrationAuthById = async (integrationAuthId: string) => {
     return data.integrationAuth;
 }
 
-const fetchIntegrationAuthApps = async (integrationAuthId: string) => {
-    const { data } = await apiRequest.get<{ apps: App[] }>(`/api/v1/integration-auth/${integrationAuthId}/apps`);
+const fetchIntegrationAuthApps = async ({
+    integrationAuthId,
+    teamId
+}: {
+    integrationAuthId: string;
+    teamId?: string;
+}) => {
+    console.log('fetchIntegrationAuthApps: ', integrationAuthId);
+    const searchParams = new URLSearchParams(teamId ? { teamId } : undefined);
+    const { data } = await apiRequest.get<{ apps: App[] }>(
+        `/api/v1/integration-auth/${integrationAuthId}/apps`, 
+        { params: searchParams }
+    );
     return data.apps;
 }
 
+const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ teams: Team[] }>(`/api/v1/integration-auth/${integrationAuthId}/teams`);
+    return data.teams;
+}
+
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
     return useQuery({
         queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
@@ -29,10 +47,28 @@ export const useGetIntegrationAuthById = (integrationAuthId: string) => {
     });
 }
 
-export const useGetIntegrationAuthApps = (integrationAuthId: string) => {
+// TODO: fix to teamId
+export const useGetIntegrationAuthApps = ({
+    integrationAuthId,
+    teamId
+}: {
+    integrationAuthId: string;
+    teamId?: string;
+}) => {
     return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId),
-        queryFn: () =>  fetchIntegrationAuthApps(integrationAuthId),
+        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId),
+        queryFn: () =>  fetchIntegrationAuthApps({
+            integrationAuthId,
+            teamId
+        }),
+        enabled: true
+    });
+}
+
+export const useGetIntegrationAuthTeams = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthTeams(integrationAuthId),
+        queryFn: () =>  fetchIntegrationAuthTeams(integrationAuthId),
         enabled: true
     });
 }

frontend/src/hooks/api/integrationAuth/types.ts

@@ -10,4 +10,9 @@ export type App = {
     name: string;
     appId?: string;
     owner?: string;
+}
+
+export type Team = {
+    name: string;
+    teamId: string;
 }

frontend/src/pages/integrations/[id].tsx

@@ -196,16 +196,16 @@ export default function Integrations() {
           link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
           break;
         case 'render':
-          link = `${window.location.origin}/integrations/render/authorize`
+          link = `${window.location.origin}/integrations/render/authorize`;
           break;
         case 'flyio':
-          link = `${window.location.origin}/integrations/flyio/authorize`
+          link = `${window.location.origin}/integrations/flyio/authorize`;
           break;
         case 'circleci':
-          link = `${window.location.origin}/integrations/circleci/authorize`
+          link = `${window.location.origin}/integrations/circleci/authorize`;
           break;
         case 'travisci':
-          link = `${window.location.origin}/integrations/travisci/authorize`
+          link = `${window.location.origin}/integrations/travisci/authorize`;
           break;
         default:
           break;

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

@@ -22,7 +22,9 @@ export default function CircleCICreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
@@ -36,9 +38,12 @@ export default function CircleCICreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
-          setTargetApp(integrationAuthApps[0]?.name);
+          if (integrationAuthApps.length > 0 ) {
+            setTargetApp(integrationAuthApps[0]?.name);
+          } else {
+            setTargetApp('none');
+          }
         }
     }, [integrationAuthApps]);
         
@@ -84,7 +89,7 @@ export default function CircleCICreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -98,19 +103,27 @@ export default function CircleCICreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No projects found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -22,7 +22,9 @@ export default function FlyioCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
@@ -31,14 +33,18 @@ export default function FlyioCreateIntegrationPage() {
     
     useEffect(() => {
         if (workspace) {
-            setSelectedSourceEnvironment(workspace.environments[0].slug);
+          setSelectedSourceEnvironment(workspace.environments[0].slug);
         }
     }, [workspace]);
     
     useEffect(() => {
         // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
+          if (integrationAuthApps.length > 0) {
             setTargetApp(integrationAuthApps[0].name);
+          } else {
+            setTargetApp('none');
+          }
         }
     }, [integrationAuthApps]);
         
@@ -84,7 +90,7 @@ export default function FlyioCreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`flyio-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -98,12 +104,19 @@ export default function FlyioCreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No apps found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
@@ -111,6 +124,7 @@ export default function FlyioCreateIntegrationPage() {
             color="mineshaft" 
             className='mt-4'
             isLoading={isLoading}
+            isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -22,7 +22,9 @@ export default function GitHubCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [owner, setOwner] = useState<string | null>(null);
@@ -37,10 +39,13 @@ export default function GitHubCreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
+          if (integrationAuthApps.length > 0) {
             setTargetApp(integrationAuthApps[0].name);
             setOwner(integrationAuthApps[0]?.owner ?? null);
+          } else {
+            setTargetApp('none');
+          }
         }
     }, [integrationAuthApps]);
         
@@ -99,21 +104,29 @@ export default function GitHubCreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`github-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`github-environment-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No repositories found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
-            Create Integration
+          Create Integration
         </Button>
       </Card>
     </div>

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

@@ -11,10 +11,20 @@ import {
     Select, 
     SelectItem 
 } from '../../../components/v2';
-import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById, 
+  useGetIntegrationAuthTeams} from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from "../../api/integrations/createIntegration";
 
+const gitLabEntities = [
+  { name: 'Individual', value: 'individual' },
+  { name: 'Group', value: 'group' }
+]
+
+// TODO: flesh out the data flow...
+
 export default function GitLabCreateIntegrationPage() {
     const router = useRouter();
 
@@ -22,10 +32,18 @@ export default function GitLabCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [targetEntity, setTargetEntity] = useState(gitLabEntities[0].value);
+    const [targetTeam, setTargetTeam] = useState('aa'); // ?
+    const [targetTeamId] = useState(undefined);
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? '',
+      ...(targetTeamId ? { teamId: targetTeamId } : {})
+    });
+    const { data: integrationAuthTeams } = useGetIntegrationAuthTeams(integrationAuthId as string ?? '');
+    console.log('integrationAuthTeams: ', integrationAuthTeams);
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
-    const [owner, setOwner] = useState<string | null>(null);
     const [targetApp, setTargetApp] = useState('');
     
     const [isLoading, setIsLoading] = useState(false);
@@ -38,12 +56,36 @@ export default function GitLabCreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
-        if (integrationAuthApps) {
-            setTargetApp(integrationAuthApps[0].name);
-            setOwner(integrationAuthApps[0]?.owner ?? null);
+      if (integrationAuthApps) {
+        if (integrationAuthApps.length > 0) {
+          console.log('AA');
+          setTargetApp(integrationAuthApps[0].name);
+        } else {
+          console.log('BB');
+          setTargetApp('none');
         }
+      }
     }, [integrationAuthApps]);
+    
+    useEffect(() => {
+      // if (targetEntity === 'group' && integrationAuthTeams) {
+      //   if (integrationAuthTeams.length > 0) {
+      //     setTargetTeam(integrationAuthTeams[0].name);
+      //   } else {
+      //     setTargetTeam('none');
+      //   }
+      // }
+    
+      // if (targetEntity === 'group') {
+      //  if (integrationAuthTeams && integrationAuthTeams.length > 0) {
+      //     setTargetTeamId(integrationAuthTeams[0].teamId);
+      //   } else {
+      //     setTargetTeamId('');
+      //   } 
+      // } else {
+        
+      // }
+    }, [integrationAuthTeams, integrationAuthApps, targetEntity]);
         
     const handleButtonClick = async () => {
         try {
@@ -57,7 +99,7 @@ export default function GitLabCreateIntegrationPage() {
                 appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
                 sourceEnvironment: selectedSourceEnvironment,
                 targetEnvironment: null,
-                owner,
+                owner: null,
                 path: null,
                 region: null
             }); 
@@ -71,7 +113,15 @@ export default function GitLabCreateIntegrationPage() {
         }
     }
     
-    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    console.log('A', (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && integrationAuthTeams && targetApp && targetTeam));
+    console.log('B', integrationAuth);
+    console.log('C', workspace);
+    console.log('D', selectedSourceEnvironment);
+    console.log('E', integrationAuthApps);
+    console.log('F', integrationAuthTeams);
+    console.log('G', targetApp);
+    console.log('H', targetTeam);
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && integrationAuthTeams && targetApp && targetTeam) ? (
     <div className="h-full w-full flex justify-center items-center">
       <Card className="max-w-md p-8 rounded-md">
         <CardTitle className='text-center'>GitLab Integration</CardTitle>
@@ -85,33 +135,83 @@ export default function GitLabCreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
           </Select>
         </FormControl>
         <FormControl
-          label="GitLab Repo"
+          label="GitLab Integration Type"
+          className='mt-4'
+        >
+          <Select
+            value={targetEntity}
+            onValueChange={(val) => setTargetEntity(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {gitLabEntities.map((entity) => {
+              return (
+                <SelectItem value={entity.value} key={`target-entity-${entity.value}`}>
+                  {entity.name}
+                </SelectItem>
+              );
+            })}
+          </Select>
+        </FormControl>
+        {targetEntity === 'group' && (
+          <FormControl
+            label="GitLab Group"
+            className='mt-4'
+          >
+            <Select
+              value={targetTeam}
+              onValueChange={(val) => setTargetTeam(val)}
+              className='w-full border border-mineshaft-500'
+            >
+              {integrationAuthTeams.length > 0 ? (
+                integrationAuthTeams.map((integrationAuthTeam) => (
+                  <SelectItem value={integrationAuthTeam.name} key={`target-team-${integrationAuthTeam.name}`}>
+                    {integrationAuthTeam.name}
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="none" key="target-team-none">
+                  No groups found
+                </SelectItem>
+              )}
+            </Select>
+          </FormControl>
+        )}
+        <FormControl
+          label="GitLab Project"
           className='mt-4'
         >
           <Select
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`gitlab-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No projects found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -22,7 +22,9 @@ export default function HerokuCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
@@ -36,9 +38,12 @@ export default function HerokuCreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
+          if (integrationAuthApps.length > 0) {
             setTargetApp(integrationAuthApps[0].name);
+          } else {
+            setTargetApp('none');
+          }
         }
     }, [integrationAuthApps]);
         
@@ -83,7 +88,7 @@ export default function HerokuCreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -97,19 +102,27 @@ export default function HerokuCreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No apps found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -29,7 +29,9 @@ export default function NetlifyCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
@@ -45,10 +47,13 @@ export default function NetlifyCreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
-        if (integrationAuthApps) {
-            setTargetApp(integrationAuthApps[0].name);
+      if (integrationAuthApps) {
+        if (integrationAuthApps.length > 0) {
+          setTargetApp(integrationAuthApps[0].name);
+        } else {
+          setTargetApp('none');
         }
+      }
     }, [integrationAuthApps]);
         
     const handleButtonClick = async () => {
@@ -91,7 +96,7 @@ export default function NetlifyCreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -104,12 +109,19 @@ export default function NetlifyCreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No sites found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <FormControl
@@ -121,17 +133,18 @@ export default function NetlifyCreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {netlifyEnvironments.map((netlifyEnvironment) => (
-              <SelectItem value={netlifyEnvironment.slug} key={`netlify-environment-${netlifyEnvironment.slug}`}>
+              <SelectItem value={netlifyEnvironment.slug} key={`target-environment-${netlifyEnvironment.slug}`}>
                 {netlifyEnvironment.name}
               </SelectItem>
             ))}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -22,7 +22,9 @@ export default function RenderCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
@@ -38,7 +40,11 @@ export default function RenderCreateIntegrationPage() {
     useEffect(() => {
         // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
-          setTargetApp(integrationAuthApps[0].name);
+          if (integrationAuthApps.length > 0) {
+            setTargetApp(integrationAuthApps[0].name);
+          } else {
+            setTargetApp('none');
+          }
         }
     }, [integrationAuthApps]);
         
@@ -84,7 +90,7 @@ export default function RenderCreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -98,19 +104,27 @@ export default function RenderCreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No services found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -22,7 +22,9 @@ export default function TravisCICreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
@@ -36,10 +38,13 @@ export default function TravisCICreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
-        if (integrationAuthApps) {
-          setTargetApp(integrationAuthApps[0]?.name);
+      if (integrationAuthApps) {
+        if (integrationAuthApps.length > 0) {
+          setTargetApp(integrationAuthApps[0].name);
+        } else {
+          setTargetApp('none');
         }
+      }
     }, [integrationAuthApps]);
         
     const handleButtonClick = async () => {
@@ -84,7 +89,7 @@ export default function TravisCICreateIntegrationPage() {
             className='w-full border border-mineshaft-500'
           >
             {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+              <SelectItem value={sourceEnvironment.slug} key={`source-environment-${sourceEnvironment.slug}`}>
                 {sourceEnvironment.name}
               </SelectItem>
             ))}
@@ -98,19 +103,27 @@ export default function TravisCICreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-environment-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No projects found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>

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

@@ -28,11 +28,13 @@ export default function VercelCreateIntegrationPage() {
 
     const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
     const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
-    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+      integrationAuthId: integrationAuthId as string ?? ''
+    });
     
     const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
     const [targetApp, setTargetApp] = useState('');
-    const [targetEnvironment, setTargetEnvironemnt] = useState('');
+    const [targetEnvironment, setTargetEnvironment] = useState('');
     
     const [isLoading, setIsLoading] = useState(false);
     
@@ -43,10 +45,14 @@ export default function VercelCreateIntegrationPage() {
     }, [workspace]);
     
     useEffect(() => {
-        // TODO: handle case where apps can be empty
         if (integrationAuthApps) {
+          if (integrationAuthApps.length > 0) {
             setTargetApp(integrationAuthApps[0].name);
-            setTargetEnvironemnt(vercelEnvironments[0].slug);
+            setTargetEnvironment(vercelEnvironments[0].slug);
+          } else {
+            setTargetApp('none');
+            setTargetEnvironment(vercelEnvironments[0].slug);
+          }
         }
     }, [integrationAuthApps]);
         
@@ -103,12 +109,19 @@ export default function VercelCreateIntegrationPage() {
             value={targetApp}
             onValueChange={(val) => setTargetApp(val)}
             className='w-full border border-mineshaft-500'
+            isDisabled={integrationAuthApps.length === 0}
           >
-            {integrationAuthApps.map((integrationAuthApp) => (
-              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
-                {integrationAuthApp.name}
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem value={integrationAuthApp.name} key={`target-app-${integrationAuthApp.name}`}>
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No projects found
               </SelectItem>
-            ))}
+            )}
           </Select>
         </FormControl>
         <FormControl
@@ -116,21 +129,22 @@ export default function VercelCreateIntegrationPage() {
         >
           <Select
             value={targetEnvironment}
-            onValueChange={(val) => setTargetEnvironemnt(val)}
+            onValueChange={(val) => setTargetEnvironment(val)}
             className='w-full border border-mineshaft-500'
           >
             {vercelEnvironments.map((vercelEnvironment) => (
-              <SelectItem value={vercelEnvironment.slug} key={`vercel-environment-${vercelEnvironment.slug}`}>
+              <SelectItem value={vercelEnvironment.slug} key={`target-environment-${vercelEnvironment.slug}`}>
                 {vercelEnvironment.name}
               </SelectItem>
             ))}
           </Select>
         </FormControl>
         <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
+          onClick={handleButtonClick}
+          color="mineshaft" 
+          className='mt-4'
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
         >
             Create Integration
         </Button>