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

(style): Show upgrade alert to all users
This commit is contained in:
Maidul Islam
2024-02-22 22:31:05 -05:00
committed by GitHub
2 changed files with 33 additions and 9 deletions

View File

@@ -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">

View File

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