mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-07-09 23:47:38 +00:00
Add "Not Updateable" tooltip to scripts (#3852)
Some checks failed
Create Changelog Pull Request / update-changelog-pull-request (push) Has been cancelled
Frontend CI/CD / build (push) Has been cancelled
Frontend CI/CD / deploy (push) Has been cancelled
Crawl Versions from newreleases.io / crawl-versions (push) Has been cancelled
Build and Publish Docker Image / build (push) Has been cancelled
Create Daily Release / create-daily-release (push) Has been cancelled
Some checks failed
Create Changelog Pull Request / update-changelog-pull-request (push) Has been cancelled
Frontend CI/CD / build (push) Has been cancelled
Frontend CI/CD / deploy (push) Has been cancelled
Crawl Versions from newreleases.io / crawl-versions (push) Has been cancelled
Build and Publish Docker Image / build (push) Has been cancelled
Create Daily Release / create-daily-release (push) Has been cancelled
* 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:
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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 }
|
||||
|
Reference in New Issue
Block a user