sarman/dgx-spark-playbooks
1
0
Fork 0
mirror of https://github.com/NVIDIA/dgx-spark-playbooks.git synced 2026-04-23 02:23:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(ui): improve database connection button UI

Browse Source 
- Replace button text with icons for compact display
- Add tooltips to Refresh, Disconnect, and Clear buttons
- Improve button spacing and alignment
- Import LogOut icon for disconnect action
This commit is contained in:
Santosh Bhavani 2025-10-19 19:57:17 -07:00
parent 37ee4b63f1
commit ffb0688a63
1 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
nvidia/txt2kg/assets/frontend/components/database-connection.tsx
View File

@ -1,7 +1,7 @@
"use client"
import { useState, useEffect } from "react"
import { Network, Database, Zap, AlertCircle, RefreshCw, ChevronDown, ChevronUp, InfoIcon, Trash2 } from "lucide-react"
import { Network, Database, Zap, AlertCircle, RefreshCw, ChevronDown, ChevronUp, InfoIcon, Trash2, LogOut } from "lucide-react"
import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Button } from "@/components/ui/button"
@ -364,39 +364,65 @@ export function DatabaseConnection({ className }: DatabaseConnectionProps) {
)}
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={checkGraphConnection}
disabled={graphConnectionStatus === "checking"}
className="flex-1 text-xs h-7"
>
{graphConnectionStatus === "checking" ? "Checking..." : "Refresh"}
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={checkGraphConnection}
disabled={graphConnectionStatus === "checking"}
className="flex-1 text-xs h-7 px-2"
>
<RefreshCw className={`h-3 w-3 ${graphConnectionStatus === "checking" ? "animate-spin" : ""}`} />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{graphConnectionStatus === "checking" ? "Checking..." : "Refresh connection"}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{graphConnectionStatus === "connected" ? (
<>
<Button
variant="outline"
size="sm"
onClick={disconnectGraph}
className="flex-1 text-xs h-7"
>
Disconnect
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={disconnectGraph}
className="flex-1 text-xs h-7 px-2"
>
<LogOut className="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Disconnect</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
<DialogTrigger asChild>
<Button
variant="destructive"
size="sm"
className="flex-1 text-xs h-7"
disabled={isClearingDB}
>
<Trash2 className="h-3 w-3 mr-1" />
Clear
</Button>
</DialogTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<Button
variant="destructive"
size="sm"
className="flex-1 text-xs h-7 px-2"
disabled={isClearingDB}
>
<Trash2 className="h-3 w-3" />
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent>
<p>Clear database</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<DialogContent>
<DialogHeader>
<DialogTitle className="text-destructive">Clear Database</DialogTitle>