MVP preliminary idea for initial sync behavior

frontend/src/components/basic/table/ProjectUsersTable.tsx

@@ -59,8 +59,8 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
   const workspaceId = router.query.id as string;
   // Delete the row in the table (e.g. a user)
   // #TODO: Add a pop-up that warns you that the user is going to be deleted.
-  const handleDelete = async (membershipId: string) => {
-    await deleteUserFromWorkspaceMutateAsync({ membershipId, workspaceId });
+  const handleDelete = async (email: string) => {
+    await deleteUserFromWorkspaceMutateAsync({ emails: [email], workspaceId });
   };
 
   const handleRoleUpdate = async (index: number, e: string) => {
@@ -368,7 +368,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
                     myRole !== "member" ? (
                       <div className="mt-0.5 flex items-center opacity-50 hover:opacity-100">
                         <Button
-                          onButtonPressed={() => handleDelete(row.membershipId)}
+                          onButtonPressed={() => handleDelete(row.email)}
                           color="red"
                           size="icon-sm"
                           icon={faX}

frontend/src/components/signup/EnterEmailStep.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
+import axios from "axios";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useSendVerificationEmail } from "@app/hooks/api";
 
 import { Button, Input } from "../v2";
@@ -25,7 +27,8 @@ export default function EnterEmailStep({
   setEmail,
   incrementStep
 }: DownloadBackupPDFStepProps): JSX.Element {
-  const { mutateAsync } = useSendVerificationEmail();
+  const { createNotification } = useNotificationContext();
+  const { mutateAsync, isLoading } = useSendVerificationEmail();
   const [emailError, setEmailError] = useState(false);
   const { t } = useTranslation();
 
@@ -46,8 +49,18 @@ export default function EnterEmailStep({
 
     // If everything is correct, go to the next step
     if (!emailCheckBool) {
-      await mutateAsync({ email });
-      incrementStep();
+      try {
+        await mutateAsync({ email });
+        incrementStep();
+      } catch(e) {
+        if (axios.isAxiosError(e)) {
+          const { message = "Something went wrong" } = e.response?.data as { message: string};
+          createNotification({
+            type: "error",
+            text:  message
+          })
+        }
+      }
     }
   };
 
@@ -78,6 +91,8 @@ export default function EnterEmailStep({
               className='h-14'
               colorSchema="primary"
               variant="outline_bg"
+              isLoading={isLoading}
+              isDisabled={isLoading}
             > {String(t("signup.step1-submit"))} </Button>
           </div>
         </div>

frontend/src/components/utilities/cryptography/crypto.ts

@@ -13,12 +13,12 @@ nacl.util = require("tweetnacl-util");
  */
 const generateKeyPair = () => {
   const pair = nacl.box.keyPair();
-  
-  return ({
-		publicKey: nacl.util.encodeBase64(pair.publicKey),
-		privateKey: nacl.util.encodeBase64(pair.secretKey)
-  });
-}
+
+  return {
+    publicKey: nacl.util.encodeBase64(pair.publicKey),
+    privateKey: nacl.util.encodeBase64(pair.secretKey)
+  };
+};
 
 type EncryptAsymmetricProps = {
   plaintext: string;
@@ -29,27 +29,19 @@ type EncryptAsymmetricProps = {
 /**
  * Verify that private key [privateKey] is the one that corresponds to
  * the public key [publicKey]
- * @param {Object} 
+ * @param {Object}
  * @param {String} - base64-encoded Nacl private key
  * @param {String} - base64-encoded Nacl public key
  */
-const verifyPrivateKey = ({
-  privateKey,
-  publicKey
-}: {
-  privateKey: string;
-  publicKey: string;
-}) => {
+const verifyPrivateKey = ({ privateKey, publicKey }: { privateKey: string; publicKey: string }) => {
   const derivedPublicKey = nacl.util.encodeBase64(
-    nacl.box.keyPair.fromSecretKey(
-      nacl.util.decodeBase64(privateKey)
-    ).publicKey
+    nacl.box.keyPair.fromSecretKey(nacl.util.decodeBase64(privateKey)).publicKey
   );
-  
+
   if (derivedPublicKey !== publicKey) {
     throw new Error("Failed to verify private key");
   }
-}
+};
 
 /**
  * Derive a key from password [password] and salt [salt] using Argon2id
@@ -218,7 +210,14 @@ const decryptSymmetric = ({ ciphertext, iv, tag, key }: DecryptSymmetricProps):
   try {
     plaintext = aes.decrypt({ ciphertext, iv, tag, secret: key });
   } catch (err) {
-    console.log("Failed to perform decryption");
+    console.log("Failed to decrypt with the following parameters", {
+      ciphertext,
+      iv,
+      tag,
+      key
+    });
+    console.log("Failed to perform decryption", err);
+
     process.exit(1);
   }
 
@@ -229,7 +228,8 @@ export {
   decryptAssymmetric,
   decryptSymmetric,
   deriveArgonKey,
-  encryptAssymmetric, 
+  encryptAssymmetric,
   encryptSymmetric,
   generateKeyPair,
-  verifyPrivateKey};
+  verifyPrivateKey
+};

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -56,7 +56,6 @@ const encryptSecrets = async ({
         publicKey: wsKey.sender.publicKey,
         privateKey: PRIVATE_KEY
       });
-      
     } else {
       // case: a (shared) key does not exist for the workspace
       randomBytes = crypto.randomBytes(16).toString("hex");
@@ -116,7 +115,6 @@ const encryptSecrets = async ({
 
       return result;
     });
-    
   } catch (error) {
     console.log("Error while encrypting secrets");
   }

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -30,7 +30,7 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          "flex items-center justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
+          "flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
           isDisabled && "bg-bunker-400 hover:bg-bunker-400",
           isChecked && "bg-primary hover:bg-primary",
           Boolean(children) && "mr-3",
@@ -46,7 +46,7 @@ export const Checkbox = ({
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <label className="text-sm whitespace-nowrap" htmlFor={id}>
+      <label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
         {children}
         {isRequired && <span className="pl-1 text-red">*</span>}
       </label>

frontend/src/components/v2/Menu/Menu.tsx

@@ -42,27 +42,27 @@ export const MenuItem = <T extends ElementType = "button">({
   const iconRef = useRef();
 
   return (
-    <a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
+    <div onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
       <li
         className={twMerge(
-          "group px-1 py-2 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
+          "duration-50 group mt-0.5 flex cursor-pointer flex-col rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
           isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
-          isDisabled && "hover:bg-transparent cursor-not-allowed",
+          isDisabled && "cursor-not-allowed hover:bg-transparent",
           className
         )}
       >
-        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
+        <motion.span className="flex w-full flex-row items-center justify-start rounded-sm">
           <Item
             type="button"
             role="menuitem"
-            className="flex items-center relative"
+            className="relative flex items-center"
             ref={inputRef}
             {...props}
           >
             <div
               className={`${
                 isSelected ? "visisble" : "invisible"
-              } -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}
+              } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
             />
             {/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
             {icon && (
@@ -81,7 +81,7 @@ export const MenuItem = <T extends ElementType = "button">({
           {description && <span className="mt-2 text-xs">{description}</span>}
         </motion.span>
       </li>
-    </a>
+    </div>
   );
 };
 
@@ -103,16 +103,16 @@ export const SubMenuItem = <T extends ElementType = "button">({
     <a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
       <li
         className={twMerge(
-          "group px-1 py-1 mt-0.5 font-inter flex flex-col text-sm text-mineshaft-300 hover:text-mineshaft-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
-          isDisabled && "hover:bg-transparent cursor-not-allowed",
+          "duration-50 group mt-0.5 flex cursor-pointer flex-col rounded px-1 py-1 font-inter text-sm text-mineshaft-300 transition-all hover:bg-mineshaft-700 hover:text-mineshaft-100",
+          isDisabled && "cursor-not-allowed hover:bg-transparent",
           className
         )}
       >
-        <motion.span className="w-full flex flex-row items-center justify-start rounded-sm pl-6">
+        <motion.span className="flex w-full flex-row items-center justify-start rounded-sm pl-6">
           <Item
             type="button"
             role="menuitem"
-            className="flex items-center relative"
+            className="relative flex items-center"
             ref={inputRef}
             {...props}
           >

frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx

@@ -0,0 +1,47 @@
+import { useRouter } from "next/router";
+
+import { Spinner } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useGetUpgradeProjectStatus } from "@app/hooks/api/workspace/queries";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+
+export const UpgradeOverlay = () => {
+  const router = useRouter();
+  const { currentWorkspace } = useWorkspace();
+  const [isUpgrading, setIsUpgrading] = useToggle(false);
+
+  const isProjectRoute = router.pathname.includes("/project");
+
+  const { isLoading: isUpgradeStatusLoading } = useGetUpgradeProjectStatus({
+    projectId: currentWorkspace?.id ?? "",
+    enabled: isProjectRoute && currentWorkspace && currentWorkspace.version === ProjectVersion.V1,
+    refetchInterval: 5_000,
+    onSuccess: (data) => {
+      if (!data) return;
+
+      if (data.status !== "IN_PROGRESS") {
+        setIsUpgrading.off();
+      } else if (data?.status === "IN_PROGRESS") {
+        setIsUpgrading.on();
+      }
+    }
+  });
+
+  // make sure only to display this on /project routes
+  if (!currentWorkspace || !isProjectRoute) {
+    return null;
+  }
+
+  return !isUpgradeStatusLoading && isUpgrading ? (
+    <div className="absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500 bg-opacity-80">
+      <Spinner size="lg" className="text-primary" />
+      <div className="ml-4 flex flex-col space-y-1">
+        <div className="text-3xl font-medium text-white">Please wait</div>
+        <span className="inline-block text-white">Upgrading your project...</span>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

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

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

frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx

@@ -0,0 +1,145 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { useProjectPermission } from "@app/context";
+import { useGetUpgradeProjectStatus, useUpgradeProject } from "@app/hooks/api";
+import { Workspace } from "@app/hooks/api/types";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+
+import { Button } from "../Button";
+import { Tooltip } from "../Tooltip";
+
+export type UpgradeProjectAlertProps = {
+  project: Workspace;
+};
+
+export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.Element | null => {
+  const { createNotification } = useNotificationContext();
+  const router = useRouter();
+  const { membership } = useProjectPermission();
+  const upgradeProject = useUpgradeProject();
+  const [currentStatus, setCurrentStatus] = useState<string | null>(null);
+  const [isUpgrading, setIsUpgrading] = useState(false);
+
+  const {
+    data: projectStatus,
+    isLoading: statusIsLoading,
+    refetch: manualProjectStatusRefetch
+  } = useGetUpgradeProjectStatus({
+    projectId: project.id,
+    enabled: membership.role === "admin" && project.version === ProjectVersion.V1,
+    refetchInterval: 5_000,
+    onSuccess: (data) => {
+      if (membership.role !== "admin") {
+        return;
+      }
+
+      if (data && data?.status !== null) {
+        if (data.status === "IN_PROGRESS") {
+          setCurrentStatus("Your upgrade is being processed.");
+        } else if (data.status === "FAILED") {
+          setCurrentStatus("Upgrade failed, please try again.");
+        }
+      }
+
+      if (currentStatus !== null && data?.status === null) {
+        router.reload();
+      }
+    }
+  });
+
+  const onUpgradeProject = useCallback(async () => {
+    if (upgradeProject.isLoading) {
+      return;
+    }
+    setIsUpgrading(true);
+    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+    if (!PRIVATE_KEY) {
+      createNotification({
+        type: "error",
+        text: "Private key not found"
+      });
+      return;
+    }
+
+    await upgradeProject.mutateAsync({
+      projectId: project.id,
+      privateKey: PRIVATE_KEY
+    });
+
+    manualProjectStatusRefetch();
+
+    setTimeout(() => setIsUpgrading(false), 5_000);
+  }, []);
+
+  const isLoading =
+    isUpgrading ||
+    ((upgradeProject.isLoading ||
+      currentStatus !== null ||
+      (currentStatus === null && statusIsLoading)) &&
+      projectStatus?.status !== "FAILED");
+
+  if (project.version !== ProjectVersion.V1) return null;
+
+  return (
+    <div
+      className={twMerge(
+        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+        membership.role !== "admin" && "opacity-80"
+      )}
+    >
+      <FontAwesomeIcon icon={faWarning} className="pr-6 text-6xl text-white/80" />
+      <div className="flex w-full flex-col text-sm">
+        <span className="mb-2 text-lg font-semibold">Upgrade your project</span>
+        {membership.role === "admin" ? (
+          <>
+            <p>
+              Upgrade your project version to continue receiving the latest improvements and
+              patches.
+            </p>
+            <Link href="https://infisical.com/docs/documentation/platform/project-upgrade">
+              <a target="_blank" className="text-primary-400">
+                Learn more
+              </a>
+            </Link>
+          </>
+        ) : (
+          <>
+            <p>
+              <span className="font-bold">Please ask a project admin to upgrade the project.</span>
+              <br />
+              Upgrading the project version is required to continue receiving the latest
+              improvements and patches.
+            </p>
+            <Link href="https://infisical.com/docs/documentation/platform/project-upgrade">
+              <a target="_blank" className="text-primary-400">
+                Learn more
+              </a>
+            </Link>
+          </>
+        )}
+        {currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>}
+      </div>
+      <div className="my-2">
+        <Tooltip
+          className={twMerge(membership.role === "admin" && "hidden")}
+          content="You need to be an admin to upgrade the project."
+        >
+          <Button
+            isLoading={isLoading}
+            isDisabled={isLoading || membership.role !== "admin"}
+            onClick={onUpgradeProject}
+          >
+            Upgrade
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

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

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