Update UpgradeProjectAlert.tsx

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>
   );