missing break statement

.env.example

@@ -48,10 +48,12 @@ CLIENT_ID_HEROKU=
 CLIENT_ID_VERCEL=
 CLIENT_ID_NETLIFY=
 CLIENT_ID_GITHUB=
+CLIENT_ID_GITLAB=
 CLIENT_SECRET_HEROKU=
 CLIENT_SECRET_VERCEL=
 CLIENT_SECRET_NETLIFY=
 CLIENT_SECRET_GITHUB=
+CLIENT_SECRET_GITLAB=
 CLIENT_SLUG_VERCEL=
 
 # Sentry (optional) for monitoring errors

backend/environment.d.ts

@@ -22,10 +22,12 @@ declare global {
       CLIENT_ID_VERCEL: string;
       CLIENT_ID_NETLIFY: string;
       CLIENT_ID_GITHUB: string;
+      CLIENT_ID_GITLAB: string;
       CLIENT_SECRET_HEROKU: string;
       CLIENT_SECRET_VERCEL: string;
       CLIENT_SECRET_NETLIFY: string;
       CLIENT_SECRET_GITHUB: string;
+      CLIENT_SECRET_GITLAB: string;
       CLIENT_SLUG_VERCEL: string;
 			POSTHOG_HOST: string;
 			POSTHOG_PROJECT_API_KEY: string;

backend/src/config/index.ts

@@ -22,11 +22,13 @@ const CLIENT_ID_HEROKU = process.env.CLIENT_ID_HEROKU!;
 const CLIENT_ID_VERCEL = process.env.CLIENT_ID_VERCEL!;
 const CLIENT_ID_NETLIFY = process.env.CLIENT_ID_NETLIFY!;
 const CLIENT_ID_GITHUB = process.env.CLIENT_ID_GITHUB!;
+const CLIENT_ID_GITLAB = process.env.CLIENT_ID_GITLAB!;
 const CLIENT_SECRET_AZURE = process.env.CLIENT_SECRET_AZURE!;
 const CLIENT_SECRET_HEROKU = process.env.CLIENT_SECRET_HEROKU!;
 const CLIENT_SECRET_VERCEL = process.env.CLIENT_SECRET_VERCEL!;
 const CLIENT_SECRET_NETLIFY = process.env.CLIENT_SECRET_NETLIFY!;
 const CLIENT_SECRET_GITHUB = process.env.CLIENT_SECRET_GITHUB!;
+const CLIENT_SECRET_GITLAB = process.env.CLIENT_SECRET_GITLAB;
 const CLIENT_SLUG_VERCEL = process.env.CLIENT_SLUG_VERCEL!;
 const POSTHOG_HOST = process.env.POSTHOG_HOST! || 'https://app.posthog.com';
 const POSTHOG_PROJECT_API_KEY =
@@ -75,11 +77,13 @@ export {
   CLIENT_ID_VERCEL,
   CLIENT_ID_NETLIFY,
   CLIENT_ID_GITHUB,
+  CLIENT_ID_GITLAB,
   CLIENT_SECRET_AZURE,
   CLIENT_SECRET_HEROKU,
   CLIENT_SECRET_VERCEL,
   CLIENT_SECRET_NETLIFY,
   CLIENT_SECRET_GITHUB,
+  CLIENT_SECRET_GITLAB,
   CLIENT_SLUG_VERCEL,
   POSTHOG_HOST,
   POSTHOG_PROJECT_API_KEY,

backend/src/integrations/apps.ts

@@ -10,11 +10,13 @@ import {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
   INTEGRATION_TRAVISCI,
   INTEGRATION_HEROKU_API_URL,
+  INTEGRATION_GITLAB_API_URL,
   INTEGRATION_VERCEL_API_URL,
   INTEGRATION_NETLIFY_API_URL,
   INTEGRATION_RENDER_API_URL,
@@ -77,6 +79,11 @@ const getApps = async ({
           accessToken,
         });
         break;
+      case INTEGRATION_GITLAB:
+        apps = await getAppsGitlab({
+          accessToken,
+        });
+        break;
       case INTEGRATION_RENDER:
         apps = await getAppsRender({
           accessToken,
@@ -217,9 +224,9 @@ const getAppsNetlify = async ({ accessToken }: { accessToken: string }) => {
 /**
  * Return list of repositories for Github integration
  * @param {Object} obj
- * @param {String} obj.accessToken - access token for Netlify API
- * @returns {Object[]} apps - names of Netlify sites
- * @returns {String} apps.name - name of Netlify site
+ * @param {String} obj.accessToken - access token for Github API
+ * @returns {Object[]} apps - names of Github sites
+ * @returns {String} apps.name - name of Github site
  */
 const getAppsGithub = async ({ accessToken }: { accessToken: string }) => {
   let apps;
@@ -406,4 +413,56 @@ const getAppsTravisCI = async ({ accessToken }: { accessToken: string }) => {
   return apps;
 }
 
+/**
+ * Return list of repositories for GitLab integration
+ * @param {Object} obj
+ * @param {String} obj.accessToken - access token for GitLab API
+ * @returns {Object[]} apps - names of GitLab sites
+ * @returns {String} apps.name - name of GitLab site
+ */
+const getAppsGitlab = async ({ accessToken }: {accessToken: string}) => {
+  let apps;
+  console.log(accessToken);
+  
+  try {
+    const { id } = (
+      await axios.get(
+        `${INTEGRATION_GITLAB_API_URL}/v4/user`,
+        {
+          headers: {
+            "Authorization": `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json",
+          },
+        }
+      )
+    ).data;
+
+    const res = (
+      await axios.get(
+        `${INTEGRATION_GITLAB_API_URL}/v4/users/${id}/projects`,
+        {
+          headers: {
+            "Authorization": `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json",
+          },
+        }
+      )
+    ).data;
+
+    apps = res?.map((a: any) => {
+      return {
+        name: a?.name,
+        appId: `${a?.id}`,
+      }
+    });
+  }catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error("Failed to get GitLab repos");
+  }
+  
+  console.log(apps);
+  return apps;
+}
+
 export { getApps };

backend/src/integrations/exchange.ts

@@ -6,11 +6,13 @@ import {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_AZURE_TOKEN_URL,
   INTEGRATION_HEROKU_TOKEN_URL,
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
-  INTEGRATION_GITHUB_TOKEN_URL
+  INTEGRATION_GITHUB_TOKEN_URL,
+  INTEGRATION_GITLAB_TOKEN_URL,
 } from '../variables';
 import {
   SITE_URL,
@@ -18,11 +20,13 @@ import {
   CLIENT_ID_VERCEL,
   CLIENT_ID_NETLIFY,
   CLIENT_ID_GITHUB,
+  CLIENT_ID_GITLAB,
   CLIENT_SECRET_AZURE,
   CLIENT_SECRET_HEROKU,
   CLIENT_SECRET_VERCEL,
   CLIENT_SECRET_NETLIFY,
-  CLIENT_SECRET_GITHUB
+  CLIENT_SECRET_GITHUB,
+  CLIENT_SECRET_GITLAB,
 } from '../config';
 
 interface ExchangeCodeAzureResponse {
@@ -66,6 +70,15 @@ interface ExchangeCodeGithubResponse {
   token_type: string;
 }
 
+interface ExchangeCodeGitlabResponse {
+  access_token: string;
+  token_type: string;
+  expires_in: string;
+  refresh_token: string;
+  scope: string;
+  created_at: number;
+}
+
 /**
  * Return [accessToken], [accessExpiresAt], and [refreshToken] for OAuth2
  * code-token exchange for integration named [integration]
@@ -114,6 +127,10 @@ const exchangeCode = async ({
           code
         });
         break;
+      case INTEGRATION_GITLAB:
+        obj = await exchangeCodeGitlab({
+          code
+        });
     }
   } catch (err) {
     Sentry.setUser(null);
@@ -341,4 +358,48 @@ const exchangeCodeGithub = async ({ code }: { code: string }) => {
   };
 };
 
+/**
+ * Return [accessToken], [accessExpiresAt], and [refreshToken] for Gitlab
+ * code-token exchange
+ * @param {Object} obj1
+ * @param {Object} obj1.code - code for code-token exchange
+ * @returns {Object} obj2
+ * @returns {String} obj2.accessToken - access token for Github API
+ * @returns {String} obj2.refreshToken - refresh token for Github API
+ * @returns {Date} obj2.accessExpiresAt - date of expiration for access token
+ */
+const exchangeCodeGitlab = async ({ code }: { code: string }) => {
+  let res: ExchangeCodeGitlabResponse; 
+  
+  try {
+    res = (
+      await axios.post(
+        INTEGRATION_GITLAB_TOKEN_URL,
+        new URLSearchParams({
+          grant_type: 'authorization_code',
+          code: code,
+          client_id: CLIENT_ID_GITLAB,
+          client_secret: CLIENT_SECRET_GITLAB,
+          redirect_uri: `${SITE_URL}/integrations/gitlab/oauth2/callback`
+        } as any),
+        {
+          headers: {
+            "Accept-Encoding": "application/json",
+          }
+        }
+      )
+    ).data;
+  }catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed OAuth2 code-token exchange with Gitlab');
+  }
+
+  return {
+    accessToken: res.access_token,
+    refreshToken: null,
+    accessExpiresAt: null
+  };
+}
+
 export { exchangeCode };

backend/src/integrations/revoke.ts

@@ -10,7 +10,8 @@ import {
   INTEGRATION_HEROKU,
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
-  INTEGRATION_GITHUB
+  INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
 } from '../variables';
 
 const revokeAccess = async ({
@@ -32,6 +33,8 @@ const revokeAccess = async ({
         break;
       case INTEGRATION_GITHUB:
         break;
+      case INTEGRATION_GITLAB:
+        break;
     }
 
     deletedIntegrationAuth = await IntegrationAuth.findOneAndDelete({

backend/src/integrations/sync.ts

@@ -20,11 +20,13 @@ import {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
   INTEGRATION_TRAVISCI,
   INTEGRATION_HEROKU_API_URL,
+  INTEGRATION_GITLAB_API_URL,
   INTEGRATION_VERCEL_API_URL,
   INTEGRATION_NETLIFY_API_URL,
   INTEGRATION_RENDER_API_URL,
@@ -57,6 +59,7 @@ const syncSecrets = async ({
   accessToken: string;
 }) => {
   try {
+    console.log(integration); // aashish 
     switch (integration.integration) {
       case INTEGRATION_AZURE_KEY_VAULT:
         await syncSecretsAzureKeyVault({
@@ -111,6 +114,13 @@ const syncSecrets = async ({
           accessToken,
         });
         break;
+      case INTEGRATION_GITLAB:
+        await syncSecretsGitLab({
+          integration,
+          secrets,
+          accessToken,
+        });
+        break;
       case INTEGRATION_RENDER:
         await syncSecretsRender({
           integration,
@@ -1407,7 +1417,7 @@ const syncSecretsTravisCI = async ({
     }
 
     // delete secret 
-    for (const sec of getSecretsRes) {
+    for (let sec of getSecretsRes) {
       if (!(sec.name in secrets)){
         await axios.delete(
           `${INTEGRATION_TRAVISCI_API_URL}/settings/env_vars/${sec.id}?repository_id=${sec.repository_id}`,
@@ -1428,4 +1438,95 @@ const syncSecretsTravisCI = async ({
   }
 }
 
+/**
+ * Sync/push [secrets] to GitLab repo with name [integration.app]
+ * @param {Object} obj
+ * @param {IIntegration} obj.integration - integration details
+ * @param {IIntegrationAuth} obj.integrationAuth - integration auth details
+ * @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
+ * @param {String} obj.accessToken - access token for GitLab integration
+ */
+const syncSecretsGitLab = async ({
+  integration,
+  secrets,
+  accessToken,
+}: {
+  integration: IIntegration;
+  secrets: any;
+  accessToken: string;
+}) => {
+  try {
+    // get secrets from gitlab
+    const getSecretsRes = (
+      await axios.get(
+        `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables`,
+        { 
+          headers: {
+            "Authorization": `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json",
+          },
+        }
+      )
+    ).data;
+
+    for (const key of Object.keys(secrets)) {
+      const existingSecret = getSecretsRes.find((s: any) => s.key == key);
+      if (!existingSecret) {
+        await axios.post(
+          `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables`,
+          {
+            key: key,
+            value: secrets[key],
+            protected: false,
+            masked: false,
+            raw: false,
+            environment_scope:'*'
+          },
+          {
+            headers: {
+              "Authorization": `Bearer ${accessToken}`,
+              "Content-Type": "application/json",
+              "Accept-Encoding": "application/json",
+            },
+          }
+        )
+      }else {
+        // udpate secret 
+        await axios.put(
+          `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables/${existingSecret.key}`,
+          {
+            ...existingSecret,
+            value: secrets[existingSecret.key]
+          },
+          {
+            headers: {
+              "Authorization": `Bearer ${accessToken}`,
+              "Content-Type": "application/json",
+              "Accept-Encoding": "application/json",
+            },
+          }
+        )
+      }
+    }
+
+    // delete secrets 
+    for (let sec of getSecretsRes) {
+      if (!(sec.key in secrets)) {
+        await axios.delete(
+          `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables/${sec.key}`,
+          {
+            headers: {
+              "Authorization": `Bearer ${accessToken}`,
+            },
+          }
+        );
+      }
+    }
+  }catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error("Failed to sync secrets to GitLab");
+  }
+}
+
 export { syncSecrets };

backend/src/models/integration.ts

@@ -7,6 +7,7 @@ import {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
@@ -31,7 +32,8 @@ export interface IIntegration {
     | 'heroku' 
     | 'vercel' 
     | 'netlify' 
-    | 'github' 
+    | 'github'
+    | 'gitlab'
     | 'render' 
     | 'flyio'
     | 'circleci'
@@ -96,6 +98,7 @@ const integrationSchema = new Schema<IIntegration>(
         INTEGRATION_VERCEL,
         INTEGRATION_NETLIFY,
         INTEGRATION_GITHUB,
+        INTEGRATION_GITLAB,
         INTEGRATION_RENDER,
         INTEGRATION_FLYIO,
         INTEGRATION_CIRCLECI,

backend/src/models/integrationAuth.ts

@@ -7,6 +7,7 @@ import {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
@@ -16,7 +17,7 @@ import {
 export interface IIntegrationAuth {
   _id: Types.ObjectId;
   workspace: Types.ObjectId;
-  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio' | 'azure-key-vault' | 'circleci' | 'travisci' | 'aws-parameter-store' | 'aws-secret-manager';
+  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'gitlab' | 'render' | 'flyio' | 'azure-key-vault' | 'circleci' | 'travisci' | 'aws-parameter-store' | 'aws-secret-manager';
   teamId: string;
   accountId: string;
   refreshCiphertext?: string;
@@ -48,6 +49,7 @@ const integrationAuthSchema = new Schema<IIntegrationAuth>(
         INTEGRATION_VERCEL,
         INTEGRATION_NETLIFY,
         INTEGRATION_GITHUB,
+        INTEGRATION_GITLAB,
         INTEGRATION_RENDER,
         INTEGRATION_FLYIO,
         INTEGRATION_CIRCLECI,

backend/src/variables/index.ts

@@ -13,6 +13,7 @@ import {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
@@ -24,7 +25,9 @@ import {
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
   INTEGRATION_GITHUB_TOKEN_URL,
+  INTEGRATION_GITLAB_TOKEN_URL,
   INTEGRATION_HEROKU_API_URL,
+  INTEGRATION_GITLAB_API_URL,
   INTEGRATION_VERCEL_API_URL,
   INTEGRATION_NETLIFY_API_URL,
   INTEGRATION_RENDER_API_URL,
@@ -80,6 +83,7 @@ export {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
@@ -91,7 +95,9 @@ export {
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
   INTEGRATION_GITHUB_TOKEN_URL,
+  INTEGRATION_GITLAB_TOKEN_URL,
   INTEGRATION_HEROKU_API_URL,
+  INTEGRATION_GITLAB_API_URL,
   INTEGRATION_VERCEL_API_URL,
   INTEGRATION_NETLIFY_API_URL,
   INTEGRATION_RENDER_API_URL,

backend/src/variables/integration.ts

@@ -1,5 +1,6 @@
 import {
     CLIENT_ID_AZURE,
+    CLIENT_ID_GITLAB,
     TENANT_ID_AZURE
 } from '../config';
 import {
@@ -7,6 +8,7 @@ import {
   CLIENT_ID_NETLIFY,
   CLIENT_ID_GITHUB,
   CLIENT_SLUG_VERCEL,
+  CLIENT_SECRET_GITLAB,
 } from "../config";
 
 // integrations
@@ -17,6 +19,7 @@ const INTEGRATION_HEROKU = "heroku";
 const INTEGRATION_VERCEL = "vercel";
 const INTEGRATION_NETLIFY = "netlify";
 const INTEGRATION_GITHUB = "github";
+const INTEGRATION_GITLAB = "gitlab";
 const INTEGRATION_RENDER = "render";
 const INTEGRATION_FLYIO = "flyio";
 const INTEGRATION_CIRCLECI = "circleci";
@@ -27,6 +30,7 @@ const INTEGRATION_SET = new Set([
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
@@ -44,9 +48,12 @@ const INTEGRATION_VERCEL_TOKEN_URL =
 const INTEGRATION_NETLIFY_TOKEN_URL = "https://api.netlify.com/oauth/token";
 const INTEGRATION_GITHUB_TOKEN_URL =
   "https://github.com/login/oauth/access_token";
+const INTEGRATION_GITLAB_TOKEN_URL = "https://gitlab.com/oauth/token";
+
 
 // integration apps endpoints
 const INTEGRATION_HEROKU_API_URL = "https://api.heroku.com";
+const INTEGRATION_GITLAB_API_URL = "https://gitlab.com/api";
 const INTEGRATION_VERCEL_API_URL = "https://api.vercel.com";
 const INTEGRATION_NETLIFY_API_URL = "https://api.netlify.com";
 const INTEGRATION_RENDER_API_URL = "https://api.render.com";
@@ -92,6 +99,15 @@ const INTEGRATION_OPTIONS = [
         clientId: CLIENT_ID_GITHUB,
         docsLink: ''
     },
+    {
+        name: 'GitLab',
+        slug: 'gitlab',
+        image: 'GitLab.png',
+        isAvailable: true,
+        type: 'oauth',
+        clientId: CLIENT_ID_GITLAB, 
+        docsLink: ''
+    },
     {
         name: 'Render',
         slug: 'render',
@@ -175,6 +191,7 @@ export {
   INTEGRATION_VERCEL,
   INTEGRATION_NETLIFY,
   INTEGRATION_GITHUB,
+  INTEGRATION_GITLAB,
   INTEGRATION_RENDER,
   INTEGRATION_FLYIO,
   INTEGRATION_CIRCLECI,
@@ -186,7 +203,9 @@ export {
   INTEGRATION_VERCEL_TOKEN_URL,
   INTEGRATION_NETLIFY_TOKEN_URL,
   INTEGRATION_GITHUB_TOKEN_URL,
+  INTEGRATION_GITLAB_API_URL,
   INTEGRATION_HEROKU_API_URL,
+  INTEGRATION_GITLAB_TOKEN_URL,
   INTEGRATION_VERCEL_API_URL,
   INTEGRATION_NETLIFY_API_URL,
   INTEGRATION_RENDER_API_URL,

frontend/public/data/frequentConstants.ts

@@ -10,6 +10,7 @@ const integrationSlugNameMapping: Mapping = {
   'vercel': 'Vercel',
   'netlify': 'Netlify',
   'github': 'GitHub',
+  'gitlab': 'GitLab',
   'render': 'Render',
   'flyio': 'Fly.io',
   'circleci': 'CircleCI',

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

@@ -192,6 +192,9 @@ export default function Integrations() {
         case 'github':
           link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
           break;
+        case 'gitlab':
+          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`
           break;
@@ -241,6 +244,9 @@ export default function Integrations() {
         case 'github':
           link = `${window.location.origin}/integrations/github/create?integrationAuthId=${integrationAuth._id}`;
           break;
+        case 'gitlab':
+          link = `${window.location.origin}/integrations/gitlab/create?integrationAuthId=${integrationAuth._id}`;
+          break;
         case 'render':
           link = `${window.location.origin}/integrations/render/create?integrationAuthId=${integrationAuth._id}`;
           break;

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

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthApps,useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function GitLabCreateIntegrationPage() {
+    const router = useRouter();
+
+    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 as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [owner, setOwner] = useState<string | null>(null);
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+        
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+            setOwner(integrationAuthApps[0]?.owner ?? null);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+            if (!integrationAuth?._id) return;
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner,
+                path: null,
+                region: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <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>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="GitLab Repo"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`gitlab-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+GitLabCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/gitlab/oauth2/callback.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function GitLabOAuth2CallbackPage() {
+    const router = useRouter();
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'gitlab'
+                });
+
+                router.push(
+                    `/integrations/gitlab/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+GitLabOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);