sarman/dgx-spark-playbooks
1
0
Fork 0
mirror of https://github.com/NVIDIA/dgx-spark-playbooks.git synced 2026-04-25 19:33: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" "use client"
import { useState, useEffect } from "react" 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 { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@ -364,39 +364,65 @@ export function DatabaseConnection({ className }: DatabaseConnectionProps) {
)} )}
<div className="flex gap-2"> <div className="flex gap-2">
<Button <TooltipProvider>
variant="outline" <Tooltip>
size="sm" <TooltipTrigger asChild>
onClick={checkGraphConnection} <Button
disabled={graphConnectionStatus === "checking"} variant="outline"
className="flex-1 text-xs h-7" size="sm"
> onClick={checkGraphConnection}
{graphConnectionStatus === "checking" ? "Checking..." : "Refresh"} disabled={graphConnectionStatus === "checking"}
</Button> 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" ? ( {graphConnectionStatus === "connected" ? (
<> <>
<Button <TooltipProvider>
variant="outline" <Tooltip>
size="sm" <TooltipTrigger asChild>
onClick={disconnectGraph} <Button
className="flex-1 text-xs h-7" variant="outline"
> size="sm"
Disconnect onClick={disconnectGraph}
</Button> 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}> <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
<DialogTrigger asChild> <TooltipProvider>
<Button <Tooltip>
variant="destructive" <TooltipTrigger asChild>
size="sm" <DialogTrigger asChild>
className="flex-1 text-xs h-7" <Button
disabled={isClearingDB} variant="destructive"
> size="sm"
<Trash2 className="h-3 w-3 mr-1" /> className="flex-1 text-xs h-7 px-2"
Clear disabled={isClearingDB}
</Button> >
</DialogTrigger> <Trash2 className="h-3 w-3" />
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent>
<p>Clear database</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle className="text-destructive">Clear Database</DialogTitle> <DialogTitle className="text-destructive">Clear Database</DialogTitle>