Fix merge conflicts with main

frontend/src/components/basic/dialog/AddUserDialog.tsx

@@ -1,7 +1,5 @@
 import { Fragment } from 'react';
-import { useRouter } from 'next/router';
 import { Dialog, Transition } from '@headlessui/react';
-import { plans } from 'public/data/frequentConstants';
 
 import Button from '../buttons/Button';
 import InputField from '../InputField';
@@ -12,7 +10,6 @@ type Props = {
   submitModal: (email: string) => void;
   email: string;
   setEmail: (email: string) => void;
-  currentPlan: string;
   orgName: string;
 };
 
@@ -22,13 +19,11 @@ const AddUserDialog = ({
   submitModal,
   email,
   setEmail,
-  currentPlan,
   orgName,
 }: Props) => {
   const submit = () => {
     submitModal(email);
   };
-  const router = useRouter();
 
   return (
     <div className='z-50'>
@@ -81,28 +76,6 @@ const AddUserDialog = ({
                       isRequired
                     />
                   </div>
-                  {currentPlan === plans.starter && (
-                    <div className='flex flex-row'>
-                      <button
-                        type='button'
-                        className='inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
-                        onClick={() =>
-                          router.push(`/settings/billing/${  router.query.id}`)
-                        }
-                      >
-                        You can add up to 5 members on the Starter plan.
-                      </button>
-                      <button
-                        type='button'
-                        className='ml-1 inline-flex justify-center rounded-md py-1 underline underline-offset-2 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
-                        onClick={() =>
-                          router.push(`/settings/billing/${  router.query.id}`)
-                        }
-                      >
-                        Upgrade now.
-                      </button>
-                    </div>
-                  )}
                   <div className='mt-4 max-w-max'>
                     <Button
                       onButtonPressed={submit}

frontend/src/components/context/Notifications/Notification.tsx

@@ -36,7 +36,7 @@ const Notification = ({ notification, clearNotification }: NotificationProps) =>
 
   return (
     <div
-      className="relative w-full flex items-center justify-between px-6 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-mineshaft-700 mb-3 right-3"
+      className="relative w-full flex items-center justify-between px-6 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-mineshaft-700 mb-3 right-3"
       role="alert"
     >
       {notification.type === 'error' && (

frontend/src/components/dashboard/DropZone.tsx

@@ -8,6 +8,7 @@ import { parseDocument, Scalar, YAMLMap } from 'yaml';
 
 import Button from '../basic/buttons/Button';
 import Error from '../basic/Error';
+import { useNotificationContext } from '../context/Notifications/NotificationProvider';
 import { parseDotEnv } from '../utilities/parseDotEnv';
 import guidGenerator from '../utilities/randomId';
 
@@ -32,6 +33,7 @@ const DropZone = ({
   numCurrentRows
 }: DropZoneProps) => {
   const { t } = useTranslation();
+  const { createNotification } = useNotificationContext();
 
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault();
@@ -110,6 +112,15 @@ const DropZone = ({
 
     const file = e.dataTransfer.files[0];
     const reader = new FileReader();
+    if (file === undefined) {
+      createNotification({
+        text: `You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.`,
+        type: 'error',
+        timeoutMs: 10000
+      });
+      setLoading(false);
+      return;
+    }
     const fileType = file.name.split('.')[1];
 
     reader.onload = (event) => {

frontend/src/components/v2/Tabs/Tabs.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { faArrowUpRightFromSquare, faCheck, faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as Tabs from '@radix-ui/react-tabs';
+
+
+export type TabsProps = Tabs.TabsProps & {};
+
+function copyToClipboard(id: string, setState: (value: boolean) => void) {
+  // Get the text field
+  const copyText = document.getElementById(id) as HTMLInputElement;
+
+  // Select the text field
+  copyText.select();
+  copyText.setSelectionRange(0, 99999); // For mobile devices
+
+  // Copy the text inside the text field
+  navigator.clipboard.writeText(copyText.value);
+
+  setState(true);
+  setTimeout(() => setState(false), 2000);
+  // Alert the copied text
+  // alert("Copied the text: " + copyText.value);
+}
+
+const CodeItem = ({isCopied, setIsCopied, textExplanation, code, id}: {isCopied: boolean, setIsCopied: (value: boolean) => void, textExplanation: string, code: string, id: string}) => {
+  return <>
+    <p className="mb-2 mt-4 text-bunker-300 text-sm leading-normal">
+      {textExplanation}
+    </p>
+    <div className='font-mono text-sm px-3 py-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between'>
+      <input disabled value={code} id={id} className='w-full bg-transparent text-bunker-200'/>
+      <button
+        type="button"
+        onClick={() => copyToClipboard(id, setIsCopied)}
+        className='h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200'
+      >
+        {isCopied ? (
+          <FontAwesomeIcon
+            icon={faCheck}
+            className='pr-0.5'
+          />
+        ) : (
+          <FontAwesomeIcon icon={faClipboard} />
+        )}
+      </button>
+    </div>
+  </>
+}
+
+export const TabsObject = () => {
+  const [downloadCodeCopied, setDownloadCodeCopied] = useState(false);
+  const [downloadCode2Copied, setDownloadCode2Copied] = useState(false);
+  const [loginCodeCopied, setLoginCodeCopied] = useState(false);
+  const [initCodeCopied, setInitCodeCopied] = useState(false);
+  const [runCodeCopied, setRunCodeCopied] = useState(false);
+
+  return <Tabs.Root
+    className="flex flex-col w-full cursor-default border border-mineshaft-600 rounded-md"
+    defaultValue="tab1"
+  >
+    <Tabs.List className="shrink-0 flex border-b border-mineshaft-600" aria-label="Manage your account">
+      <Tabs.Trigger
+        className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+        value="tab1"
+      >
+        MacOS
+      </Tabs.Trigger>
+      <Tabs.Trigger
+        className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+        value="tab2"
+      >
+        Windows
+      </Tabs.Trigger>
+      <Tabs.Trigger
+        className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+        value="tab3"
+      >
+        Arch Linux
+      </Tabs.Trigger>
+      <a
+          target='_blank'
+          rel="noopener noreferrer"
+          className="bg-bunker-700 hover:text-bunker-100 duration-200 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default"
+          href='https://infisical.com/docs/cli/overview'
+        >
+        Other Platforms <FontAwesomeIcon icon={faArrowUpRightFromSquare} className='ml-2'/>
+      </a>
+    </Tabs.List>
+    <Tabs.Content
+      className="grow p-5 bg-bunker-700 rounded-b-md outline-none cursor-default"
+      value="tab1"
+    >
+      <CodeItem isCopied={downloadCodeCopied} setIsCopied={setDownloadCodeCopied} textExplanation="1. Download CLI" code="brew install infisical/get-cli/infisical" id="downloadCode" />
+      <CodeItem isCopied={loginCodeCopied} setIsCopied={setLoginCodeCopied} textExplanation="2. Login" code="infisical login" id="loginCode" />
+      <CodeItem isCopied={initCodeCopied} setIsCopied={setInitCodeCopied} textExplanation="3. Choose Project" code="infisical init" id="initCode" />
+      <CodeItem isCopied={runCodeCopied} setIsCopied={setRunCodeCopied} textExplanation="4. Done! Now, you can prepend your usual start script with:" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" id="runCode" />
+      <p className='text-bunker-300 text-sm mt-2'>You can find example of start commands for different frameworks <a
+        className='text-primary underline underline-offset-2'
+        target="_blank"
+        rel="noopener noreferrer"
+        href='https://infisical.com/docs/integrations/overview'
+      >
+        here
+      </a>. </p>
+    </Tabs.Content>
+    <Tabs.Content
+      className="grow p-5 bg-bunker-700 rounded-b-md outline-none"
+      value="tab2"
+    >
+      <CodeItem isCopied={downloadCodeCopied} setIsCopied={setDownloadCodeCopied} textExplanation="1. Download CLI" code="brew install infisical/get-cli/infisical" id="downloadCodeW" />
+      <div className='font-mono text-sm px-3 py-2 mt-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between'>
+        <input disabled value="scoop install infisical" id="downloadCodeW2" className='w-full bg-transparent text-bunker-200'/>
+        <button
+          type="button"
+          onClick={() => copyToClipboard("downloadCodeW2", setDownloadCode2Copied)}
+          className='h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200'
+        >
+          {downloadCode2Copied ? (
+            <FontAwesomeIcon
+              icon={faCheck}
+              className='pr-0.5'
+            />
+          ) : (
+            <FontAwesomeIcon icon={faClipboard} />
+          )}
+        </button>
+      </div>
+      <CodeItem isCopied={loginCodeCopied} setIsCopied={setLoginCodeCopied} textExplanation="2. Login" code="infisical login" id="loginCodeW" />
+      <CodeItem isCopied={initCodeCopied} setIsCopied={setInitCodeCopied} textExplanation="3. Choose Project" code="infisical init" id="initCodeW" />
+      <CodeItem isCopied={runCodeCopied} setIsCopied={setRunCodeCopied} textExplanation="4. Done! Now, you can prepend your usual start script with:" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" id="runCodeW" />
+      <p className='text-bunker-300 text-sm mt-2'>You can find example of start commands for different frameworks <a
+        className='text-primary underline underline-offset-2'
+        target="_blank"
+        rel="noopener noreferrer"
+        href='https://infisical.com/docs/integrations/overview'
+      >
+        here
+      </a>. </p>
+    </Tabs.Content>
+    <Tabs.Content
+      className="grow p-5 bg-bunker-700 rounded-b-md outline-none cursor-default"
+      value="tab3"
+    >
+      <CodeItem isCopied={downloadCodeCopied} setIsCopied={setDownloadCodeCopied} textExplanation="1. Download CLI" code="brew install infisical/get-cli/infisical" id="downloadCodeL" />
+      <CodeItem isCopied={loginCodeCopied} setIsCopied={setLoginCodeCopied} textExplanation="2. Login" code="infisical login" id="loginCodeL" />
+      <CodeItem isCopied={initCodeCopied} setIsCopied={setInitCodeCopied} textExplanation="3. Choose Project" code="infisical init" id="initCodeL" />
+      <CodeItem isCopied={runCodeCopied} setIsCopied={setRunCodeCopied} textExplanation="4. Done! Now, you can prepend your usual start script with:" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" id="runCodeL" />
+      <p className='text-bunker-300 text-sm mt-2'>You can find example of start commands for different frameworks <a
+        className='text-primary underline underline-offset-2'
+        target="_blank"
+        rel="noopener noreferrer"
+        href='https://infisical.com/docs/integrations/overview'
+      >
+        here
+      </a>. </p>
+    </Tabs.Content>
+  </Tabs.Root>
+};

frontend/src/components/v2/Tabs/index.tsx

@@ -0,0 +1,4 @@
+export type {
+  TabsProps
+} from './Tabs';
+export { TabsObject } from './Tabs';

frontend/src/const.ts

@@ -45,4 +45,4 @@ const plansProd: Mapping = {
 
 export const plans = plansProd || plansDev;
 
-export const leaveConfirmDefaultMessage = 'Do you want to save your results before leaving this page?';
+export const leaveConfirmDefaultMessage = 'Your changes will be lost if you leave the page. Are you sure you want to continue?';

frontend/src/pages/home/[id].tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faSlack } from '@fortawesome/free-brands-svg-icons';
@@ -16,6 +17,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+import { TabsObject } from '@app/components/v2/Tabs';
 
 import registerUserAction from '../api/userActions/registerUserAction';
 
@@ -43,7 +45,7 @@ const learningItem = ({
       <a
         target={`${link.includes('https') ? '_blank' : '_self'}`}
         rel="noopener noreferrer"
-        className="w-full"
+        className={`w-full ${complete && 'opacity-30 hover:opacity-100 duration-200'}`}
         href={link}
       >
         <div
@@ -57,13 +59,13 @@ const learningItem = ({
               });
             }
           }}
-          className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
+          className="relative group bg-bunker-500 hover:bg-mineshaft-700 shadow-xl duration-200 rounded-md border border-mineshaft-600 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden mb-3 cursor-pointer"
         >
           <div className="flex flex-row items-center mr-4">
             <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
             {complete && (
-              <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
-                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
+              <div className="bg-bunker-500 group-hover:bg-mineshaft-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
+                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-primary" />
               </div>
             )}
             <div className="flex flex-col items-start">
@@ -72,11 +74,11 @@ const learningItem = ({
             </div>
           </div>
           <div
-            className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}
+            className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-primary'}`}
           >
             {complete ? 'Complete!' : `About ${time}`}
           </div>
-          {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+          {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-primary" />}
         </div>
       </a>
     );
@@ -101,7 +103,7 @@ const learningItem = ({
           <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
             <FontAwesomeIcon
               icon={faCheckCircle}
-              className="absolute text-4xl left-12 top-16 w-5 h-5 text-green"
+              className="absolute text-4xl left-12 top-16 w-5 h-5 text-primary"
             />
           </div>
         )}
@@ -110,10 +112,10 @@ const learningItem = ({
           <div className="text-sm font-normal mt-0.5">{subText}</div>
         </div>
       </div>
-      <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}>
+      <div className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-primary'}`}>
         {complete ? 'Complete!' : `About ${time}`}
       </div>
-      {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+      {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-primary" />}
     </div>
   );
 };
@@ -142,16 +144,17 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-4">
+    <div className="mx-6 lg:mx-0 w-full 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">
+      <div className="flex relative flex-col items-center text-gray-300 text-lg mx-auto px-6 max-w-3xl lg:max-w-4xl xl:max-w-5xl py-6">
+        <div className="text-5xl font-bold text-left w-full mt-12">Your quick start guide</div>
+        <div className="text-lg text-left w-full pt-2 pb-4 mb-14 text-bunker-300">
           Click on the items below and follow the instructions.
         </div>
+        <div className='absolute h-min top-0 right-0 hidden lg:block'><Image src="/images/dragon-book.svg" height={250} width={400} alt="start guise dragon illustration" /></div>
         {learningItem({
           text: 'Get to know Infisical',
           subText: '',
@@ -170,17 +173,32 @@ export default function Home() {
           userAction: 'first_time_secrets_pushed',
           link: `/dashboard/${router.query.id}`
         })}
-        {learningItem({
-          text: 'Inject secrets locally',
-          subText: 'Replace .env files with a more secure and efficient alternative.',
-          complete: false,
-          icon: faNetworkWired,
-          time: '8 min',
-          link: 'https://infisical.com/docs/getting-started/quickstart'
-        })}
+        <div className="relative group bg-bunker-500 shadow-xl duration-200 rounded-md border border-mineshaft-600 pl-2 pr-2 pt-4 pb-2 h-full w-full flex flex-col items-center justify-between overflow-hidden mb-3 cursor-default">
+          <div className='w-full flex flex-row items-center mb-4 pr-4'>
+            <div className="flex flex-row items-center mr-4 w-full">
+              <FontAwesomeIcon icon={faNetworkWired} className="text-4xl mx-2 w-16" />
+              {false && (
+                <div className="bg-bunker-500 group-hover:bg-mineshaft-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
+                  <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
+                </div>
+              )}
+              <div className="flex pl-0.5 flex-col items-start">
+                <div className="text-xl font-semibold mt-0.5">Inject secrets locally</div>
+                <div className="text-sm font-normal">Replace .env files with a more secure and efficient alternative.</div>
+              </div>
+            </div>
+            <div
+              className={`pr-4 font-semibold text-sm w-28 text-right ${false && 'text-green'}`}
+            >
+              About 2 min
+            </div>
+          </div>
+          <TabsObject/>
+          {false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+        </div>
         {learningItem({
           text: 'Integrate Infisical with your infrastructure',
-          subText: 'Only a few integrations are currently available. Many more coming soon!',
+          subText: 'Connect Infisical to various 3rd party services and platforms.',
           complete: false,
           icon: faPlug,
           time: '15 min',

frontend/src/pages/requestnewinvite.tsx

@@ -20,7 +20,7 @@ export default function RequestNewInvite() {
           doesn't work, please reach out to us at support@infisical.com
         </p>
         <div className="">
-          <Image src="/images/invitation-expired.svg" height={500} width={800} alt="google logo" />
+          <Image src="/images/invitation-expired.svg" height={500} width={800} alt="invitation expired illustration" />
         </div>
       </div>
     </div>

frontend/src/pages/settings/billing/[id].tsx

@@ -31,7 +31,7 @@ export default function SettingsBilling() {
     {
       key: 2,
       name: 'Team',
-      price: '$7',
+      price: '$8',
       priceExplanation: t('billing:professional.price-explanation')!,
       text: 'For teams that want to improve their efficiency and security.',
       buttonTextMain: t('billing:upgrade')!,
@@ -41,7 +41,7 @@ export default function SettingsBilling() {
     {
       key: 3,
       name: t('billing:professional.name')!,
-      price: '$14',
+      price: '$18',
       priceExplanation: t('billing:professional.price-explanation')!,
       text: t('billing:enterprise.text')!,
       subtext: t('billing:professional.subtext')!,

frontend/src/pages/settings/org/[id].tsx

@@ -222,7 +222,6 @@ export default function SettingsOrg() {
                 submitModal={submitAddUserModal}
                 email={emailUser}
                 setEmail={setEmailUser}
-                currentPlan={currentPlan}
                 orgName={orgName}
               />
               <UpgradePlanModal