misc: finalize org migration script

backend/scripts/migrate-organization.ts

@@ -8,61 +8,80 @@ const prompt = promptSync({
   sigint: true
 });
 
+const sanitizeInputParam = (value: string) => {
+  // Escape double quotes and wrap the entire value in double quotes
+  if (value) {
+    return `"${value.replace(/"/g, '\\"')}"`;
+  }
+  return '""';
+};
+
 const exportDb = () => {
-  const exportHost = prompt("Enter your Postgres Host to migrate from: ");
-  const exportPort = prompt("Enter your Postgres Port to migrate from [Default = 5432]: ") ?? "5432";
-  const exportUser = prompt("Enter your Postgres User to migrate from: [Default = infisical]: ") ?? "infisical";
-  const exportPassword = prompt("Enter your Postgres Password to migrate from: ");
-  const exportDatabase = prompt("Enter your Postgres Database to migrate from [Default = infisical]: ") ?? "infisical";
+  const exportHost = sanitizeInputParam(prompt("Enter your Postgres Host to migrate from: "));
+  const exportPort = sanitizeInputParam(
+    prompt("Enter your Postgres Port to migrate from [Default = 5432]: ") ?? "5432"
+  );
+  const exportUser = sanitizeInputParam(
+    prompt("Enter your Postgres User to migrate from: [Default = infisical]: ") ?? "infisical"
+  );
+  const exportPassword = sanitizeInputParam(prompt("Enter your Postgres Password to migrate from: "));
+  const exportDatabase = sanitizeInputParam(
+    prompt("Enter your Postgres Database to migrate from [Default = infisical]: ") ?? "infisical"
+  );
 
   // we do not include the audit_log and secret_sharing entries
   execSync(
-    `PGDATABASE="${exportDatabase}" PGPASSWORD="${exportPassword}" PGHOST="${exportHost}" PGPORT=${exportPort} PGUSER=${exportUser} pg_dump infisical --exclude-table-data="secret_sharing" --exclude-table-data="audit_log*" > ${path.join(
+    `PGDATABASE=${exportDatabase} PGPASSWORD=${exportPassword} PGHOST=${exportHost} PGPORT=${exportPort} PGUSER=${exportUser} pg_dump -Fc infisical --exclude-table-data="secret_sharing" --exclude-table-data="audit_log*" > ${path.join(
       __dirname,
-      "../src/db/dump.sql"
+      "../src/db/backup.dump"
     )}`,
     { stdio: "inherit" }
   );
 };
 
 const importDbForOrg = () => {
-  const importHost = prompt("Enter your Postgres Host to migrate to: ");
-  const importPort = prompt("Enter your Postgres Port to migrate to [Default = 5432]: ") ?? "5432";
-  const importUser = prompt("Enter your Postgres User to migrate to: [Default = infisical]: ") ?? "infisical";
-  const importPassword = prompt("Enter your Postgres Password to migrate to: ");
-  const importDatabase = prompt("Enter your Postgres Database to migrate to [Default = infisical]: ") ?? "infisical";
-  const orgId = prompt("Enter the organization ID to migrate: ");
+  const importHost = sanitizeInputParam(prompt("Enter your Postgres Host to migrate to: "));
+  const importPort = sanitizeInputParam(prompt("Enter your Postgres Port to migrate to [Default = 5432]: ") ?? "5432");
+  const importUser = sanitizeInputParam(
+    prompt("Enter your Postgres User to migrate to: [Default = infisical]: ") ?? "infisical"
+  );
+  const importPassword = sanitizeInputParam(prompt("Enter your Postgres Password to migrate to: "));
+  const importDatabase = sanitizeInputParam(
+    prompt("Enter your Postgres Database to migrate to [Default = infisical]: ") ?? "infisical"
+  );
+  const orgId = sanitizeInputParam(prompt("Enter the organization ID to migrate: "));
 
-  if (!existsSync(path.join(__dirname, "../src/db/dump.sql"))) {
+  if (!existsSync(path.join(__dirname, "../src/db/backup.dump"))) {
     console.log("File not found, please export the database first.");
     return;
   }
 
   execSync(
-    `PGDATABASE="${importDatabase}" PGPASSWORD="${importPassword}" PGHOST="${importHost}" PGPORT=${importPort} PGUSER=${importUser} psql -f ${path.join(
+    `PGDATABASE=${importDatabase} PGPASSWORD=${importPassword} PGHOST=${importHost} PGPORT=${importPort} PGUSER=${importUser} pg_restore -d ${importDatabase} --verbose ${path.join(
       __dirname,
-      "../src/db/dump.sql"
-    )}`
+      "../src/db/backup.dump"
+    )}`,
+    { maxBuffer: 1024 * 1024 * 4096 }
   );
 
   execSync(
-    `PGDATABASE="${importDatabase}" PGPASSWORD="${importPassword}" PGHOST="${importHost}" PGPORT=${importPort} PGUSER=${importUser} psql -c "DELETE FROM public.organizations WHERE id != '${orgId}'"`
+    `PGDATABASE=${importDatabase} PGPASSWORD=${importPassword} PGHOST=${importHost} PGPORT=${importPort} PGUSER=${importUser} psql -c "DELETE FROM public.organizations WHERE id != '${orgId}'"`
   );
 
   // delete global/instance-level resources not relevant to the organization to migrate
   // users
   execSync(
-    `PGDATABASE="${importDatabase}" PGPASSWORD="${importPassword}" PGHOST="${importHost}" PGPORT=${importPort} PGUSER=${importUser} psql -c 'DELETE FROM users WHERE users.id NOT IN (SELECT org_memberships."userId" FROM org_memberships)'`
+    `PGDATABASE=${importDatabase} PGPASSWORD=${importPassword} PGHOST=${importHost} PGPORT=${importPort} PGUSER=${importUser} psql -c 'DELETE FROM users WHERE users.id NOT IN (SELECT org_memberships."userId" FROM org_memberships)'`
   );
 
   // identities
   execSync(
-    `PGDATABASE="${importDatabase}" PGPASSWORD="${importPassword}" PGHOST="${importHost}" PGPORT=${importPort} PGUSER=${importUser} psql -c 'DELETE FROM identities WHERE id NOT IN (SELECT "identityId" FROM identity_org_memberships)'`
+    `PGDATABASE=${importDatabase} PGPASSWORD=${importPassword} PGHOST=${importHost} PGPORT=${importPort} PGUSER=${importUser} psql -c 'DELETE FROM identities WHERE id NOT IN (SELECT "identityId" FROM identity_org_memberships)'`
   );
 
   // reset slack configuration in superAdmin
   execSync(
-    `PGDATABASE="${importDatabase}" PGPASSWORD="${importPassword}" PGHOST="${importHost}" PGPORT=${importPort} PGUSER=${importUser} psql -c 'UPDATE super_admin SET "encryptedSlackClientId" = null, "encryptedSlackClientSecret" = null'`
+    `PGDATABASE=${importDatabase} PGPASSWORD=${importPassword} PGHOST=${importHost} PGPORT=${importPort} PGUSER=${importUser} psql -c 'UPDATE super_admin SET "encryptedSlackClientId" = null, "encryptedSlackClientSecret" = null'`
   );
 
   console.log("Organization migrated successfully.");

backend/src/db/migrations/20241110032223_add-missing-oidc-org-cascade-reference.ts

@@ -0,0 +1,21 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  if (await knex.schema.hasColumn(TableName.OidcConfig, "orgId")) {
+    await knex.schema.alterTable(TableName.OidcConfig, (t) => {
+      t.dropForeign("orgId");
+      t.foreign("orgId").references("id").inTable(TableName.Organization).onDelete("CASCADE");
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  if (await knex.schema.hasColumn(TableName.OidcConfig, "orgId")) {
+    await knex.schema.alterTable(TableName.OidcConfig, (t) => {
+      t.dropForeign("orgId");
+      t.foreign("orgId").references("id").inTable(TableName.Organization);
+    });
+  }
+}

frontend/src/pages/integrations/aws-secret-manager/create.tsx

@@ -1,5 +1,4 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -11,12 +10,9 @@ import {
   faCircleInfo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { motion } from "framer-motion";
 import queryString from "query-string";
-import z from "zod";
 
-import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration } from "@app/hooks/api";
 import { useGetIntegrationAuthAwsKmsKeys } from "@app/hooks/api/integrationAuth/queries";
 import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
@@ -87,61 +83,10 @@ const mappingBehaviors = [
   }
 ];
 
-const schema = z
-  .object({
-    awsRegion: z.string().trim().min(1, { message: "AWS region is required" }),
-    secretPath: z.string().trim().min(1, { message: "Secret path is required" }),
-    sourceEnvironment: z.string().trim().min(1, { message: "Source environment is required" }),
-    secretPrefix: z.string().default(""),
-    secretName: z.string().trim().min(1).optional(),
-    mappingBehavior: z.nativeEnum(IntegrationMappingBehavior),
-    kmsKeyId: z.string().optional(),
-    shouldTag: z.boolean().optional(),
-    tags: z
-      .object({
-        key: z.string(),
-        value: z.string()
-      })
-      .array()
-  })
-  .refine(
-    (val) =>
-      val.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE ||
-      (val.mappingBehavior === IntegrationMappingBehavior.MANY_TO_ONE &&
-        val.secretName &&
-        val.secretName !== ""),
-    {
-      message: "Secret name must be defined for many-to-one integrations",
-      path: ["secretName"]
-    }
-  );
-
-type TFormSchema = z.infer<typeof schema>;
-
 export default function AWSSecretManagerCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  const {
-    control,
-    setValue,
-    handleSubmit,
-    watch,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      shouldTag: false,
-      secretPath: "/",
-      secretPrefix: "",
-      mappingBehavior: IntegrationMappingBehavior.MANY_TO_ONE,
-      tags: []
-    }
-  });
 
-  const shouldTagState = watch("shouldTag");
-  const selectedSourceEnvironment = watch("sourceEnvironment");
-  const selectedAWSRegion = watch("awsRegion");
-  const selectedMappingBehavior = watch("mappingBehavior");
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
@@ -149,6 +94,25 @@ export default function AWSSecretManagerCreateIntegrationPage() {
     (integrationAuthId as string) ?? ""
   );
 
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [selectedAWSRegion, setSelectedAWSRegion] = useState("");
+  const [selectedMappingBehavior, setSelectedMappingBehavior] = useState(
+    IntegrationMappingBehavior.MANY_TO_ONE
+  );
+  const [targetSecretName, setTargetSecretName] = useState("");
+  const [targetSecretNameErrorText, setTargetSecretNameErrorText] = useState("");
+  const [tagKey, setTagKey] = useState("");
+  const [tagValue, setTagValue] = useState("");
+  const [kmsKeyId, setKmsKeyId] = useState("");
+  const [secretPrefix, setSecretPrefix] = useState("");
+
+  // const [path, setPath] = useState('');
+  // const [pathErrorText, setPathErrorText] = useState('');
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [shouldTag, setShouldTag] = useState(false);
+
   const { data: integrationAuthAwsKmsKeys, isLoading: isIntegrationAuthAwsKmsKeysLoading } =
     useGetIntegrationAuthAwsKmsKeys({
       integrationAuthId: String(integrationAuthId),
@@ -157,46 +121,63 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
   useEffect(() => {
     if (workspace) {
-      setValue("sourceEnvironment", workspace.environments[0].slug);
-      setValue("awsRegion", awsRegions[0].slug);
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setSelectedAWSRegion(awsRegions[0].slug);
     }
   }, [workspace]);
 
-  const handleButtonClick = async ({
-    secretName,
-    sourceEnvironment,
-    awsRegion,
-    secretPath,
-    shouldTag,
-    tags,
-    secretPrefix,
-    kmsKeyId,
-    mappingBehavior
-  }: TFormSchema) => {
+  //    const isValidAWSPath = (path: string) => {
+  //         const pattern = /^\/[\w./]+\/$/;
+  //         return pattern.test(path) && path.length <= 2048;
+  //     }
+
+  const handleButtonClick = async () => {
     try {
+      if (!selectedMappingBehavior) {
+        return;
+      }
+
+      if (
+        selectedMappingBehavior === IntegrationMappingBehavior.MANY_TO_ONE &&
+        targetSecretName.trim() === ""
+      ) {
+        setTargetSecretName("Secret name cannot be blank");
+        return;
+      }
+
       if (!integrationAuth?.id) return;
 
+      setIsLoading(true);
+
       await mutateAsync({
         integrationAuthId: integrationAuth?.id,
         isActive: true,
-        app: secretName,
-        sourceEnvironment,
-        region: awsRegion,
+        app: targetSecretName.trim(),
+        sourceEnvironment: selectedSourceEnvironment,
+        region: selectedAWSRegion,
         secretPath,
         metadata: {
           ...(shouldTag
             ? {
-                secretAWSTag: tags
+                secretAWSTag: [
+                  {
+                    key: tagKey,
+                    value: tagValue
+                  }
+                ]
               }
             : {}),
           ...(secretPrefix && { secretPrefix }),
           ...(kmsKeyId && { kmsKeyId }),
-          mappingBehavior
+          mappingBehavior: selectedMappingBehavior
         }
       });
+      setIsLoading(false);
+      setTargetSecretNameErrorText("");
 
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
+      setIsLoading(false);
       console.error(err);
     }
   };
@@ -210,305 +191,226 @@ export default function AWSSecretManagerCreateIntegrationPage() {
         <title>Set Up AWS Secrets Manager Integration</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <form onSubmit={handleSubmit(handleButtonClick)}>
-        <Card className="max-w-lg rounded-md border border-mineshaft-600">
-          <CardTitle
-            className="px-6 text-left text-xl"
-            subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Secrets Manager."
-          >
-            <div className="flex flex-row items-center">
-              <div className="flex items-center">
-                <Image
-                  src="/images/integrations/Amazon Web Services.png"
-                  height={35}
-                  width={35}
-                  alt="AWS logo"
-                />
-              </div>
-              <span className="ml-1.5">AWS Secrets Manager Integration </span>
-              <Link
-                href="https://infisical.com/docs/integrations/cloud/aws-secret-manager"
-                passHref
-              >
-                <a target="_blank" rel="noopener noreferrer">
-                  <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
-                    <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                    Docs
-                    <FontAwesomeIcon
-                      icon={faArrowUpRightFromSquare}
-                      className="ml-1.5 mb-[0.07rem] text-xxs"
-                    />
-                  </div>
-                </a>
-              </Link>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle="Choose which environment in Infisical you want to sync to secerts in AWS Secrets Manager."
+        >
+          <div className="flex flex-row items-center">
+            <div className="inline flex items-center">
+              <Image
+                src="/images/integrations/Amazon Web Services.png"
+                height={35}
+                width={35}
+                alt="AWS logo"
+              />
             </div>
-          </CardTitle>
-          <Tabs defaultValue={TabSections.Connection} className="px-6">
-            <TabList>
-              <div className="flex w-full flex-row border-b border-mineshaft-600">
-                <Tab value={TabSections.Connection}>Connection</Tab>
-                <Tab value={TabSections.Options}>Options</Tab>
-              </div>
-            </TabList>
-            <TabPanel value={TabSections.Connection}>
-              <motion.div
-                key="panel-1"
-                transition={{ duration: 0.15 }}
-                initial={{ opacity: 0, translateX: 30 }}
-                animate={{ opacity: 1, translateX: 0 }}
-                exit={{ opacity: 0, translateX: 30 }}
-              >
-                <Controller
-                  control={control}
-                  name="sourceEnvironment"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Project Environment"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        className="w-full border border-mineshaft-500"
-                        dropdownContainerClassName="max-w-full"
-                        value={field.value}
-                        onValueChange={(val) => {
-                          field.onChange(val);
-                        }}
-                      >
-                        {workspace?.environments.map((sourceEnvironment) => (
-                          <SelectItem
-                            value={sourceEnvironment.slug}
-                            key={`source-environment-${sourceEnvironment.slug}`}
-                          >
-                            {sourceEnvironment.name}
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="secretPath"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Secrets Path"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <SecretPathInput {...field} />
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="awsRegion"
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      label="AWS region"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        onValueChange={(e) => onChange(e)}
-                        className="w-full border border-mineshaft-500"
-                        dropdownContainerClassName="max-w-full"
-                      >
-                        {awsRegions.map((awsRegion) => (
-                          <SelectItem
-                            value={awsRegion.slug}
-                            className="flex w-full justify-between"
-                            key={`aws-environment-${awsRegion.slug}`}
-                          >
-                            {awsRegion.name} <Badge variant="success">{awsRegion.slug}</Badge>
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="mappingBehavior"
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      label="Mapping Behavior"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        onValueChange={(e) => onChange(e)}
-                        className="w-full border border-mineshaft-500"
-                        dropdownContainerClassName="max-w-full"
-                      >
-                        {mappingBehaviors.map((option) => (
-                          <SelectItem
-                            value={option.value}
-                            className="text-left"
-                            key={`mapping-behavior-${option.value}`}
-                          >
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                {selectedMappingBehavior === IntegrationMappingBehavior.MANY_TO_ONE && (
-                  <Controller
-                    control={control}
-                    name="secretName"
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        label="AWS SM Secret Name"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <Input
-                          placeholder={`${workspace.name
-                            .toLowerCase()
-                            .replace(/ /g, "-")}/${selectedSourceEnvironment}`}
-                          {...field}
-                        />
-                      </FormControl>
-                    )}
-                  />
-                )}
-              </motion.div>
-            </TabPanel>
-            <TabPanel value={TabSections.Options}>
-              <motion.div
-                key="panel-1"
-                transition={{ duration: 0.15 }}
-                initial={{ opacity: 0, translateX: -30 }}
-                animate={{ opacity: 1, translateX: 0 }}
-                exit={{ opacity: 0, translateX: 30 }}
-              >
-                <div className="mt-2 ml-1">
-                  <Controller
-                    control={control}
-                    name="shouldTag"
-                    render={({ field: { onChange, value } }) => (
-                      <Switch
-                        id="tag-aws"
-                        onCheckedChange={(isChecked) => onChange(isChecked)}
-                        isChecked={value}
-                      >
-                        Tag in AWS Secrets Manager
-                      </Switch>
-                    )}
+            <span className="ml-1.5">AWS Secrets Manager Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/aws-secret-manager" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="ml-1.5 mb-[0.07rem] text-xxs"
                   />
                 </div>
-                {shouldTagState && (
-                  <div className="mt-4 flex justify-between">
-                    <Controller
-                      control={control}
-                      name="tags.0.key"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                          label="Tag Key"
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                        >
-                          <Input placeholder="managed-by" {...field} />
-                        </FormControl>
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      name="tags.0.value"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                          label="Tag Value"
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                        >
-                          <Input placeholder="infisical" {...field} />
-                        </FormControl>
-                      )}
-                    />
-                  </div>
-                )}
-
-                <Controller
-                  control={control}
-                  name="secretPrefix"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Secret Prefix"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                      className="mt-4"
-                    >
-                      <Input placeholder="INFISICAL_" {...field} />
-                    </FormControl>
-                  )}
-                />
-
-                <Controller
-                  control={control}
-                  name="kmsKeyId"
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      label="Encryption Key"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        onValueChange={(e) => onChange(e)}
-                        className="w-full border border-mineshaft-500"
-                        dropdownContainerClassName="max-w-full"
-                      >
-                        {integrationAuthAwsKmsKeys?.length ? (
-                          integrationAuthAwsKmsKeys.map((key) => {
-                            return (
-                              <SelectItem
-                                value={key.id as string}
-                                key={`repo-id-${key.id}`}
-                                className="w-[28.4rem] text-sm"
-                              >
-                                {key.alias}
-                              </SelectItem>
-                            );
-                          })
-                        ) : (
-                          <SelectItem isDisabled value="no-keys" key="no-keys">
-                            No KMS keys available
-                          </SelectItem>
-                        )}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </motion.div>
-            </TabPanel>
-          </Tabs>
-          <Button
-            color="mineshaft"
-            variant="outline_bg"
-            type="submit"
-            className="mb-6 mt-2 ml-auto mr-6"
-            isLoading={isSubmitting}
-          >
-            Create Integration
-          </Button>
-        </Card>
-        <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
-        <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
-          <div className="flex flex-row items-center">
-            <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
-            <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
+              </a>
+            </Link>
           </div>
-          <span className="mt-4 text-sm text-mineshaft-300">
-            After creating an integration, your secrets will start syncing immediately. This might
-            cause an unexpected override of current secrets in AWS Secrets Manager with secrets from
-            Infisical.
-          </span>
+        </CardTitle>
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
+          <TabList>
+            <div className="flex w-full flex-row border-b border-mineshaft-600">
+              <Tab value={TabSections.Connection}>Connection</Tab>
+              <Tab value={TabSections.Options}>Options</Tab>
+            </div>
+          </TabList>
+          <TabPanel value={TabSections.Connection}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Project Environment">
+                <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="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}
+                  onValueChange={(val) => {
+                    setSelectedAWSRegion(val);
+                    setKmsKeyId("");
+                  }}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {awsRegions.map((awsRegion) => (
+                    <SelectItem
+                      value={awsRegion.slug}
+                      className="flex w-full justify-between"
+                      key={`aws-environment-${awsRegion.slug}`}
+                    >
+                      {awsRegion.name} <Badge variant="success">{awsRegion.slug}</Badge>
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl label="Mapping Behavior">
+                <Select
+                  value={selectedMappingBehavior}
+                  onValueChange={(val) => {
+                    setSelectedMappingBehavior(val as IntegrationMappingBehavior);
+                  }}
+                  className="w-full border border-mineshaft-500 text-left"
+                >
+                  {mappingBehaviors.map((option) => (
+                    <SelectItem
+                      value={option.value}
+                      className="text-left"
+                      key={`aws-environment-${option.value}`}
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+              {selectedMappingBehavior === IntegrationMappingBehavior.MANY_TO_ONE && (
+                <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>
+              )}
+            </motion.div>
+          </TabPanel>
+          <TabPanel value={TabSections.Options}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <div className="mt-2 ml-1">
+                <Switch
+                  id="tag-aws"
+                  onCheckedChange={() => setShouldTag(!shouldTag)}
+                  isChecked={shouldTag}
+                >
+                  Tag in AWS Secrets Manager
+                </Switch>
+              </div>
+              {shouldTag && (
+                <div className="mt-4 flex justify-between">
+                  <FormControl label="Tag Key">
+                    <Input
+                      placeholder="managed-by"
+                      value={tagKey}
+                      onChange={(e) => setTagKey(e.target.value)}
+                    />
+                  </FormControl>
+                  <FormControl label="Tag Value">
+                    <Input
+                      placeholder="infisical"
+                      value={tagValue}
+                      onChange={(e) => setTagValue(e.target.value)}
+                    />
+                  </FormControl>
+                </div>
+              )}
+
+              <FormControl label="Secret Prefix" className="mt-4">
+                <Input
+                  value={secretPrefix}
+                  onChange={(e) => setSecretPrefix(e.target.value)}
+                  placeholder="INFISICAL_"
+                />
+              </FormControl>
+
+              <FormControl label="Encryption Key" className="mt-4">
+                <Select
+                  value={kmsKeyId}
+                  onValueChange={(e) => {
+                    if (e === "no-keys") return;
+                    setKmsKeyId(e);
+                  }}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {integrationAuthAwsKmsKeys?.length ? (
+                    integrationAuthAwsKmsKeys.map((key) => {
+                      return (
+                        <SelectItem
+                          value={key.id as string}
+                          key={`repo-id-${key.id}`}
+                          className="w-[28.4rem] text-sm"
+                        >
+                          {key.alias}
+                        </SelectItem>
+                      );
+                    })
+                  ) : (
+                    <SelectItem isDisabled value="no-keys" key="no-keys">
+                      No KMS keys available
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+        </Tabs>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          variant="outline_bg"
+          className="mb-6 mt-2 ml-auto mr-6"
+          isLoading={isLoading}
+        >
+          Create Integration
+        </Button>
+      </Card>
+      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
+      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+        <div className="flex flex-row items-center">
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tip</span>
         </div>
-      </form>
+        <span className="mt-4 text-sm text-mineshaft-300">
+          After creating an integration, your secrets will start syncing immediately. This might
+          cause an unexpected override of current secrets in AWS Secrets Manager with secrets from
+          Infisical.
+        </span>
+      </div>
     </div>
   ) : (
     <div className="flex h-full w-full items-center justify-center">