s54b/ProxmoxVE_Scripts
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-07-09 23:47:38 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Add "Not Updateable" tooltip to scripts (#3852)
Some checks failed
Create Changelog Pull Request / update-changelog-pull-request (push) Has been cancelled
Details
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details
Crawl Versions from newreleases.io / crawl-versions (push) Has been cancelled
Details
Build and Publish Docker Image / build (push) Has been cancelled
Details
Create Daily Release / create-daily-release (push) Has been cancelled
Details

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

24
frontend/src/components/ui/tooltip.tsx
View File

@ -1,15 +1,15 @@
"use client";
"use client"
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/lib/utils";
import { cn } from "@/lib/utils"
const TooltipProvider = TooltipPrimitive.Provider;
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root;
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
@ -19,12 +19,12 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
className
)}
{...props}
/>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }