asset_backups/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-11-07 03:42:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add "Not Updateable" tooltip to scripts (#3852)

Browse Source 
* Refactor Tooltips component to use BadgeProps for variant type and enhance updateable logic with failure state

* Update tooltip content in Tooltips component to clarify update process for non-updateable scripts

* Refactor Tooltips component to make content optional and improve conditional rendering for better UX

* Refactor conditional rendering in Tooltips component to simplify updateable logic and enhance clarity for non-updateable scripts

* Refactor TooltipBadge component in Tooltips to enhance readability and streamline conditional rendering for privileged and non-updateable states

* Update @radix-ui/react-tooltip to version 1.2.0 and update tooltip component
This commit is contained in:
Bram Suurd
2025-04-12 17:45:07 +02:00
committed by GitHub
parent 6dbe7aed99
commit 3668c089dd
4 changed files with 403 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
View File

@@ -1,31 +1,29 @@
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Badge, type BadgeProps } from "@/components/ui/badge";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Script } from "@/lib/types";
import { cn } from "@/lib/utils";
import { CircleHelp } from "lucide-react";
import React from "react";
interface TooltipProps {
variant: "warning" | "success";
variant: BadgeProps["variant"];
label: string;
content: string;
content?: string;
}
const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
<TooltipProvider>
<Tooltip delayDuration={100}>
<TooltipTrigger className="flex items-center">
<TooltipTrigger className={cn("flex items-center", !content && "cursor-default")}>
<Badge variant={variant} className="flex items-center gap-1">
{label} <CircleHelp className="size-3" />
{label} {content && <CircleHelp className="size-3" />}
</Badge>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-sm max-w-64">
{content}
</TooltipContent>
{content && (
<TooltipContent side="bottom" className="text-sm max-w-64">
{content}
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
);
@@ -34,11 +32,7 @@ export default function Tooltips({ item }: { item: Script }) {
return (
<div className="flex items-center gap-2">
{item.privileged && (
<TooltipBadge
variant="warning"
label="Privileged"
content="This script will be run in a privileged LXC"
/>
<TooltipBadge variant="warning" label="Privileged" content="This script will be run in a privileged LXC" />
)}
{item.updateable && (
<TooltipBadge
@@ -47,6 +41,7 @@ export default function Tooltips({ item }: { item: Script }) {
content={`To Update ${item.name}, run the command below (or type update) in the LXC Console.`}
/>
)}
{!item.updateable && <TooltipBadge variant="failure" label="Not Updateable" />}
</div>
);
}