From 3063bb998271de3480c4c0cb99480ac5957df980 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Fri, 23 Feb 2024 01:12:02 +0100
Subject: [PATCH 1/3] Update UpgradeProjectAlert.tsx

---
 .../UpgradeProjectAlert.tsx                   | 50 ++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx b/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
index db5eb1179..28ce117be 100644
--- a/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
+++ b/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
@@ -2,6 +2,7 @@ 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 { twMerge } from "tailwind-merge";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useProjectPermission } from "@app/context";
@@ -10,12 +11,14 @@ 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 => {
+  console.log("yes");
   const { createNotification } = useNotificationContext();
   const router = useRouter();
   const { membership } = useProjectPermission();
@@ -23,6 +26,8 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
   const [currentStatus, setCurrentStatus] = useState<string | null>(null);
   const [isUpgrading, setIsUpgrading] = useState(false);
 
+  console.log("yes 2");
+
   const {
     data: projectStatus,
     isLoading: statusIsLoading,
@@ -50,6 +55,8 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
     }
   });
 
+  console.log("yes 3");
+
   const onUpgradeProject = useCallback(async () => {
     if (upgradeProject.isLoading) {
       return;
@@ -75,6 +82,8 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
     setTimeout(() => setIsUpgrading(false), 5_000);
   }, []);
 
+  console.log("yes 4");
+
   const isLoading =
     isUpgrading ||
     ((upgradeProject.isLoading ||
@@ -82,21 +91,48 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       (currentStatus === null && statusIsLoading)) &&
       projectStatus?.status !== "FAILED");
 
-  if (project.version !== ProjectVersion.V1) return null;
-  if (membership.role !== "admin") return null;
+  console.log("yes 5");
 
+  if (project.version !== ProjectVersion.V1) return null;
+
+  console.log("yes 6");
   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">
+    <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>
-        Upgrade your project version to continue receiving the latest improvements and patches.
+        {membership.role === "admin" ? (
+          <p>
+            Upgrade your project version to continue receiving the latest improvements and patches.
+          </p>
+        ) : (
+          <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>
+        )}
         {currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>}
       </div>
       <div className="my-2">
-        <Button isLoading={isLoading} isDisabled={isLoading} onClick={onUpgradeProject}>
-          Upgrade
-        </Button>
+        <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>
   );

From ceb7fafc063fdadf00e4fbd9fddbc4527219c56b Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Fri, 23 Feb 2024 01:12:22 +0100
Subject: [PATCH 2/3] Update UpgradeProjectAlert.tsx

---
 .../v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx     | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx b/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
index 28ce117be..121f77067 100644
--- a/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
+++ b/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx
@@ -18,7 +18,6 @@ export type UpgradeProjectAlertProps = {
 };
 
 export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.Element | null => {
-  console.log("yes");
   const { createNotification } = useNotificationContext();
   const router = useRouter();
   const { membership } = useProjectPermission();
@@ -26,8 +25,6 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
   const [currentStatus, setCurrentStatus] = useState<string | null>(null);
   const [isUpgrading, setIsUpgrading] = useState(false);
 
-  console.log("yes 2");
-
   const {
     data: projectStatus,
     isLoading: statusIsLoading,
@@ -55,8 +52,6 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
     }
   });
 
-  console.log("yes 3");
-
   const onUpgradeProject = useCallback(async () => {
     if (upgradeProject.isLoading) {
       return;
@@ -82,8 +77,6 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
     setTimeout(() => setIsUpgrading(false), 5_000);
   }, []);
 
-  console.log("yes 4");
-
   const isLoading =
     isUpgrading ||
     ((upgradeProject.isLoading ||
@@ -91,11 +84,8 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       (currentStatus === null && statusIsLoading)) &&
       projectStatus?.status !== "FAILED");
 
-  console.log("yes 5");
-
   if (project.version !== ProjectVersion.V1) return null;
 
-  console.log("yes 6");
   return (
     <div
       className={twMerge(

From cadf6e1157018cf7a26043f8ba4b84c057fe1f3b Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Fri, 23 Feb 2024 01:13:26 +0100
Subject: [PATCH 3/3] Update UpgradeOverlay.tsx

---
 frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx b/frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx
index 7dd1f5afa..f6d8d71c7 100644
--- a/frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx
+++ b/frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx
@@ -33,9 +33,7 @@ export const UpgradeOverlay = () => {
     return null;
   }
 
-  // for non admin this would throw an error
-  // so no need to render
-  return !isUpgradeStatusLoading && isUpgrading ? ( // isUpgrading
+  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">