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

42
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">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={checkGraphConnection} onClick={checkGraphConnection}
disabled={graphConnectionStatus === "checking"} disabled={graphConnectionStatus === "checking"}
className="flex-1 text-xs h-7" className="flex-1 text-xs h-7 px-2"
> >
{graphConnectionStatus === "checking" ? "Checking..." : "Refresh"} <RefreshCw className={`h-3 w-3 ${graphConnectionStatus === "checking" ? "animate-spin" : ""}`} />
</Button> </Button>
</TooltipTrigger>
<TooltipContent>
<p>{graphConnectionStatus === "checking" ? "Checking..." : "Refresh connection"}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{graphConnectionStatus === "connected" ? ( {graphConnectionStatus === "connected" ? (
<> <>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={disconnectGraph} onClick={disconnectGraph}
className="flex-1 text-xs h-7" className="flex-1 text-xs h-7 px-2"
> >
Disconnect <LogOut className="h-3 w-3" />
</Button> </Button>
</TooltipTrigger>
<TooltipContent>
<p>Disconnect</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Dialog open={showClearDialog} onOpenChange={setShowClearDialog}> <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
variant="destructive" variant="destructive"
size="sm" size="sm"
className="flex-1 text-xs h-7" className="flex-1 text-xs h-7 px-2"
disabled={isClearingDB} disabled={isClearingDB}
> >
<Trash2 className="h-3 w-3 mr-1" /> <Trash2 className="h-3 w-3" />
Clear
</Button> </Button>
</DialogTrigger> </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>