Merge pull request #1447 from Infisical/daniel/show-upgrade-to-everyone

(style): Show upgrade alert to all users

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

@@ -33,9 +33,7 @@ export const UpgradeOverlay = () => {
     return null;
   }
 
-  // for non admin this would throw an error
+  return !isUpgradeStatusLoading && isUpgrading ? (
-  // 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">

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,6 +11,7 @@ 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;
@@ -83,20 +85,44 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       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">
+    <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}>
+        <Tooltip
-          Upgrade
+          className={twMerge(membership.role === "admin" && "hidden")}
-        </Button>
+          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>
   );