feat: added initial aws form

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/AddExternalKmsForm/AddExternalKmsForm.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { faAws } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Modal, ModalContent } from "@app/components/v2";
+
+import { AwsKmsForm } from "./AwsKmsForm";
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+};
+
+enum WizardSteps {
+  SelectProvider = "select-provider",
+  ProviderInputs = "provider-inputs"
+}
+
+enum ExternalKmsProvider {
+  AWS = "aws"
+}
+
+const EXTERNAL_KMS_LIST = [
+  {
+    icon: faAws,
+    provider: ExternalKmsProvider.AWS,
+    title: "AWS KMS"
+  }
+];
+
+export const AddExternalKmsForm = ({ isOpen, onToggle }: Props) => {
+  const [wizardStep, setWizardStep] = useState(WizardSteps.SelectProvider);
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+
+  const handleFormReset = (state: boolean = false) => {
+    onToggle(state);
+    setWizardStep(WizardSteps.SelectProvider);
+    setSelectedProvider(null);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
+      <ModalContent
+        title="Add a Key Management System"
+        subTitle="Configure an external key management system (KMS)"
+        className="my-4"
+      >
+        <AnimatePresence exitBeforeEnter>
+          {wizardStep === WizardSteps.SelectProvider && (
+            <motion.div
+              key="select-type-step"
+              transition={{ duration: 0.1 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: -30 }}
+            >
+              <div className="mb-4 text-mineshaft-300">Select a KMS Provider</div>
+              <div className="flex items-center space-x-4">
+                {EXTERNAL_KMS_LIST.map(({ icon, provider, title }) => (
+                  <div
+                    key={`kms-${provider}`}
+                    className="flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      setSelectedProvider(provider);
+                      setWizardStep(WizardSteps.ProviderInputs);
+                    }}
+                    onKeyDown={(evt) => {
+                      if (evt.key === "Enter") {
+                        setSelectedProvider(provider);
+                        setWizardStep(WizardSteps.ProviderInputs);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={icon} size="lg" />
+                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === ExternalKmsProvider.AWS && (
+              <motion.div
+                key="kms-aws"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <AwsKmsForm />
+              </motion.div>
+            )}
+        </AnimatePresence>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/AddExternalKmsForm/AwsKmsForm.tsx

@@ -0,0 +1,191 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { FormControl, Input, Select, SelectItem } from "@app/components/v2";
+
+const AWS_REGIONS = [
+  { 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 enum KmsAwsCredentialType {
+  AssumeRole = "assume-role",
+  AccessKey = "access-key"
+}
+
+const formSchema = z.object({
+  credential: z.discriminatedUnion("type", [
+    z.object({
+      type: z.literal(KmsAwsCredentialType.AccessKey),
+      data: z.object({
+        accessKey: z.string().trim().min(1),
+        secretKey: z.string().trim().min(1)
+      })
+    }),
+    z.object({
+      type: z.literal(KmsAwsCredentialType.AssumeRole),
+      data: z.object({
+        assumeRoleArn: z.string().trim().min(1),
+        externalId: z.string().trim().min(1).optional()
+      })
+    })
+  ]),
+  awsRegion: z.string().min(1).trim().describe("AWS region to connect"),
+  kmsKeyId: z.string().trim().optional()
+});
+
+type TForm = z.infer<typeof formSchema>;
+
+export const AwsKmsForm = () => {
+  const { control, handleSubmit, watch } = useForm<TForm>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const selectedAwsAuthType = watch("credential.type");
+
+  const handleAddAwsKms = () => {};
+
+  return (
+    <form onSubmit={handleSubmit(handleAddAwsKms)} autoComplete="off">
+      <Controller
+        control={control}
+        name="credential.type"
+        defaultValue={KmsAwsCredentialType.AssumeRole}
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl
+            label="Authentication Mode"
+            errorText={error?.message}
+            isError={Boolean(error)}
+          >
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full"
+            >
+              <SelectItem value={KmsAwsCredentialType.AssumeRole}>AWS Assume Role</SelectItem>
+              <SelectItem value={KmsAwsCredentialType.AccessKey}>Access Key</SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+
+      {selectedAwsAuthType === KmsAwsCredentialType.AccessKey ? (
+        <>
+          <Controller
+            control={control}
+            name="credential.data.accessKey"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Key ID"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input placeholder="" {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="credential.data.secretKey"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Secret Access Key"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input type="password" autoComplete="new-password" placeholder="" {...field} />
+              </FormControl>
+            )}
+          />
+        </>
+      ) : (
+        <>
+          <Controller
+            control={control}
+            name="credential.data.assumeRoleArn"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="IAM Role ARN For Role Assumption"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input placeholder="" {...field} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="credential.data.externalId"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Assume Role External ID"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Input placeholder="" {...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}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full border border-mineshaft-500"
+            >
+              {AWS_REGIONS.map((awsRegion) => (
+                <SelectItem value={awsRegion.slug} key={`kms-aws-region-${awsRegion.slug}`}>
+                  {awsRegion.name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="kmsKeyId"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="KMS Key ID" errorText={error?.message} isError={Boolean(error)}>
+            <Input placeholder="" {...field} />
+          </FormControl>
+        )}
+      />
+    </form>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/AddExternalKmsForm/index.tsx

@@ -0,0 +1 @@
+export { AddExternalKmsForm } from "./AddExternalKmsForm";

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/OrgEncryptionTab.tsx

@@ -0,0 +1,60 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, UpgradePlanModal } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
+import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+
+import { AddExternalKmsForm } from "./AddExternalKmsForm";
+
+export const OrgEncryptionTab = withPermission(
+  () => {
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?.id || "";
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+      "upgradePlan",
+      "addExternalKMS"
+    ] as const);
+    const { subscription } = useSubscription();
+
+    return (
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">Encryption</p>
+          <Button
+            onClick={() => {
+              handlePopUpOpen("addExternalKMS");
+              // if (subscription && !subscription?.auditLogStreams) {
+              //   handlePopUpOpen("upgradePlan");
+              //   return;
+              // }
+              // handlePopUpOpen("auditLogStreamForm");
+            }}
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          >
+            Add
+          </Button>
+        </div>
+        <p className="mb-4 text-gray-400">
+          Configure the Key Management System used for encrypting/decrypting your data at rest
+        </p>
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can add audit log streams if you switch to Infisical's Enterprise  plan."
+        />
+        <AddExternalKmsForm
+          isOpen={popUp.addExternalKMS.isOpen}
+          onToggle={(state) => handlePopUpToggle("addExternalKMS", state)}
+        />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Edit, subject: OrgPermissionSubjects.Settings }
+);

frontend/src/views/Settings/OrgSettingsPage/components/OrgEncryptionTab/index.tsx

@@ -0,0 +1 @@
+export { OrgEncryptionTab } from "./OrgEncryptionTab";

frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -3,11 +3,13 @@ import { Tab } from "@headlessui/react";
 
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { OrgAuthTab } from "../OrgAuthTab";
+import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
 
 const tabs = [
   { name: "General", key: "tab-org-general" },
   { name: "Security", key: "tab-org-security" },
+  { name: "Encryption", key: "tab-org-encryption" },
   { name: "Audit Log Streams", key: "tag-audit-log-streams" }
 ];
 export const OrgTabGroup = () => {
@@ -19,8 +21,9 @@ export const OrgTabGroup = () => {
             {({ selected }) => (
               <button
                 type="button"
-                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"
-                  }`}
+                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
+                  selected ? "border-b border-white text-white" : "text-mineshaft-400"
+                }`}
               >
                 {tab.name}
               </button>
@@ -35,6 +38,9 @@ export const OrgTabGroup = () => {
         <Tab.Panel>
           <OrgAuthTab />
         </Tab.Panel>
+        <Tab.Panel>
+          <OrgEncryptionTab />
+        </Tab.Panel>
         <Tab.Panel>
           <AuditLogStreamsTab />
         </Tab.Panel>