Merge remote-tracking branch 'refs/remotes/origin/main' into circleci-integration-branch

2026-10-15 07:35:09 +00:00 · 2023-02-11 17:55:59 +05:45
parent d96b5943b9 8fd2578a6d
commit 295b363d8a
137 changed files with 5954 additions and 499 deletions
@@ -6,13 +6,17 @@ import { appWithTranslation } from 'next-i18next';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import { QueryClientProvider } from '@tanstack/react-query';

-import Layout from '@app/components/basic/Layout';
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { publicPaths } from '@app/const';
-import { SubscriptionProvider } from '@app/context';
-import { AuthProvider } from '@app/context/AuthContext';
-import { WorkspaceProvider } from '@app/context/WorkspaceContext';
+import {
+  AuthProvider,
+  OrgProvider,
+  SubscriptionProvider,
+  UserProvider,
+  WorkspaceProvider
+} from '@app/context';
+import { AppLayout } from '@app/layouts';
 import { queryClient } from '@app/reactQuery';

 import '@fortawesome/fontawesome-svg-core/styles.css';
@@ -71,13 +75,17 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <WorkspaceProvider>
-          <SubscriptionProvider>
-            <NotificationProvider>
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </NotificationProvider>
-          </SubscriptionProvider>
+          <OrgProvider>
+            <SubscriptionProvider>
+              <UserProvider>
+                <NotificationProvider>
+                  <AppLayout>
+                    <Component {...pageProps} />
+                  </AppLayout>
+                </NotificationProvider>
+              </UserProvider>
+            </SubscriptionProvider>
+          </OrgProvider>
        </WorkspaceProvider>
      </AuthProvider>
    </QueryClientProvider>
@@ -8,6 +8,8 @@ interface Props {
  sourceEnvironment: string;
  targetEnvironment: string | null;
  owner: string | null;
+  path: string | null;
+  region: string | null;
 }
 /**
 * This route creates a new integration based on the integration authorization with id [integrationAuthId]
@@ -22,7 +24,9 @@ const createIntegration = ({
    appId,
    sourceEnvironment,
    targetEnvironment,
-    owner
+    owner,
+    path,
+    region
 }: Props) =>
  SecurityClient.fetchCall('/api/v1/integration', {
    method: 'POST',
@@ -36,7 +40,9 @@ const createIntegration = ({
        appId,
        sourceEnvironment,
        targetEnvironment,
-        owner
+        owner,
+        path,
+        region
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
@@ -3,6 +3,7 @@ import SecurityClient from '@app/components/utilities/SecurityClient';
 interface Props {
    workspaceId: string | null;
    integration: string | undefined;
+    accessId: string | null;
    accessToken: string;
 }
 /**
@@ -19,6 +20,7 @@ interface Props {
 const saveIntegrationAccessToken = ({ 
    workspaceId,
    integration,
+    accessId,
    accessToken
 }: Props) =>
  SecurityClient.fetchCall(`/api/v1/integration-auth/access-token`, {
@@ -29,13 +31,14 @@ const saveIntegrationAccessToken = ({
    body: JSON.stringify({
        workspaceId,
        integration,
+        accessId,
        accessToken
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
      return (await res.json()).integrationAuth;
    }
-    console.log('Failed to save integration access token');
+    console.log('Failed to save integration access details');
    return undefined;
  });

@@ -824,7 +824,7 @@ export default function Dashboard() {
                    className='group flex flex-col items-center bg-mineshaft-800 border-b-2 border-mineshaft-500 duration-100 sticky top-0 z-[60]'
                  >
                    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-                      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+                      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
                        <div className='text-transparent text-xs flex items-center justify-center w-14 h-10 cursor-default'>0</div>
                        <span className='px-2 text-bunker-300 font-semibold'>Key</span>
                        {!snapshotData && <IconButton 
@@ -871,7 +871,10 @@ export default function Dashboard() {
                  <div className="bg-mineshaft-800 rounded-b-md border-bunker-600">
                    {!snapshotData &&
                      data
-                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()) || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase()))
+                        ?.filter((row) => 
+                          row.key?.toUpperCase().includes(searchKeys.toUpperCase()) 
+                          || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase())
+                          || row.comment?.toUpperCase().includes(searchKeys.toUpperCase()))
                        .filter((row) => !sharedToHide.includes(row.id))
                        .map((keyPair) => (
                          <KeyPair
@@ -992,7 +995,7 @@ export default function Dashboard() {
            toggleSidebar={toggleSidebar}
            data={data.filter(
              (row: SecretDataProps) =>
-                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
+                row.id === sidebarSecretId
            )}
            modifyKey={listenChangeKey}
            modifyValue={listenChangeValue}
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faSlack } from '@fortawesome/free-brands-svg-icons';
@@ -141,7 +142,11 @@ export default function Home() {
  }, []);

  return (
-    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-20 h-screen">
+    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-4">
+      <Head>
+        <title>Infisical Guide</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
      <div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
        <div className="text-3xl font-bold text-left w-full">Your quick start guide</div>
        <div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">
@@ -174,6 +174,12 @@ export default function Integrations() {
        case 'azure-key-vault':
          link = `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
          break;
+        case 'aws-parameter-store':
+          link = `${window.location.origin}/integrations/aws-parameter-store/authorize`;
+          break;
+        case 'aws-secret-manager':
+          link = `${window.location.origin}/integrations/aws-secret-manager/authorize`;
+          break;
        case 'heroku':
          link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
          break;
@@ -214,6 +220,12 @@ export default function Integrations() {
        case 'azure-key-vault':
          link = `${window.location.origin}/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`;
          break;
+        case 'aws-parameter-store':
+          link = `${window.location.origin}/integrations/aws-parameter-store/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'aws-secret-manager':
+          link = `${window.location.origin}/integrations/aws-secret-manager/create?integrationAuthId=${integrationAuth._id}`;
+          break;
        case 'heroku':
          link = `${window.location.origin}/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`;
          break;
@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input,
+} from '../../../components/v2';
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function AWSParameterStoreAuthorizeIntegrationPage() {
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
+    
+    const [accessKey, setAccessKey] = useState('');
+    const [accessKeyErrorText, setAccessKeyErrorText] = useState('');
+    const [accessSecretKey, setAccessSecretKey] = useState('');
+    const [accessSecretKeyErrorText, setAccessSecretKeyErrorText] = useState('');
+        
+    const handleButtonClick = async () => {
+        try {
+            setAccessKeyErrorText('');
+            setAccessSecretKeyErrorText('');
+
+            if (accessKey.length === 0) {
+                setAccessKeyErrorText('Access key cannot be blank');
+                return;
+            }
+
+            if (accessSecretKey.length === 0) {
+                setAccessSecretKeyErrorText('Secret access key cannot be blank');
+                return;
+            }
+
+            setIsLoading(true);
+            
+            const integrationAuth = await saveIntegrationAccessToken({
+                workspaceId: localStorage.getItem('projectData.id'),
+                integration: 'aws-parameter-store',
+                accessId: accessKey,
+                accessToken: accessSecretKey
+            });
+            
+            setAccessKey('');
+            setAccessSecretKey('');
+            setIsLoading(false);
+            
+            router.push(
+                `/integrations/aws-parameter-store/create?integrationAuthId=${integrationAuth._id}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center mb-4'>AWS Parameter Store Integration</CardTitle>
+         <FormControl
+          label="Access Key ID"
+          errorText={accessKeyErrorText}
+          isError={accessKeyErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder=''
+            value={accessKey}
+            onChange={(e) => setAccessKey(e.target.value)}
+          />
+        </FormControl>
+        <FormControl
+          label="Secret Access Key"
+          errorText={accessSecretKeyErrorText}
+          isError={accessSecretKeyErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder=''
+            value={accessSecretKey}
+            onChange={(e) => setAccessSecretKey(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Connect to AWS Parameter Store
+        </Button>
+      </Card>
+    </div>
+  )
+}
+
+AWSParameterStoreAuthorizeIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
@@ -0,0 +1,178 @@
+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, 
+    Input,
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+const awsRegions = [
+    { name: 'US East (Ohio)', slug: 'us-east-2' },
+    { name: 'US East (N. Virginia)', slug: 'us-east-1' },
+    { name: 'US West (N. California)', slug: 'us-west-1' },
+    { name: 'US West (Oregon)', slug: 'us-west-2' },
+    { name: 'Africa (Cape Town)', slug: 'af-south-1' },
+    { name: 'Asia Pacific (Hong Kong)', slug: 'ap-east-1' },
+    { name: 'Asia Pacific (Hyderabad)', slug: 'ap-south-2' },
+    { name: 'Asia Pacific (Jakarta)', slug: 'ap-southeast-3' },
+    { name: 'Asia Pacific (Melbourne)', slug: 'ap-southeast-4' },
+    { name: 'Asia Pacific (Mumbai)', slug: 'ap-south-1' },
+    { name: 'Asia Pacific (Osaka)', slug: 'ap-northeast-3' },
+    { name: 'Asia Pacific (Seoul)', slug: 'ap-northeast-2' },
+    { name: 'Asia Pacific (Singapore)', slug: 'ap-southeast-1' },
+    { name: 'Asia Pacific (Sydney)', slug: 'ap-southeast-2' },
+    { name: 'Asia Pacific (Tokyo)', slug: 'ap-northeast-1' },
+    { name: 'Canada (Central)', slug: 'ca-central-1' },
+    { name: 'Europe (Frankfurt)', slug: 'eu-central-1' },
+    { name: 'Europe (Ireland)', slug: 'eu-west-1' },
+    { name: 'Europe (London)', slug: 'eu-west-2' },
+    { name: 'Europe (Milan)', slug: 'eu-south-1' },
+    { name: 'Europe (Paris)', slug: 'eu-west-3' },
+    { name: 'Europe (Spain)', slug: 'eu-south-2' },
+    { name: 'Europe (Stockholm)', slug: 'eu-north-1' },
+    { name: 'Europe (Zurich)', slug: 'eu-central-2' },
+    { name: 'Middle East (Bahrain)', slug: 'me-south-1' },
+    { name: 'Middle East (UAE)', slug: 'me-central-1' },
+    { name: 'South America (Sao Paulo)', slug: 'sa-east-1' },
+    { name: 'AWS GovCloud (US-East)', slug: 'us-gov-east-1' },
+    { name: 'AWS GovCloud (US-West)', slug: 'us-gov-west-1' },
+]
+
+export default function AWSParameterStoreCreateIntegrationPage() {
+    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 [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [selectedAWSRegion, setSelectedAWSRegion] = useState('');
+    const [path, setPath] = useState('');
+    const [pathErrorText, setPathErrorText] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+            setSelectedAWSRegion(awsRegions[0].slug);
+        }
+    }, [workspace]);
+    
+   const isValidAWSParameterStorePath = (secretPath: string) => {
+      const pattern = /^\/([\w-]+\/)*[\w-]+\/$/;
+      return pattern.test(secretPath) && secretPath.length <= 2048;
+    }
+        
+    const handleButtonClick = async () => {
+        try {
+            
+            if (path !== '') {
+                // case: path is not empty
+                 if (!isValidAWSParameterStorePath(path)) {
+                    // case: path is not valid for aws parameter store
+                    setPathErrorText('Path must be a valid path for SSM like /project/env/');
+                    return;
+                 }
+            }
+
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: null,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null,
+                path,
+                region: selectedAWSRegion
+            }); 
+            
+            setIsLoading(false);
+            setPathErrorText('');
+
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>AWS Parameter Store 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={`flyio-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="AWS Region"
+        >
+          <Select
+            value={selectedAWSRegion}
+            onValueChange={(val) => setSelectedAWSRegion(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {awsRegions.map((awsRegion) => (
+              <SelectItem value={awsRegion.slug} key={`flyio-environment-${awsRegion.slug}`}>
+                {awsRegion.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Path"
+          errorText={pathErrorText}
+          isError={pathErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder={`/${workspace.name.toLowerCase().replace(/ /g, "-")}/${selectedSourceEnvironment}/`}
+            value={path}
+            onChange={(e) => setPath(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+AWSParameterStoreCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input,
+} from '../../../components/v2';
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function AWSSecretManagerCreateIntegrationPage() {
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
+    
+    const [accessKey, setAccessKey] = useState('');
+    const [accessKeyErrorText, setAccessKeyErrorText] = useState('');
+    const [accessSecretKey, setAccessSecretKey] = useState('');
+    const [accessSecretKeyErrorText, setAccessSecretKeyErrorText] = useState('');
+        
+    const handleButtonClick = async () => {
+        try {
+            setAccessKeyErrorText('');
+            setAccessSecretKeyErrorText('');
+
+            if (accessKey.length === 0) {
+                setAccessKeyErrorText('Access key cannot be blank');
+                return;
+            }
+
+            if (accessSecretKey.length === 0) {
+                setAccessSecretKeyErrorText('Secret access key cannot be blank');
+                return;
+            }
+
+            setIsLoading(true);
+            
+            const integrationAuth = await saveIntegrationAccessToken({
+                workspaceId: localStorage.getItem('projectData.id'),
+                integration: 'aws-secret-manager',
+                accessId: accessKey,
+                accessToken: accessSecretKey
+            });
+            
+            setAccessKey('');
+            setAccessSecretKey('');
+            setIsLoading(false);
+            
+            router.push(
+                `/integrations/aws-secret-manager/create?integrationAuthId=${integrationAuth._id}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center mb-4'>AWS Secret Manager Integration</CardTitle>
+         <FormControl
+          label="Access Key ID"
+          errorText={accessKeyErrorText}
+          isError={accessKeyErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder=''
+            value={accessKey}
+            onChange={(e) => setAccessKey(e.target.value)}
+          />
+        </FormControl>
+        <FormControl
+          label="Secret Access Key"
+          errorText={accessSecretKeyErrorText}
+          isError={accessSecretKeyErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder=''
+            value={accessSecretKey}
+            onChange={(e) => setAccessSecretKey(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Connect to AWS Secret Manager
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+AWSSecretManagerCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
@@ -0,0 +1,177 @@
+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, 
+    Input,
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+const awsRegions = [
+    { name: 'US East (Ohio)', slug: 'us-east-2' },
+    { name: 'US East (N. Virginia)', slug: 'us-east-1' },
+    { name: 'US West (N. California)', slug: 'us-west-1' },
+    { name: 'US West (Oregon)', slug: 'us-west-2' },
+    { name: 'Africa (Cape Town)', slug: 'af-south-1' },
+    { name: 'Asia Pacific (Hong Kong)', slug: 'ap-east-1' },
+    { name: 'Asia Pacific (Hyderabad)', slug: 'ap-south-2' },
+    { name: 'Asia Pacific (Jakarta)', slug: 'ap-southeast-3' },
+    { name: 'Asia Pacific (Melbourne)', slug: 'ap-southeast-4' },
+    { name: 'Asia Pacific (Mumbai)', slug: 'ap-south-1' },
+    { name: 'Asia Pacific (Osaka)', slug: 'ap-northeast-3' },
+    { name: 'Asia Pacific (Seoul)', slug: 'ap-northeast-2' },
+    { name: 'Asia Pacific (Singapore)', slug: 'ap-southeast-1' },
+    { name: 'Asia Pacific (Sydney)', slug: 'ap-southeast-2' },
+    { name: 'Asia Pacific (Tokyo)', slug: 'ap-northeast-1' },
+    { name: 'Canada (Central)', slug: 'ca-central-1' },
+    { name: 'Europe (Frankfurt)', slug: 'eu-central-1' },
+    { name: 'Europe (Ireland)', slug: 'eu-west-1' },
+    { name: 'Europe (London)', slug: 'eu-west-2' },
+    { name: 'Europe (Milan)', slug: 'eu-south-1' },
+    { name: 'Europe (Paris)', slug: 'eu-west-3' },
+    { name: 'Europe (Spain)', slug: 'eu-south-2' },
+    { name: 'Europe (Stockholm)', slug: 'eu-north-1' },
+    { name: 'Europe (Zurich)', slug: 'eu-central-2' },
+    { name: 'Middle East (Bahrain)', slug: 'me-south-1' },
+    { name: 'Middle East (UAE)', slug: 'me-central-1' },
+    { name: 'South America (Sao Paulo)', slug: 'sa-east-1' },
+    { name: 'AWS GovCloud (US-East)', slug: 'us-gov-east-1' },
+    { name: 'AWS GovCloud (US-West)', slug: 'us-gov-west-1' },
+]
+
+export default function AWSSecretManagerCreateIntegrationPage() {
+    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 [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [selectedAWSRegion, setSelectedAWSRegion] = useState('');
+    const [targetSecretName, setTargetSecretName] = useState('');
+    const [targetSecretNameErrorText, setTargetSecretNameErrorText] = useState('');
+    
+    // const [path, setPath] = useState('');
+    // const [pathErrorText, setPathErrorText] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+            setSelectedAWSRegion(awsRegions[0].slug);
+        }
+    }, [workspace]);
+    
+//    const isValidAWSPath = (path: string) => {
+//         const pattern = /^\/[\w./]+\/$/;
+//         return pattern.test(path) && path.length <= 2048;
+//     }
+        
+    const handleButtonClick = async () => {
+        try {
+            
+            if (targetSecretName.trim() === '') {
+                setTargetSecretName('Secret name cannot be blank');
+                return;
+            }
+
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetSecretName.trim(),
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null,
+                path: null,
+                region: selectedAWSRegion
+            }); 
+            
+            setIsLoading(false);
+            setTargetSecretNameErrorText('');
+
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>AWS Secret Manager 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={`flyio-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="AWS Region"
+        >
+          <Select
+            value={selectedAWSRegion}
+            onValueChange={(val) => setSelectedAWSRegion(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {awsRegions.map((awsRegion) => (
+              <SelectItem value={awsRegion.slug} key={`flyio-environment-${awsRegion.slug}`}>
+                {awsRegion.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="AWS SM Secret Name"
+          errorText={targetSecretNameErrorText}
+          isError={targetSecretNameErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder={`${workspace.name.toLowerCase().replace(/ /g, "-")}/${selectedSourceEnvironment}`}
+            value={targetSecretName}
+            onChange={(e) => setTargetSecretName(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+AWSSecretManagerCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);
@@ -56,13 +56,15 @@ export default function AzureKeyVaultCreateIntegrationPage() {
        
        setIsLoading(true);
        await createIntegration({
-            integrationAuthId: integrationAuth?._id,
-            isActive: true,
-            app: vaultBaseUrl,
-            appId: null,
-            sourceEnvironment: selectedSourceEnvironment,
-            targetEnvironment: null,
-            owner: null
+          integrationAuthId: integrationAuth?._id,
+          isActive: true,
+          app: vaultBaseUrl,
+          appId: null,
+          sourceEnvironment: selectedSourceEnvironment,
+          targetEnvironment: null,
+          owner: null,
+          path: null,
+          region: null
        });
        setIsLoading(false);
        
@@ -30,6 +30,7 @@ export default function FlyioCreateIntegrationPage() {
            const integrationAuth = await saveIntegrationAccessToken({
                workspaceId: localStorage.getItem('projectData.id'),
                integration: 'flyio',
+                accessId: null,
                accessToken
            });

@@ -46,7 +47,7 @@ export default function FlyioCreateIntegrationPage() {
    return (
    <div className="h-full w-full flex justify-center items-center">
      <Card className="max-w-md p-8 rounded-md">
-        <CardTitle className='text-center'>Render Integration</CardTitle>
+        <CardTitle className='text-center'>Fly.io Integration</CardTitle>
         <FormControl
          label="Fly.io Access Token"
          errorText={accessTokenErrorText}
@@ -49,13 +49,15 @@ export default function FlyioCreateIntegrationPage() {
            setIsLoading(true);
            
            await createIntegration({
-                integrationAuthId: integrationAuth?._id,
-                isActive: true,
-                app: targetApp,
-                appId: null,
-                sourceEnvironment: selectedSourceEnvironment,
-                targetEnvironment: null,
-                owner: null
+              integrationAuthId: integrationAuth?._id,
+              isActive: true,
+              app: targetApp,
+              appId: null,
+              sourceEnvironment: selectedSourceEnvironment,
+              targetEnvironment: null,
+              owner: null,
+              path: null,
+              region: null
            }); 
            
            setIsLoading(false);
@@ -57,7 +57,9 @@ export default function GitHubCreateIntegrationPage() {
                appId: null,
                sourceEnvironment: selectedSourceEnvironment,
                targetEnvironment: null,
-                owner
+                owner,
+                path: null,
+                region: null
            }); 
            
            setIsLoading(false);
@@ -49,13 +49,15 @@ export default function HerokuCreateIntegrationPage() {
            if (!integrationAuth?._id) return;

            await createIntegration({
-                integrationAuthId: integrationAuth?._id,
-                isActive: true,
-                app: targetApp,
-                appId: null,
-                sourceEnvironment: selectedSourceEnvironment,
-                targetEnvironment: null,
-                owner: null
+              integrationAuthId: integrationAuth?._id,
+              isActive: true,
+              app: targetApp,
+              appId: null,
+              sourceEnvironment: selectedSourceEnvironment,
+              targetEnvironment: null,
+              owner: null,
+              path: null,
+              region: null
            }); 
            
            setIsLoading(false);
@@ -58,13 +58,15 @@ export default function NetlifyCreateIntegrationPage() {
            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,
-                owner: null
+              integrationAuthId: integrationAuth?._id,
+              isActive: true,
+              app: targetApp,
+              appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
+              sourceEnvironment: selectedSourceEnvironment,
+              targetEnvironment,
+              owner: null,
+              path: null,
+              region: null
            }); 
            
            setIsLoading(false);
@@ -30,6 +30,7 @@ export default function RenderCreateIntegrationPage() {
            const integrationAuth = await saveIntegrationAccessToken({
                workspaceId: localStorage.getItem('projectData.id'),
                integration: 'render',
+                accessId: null,
                accessToken: apiKey
            });

@@ -49,13 +49,15 @@ export default function RenderCreateIntegrationPage() {
            setIsLoading(true);
            
            await createIntegration({
-                integrationAuthId: integrationAuth?._id,
-                isActive: true,
-                app: targetApp,
-                appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
-                sourceEnvironment: selectedSourceEnvironment,
-                targetEnvironment: null,
-                owner: null
+              integrationAuthId: integrationAuth?._id,
+              isActive: true,
+              app: targetApp,
+              appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
+              sourceEnvironment: selectedSourceEnvironment,
+              targetEnvironment: null,
+              owner: null,
+              path: null,
+              region: null
            }); 
            
            setIsLoading(false);
@@ -56,13 +56,15 @@ export default function VercelCreateIntegrationPage() {

            setIsLoading(true);
            await createIntegration({
-                integrationAuthId: integrationAuth?._id,
-                isActive: true,
-                app: targetApp,
-                appId: null,
-                sourceEnvironment: selectedSourceEnvironment,
-                targetEnvironment,
-                owner: null
+              integrationAuthId: integrationAuth?._id,
+              isActive: true,
+              app: targetApp,
+              appId: null,
+              sourceEnvironment: selectedSourceEnvironment,
+              targetEnvironment,
+              owner: null,
+              path: null,
+              region: null
            }); 
            
            setIsLoading(false);
@@ -175,7 +175,7 @@ export default function SettingsOrg() {
              </p>
            </div>
          </div>
-          <div className="flex flex-col ml-6 text-mineshaft-50 mr-6 max-w-5xl">
+          <div className="flex flex-col ml-6 text-mineshaft-50 mr-6 max-w-8xl">
            <div className="flex flex-col">
              <div className="min-w-md mt-2 flex flex-col items-end pb-4">
                <div className="bg-white/5 rounded-md px-6 py-4 flex flex-col items-start w-full mb-6">
@@ -231,7 +231,7 @@ export default function SettingsOrg() {
                text="You can add more members if you switch to Infisical's Team plan."
              />
              {/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
-              <div className="pb-1 w-full flex flex-row items-start max-w-6xl">
+              <div className="pb-1 w-full flex flex-row items-start">
                <div className="h-10 w-full bg-white/5 mt-2 flex items-center rounded-md flex-row ">
                  <FontAwesomeIcon
                    className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
@@ -255,7 +255,7 @@ export default function SettingsOrg() {
                </div>
              </div>
              {userList && (
-                <div className="overflow-y-auto max-w-6xl w-full">
+                <div className="overflow-y-auto w-full">
                  <UserTable
                    userData={userList}
                    changeData={setUserList}