[UI v2] Refactor parts of variables components (PrefectHQ#16084)

ui-v2/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.vite
 
 # Editor directories and files
 .vscode/*

ui-v2/package.json

@@ -8,6 +8,7 @@
 		"build": "tsc -b && vite build",
 		"test": "vitest",
 		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
 		"format:check": "biome format",
 		"format": "biome format --write",
 		"preview": "vite preview",

ui-v2/src/components/ui/badge/badge.tsx

@@ -2,13 +2,20 @@ import type { VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 import { badgeVariants } from "./styles";
+import React from "react";
 
 export interface BadgeProps
 	extends React.HTMLAttributes<HTMLDivElement>,
 		VariantProps<typeof badgeVariants> {}
 
-export function Badge({ className, variant, ...props }: BadgeProps) {
-	return (
-		<div className={cn(badgeVariants({ variant }), className)} {...props} />
-	);
-}
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+	({ className, variant, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	),
+);
+
+Badge.displayName = "Badge";

ui-v2/src/components/ui/data-table.tsx

@@ -59,7 +59,12 @@ export function DataTable<TData>({
 									data-state={row.getIsSelected() && "selected"}
 								>
 									{row.getVisibleCells().map((cell) => (
-										<TableCell key={cell.id}>
+										<TableCell
+											key={cell.id}
+											style={{
+												maxWidth: `${cell.column.columnDef.maxSize}px`,
+											}}
+										>
 											{flexRender(
 												cell.column.columnDef.cell,
 												cell.getContext(),

ui-v2/src/components/ui/json-input.tsx

@@ -2,9 +2,9 @@ import React, { useRef, useEffect } from "react";
 
 import { json } from "@codemirror/lang-json";
 import { cn } from "@/lib/utils";
-import { useCodeMirror } from "@uiw/react-codemirror";
+import { useCodeMirror, EditorView } from "@uiw/react-codemirror";
 
-const extensions = [json()];
+const extensions = [json(), EditorView.lineWrapping];
 
 type JsonInputProps = React.ComponentProps<"div"> & {
 	value?: string;
@@ -28,6 +28,11 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 			onBlur,
 			indentWithTab: false,
 			editable: !disabled,
+			basicSetup: {
+				highlightActiveLine: !disabled,
+				foldGutter: !disabled,
+				highlightActiveLineGutter: !disabled,
+			},
 		});
 
 		useEffect(() => {

ui-v2/src/components/ui/tag-badge-group.stories.tsx

@@ -0,0 +1,25 @@
+import { TagBadgeGroup } from "@/components/ui/tag-badge-group.tsx";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+
+export default {
+	title: "UI/TagBadgeGroup",
+	component: TagBadgeGroup,
+	args: {
+		tags: [],
+	},
+	// To control input value in Stories via useState()
+	render: function Render(args: ComponentProps<typeof TagBadgeGroup>) {
+		return <TagBadgeGroup {...args} />;
+	},
+} satisfies Meta<typeof TagBadgeGroup>;
+
+type Story = StoryObj<typeof TagBadgeGroup>;
+
+export const TwoTags: Story = {
+	args: { tags: ["testTag", "testTag2"] },
+};
+
+export const FourTags: Story = {
+	args: { tags: ["testTag", "testTag2", "testTag3", "testTag4"] },
+};

ui-v2/src/components/ui/tag-badge-group.tsx

@@ -0,0 +1,57 @@
+import { Badge, type BadgeProps } from "./badge";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card";
+import { TagBadge } from "./tag-badge";
+
+type TagBadgeGroupProps = {
+	tags: string[];
+	variant?: BadgeProps["variant"];
+	maxTagsDisplayed?: number;
+	onTagsChange?: (tags: string[]) => void;
+};
+
+export const TagBadgeGroup = ({
+	tags,
+	variant,
+	maxTagsDisplayed = 2,
+	onTagsChange,
+}: TagBadgeGroupProps) => {
+	const removeTag = (tag: string) => {
+		onTagsChange?.(tags.filter((t) => t !== tag));
+	};
+
+	const numTags = tags.length;
+
+	if (numTags > maxTagsDisplayed) {
+		return (
+			<HoverCard>
+				<HoverCardTrigger asChild>
+					<Badge variant={variant} className="ml-1 whitespace-nowrap">
+						{numTags} tags
+					</Badge>
+				</HoverCardTrigger>
+				<HoverCardContent className="flex flex-wrap gap-1">
+					{tags.map((tag) => (
+						<TagBadge
+							key={tag}
+							tag={tag}
+							onRemove={onTagsChange ? () => removeTag(tag) : undefined}
+						/>
+					))}
+				</HoverCardContent>
+			</HoverCard>
+		);
+	}
+
+	return (
+		<>
+			{tags.map((tag) => (
+				<TagBadge
+					key={tag}
+					tag={tag}
+					onRemove={onTagsChange ? () => removeTag(tag) : undefined}
+					variant={variant}
+				/>
+			))}
+		</>
+	);
+};

ui-v2/src/components/ui/tag-badge.tsx

@@ -0,0 +1,26 @@
+import { X } from "lucide-react";
+import { Badge, type BadgeProps } from "./badge";
+
+type TagBadgeProps = {
+	tag: string;
+	variant?: BadgeProps["variant"];
+	onRemove?: () => void;
+};
+
+export const TagBadge = ({ tag, variant, onRemove }: TagBadgeProps) => {
+	return (
+		<Badge variant={variant} className="ml-1 max-w-20" title={tag}>
+			<span className="truncate">{tag}</span>
+			{onRemove && (
+				<button
+					type="button"
+					onClick={onRemove}
+					className="text-muted-foreground hover:text-foreground"
+					aria-label={`Remove ${tag} tag`}
+				>
+					<X size={14} />
+				</button>
+			)}
+		</Badge>
+	);
+};

ui-v2/src/components/ui/tags-input.stories.tsx

@@ -1,7 +1,7 @@
 import { TagsInput } from "@/components/ui/tags-input.tsx";
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
-import { ComponentProps, useState } from "react";
+import { type ComponentProps, useState } from "react";
 
 export default {
 	title: "UI/TagsInput",

ui-v2/src/components/ui/tags-input.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import { useState } from "react";
 import type { KeyboardEvent, ChangeEvent, FocusEvent } from "react";
 import { Input, type InputProps } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { X } from "lucide-react";
+import { TagBadgeGroup } from "./tag-badge-group";
 
 type TagsInputProps = InputProps & {
 	value?: string[];
@@ -62,21 +61,11 @@ const TagsInput = React.forwardRef<HTMLInputElement, TagsInputProps>(
 
 		return (
 			<div className="flex items-center border rounded-md focus-within:ring-1 focus-within:ring-ring ">
-				<div className="flex items-center">
-					{value.map((tag, index) => (
-						<Badge key={tag} variant="secondary" className="ml-1">
-							{tag}
-							<button
-								type="button"
-								onClick={() => removeTag(index)}
-								className="text-muted-foreground hover:text-foreground"
-								aria-label={`Remove ${tag} tag`}
-							>
-								<X size={14} />
-							</button>
-						</Badge>
-					))}
-				</div>
+				<TagBadgeGroup
+					tags={value}
+					onTagsChange={onChange}
+					variant="secondary"
+				/>
 				<Input
 					type="text"
 					value={inputValue}

ui-v2/src/components/ui/toast.tsx

@@ -93,7 +93,7 @@ const ToastClose = React.forwardRef<
 	<ToastPrimitives.Close
 		ref={ref}
 		className={cn(
-			"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			"absolute right-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 			className,
 		)}
 		toast-close=""

ui-v2/src/components/variables/data-table/cells.tsx

@@ -4,14 +4,22 @@ import {
 	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuTrigger,
-} from "../../ui/dropdown-menu";
-import { Button } from "../../ui/button";
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
 import { MoreVerticalIcon } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { getQueryService } from "@/api/service";
 import type { CellContext } from "@tanstack/react-table";
 import type { components } from "@/api/prefect";
 import { useToast } from "@/hooks/use-toast";
+import { JsonInput } from "@/components/ui/json-input";
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { useRef } from "react";
+import { useIsOverflowing } from "@/hooks/use-is-overflowing";
 
 type ActionsCellProps = CellContext<
 	components["schemas"]["Variable"],
@@ -62,14 +70,22 @@ export const ActionsCell = ({ row, onVariableEdit }: ActionsCellProps) => {
 				<DropdownMenuContent align="end">
 					<DropdownMenuLabel>Actions</DropdownMenuLabel>
 					<DropdownMenuItem
-						onClick={() => void navigator.clipboard.writeText(id)}
+						onClick={() => {
+							void navigator.clipboard.writeText(id);
+							toast({
+								title: "ID copied",
+							});
+						}}
 					>
 						Copy ID
 					</DropdownMenuItem>
 					<DropdownMenuItem
-						onClick={() =>
-							void navigator.clipboard.writeText(row.original.name)
-						}
+						onClick={() => {
+							void navigator.clipboard.writeText(row.original.name);
+							toast({
+								title: "Name copied",
+							});
+						}}
 					>
 						Copy Name
 					</DropdownMenuItem>
@@ -81,6 +97,9 @@ export const ActionsCell = ({ row, onVariableEdit }: ActionsCellProps) => {
 									: row.original.value;
 							if (copyValue) {
 								void navigator.clipboard.writeText(copyValue);
+								toast({
+									title: "Value copied",
+								});
 							}
 						}}
 					>
@@ -95,3 +114,29 @@ export const ActionsCell = ({ row, onVariableEdit }: ActionsCellProps) => {
 		</div>
 	);
 };
+
+export const ValueCell = (
+	props: CellContext<components["schemas"]["Variable"], unknown>,
+) => {
+	const value = props.getValue();
+	const codeRef = useRef<HTMLDivElement>(null);
+	const isOverflowing = useIsOverflowing(codeRef);
+
+	if (!value) return null;
+	return (
+		// Disable the hover card if the value is overflowing
+		<HoverCard open={isOverflowing ? undefined : false}>
+			<HoverCardTrigger asChild>
+				<code
+					ref={codeRef}
+					className="px-2 py-1 font-mono text-sm text-ellipsis overflow-hidden whitespace-nowrap block"
+				>
+					{JSON.stringify(value, null, 2)}
+				</code>
+			</HoverCardTrigger>
+			<HoverCardContent className="p-0">
+				<JsonInput value={JSON.stringify(value, null, 2)} disabled />
+			</HoverCardContent>
+		</HoverCard>
+	);
+};