Final changes

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

@@ -0,0 +1,46 @@
+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 { isLoading: isUpgradeStatusLoading } = useGetUpgradeProjectStatus({
+    projectId: currentWorkspace?.id ?? "",
+    enabled: 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 || !router.pathname.includes("/project")) {
+    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

@@ -29,7 +29,7 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
     refetch: manualProjectStatusRefetch
   } = useGetUpgradeProjectStatus({
     projectId: project.id,
-    enabled: membership.role === "admin",
+    enabled: membership.role === "admin" && project.version === ProjectVersion.V1,
     refetchInterval: 5_000,
     onSuccess: (data) => {
       if (membership.role !== "admin") {

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -49,6 +49,7 @@ import {
   SelectItem,
   UpgradePlanModal
 } from "@app/components/v2";
+import { UpgradeOverlay } from "@app/components/v2/UpgradeOverlay";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -238,7 +239,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
           projectId: newProjectId
         });
       }
-      
+
       // eslint-disable-next-line no-promise-executor-return -- We do this because the function returns too fast, which sometimes causes an error when the user is redirected.
       await new Promise((resolve) => setTimeout(resolve, 2_000));
 
@@ -261,6 +262,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
           <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
             <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
               <div>
+                <UpgradeOverlay />
                 {!router.asPath.includes("personal") && (
                   <div className="flex h-12 cursor-default items-center px-3 pt-6">
                     {(router.asPath.includes("project") ||

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -44,7 +44,6 @@ import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
-// import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
 
@@ -319,7 +318,10 @@ export const SecretOverviewPage = () => {
       </div>
 
       {currentWorkspace?.version === ProjectVersion.V1 && (
-        <UpgradeProjectAlert project={currentWorkspace} />
+        <>
+          <UpgradeProjectAlert project={currentWorkspace} />
+          {/* <UpgradeOverlay /> */}
+        </>
       )}
       <div className="mt-8 flex items-center justify-between">
         <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />