Merge branch 'main' into feat-admin-signup

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/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
@@ -229,7 +221,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/UpgradeOverlay/UpgradeOverlay.tsx

@@ -0,0 +1,49 @@
+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;
+  }
+
+  // for non admin this would throw an error
+  // so no need to render
+  return !isUpgradeStatusLoading && isUpgrading ? ( // 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,103 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+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";
+
+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;
+  if (membership.role !== "admin") return null;
+
+  return (
+    <div className="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">
+      <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>
+        Upgrade your project version to continue receiving the latest improvements and patches.
+        {currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>}
+      </div>
+      <div className="my-2">
+        <Button isLoading={isLoading} isDisabled={isLoading} onClick={onUpgradeProject}>
+          Upgrade
+        </Button>
+      </div>
+    </div>
+  );
+};

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

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