Skip to content

Commit 4a6446c

Browse files
caioricciuticaioricciuti
committed
add close all button, add clear cache and reload button on dbController #10 dk-build
1 parent 3e732c7 commit 4a6446c

File tree

11 files changed

+1388
-205
lines changed

11 files changed

+1388
-205
lines changed

‎package-lock.json

Lines changed: 980 additions & 110 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
"@radix-ui/react-alert-dialog": "^1.0.5",
1616
"@radix-ui/react-collapsible": "^1.0.3",
1717
"@radix-ui/react-context-menu": "^2.1.5",
18-
"@radix-ui/react-dialog": "^1.0.5",
18+
"@radix-ui/react-dialog": "^1.1.1",
19+
"@radix-ui/react-dropdown-menu": "^2.1.1",
1920
"@radix-ui/react-label": "^2.0.2",
2021
"@radix-ui/react-popover": "^1.0.7",
2122
"@radix-ui/react-progress": "^1.0.3",

‎src/TabContents/HomeTabContent.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function HomeTabContent() {
3131
];
3232
return (
3333
<>
34-
<div className="h-[88vh] relative w-full flex flex-col p-10 overflow-hidden rounded-md border">
34+
<div className="h-[88vh] relative w-full flex flex-col p-10 overflow-hidden rounded-md">
3535
<div className="flex flex-col h-full">
3636
<div className="flex flex-wrap gap-4">
3737
{projects.map((project, index) => (

‎src/TabContents/QueryTabContent.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,6 @@ export default function QueryTabContent({ tab }) {
196196
minimap: { enabled: false },
197197
wordWrap: "on",
198198
fontSize: 14,
199-
fontVariations: true,
200199
lineNumbers: "on",
201200
padding: { top: 15, bottom: 10 },
202201
acceptSuggestionOnCommitCharacter: true,
@@ -208,7 +207,6 @@ export default function QueryTabContent({ tab }) {
208207
colorDecorators: true,
209208
contextmenu: true,
210209
cursorBlinking: "blink",
211-
cursorSmoothCaretAnimation: true,
212210
}}
213211
/>
214212
</ResizablePanel>
@@ -228,8 +226,8 @@ export default function QueryTabContent({ tab }) {
228226
<div className="w-full p-2 overflow-auto flex flex-col">
229227
<div
230228
className={`${theme === "dark"
231-
? "ag-theme-alpine-dark"
232-
: "ag-theme-alpine"
229+
? "ag-theme-alpine-dark"
230+
: "ag-theme-alpine"
233231
} w-full flex-grow`}
234232
>
235233
{isLoadingQuery ? (

‎src/components/DbController.jsx

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,21 @@ import {
1111
SelectValue,
1212
} from "@/components/ui/select";
1313

14+
import {
15+
DropdownMenu,
16+
DropdownMenuContent,
17+
DropdownMenuItem,
18+
DropdownMenuTrigger,
19+
} from "@/components/ui/dropdown-menu";
20+
1421
import {
1522
FileSpreadsheetIcon,
1623
Loader2,
1724
RefreshCcw,
1825
SearchXIcon,
1926
Table,
2027
PlusIcon,
28+
MoreVertical,
2129
} from "lucide-react";
2230

2331
import {
@@ -37,13 +45,19 @@ export default function DbController() {
3745
availableDatabases,
3846
isLoading,
3947
availableTables,
40-
loadDatabases,
48+
fetchDatabases,
4149
getTablesFromDatabase,
4250
loadingProgress,
51+
deleteTablesStoreDB,
4352
} = useDatabaseTablesState();
4453

4554
const [searchQuery, setSearchQuery] = useState("");
4655

56+
const handleDeleteCacheAndReload = async () => {
57+
await deleteTablesStoreDB();
58+
fetchDatabases(true);
59+
};
60+
4761
if (isLoading) {
4862
return (
4963
<>
@@ -68,7 +82,21 @@ export default function DbController() {
6882
return (
6983
<div className="px-4 min-w-[280px]">
7084
<fieldset className="rounded-lg border p-4 overflow-auto max-h-[80vh] min-w-20 mt-6">
71-
<legend className="-ml-1 px-1 text-sm font-medium">Databases</legend>
85+
<div className="flex justify-between items-center mb-2">
86+
<h3 className="text-lg font-semibold">Databases</h3>
87+
<DropdownMenu>
88+
<DropdownMenuTrigger asChild>
89+
<Button variant="ghost" className="h-8 w-8 p-0">
90+
<MoreVertical className="h-4 w-4" />
91+
</Button>
92+
</DropdownMenuTrigger>
93+
<DropdownMenuContent align="end">
94+
<DropdownMenuItem onClick={handleDeleteCacheAndReload}>
95+
Delete All Cache and Reload
96+
</DropdownMenuItem>
97+
</DropdownMenuContent>
98+
</DropdownMenu>
99+
</div>
72100
<div className="flex justify-center items-center">
73101
<Select
74102
value={selectedDatabase}
@@ -89,15 +117,6 @@ export default function DbController() {
89117
))}
90118
</SelectContent>
91119
</Select>
92-
<Button
93-
variant="ghost"
94-
className="p-0 ml-2 hover:text-primary"
95-
onClick={() => {
96-
loadDatabases();
97-
}}
98-
>
99-
<RefreshCcw size={16} />
100-
</Button>
101120
</div>
102121
</fieldset>
103122
{availableDatabases && availableTables.length > 0 ? (
@@ -116,15 +135,6 @@ export default function DbController() {
116135
value={searchQuery}
117136
onChange={(e) => setSearchQuery(e.target.value)}
118137
/>
119-
<Button
120-
variant="ghost"
121-
className="p-0 hover:text-primary"
122-
onClick={() => {
123-
getTablesFromDatabase(selectedDatabase, true);
124-
}}
125-
>
126-
<RefreshCcw size={16} className="p-0" />
127-
</Button>
128138
</div>
129139
{availableTables.filter((table) =>
130140
table.name.toLowerCase().includes(searchQuery.toLowerCase()),
@@ -214,4 +224,4 @@ export default function DbController() {
214224
)}
215225
</div>
216226
);
217-
}
227+
}

‎src/components/Sidebar.jsx

Lines changed: 117 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import React from "react";
12
import { useClickHouseState } from "@/providers/ClickHouseContext";
2-
import { Link, useLocation } from "react-router-dom";
3+
import { Link, useLocation, useNavigate } from "react-router-dom";
34
import {
45
SquareTerminal,
56
Github,
@@ -12,6 +13,7 @@ import {
1213
CornerDownLeft,
1314
ServerCogIcon,
1415
Settings2,
16+
Search,
1517
} from "lucide-react";
1618
import {
1719
Sheet,
@@ -35,10 +37,27 @@ import {
3537
TableHeader,
3638
TableRow,
3739
} from "@/components/ui/table";
38-
import { CommandShortcut } from "@/components/ui/command";
3940
import { useTheme } from "@/providers/theme";
4041
import { Button } from "@/components/ui/button";
4142

43+
import {
44+
Command,
45+
CommandDialog,
46+
CommandEmpty,
47+
CommandGroup,
48+
CommandInput,
49+
CommandItem,
50+
CommandList,
51+
CommandShortcut,
52+
} from "@/components/ui/command"
53+
54+
import {
55+
Tooltip,
56+
TooltipContent,
57+
TooltipProvider,
58+
TooltipTrigger,
59+
} from "@/components/ui/tooltip"
60+
4261
const commandsSheet = [
4362
{
4463
action: "Save Query",
@@ -62,14 +81,72 @@ export default function Sidebar() {
6281
const { theme, setTheme } = useTheme(); // Use the theme context
6382
const { isServerAvailable, isLoading, version } = useClickHouseState();
6483
const location = useLocation();
84+
const [open, setOpen] = React.useState(false)
85+
86+
const navigate = useNavigate();
6587

6688
const toggleTheme = () => {
6789
const newTheme = theme === "dark" ? "light" : "dark";
6890
setTheme(newTheme);
6991
};
92+
React.useEffect(() => {
93+
const down = (e) => {
94+
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
95+
e.preventDefault()
96+
setOpen((open) => !open)
97+
}
98+
}
99+
document.addEventListener("keydown", down)
100+
return () => document.removeEventListener("keydown", down)
101+
}, [])
70102

71103
return (
72104
<aside className="inset-y fixed left-0 z-20 flex h-full flex-col border-r items-center">
105+
<CommandDialog open={open} onOpenChange={setOpen}>
106+
<CommandInput placeholder="Type a command or search..." />
107+
<CommandList>
108+
<CommandEmpty>No results found.</CommandEmpty>
109+
<CommandGroup heading="Navigate">
110+
<CommandItem onSelect={
111+
() => {
112+
navigate("/")
113+
setOpen(false)
114+
}
115+
}>
116+
Home
117+
</CommandItem>
118+
<CommandItem onSelect={
119+
() => {
120+
navigate("/instance-metrics")
121+
setOpen(false)
122+
}
123+
}>
124+
Metrics
125+
</CommandItem>
126+
<CommandItem
127+
128+
onSelect={
129+
() => {
130+
navigate("/settings")
131+
setOpen(false)
132+
}
133+
}>
134+
Settings
135+
</CommandItem>
136+
</CommandGroup>
137+
<CommandGroup heading="Actions">
138+
<CommandItem onSelect={
139+
() => {
140+
toggleTheme()
141+
setOpen(false)
142+
}
143+
}>
144+
Toggle Theme
145+
</CommandItem>
146+
</CommandGroup>
147+
</CommandList>
148+
</CommandDialog>
149+
73150
<div className="border-b p-2">
74151
<Button variant="ghost" size="icon" aria-label="Home">
75152
<Github
@@ -87,25 +164,22 @@ export default function Sidebar() {
87164
<div className="flex flex-col gap-3 items-center p-2">
88165
<Link
89166
to="/"
90-
className={`flex items-center p-2 rounded-md ${
91-
location.pathname === "/" ? "bg-secondary" : ""
92-
}`}
167+
className={`flex items-center p-2 rounded-md ${location.pathname === "/" ? "bg-secondary" : ""
168+
}`}
93169
>
94170
<SquareTerminal size={24} />
95171
</Link>
96172
<Link
97173
to="/instance-metrics"
98-
className={`flex items-center p-2 rounded-md ${
99-
location.pathname === "/instance-metrics" ? "bg-secondary" : ""
100-
}`}
174+
className={`flex items-center p-2 rounded-md ${location.pathname === "/instance-metrics" ? "bg-secondary" : ""
175+
}`}
101176
>
102177
<ServerCogIcon size={24} />
103178
</Link>
104179
<Link
105180
to="/settings"
106-
className={`flex items-center p-2 rounded-md ${
107-
location.pathname === "/settings" ? "bg-secondary" : ""
108-
}`}
181+
className={`flex items-center p-2 rounded-md ${location.pathname === "/settings" ? "bg-secondary" : ""
182+
}`}
109183
>
110184
<Settings2 size={24} />
111185
</Link>
@@ -171,22 +245,41 @@ export default function Sidebar() {
171245
)}
172246
</Button>
173247

248+
<TooltipProvider>
249+
<Tooltip>
250+
<TooltipTrigger asChild>
251+
<Button
252+
variant="ghost"
253+
size="icon"
254+
className="mb-2"
255+
aria-label="Command Opener"
256+
onClick={() => setOpen((open) => !open)}
257+
>
258+
<Search className="size-5 m-auto" />
259+
</Button>
260+
</TooltipTrigger>
261+
<TooltipContent>
262+
<span className="text-primary text-xs">Cmd/Ctrl + K</span>
263+
</TooltipContent>
264+
</Tooltip>
265+
</TooltipProvider>
266+
267+
268+
269+
270+
174271
{/* server status */}
175272
<Popover>
176-
<PopoverTrigger>
177-
{isLoading ? (
178-
<Button variant="link" size="icon" aria-label="Help">
273+
<PopoverTrigger asChild>
274+
<div className="cursor-pointer m-auto">
275+
{isLoading ? (
179276
<Loader2 className="size-6 animate-spin" />
180-
</Button>
181-
) : isServerAvailable && !isLoading ? (
182-
<Button variant="ghost" size="icon" aria-label="Help">
277+
) : isServerAvailable && !isLoading ? (
183278
<CircleCheckIcon className="size-6 text-green-500" />
184-
</Button>
185-
) : (
186-
<Button variant="ghost" size="icon" aria-label="Help">
279+
) : (
187280
<AlertCircleIcon className="size-6 text-red-500" />
188-
</Button>
189-
)}
281+
)}
282+
</div>
190283
</PopoverTrigger>
191284
<PopoverContent className="ml-2 w-full">
192285
<div className="flex items-center">
@@ -195,8 +288,8 @@ export default function Sidebar() {
195288
{isLoading
196289
? "Loading..."
197290
: isServerAvailable
198-
? "Online"
199-
: "Offline"}
291+
? "Online"
292+
: "Offline"}
200293
</p>
201294
</div>
202295
<div className="flex items-center">

0 commit comments

Comments
 (0)