Add support for custom environments in GitLab integration

backend/src/integrations/sync.ts

@@ -1554,8 +1554,14 @@ const syncSecretsGitLab = async ({
   accessToken: string;
 }) => {
   try {
+    interface GitLabSecret {
+      key: string;
+      value: string;
+      environment_scope: string;
+    }
+
     // get secrets from gitlab
-    const getSecretsRes = (
+    const getSecretsRes: GitLabSecret[] = (
       await request.get(
         `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables`,
         { 
@@ -1565,7 +1571,11 @@ const syncSecretsGitLab = async ({
           },
         }
       )
-    ).data;
+    )
+    .data
+    .filter((secret: GitLabSecret) => 
+      secret.environment_scope === integration.targetEnvironment
+    );
 
     for await (const key of Object.keys(secrets)) {
       const existingSecret = getSecretsRes.find((s: any) => s.key == key);
@@ -1578,7 +1588,7 @@ const syncSecretsGitLab = async ({
             protected: false,
             masked: false,
             raw: false,
-            environment_scope:'*'
+            environment_scope: integration.targetEnvironment
           },
           {
             headers: {
@@ -1589,21 +1599,23 @@ const syncSecretsGitLab = async ({
           }
         )
       } else {
-        // udpate secret 
-        await request.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",
+        // update secret 
+        if (secrets[key] !== existingSecret.value) {
+          await request.put(
+            `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables/${existingSecret.key}?filter[environment_scope]=${integration.targetEnvironment}`,
+            {
+              ...existingSecret,
+              value: secrets[existingSecret.key]
             },
-          }
-        )
+            {
+              headers: {
+                "Authorization": `Bearer ${accessToken}`,
+                "Content-Type": "application/json",
+                "Accept-Encoding": "application/json",
+              },
+            }
+          );
+        }
       }
     }
 
@@ -1611,7 +1623,7 @@ const syncSecretsGitLab = async ({
     for await (const sec of getSecretsRes) {
       if (!(sec.key in secrets)) {
         await request.delete(
-          `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables/${sec.key}`,
+          `${INTEGRATION_GITLAB_API_URL}/v4/projects/${integration?.appId}/variables/${sec.key}?filter[environment_scope]=${integration.targetEnvironment}`,
           {
             headers: {
               "Authorization": `Bearer ${accessToken}`,
@@ -1620,7 +1632,7 @@ const syncSecretsGitLab = async ({
         );
       }
     }
-  }catch (err) {
+  } catch (err) {
     Sentry.setUser(null);
     Sentry.captureException(err);
     throw new Error("Failed to sync secrets to GitLab");

frontend/src/components/integrations/Integration.tsx

@@ -191,6 +191,17 @@ const IntegrationTile = ({
               />
             </div>
           );
+        case 'gitlab':
+          return (
+            <div>
+              <div className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</div>
+              <ListBox
+                data={null}
+                isSelected={integration.targetEnvironment}
+                onChange={setIntegrationTargetEnvironment}
+              />
+            </div>
+          );
         default:
           return <div />;
       }

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

@@ -2,7 +2,15 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import queryString from 'query-string';
 
-import { Button, Card, CardTitle, FormControl, Select, SelectItem } from '../../../components/v2';
+import { 
+  Button, 
+  Card, 
+  CardTitle, 
+  FormControl, 
+  Input,
+  Select, 
+  SelectItem
+} from '../../../components/v2';
 import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById,
@@ -37,6 +45,7 @@ export default function GitLabCreateIntegrationPage() {
   const [targetEntity, setTargetEntity] = useState(gitLabEntities[0].value);
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
   const [targetAppId, setTargetAppId] = useState('');
+  const [targetEnvironment, setTargetEnvironment] = useState('');
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -86,7 +95,7 @@ export default function GitLabCreateIntegrationPage() {
           )?.name ?? null,
         appId: targetAppId,
         sourceEnvironment: selectedSourceEnvironment,
-        targetEnvironment: null,
+        targetEnvironment: targetEnvironment === '' ? '*' : targetEnvironment,
         targetEnvironmentId: null,
         targetService: null,
         targetServiceId: null,
@@ -189,6 +198,15 @@ export default function GitLabCreateIntegrationPage() {
             )}
           </Select>
         </FormControl>
+        <FormControl
+          label="GitLab Environment Scope (Optional)"
+        >
+          <Input 
+            placeholder="*" 
+            value={targetEnvironment} 
+            onChange={(e) => setTargetEnvironment(e.target.value)} 
+          />
+        </FormControl>
         <Button
           onClick={handleButtonClick}
           color="mineshaft"