diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupItem.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupItem.tsx index 5ba28f7871a..a88ef454a3e 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupItem.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupItem.tsx @@ -1,6 +1,7 @@ import { Button } from "@superset/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip"; import { cn } from "@superset/ui/utils"; +import { useEffect, useRef, useState } from "react"; import { HiMiniXMark } from "react-icons/hi2"; import { StatusIndicator } from "renderer/screens/main/components/StatusIndicator"; import type { PaneStatus, Tab } from "renderer/stores/tabs/types"; @@ -12,6 +13,7 @@ interface GroupItemProps { status: PaneStatus | null; onSelect: () => void; onClose: () => void; + onRename: (newName: string) => void; } export function GroupItem({ @@ -20,33 +22,90 @@ export function GroupItem({ status, onSelect, onClose, + onRename, }: GroupItemProps) { const displayName = getTabDisplayName(tab); + const [isEditing, setIsEditing] = useState(false); + const [editValue, setEditValue] = useState(""); + const inputRef = useRef(null); + + useEffect(() => { + if (isEditing && inputRef.current) { + inputRef.current.focus(); + inputRef.current.select(); + } + }, [isEditing]); + + const startEditing = () => { + setEditValue(displayName); + setIsEditing(true); + }; + + const handleSave = () => { + const trimmedValue = editValue.trim(); + if (trimmedValue && trimmedValue !== displayName) { + onRename(trimmedValue); + } + setIsEditing(false); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + e.preventDefault(); + handleSave(); + } else if (e.key === "Escape") { + e.preventDefault(); + setIsEditing(false); + } + }; + + const tabStyles = cn( + "flex items-center gap-2 transition-all w-full shrink-0 px-3 h-full", + isActive + ? "text-foreground bg-border/30" + : "text-muted-foreground/70 hover:text-muted-foreground hover:bg-tertiary/20", + ); return (
- - - + + + {displayName} + + Double-click to rename - {status && status !== "idle" && } - - - - {displayName} - - + + + )}