Merge branch 'Infisical:main' into cloudflare-pages-integration

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

@@ -44,6 +44,7 @@ interface Integration {
   integration: string;
   targetEnvironment: string;
   workspace: string;
+  secretPath:string;
   integrationAuth: string;
 }
 
@@ -441,7 +442,15 @@ export default function Integrations() {
             handleDeleteIntegrationAuth={handleDeleteIntegrationAuth}
           />
         ) : (
-          <div />
+          <>
+            <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
+              <h1 className="text-3xl font-semibold">{t('integrations.cloud-integrations')}</h1>
+              <p className="text-base text-gray-400">{t('integrations.click-to-start')}</p>
+            </div>
+            <div className="mx-6 grid max-w-5xl grid-cols-4 grid-rows-2 gap-4">
+              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(elem => <div key={elem} className="bg-mineshaft-800 border border-mineshaft-600 animate-pulse h-32 rounded-md"/>)}
+            </div>
+          </>
         )}
         <FrameworkIntegrationSection frameworks={frameworkIntegrationOptions as any} />
       </div>

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}

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}

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}

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}

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}

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}

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}

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

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>

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}

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}

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}

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}

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}

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}

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}