feat: add documentation

docs/documentation/guides/migrating-from-envkey.mdx

@@ -12,11 +12,29 @@ Infisical is used by 10,000+ organizations across all industries including First
 
 ## Migrating from EnvKey
 
-To facilitate customer transition from EnvKey to Infisical, we have been working closely with the EnvKey team to provide a simple migration path for all EnvKey customers.
+<Steps>
+<Step>
+Open the EnvKey dashboard and go to My Org.
+![EnvKey Dashboard](../../images/guides/import-envkey/envkey-dashboard.png)
+</Step>
+<Step>
+Go to Import/Export on the top right corner, Click on Export Org and save the exported file.
+![Export organization](../../images/guides/import-envkey/envkey-export.png)
+</Step>
+<Step>
+Click on copy to copy the encryption key and save it.
+![Copy encryption key](../../images/guides/import-envkey/copy-encryption-key.png)
+</Step>
+<Step>
+Open the Infisical dashboard and go to Organization Settings > Import.
+![Infisical Organization settings](../../images/guides/import-envkey/infisical-import-dashboard.png)
+</Step>
+<Step>
+Upload the exported file from EnvKey, paste the encryption key and click Import.
+![Infisical Import EnvKey](../../images/guides/import-envkey/infisical-import-envkey.png)
+</Step>
+</Steps>
 
-## Automated migration
-
-Our team is currently working on creating an automated migration process that would include secrets, policies, and other important resources. If you are interested in that, please [reach out to our team](mailto:[email protected]) with any questions. 
 
 ## Talk to our team
 

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { faArrowUpRightFromSquare, faBookOpen, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -23,8 +24,8 @@ type TForm = z.infer<typeof formSchema>;
 export const ImportTab = () => {
   const fileUploadRef = useRef<HTMLInputElement>(null);
 
-const { mutateAsync: importEnvKey
+  const { mutateAsync: importEnvKey
-} = useImportEnvKey();
+  } = useImportEnvKey();
 
   const {
     handleSubmit,
@@ -46,7 +47,7 @@ const { mutateAsync: importEnvKey
       file: undefined
     }
   });
-  
+
   const parseJson = (src: ArrayBuffer) => {
     console.log("here")
     const file = src.toString();
@@ -99,7 +100,7 @@ const { mutateAsync: importEnvKey
       });
       return;
     }
-    
+
     const res = await importEnvKey({ encryptedJson: data.encryptedJson, decryptionKey: data.decryptionKey });
     if (res.success) {
       createNotification({
@@ -132,7 +133,21 @@ const { mutateAsync: importEnvKey
         Import data from another secret manager to Infisical.
       </p>
       <div className="border-b border-mineshaft-800 my-6" />
-      <h3 className="text-lg font-medium text-white mb-4">Import from EnvKey</h3>
+      <div className="flex justify-left">
+        <h3 className="text-lg font-medium text-white mb-4">Import from EnvKey</h3>
+        <Link href="https://infisical.com/docs/documentation/guides/migrating-from-envkey" passHref>
+          <a target="_blank" rel="noopener noreferrer">
+            <div className="ml-2 mb-1 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 className="mb-4">
         <form onSubmit={handleSubmit(submitExport)}>
           <Controller