Merge remote-tracking branch 'origin/main' into feat/enforce-oidc-sso

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

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } from "@app/components/v2";
+import { useOrgPermission } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+
+import { SelectImportFromPlatformModal } from "./components/SelectImportFromPlatformModal";
+
+export const ImportTab = () => {
+  const { membership } = useOrgPermission();
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["selectImportPlatform"] as const);
+
+  return (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex justify-between">
+        <div className="flex items-center gap-2">
+          <p className="text-xl font-semibold text-mineshaft-100">Import from external source</p>
+
+          <div>
+            <Link
+              href="https://infisical.com/docs/documentation/guides/migrating-from-envkey"
+              passHref
+            >
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 inline-block 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>
+          </div>
+        </div>
+
+        <Button
+          onClick={() => {
+            handlePopUpOpen("selectImportPlatform");
+          }}
+          isDisabled={membership?.role !== ProjectMembershipRole.Admin}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+        >
+          Import
+        </Button>
+      </div>
+      <p className="mb-4 text-gray-400">Import data from another platform to Infisical.</p>
+
+      <SelectImportFromPlatformModal
+        isOpen={popUp.selectImportPlatform.isOpen}
+        onToggle={(state) => handlePopUpToggle("selectImportPlatform", state)}
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/ImportTab/components/EnvKeyPlatformModal.tsx

@@ -0,0 +1,155 @@
+import { useRef } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useImportEnvKey } from "@app/hooks/api/migration/mutations";
+import { GenericDropzone } from "@app/views/SecretMainPage/components/SecretDropzone/GenericDropzone";
+
+type Props = {
+  id?: string;
+  onClose: () => void;
+};
+
+const formSchema = z.object({
+  encryptionKey: z.string().min(1),
+  encryptedJson: z.object({
+    nonce: z.string().min(1),
+    data: z.string().min(1)
+  })
+});
+
+type TFormData = z.infer<typeof formSchema>;
+
+export const EnvKeyPlatformModal = ({ onClose }: Props) => {
+  const fileUploadRef = useRef<HTMLInputElement>(null);
+
+  const { mutateAsync: importEnvKey } = useImportEnvKey();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    setError,
+    formState: { isLoading, isDirty, isSubmitting, isValid }
+  } = useForm<TFormData>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const onSubmit = async (data: TFormData) => {
+    if (!data.encryptedJson) {
+      setError("encryptedJson", {
+        type: "required",
+        message: "File is required"
+      });
+      return;
+    }
+
+    try {
+      await importEnvKey({
+        encryptedJson: data.encryptedJson,
+        decryptionKey: data.encryptionKey
+      });
+      createNotification({
+        text: "Data imported successfully.",
+        type: "success"
+      });
+
+      onClose();
+      reset();
+
+      if (fileUploadRef.current) {
+        fileUploadRef.current.value = "";
+      }
+    } catch {
+      reset();
+    }
+  };
+
+  const onImportFileDrop = (file?: File) => {
+    const reader = new FileReader();
+    if (!file) {
+      createNotification({
+        text: "No file selected.",
+        type: "error"
+      });
+      return;
+    }
+    reader.onload = (event) => {
+      if (!event?.target?.result) return;
+
+      const droppedFile = event.target.result.toString();
+      const formattedData: Record<string, string> = JSON.parse(droppedFile);
+      if (
+        Object.keys(formattedData).includes("nonce") &&
+        Object.keys(formattedData).includes("data")
+      ) {
+        const data = {
+          nonce: formattedData.nonce,
+          data: formattedData.data
+        };
+        setValue("encryptedJson", data, { shouldDirty: true, shouldValidate: true });
+      } else {
+        setValue(
+          "encryptedJson",
+          {
+            nonce: "",
+            data: ""
+          },
+          { shouldDirty: true, shouldValidate: true }
+        );
+
+        if (fileUploadRef.current) {
+          fileUploadRef.current.value = "";
+        }
+        createNotification({
+          text: "Improper file format, please upload the EnvKey export.",
+          type: "error"
+        });
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+      <Controller
+        control={control}
+        name="encryptionKey"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Encryption key"
+            isRequired
+            errorText={error?.message}
+            isError={Boolean(error)}
+          >
+            <Input type="password" placeholder="" {...field} />
+          </FormControl>
+        )}
+      />
+
+      <GenericDropzone
+        ref={fileUploadRef}
+        text="Select Env Key export file"
+        onData={onImportFileDrop}
+        isSmaller
+      />
+
+      <div className="mt-6 flex items-center space-x-4">
+        <Button
+          type="submit"
+          isLoading={isLoading}
+          isDisabled={!isDirty || isSubmitting || isLoading || !isValid}
+        >
+          Import data
+        </Button>
+        <Button variant="outline_bg" onClick={onClose}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/ImportTab/components/SelectImportFromPlatformModal.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Modal, ModalContent } from "@app/components/v2";
+
+import { EnvKeyPlatformModal } from "./EnvKeyPlatformModal";
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+};
+
+enum WizardSteps {
+  SelectPlatform = "select-platform",
+  PlatformInputs = "platform-inputs"
+}
+
+const PLATFORM_LIST = [
+  {
+    icon: faKey,
+    platform: "env-key",
+    title: "Env Key"
+  }
+] as const;
+
+export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
+  const [wizardStep, setWizardStep] = useState(WizardSteps.SelectPlatform);
+  const [selectedPlatform, setSelectedPlatform] = useState<(typeof PLATFORM_LIST)[number] | null>(
+    null
+  );
+
+  const handleFormReset = (state: boolean = false) => {
+    onToggle(state);
+    setWizardStep(WizardSteps.SelectPlatform);
+    setSelectedPlatform(null);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
+      <ModalContent
+        title={
+          selectedPlatform ? `Import from ${selectedPlatform.title}` : "Import from external source"
+        }
+        className="my-4"
+      >
+        <AnimatePresence exitBeforeEnter>
+          {wizardStep === WizardSteps.SelectPlatform && (
+            <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-sm text-mineshaft-300">
+                Select a platform to import from
+              </div>
+              <div className="flex items-center space-x-4">
+                {PLATFORM_LIST.map((platform, idx) => (
+                  <div
+                    key={`platform-${idx + 1}`}
+                    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={() => {
+                      setSelectedPlatform(platform);
+                      setWizardStep(WizardSteps.PlatformInputs);
+                    }}
+                    onKeyDown={(evt) => {
+                      if (evt.key === "Enter") {
+                        setSelectedPlatform(platform);
+                        setWizardStep(WizardSteps.PlatformInputs);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={platform.icon} size="lg" />
+                    <div className="whitespace-pre-wrap text-center text-sm">{platform.title}</div>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+          {wizardStep === WizardSteps.PlatformInputs &&
+            selectedPlatform?.platform === "env-key" && (
+              <motion.div
+                key="env-key-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <EnvKeyPlatformModal onClose={() => handleFormReset(false)} />
+              </motion.div>
+            )}
+        </AnimatePresence>
+      </ModalContent>
+    </Modal>
+  );
+};

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

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

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

@@ -2,7 +2,7 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { Badge, Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useAddExternalKms, useUpdateExternalKms } from "@app/hooks/api";
 import {
@@ -244,7 +244,7 @@ export const AwsKmsForm = ({ onCompleted, onCancel, kms }: Props) => {
             >
               {AWS_REGIONS.map((awsRegion) => (
                 <SelectItem value={awsRegion.slug} key={`kms-aws-region-${awsRegion.slug}`}>
-                  {awsRegion.name} ({awsRegion.slug})
+                  {awsRegion.name} <Badge variant="success">{awsRegion.slug}</Badge>
                 </SelectItem>
               ))}
             </Select>

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

@@ -2,7 +2,11 @@ import { Fragment, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { Tab } from "@headlessui/react";
 
+import { OrgPermissionCan } from "@app/components/permissions";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
+import { ImportTab } from "../ImportTab";
 import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
@@ -13,7 +17,8 @@ const tabs = [
   { name: "Security", key: "tab-org-security" },
   { name: "Encryption", key: "tab-org-encryption" },
   { name: "Workflow Integrations", key: "workflow-integrations" },
-  { name: "Audit Log Streams", key: "tag-audit-log-streams" }
+  { name: "Audit Log Streams", key: "tag-audit-log-streams" },
+  { name: "Import", key: "tab-import" }
 ];
 export const OrgTabGroup = () => {
   const { query } = useRouter();
@@ -63,6 +68,11 @@ export const OrgTabGroup = () => {
         <Tab.Panel>
           <AuditLogStreamsTab />
         </Tab.Panel>
+        <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Workspace}>
+        <Tab.Panel>
+          <ImportTab />
+        </Tab.Panel>
+        </OrgPermissionCan>
       </Tab.Panels>
     </Tab.Group>
   );