feat(folder-scoped-integrations): implemented ui for folders in integration page

2026-09-22 13:39:35 +00:00 · 2023-06-15 22:46:15 +05:30
parent 2471418591
commit a743c12c1b
20 changed files with 417 additions and 153 deletions
--- a/frontend/src/components/integrations/Integration.tsx
+++ b/frontend/src/components/integrations/Integration.tsx
@@ -4,7 +4,11 @@ import { useRouter } from 'next/router';
 import { faArrowRight, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
-import { contextNetlifyMapping, integrationSlugNameMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
+import {
+  contextNetlifyMapping,
+  integrationSlugNameMapping,
+  reverseContextNetlifyMapping
+} from 'public/data/frequentConstants';

 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
@@ -27,6 +31,7 @@ interface Integration {
  targetEnvironment: string;
  workspace: string;
  integrationAuth: string;
+  secretPath: string;
 }

 interface IntegrationApp {
@@ -55,7 +60,6 @@ const IntegrationTile = ({
  environments = [],
  handleDeleteIntegration
 }: Props) => {
-
  const [integrationEnvironment, setIntegrationEnvironment] = useState<Props['environments'][0]>(
    environments.find(({ slug }) => slug === integration?.environment) || {
      name: '',
@@ -74,16 +78,16 @@ const IntegrationTile = ({
      });

      setApps(tempApps);
-      
+
      if (integration?.app) {
        setIntegrationApp(integration.app);
      } else if (integration?.path && integration?.region) {
        setIntegrationApp(`${integration.path} (${integration.region})`);
      } else if (tempApps.length > 0) {
-          setIntegrationApp(tempApps[0].name)
-        } else {
-          setIntegrationApp('');
-        }
+        setIntegrationApp(tempApps[0].name);
+      } else {
+        setIntegrationApp('');
+      }

      switch (integration.integration) {
        case 'vercel':
@@ -212,12 +216,15 @@ const IntegrationTile = ({
    return <div />;
  };

-  if (!integrationApp && integration.integration !== "checkly") return  <div />;
-  
-  const isSelected = integration.integration === 'hashicorp-vault' ? `${integration.app} - path: ${integration.path}` : integrationApp;
+  if (!integrationApp && integration.integration !== 'checkly') return <div />;
+
+  const isSelected =
+    integration.integration === 'hashicorp-vault'
+      ? `${integration.app} - path: ${integration.path}`
+      : integrationApp;

  return (
-    <div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md bg-mineshaft-800 border border-mineshaft-600 p-6">
+    <div className="mx-6 mb-8 flex max-w-5xl justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6">
      <div className="flex">
        <div>
          <p className="mb-2 text-xs font-semibold text-gray-400">ENVIRONMENT</p>
@@ -235,33 +242,46 @@ const IntegrationTile = ({
            isFull
          />
        </div>
+        <div className="ml-2">
+          <p className="mb-2 text-xs font-semibold text-gray-400">SECRET PATH</p>
+          <div className="cursor-default rounded-md bg-white/[.07] py-2.5 pl-4 pr-10 text-sm font-semibold text-gray-300">
+            {/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
+            {integration.secretPath}
+          </div>
+        </div>
        <div className="pt-2">
          <FontAwesomeIcon icon={faArrowRight} className="mx-4 mt-8 text-gray-400" />
        </div>
        <div className="mr-2">
-          <p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
-          <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300 cursor-default">
+          <p className="mb-2 text-xs font-semibold text-gray-400">INTEGRATION</p>
+          <div className="cursor-default rounded-md bg-white/[.07] py-2.5 pl-4 pr-10 text-sm font-semibold text-gray-300">
            {/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
            {integrationSlugNameMapping[integration.integration]}
          </div>
        </div>
        <div className="mr-2">
          <div className="mb-2 text-xs font-semibold text-gray-400">APP</div>
-          {integrationApp ? <div title={integrationApp}>
-            <ListBox
-            data={!integration.isActive ? apps.map((app) => app.name) : null}
-            isSelected={isSelected}
-            onChange={(app) => {
-              setIntegrationApp(app);
-            }}
-          />
-          </div> : <div className='w-52 h-10 rounded-md bg-mineshaft-600 animate-pulse px-4 font-bold py-2'>-</div>}
+          {integrationApp ? (
+            <div title={integrationApp}>
+              <ListBox
+                data={!integration.isActive ? apps.map((app) => app.name) : null}
+                isSelected={isSelected}
+                onChange={(app) => {
+                  setIntegrationApp(app);
+                }}
+              />
+            </div>
+          ) : (
+            <div className="h-10 w-52 animate-pulse rounded-md bg-mineshaft-600 px-4 py-2 font-bold">
+              -
+            </div>
+          )}
        </div>
        {renderIntegrationSpecificParams(integration)}
      </div>
-      <div className="flex items-end cursor-default">
+      <div className="flex cursor-default items-end">
        {integration.isActive ? (
-          <div className="flex max-w-5xl flex-row items-center rounded-md bg-mineshaft-600 p-[0.44rem] px-4 border border-mineshaft-500">
+          <div className="flex max-w-5xl flex-row items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 p-[0.44rem] px-4">
            <FontAwesomeIcon icon={faCheck} className="mr-2.5 text-lg text-primary" />
            <div className="font-semibold text-gray-300">In Sync</div>
          </div>
--- a/frontend/src/components/integrations/IntegrationSection.tsx
+++ b/frontend/src/components/integrations/IntegrationSection.tsx
@@ -23,6 +23,7 @@ interface Integration {
  targetEnvironment: string;
  workspace: string;
  integrationAuth: string;
+  secretPath: string;
 }

 const ProjectIntegrationSection = ({
--- a/frontend/src/pages/api/integrations/createIntegration.ts
+++ b/frontend/src/pages/api/integrations/createIntegration.ts
@@ -3,6 +3,7 @@ import SecurityClient from '@app/components/utilities/SecurityClient';
 interface Props {
  integrationAuthId: string;
  isActive: boolean;
+  secretPath: string;
  app: string | null;
  appId: string | null;
  sourceEnvironment: string;
@@ -20,19 +21,20 @@ interface Props {
 * @param {String} obj.accessToken - id of integration authorization for which to create the integration
 * @returns
 */
-const createIntegration = ({ 
-    integrationAuthId,
-    isActive,
-    app,
-    appId,
-    sourceEnvironment,
-    targetEnvironment,
-    targetEnvironmentId,
-    targetService,
-    targetServiceId,
-    owner,
-    path,
-    region
+const createIntegration = ({
+  integrationAuthId,
+  isActive,
+  app,
+  appId,
+  sourceEnvironment,
+  targetEnvironment,
+  targetEnvironmentId,
+  targetService,
+  targetServiceId,
+  owner,
+  path,
+  region,
+  secretPath
 }: Props) =>
  SecurityClient.fetchCall('/api/v1/integration', {
    method: 'POST',
@@ -40,18 +42,19 @@ const createIntegration = ({
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
-        integrationAuthId,
-        isActive,
-        app,
-        appId,
-        sourceEnvironment,
-        targetEnvironment,
-        targetEnvironmentId,
-        targetService,
-        targetServiceId,
-        owner,
-        path,
-        region
+      integrationAuthId,
+      isActive,
+      app,
+      appId,
+      sourceEnvironment,
+      targetEnvironment,
+      targetEnvironmentId,
+      targetService,
+      targetServiceId,
+      owner,
+      path,
+      region,
+      secretPath
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
@@ -61,4 +64,4 @@ const createIntegration = ({
    return undefined;
  });

-export default createIntegration;
+export default createIntegration;
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@@ -44,6 +44,7 @@ interface Integration {
  integration: string;
  targetEnvironment: string;
  workspace: string;
+  secretPath:string;
  integrationAuth: string;
 }

--- a/frontend/src/pages/integrations/aws-parameter-store/create.tsx
+++ b/frontend/src/pages/integrations/aws-parameter-store/create.tsx
@@ -56,6 +56,7 @@ export default function AWSParameterStoreCreateIntegrationPage() {
  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [selectedAWSRegion, setSelectedAWSRegion] = useState('');
  const [path, setPath] = useState('');
  const [pathErrorText, setPathErrorText] = useState('');
@@ -69,9 +70,9 @@ export default function AWSParameterStoreCreateIntegrationPage() {
    }
  }, [workspace]);

-  const isValidAWSParameterStorePath = (secretPath: string) => {
+  const isValidAWSParameterStorePath = (awsStorePath: string) => {
    const pattern = /^\/([\w-]+\/)*[\w-]+\/$/;
-    return pattern.test(secretPath) && secretPath.length <= 2048;
+    return pattern.test(awsStorePath) && awsStorePath.length <= 2048;
  };

  const handleButtonClick = async () => {
@@ -101,7 +102,8 @@ export default function AWSParameterStoreCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path,
-        region: selectedAWSRegion
+        region: selectedAWSRegion,
+        secretPath
      });

      setIsLoading(false);
@@ -133,6 +135,13 @@ export default function AWSParameterStoreCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="AWS Region">
          <Select
            value={selectedAWSRegion}
--- a/frontend/src/pages/integrations/aws-secret-manager/create.tsx
+++ b/frontend/src/pages/integrations/aws-secret-manager/create.tsx
@@ -56,6 +56,7 @@ export default function AWSSecretManagerCreateIntegrationPage() {
  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [selectedAWSRegion, setSelectedAWSRegion] = useState('');
  const [targetSecretName, setTargetSecretName] = useState('');
  const [targetSecretNameErrorText, setTargetSecretNameErrorText] = useState('');
@@ -100,7 +101,8 @@ export default function AWSSecretManagerCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: selectedAWSRegion
+        region: selectedAWSRegion,
+        secretPath
      });

      setIsLoading(false);
@@ -132,6 +134,13 @@ export default function AWSSecretManagerCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="AWS Region">
          <Select
            value={selectedAWSRegion}
--- a/frontend/src/pages/integrations/azure-key-vault/create.tsx
+++ b/frontend/src/pages/integrations/azure-key-vault/create.tsx
@@ -24,6 +24,7 @@ export default function AzureKeyVaultCreateIntegrationPage() {
  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');

  const [vaultBaseUrl, setVaultBaseUrl] = useState('');
  const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
@@ -63,7 +64,8 @@ export default function AzureKeyVaultCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });
      setIsLoading(false);

@@ -93,6 +95,13 @@ export default function AzureKeyVaultCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl
          label="Vault URI"
          errorText={vaultBaseUrlErrorText}
--- a/frontend/src/pages/integrations/checkly/create.tsx
+++ b/frontend/src/pages/integrations/checkly/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
@@ -22,6 +30,8 @@ export default function ChecklyCreateIntegrationPage() {
  });

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
+
  const [targetApp, setTargetApp] = useState('');
  const [targetAppId, setTargetAppId] = useState('');

@@ -63,7 +73,8 @@ export default function ChecklyCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -80,8 +91,13 @@ export default function ChecklyCreateIntegrationPage() {
    integrationAuthApps &&
    targetApp ? (
    <div className="flex h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
-      <Card className="max-w-lg rounded-md p-0 border border-mineshaft-600">
-        <CardTitle className="text-left px-6" subTitle="Choose which environment in Infisical you want to sync with your Checkly account.">Checkly Integration</CardTitle>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <CardTitle
+          className="px-6 text-left"
+          subTitle="Choose which environment in Infisical you want to sync with your Checkly account."
+        >
+          Checkly Integration
+        </CardTitle>
        <FormControl label="Infisical Project Environment" className="mt-2 px-6">
          <Select
            value={selectedSourceEnvironment}
@@ -98,6 +114,13 @@ export default function ChecklyCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Checkly Account" className="mt-4 px-6">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/circleci/create.tsx
+++ b/frontend/src/pages/integrations/circleci/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
@@ -22,6 +30,8 @@ export default function CircleCICreateIntegrationPage() {
  });

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
+
  const [targetApp, setTargetApp] = useState('');

  const [isLoading, setIsLoading] = useState(false);
@@ -62,7 +72,8 @@ export default function CircleCICreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -97,6 +108,13 @@ export default function CircleCICreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="CircleCI Project" className="mt-4">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/flyio/create.tsx
+++ b/frontend/src/pages/integrations/flyio/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
@@ -22,6 +30,8 @@ export default function FlyioCreateIntegrationPage() {
  });

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
+
  const [targetApp, setTargetApp] = useState('');

  const [isLoading, setIsLoading] = useState(false);
@@ -61,7 +71,8 @@ export default function FlyioCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -96,6 +107,13 @@ export default function FlyioCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Fly.io App" className="mt-4">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/github/create.tsx
+++ b/frontend/src/pages/integrations/github/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
@@ -22,6 +30,7 @@ export default function GitHubCreateIntegrationPage() {
  });

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [targetAppId, setTargetAppId] = useState('');

  const [isLoading, setIsLoading] = useState(false);
@@ -66,7 +75,8 @@ export default function GitHubCreateIntegrationPage() {
        targetServiceId: null,
        owner: targetApp.owner,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -100,6 +110,13 @@ export default function GitHubCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="GitHub Repo" className="mt-4">
          <Select
            value={targetAppId}
--- a/frontend/src/pages/integrations/gitlab/create.tsx
+++ b/frontend/src/pages/integrations/gitlab/create.tsx
@@ -2,13 +2,13 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import queryString from 'query-string';

-import { 
-  Button, 
-  Card, 
-  CardTitle, 
-  FormControl, 
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
  Input,
-  Select, 
+  Select,
  SelectItem
 } from '../../../components/v2';
 import {
@@ -44,6 +44,7 @@ export default function GitLabCreateIntegrationPage() {

  const [targetEntity, setTargetEntity] = useState(gitLabEntities[0].value);
  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [targetAppId, setTargetAppId] = useState('');
  const [targetEnvironment, setTargetEnvironment] = useState('');

@@ -101,7 +102,8 @@ export default function GitLabCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -136,6 +138,13 @@ export default function GitLabCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="GitLab Integration Type">
          <Select
            value={targetEntity}
@@ -198,13 +207,11 @@ export default function GitLabCreateIntegrationPage() {
            )}
          </Select>
        </FormControl>
-        <FormControl
-          label="GitLab Environment Scope (Optional)"
-        >
-          <Input 
-            placeholder="*" 
-            value={targetEnvironment} 
-            onChange={(e) => setTargetEnvironment(e.target.value)} 
+        <FormControl label="GitLab Environment Scope (Optional)">
+          <Input
+            placeholder="*"
+            value={targetEnvironment}
+            onChange={(e) => setTargetEnvironment(e.target.value)}
          />
        </FormControl>
        <Button
--- a/frontend/src/pages/integrations/hashicorp-vault/create.tsx
+++ b/frontend/src/pages/integrations/hashicorp-vault/create.tsx
@@ -1,8 +1,16 @@
-
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import queryString from 'query-string';
-import { Button, Card, CardTitle, FormControl, Input, Select, SelectItem } from '../../../components/v2';
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from '../../../components/v2';
 import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
 import { useGetWorkspaceById } from '../../../hooks/api/workspace';
 import createIntegration from '../../api/integrations/createIntegration';
@@ -16,60 +24,58 @@ export default function HashiCorpVaultCreateIntegrationPage() {
  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? '');

  const [vaultEnginePath, setVaultEnginePath] = useState('');
-  const [vaultEnginePathErrorText, setVaultEnginePathErrorText ] = useState('');
+  const [vaultEnginePathErrorText, setVaultEnginePathErrorText] = useState('');

  const [vaultSecretPath, setVaultSecretPath] = useState('');
  const [vaultSecretPathErrorText, setVaultSecretPathErrorText] = useState('');

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [isLoading, setIsLoading] = useState(false);

-  const isValidVaultPath = (secretPath: string) => {
-    return !(
-      secretPath.length === 0 || 
-      secretPath.startsWith('/') || 
-      secretPath.endsWith('/')
-    );
+  const isValidVaultPath = (vaultPath: string) => {
+    return !(vaultPath.length === 0 || vaultPath.startsWith('/') || vaultPath.endsWith('/'));
  };

  const handleButtonClick = async () => {
    try {
-        if (!integrationAuth?._id) return;
+      if (!integrationAuth?._id) return;

-        if (!isValidVaultPath(vaultEnginePath)) {
-          setVaultEnginePathErrorText('Vault KV Secrets Engine Path must be valid like kv');
-        } else {
-          setVaultEnginePathErrorText('');
-        }
-        
-        if (!isValidVaultPath(vaultSecretPath)) {
-          setVaultSecretPathErrorText('Vault Secret(s) Path must be valid like machine/dev');
-        } else {
-          setVaultSecretPathErrorText('');  
-        }
-        
-        if (!isValidVaultPath || !isValidVaultPath(vaultSecretPath)) return;
+      if (!isValidVaultPath(vaultEnginePath)) {
+        setVaultEnginePathErrorText('Vault KV Secrets Engine Path must be valid like kv');
+      } else {
+        setVaultEnginePathErrorText('');
+      }

-        setIsLoading(true);
-        
-        await createIntegration({
-            integrationAuthId: integrationAuth?._id,
-            isActive: true,
-            app: vaultEnginePath,
-            appId: null,
-            sourceEnvironment: selectedSourceEnvironment,
-            targetEnvironment: null,
-            targetEnvironmentId: null,
-            targetService: null,
-            targetServiceId: null,
-            owner: null,
-            path: vaultSecretPath,
-            region: null
-        });
-      
-        setIsLoading(false);
+      if (!isValidVaultPath(vaultSecretPath)) {
+        setVaultSecretPathErrorText('Vault Secret(s) Path must be valid like machine/dev');
+      } else {
+        setVaultSecretPathErrorText('');
+      }

-        router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
+      if (!isValidVaultPath || !isValidVaultPath(vaultSecretPath)) return;
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: vaultEnginePath,
+        appId: null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: vaultSecretPath,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem('projectData.id')}`);
    } catch (err) {
      console.error(err);
    }
@@ -95,34 +101,41 @@ export default function HashiCorpVaultCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl
          label="Vault KV Secrets Engine Path"
          errorText={vaultEnginePathErrorText}
          isError={vaultEnginePathErrorText !== '' ?? false}
        >
-            <Input 
-                placeholder="kv" 
-                value={vaultEnginePath} 
-                onChange={(e) => setVaultEnginePath(e.target.value)} 
-            />
+          <Input
+            placeholder="kv"
+            value={vaultEnginePath}
+            onChange={(e) => setVaultEnginePath(e.target.value)}
+          />
        </FormControl>
        <FormControl
          label="Vault Secret(s) Path"
          errorText={vaultSecretPathErrorText}
          isError={vaultSecretPathErrorText !== '' ?? false}
        >
-            <Input 
-                placeholder="machine/dev" 
-                value={vaultSecretPath} 
-                onChange={(e) => setVaultSecretPath(e.target.value)} 
-            />
+          <Input
+            placeholder="machine/dev"
+            value={vaultSecretPath}
+            onChange={(e) => setVaultSecretPath(e.target.value)}
+          />
        </FormControl>
        <Button
-            onClick={handleButtonClick}
-            color="mineshaft"
-            className="mt-4"
-            isLoading={isLoading}
-            isDisabled={!(isValidVaultPath(vaultEnginePath) && isValidVaultPath(vaultSecretPath))}
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={!(isValidVaultPath(vaultEnginePath) && isValidVaultPath(vaultSecretPath))}
        >
          Create Integration
        </Button>
--- a/frontend/src/pages/integrations/heroku/create.tsx
+++ b/frontend/src/pages/integrations/heroku/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
@@ -23,6 +31,7 @@ export default function HerokuCreateIntegrationPage() {

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
  const [targetApp, setTargetApp] = useState('');
+  const [secretPath, setSecretPath] = useState('/');

  const [isLoading, setIsLoading] = useState(false);

@@ -60,7 +69,8 @@ export default function HerokuCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -94,6 +104,13 @@ export default function HerokuCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Heroku App" className="mt-4">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/netlify/create.tsx
+++ b/frontend/src/pages/integrations/netlify/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
@@ -31,7 +39,7 @@ export default function NetlifyCreateIntegrationPage() {
  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
  const [targetApp, setTargetApp] = useState('');
  const [targetEnvironment, setTargetEnvironment] = useState('');
-
+  const [secretPath, setSecretPath] = useState('/');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
@@ -71,7 +79,8 @@ export default function NetlifyCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -106,6 +115,13 @@ export default function NetlifyCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Netlify Site">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/railway/create.tsx
+++ b/frontend/src/pages/integrations/railway/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,
@@ -20,6 +28,7 @@ export default function RailwayCreateIntegrationPage() {
  const [targetServiceId, setTargetServiceId] = useState('');

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [isLoading, setIsLoading] = useState(false);

  const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
@@ -99,7 +108,8 @@ export default function RailwayCreateIntegrationPage() {
        targetServiceId: targetService ? targetService.serviceId : null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -134,6 +144,13 @@ export default function RailwayCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Railway Project">
          <Select
            value={targetAppId}
--- a/frontend/src/pages/integrations/render/create.tsx
+++ b/frontend/src/pages/integrations/render/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
@@ -23,7 +31,7 @@ export default function RenderCreateIntegrationPage() {

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
  const [targetApp, setTargetApp] = useState('');
-
+  const [secretPath, setSecretPath] = useState('/');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
@@ -62,7 +70,8 @@ export default function RenderCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -97,6 +106,13 @@ export default function RenderCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Render Service" className="mt-4">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/supabase/create.tsx
+++ b/frontend/src/pages/integrations/supabase/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
@@ -22,6 +30,7 @@ export default function SupabaseCreateIntegrationPage() {
  });

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [targetApp, setTargetApp] = useState('');

  const [isLoading, setIsLoading] = useState(false);
@@ -62,7 +71,8 @@ export default function SupabaseCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -97,6 +107,13 @@ export default function SupabaseCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Supabase Project" className="mt-4">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/travisci/create.tsx
+++ b/frontend/src/pages/integrations/travisci/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
@@ -23,7 +31,7 @@ export default function TravisCICreateIntegrationPage() {

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
  const [targetApp, setTargetApp] = useState('');
-
+  const [secretPath, setSecretPath] = useState('/');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
@@ -62,7 +70,8 @@ export default function TravisCICreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path: null,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -97,6 +106,13 @@ export default function TravisCICreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Travis CI Project" className="mt-4">
          <Select
            value={targetApp}
--- a/frontend/src/pages/integrations/vercel/create.tsx
+++ b/frontend/src/pages/integrations/vercel/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,
@@ -21,6 +29,7 @@ export default function VercelCreateIntegrationPage() {
  const router = useRouter();

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+  const [secretPath, setSecretPath] = useState('/');
  const [targetAppId, setTargetAppId] = useState('');
  const [targetEnvironment, setTargetEnvironment] = useState('');
  const [targetBranch, setTargetBranch] = useState('');
@@ -84,7 +93,8 @@ export default function VercelCreateIntegrationPage() {
        targetServiceId: null,
        owner: null,
        path,
-        region: null
+        region: null,
+        secretPath
      });

      setIsLoading(false);
@@ -119,6 +129,13 @@ export default function VercelCreateIntegrationPage() {
            ))}
          </Select>
        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
        <FormControl label="Vercel App">
          <Select
            value={targetAppId}