add close all button, add clear cache and reload button on dbController

#10 dk-build
caioricciuti · Sep 5, 2024 · 4a6446c · 4a6446c
1 parent 3e732c7
commit 4a6446c
Show file tree

Hide file tree

Showing 11 changed files with 1,388 additions and 205 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",

diff --git a/src/TabContents/HomeTabContent.jsx b/src/TabContents/HomeTabContent.jsx
@@ -31,7 +31,7 @@ export default function HomeTabContent() {
   ];
   return (
     <>
-      <div className="h-[88vh] relative w-full flex flex-col p-10 overflow-hidden rounded-md border">
+      <div className="h-[88vh] relative w-full flex flex-col p-10 overflow-hidden rounded-md">
         <div className="flex flex-col h-full">
           <div className="flex flex-wrap gap-4">
             {projects.map((project, index) => (

diff --git a/src/TabContents/QueryTabContent.jsx b/src/TabContents/QueryTabContent.jsx
@@ -196,7 +196,6 @@ export default function QueryTabContent({ tab }) {
                 minimap: { enabled: false },
                 wordWrap: "on",
                 fontSize: 14,
-                fontVariations: true,
                 lineNumbers: "on",
                 padding: { top: 15, bottom: 10 },
                 acceptSuggestionOnCommitCharacter: true,
@@ -208,7 +207,6 @@ export default function QueryTabContent({ tab }) {
                 colorDecorators: true,
                 contextmenu: true,
                 cursorBlinking: "blink",
-                cursorSmoothCaretAnimation: true,
               }}
             />
           </ResizablePanel>
@@ -228,8 +226,8 @@ export default function QueryTabContent({ tab }) {
               <div className="w-full p-2 overflow-auto flex flex-col">
                 <div
                   className={`${theme === "dark"
-                      ? "ag-theme-alpine-dark"
-                      : "ag-theme-alpine"
+                    ? "ag-theme-alpine-dark"
+                    : "ag-theme-alpine"
                     }  w-full flex-grow`}
                 >
                   {isLoadingQuery ? (

diff --git a/src/components/DbController.jsx b/src/components/DbController.jsx
@@ -11,13 +11,21 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
 import {
   FileSpreadsheetIcon,
   Loader2,
   RefreshCcw,
   SearchXIcon,
   Table,
   PlusIcon,
+  MoreVertical,
 } from "lucide-react";
 
 import {
@@ -37,13 +45,19 @@ export default function DbController() {
     availableDatabases,
     isLoading,
     availableTables,
-    loadDatabases,
+    fetchDatabases,
     getTablesFromDatabase,
     loadingProgress,
+    deleteTablesStoreDB,
   } = useDatabaseTablesState();
 
   const [searchQuery, setSearchQuery] = useState("");
 
+  const handleDeleteCacheAndReload = async () => {
+    await deleteTablesStoreDB();
+    fetchDatabases(true);
+  };
+
   if (isLoading) {
     return (
       <>
@@ -68,7 +82,21 @@ export default function DbController() {
   return (
     <div className="px-4 min-w-[280px]">
       <fieldset className="rounded-lg border p-4 overflow-auto max-h-[80vh] min-w-20 mt-6">
-        <legend className="-ml-1 px-1 text-sm font-medium">Databases</legend>
+        <div className="flex justify-between items-center mb-2">
+          <h3 className="text-lg font-semibold">Databases</h3>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleDeleteCacheAndReload}>
+                Delete All Cache and Reload
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
         <div className="flex justify-center items-center">
           <Select
             value={selectedDatabase}
@@ -89,15 +117,6 @@ export default function DbController() {
                 ))}
             </SelectContent>
           </Select>
-          <Button
-            variant="ghost"
-            className="p-0 ml-2 hover:text-primary"
-            onClick={() => {
-              loadDatabases();
-            }}
-          >
-            <RefreshCcw size={16} />
-          </Button>
         </div>
       </fieldset>
       {availableDatabases && availableTables.length > 0 ? (
@@ -116,15 +135,6 @@ export default function DbController() {
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
-            <Button
-              variant="ghost"
-              className="p-0 hover:text-primary"
-              onClick={() => {
-                getTablesFromDatabase(selectedDatabase, true);
-              }}
-            >
-              <RefreshCcw size={16} className="p-0" />
-            </Button>
           </div>
           {availableTables.filter((table) =>
             table.name.toLowerCase().includes(searchQuery.toLowerCase()),
@@ -214,4 +224,4 @@ export default function DbController() {
       )}
     </div>
   );
-}
+}
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -1,5 +1,6 @@
+import React from "react";
 import { useClickHouseState } from "@/providers/ClickHouseContext";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import {
   SquareTerminal,
   Github,
@@ -12,6 +13,7 @@ import {
   CornerDownLeft,
   ServerCogIcon,
   Settings2,
+  Search,
 } from "lucide-react";
 import {
   Sheet,
@@ -35,10 +37,27 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { CommandShortcut } from "@/components/ui/command";
 import { useTheme } from "@/providers/theme";
 import { Button } from "@/components/ui/button";
 
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command"
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
 const commandsSheet = [
   {
     action: "Save Query",
@@ -62,14 +81,72 @@ export default function Sidebar() {
   const { theme, setTheme } = useTheme(); // Use the theme context
   const { isServerAvailable, isLoading, version } = useClickHouseState();
   const location = useLocation();
+  const [open, setOpen] = React.useState(false)
+
+  const navigate = useNavigate();
 
   const toggleTheme = () => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
   };
+  React.useEffect(() => {
+    const down = (e) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
 
   return (
     <aside className="inset-y fixed left-0 z-20 flex h-full flex-col border-r items-center">
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Navigate">
+            <CommandItem onSelect={
+              () => {
+                navigate("/")
+                setOpen(false)
+              }
+            }>
+              Home
+            </CommandItem>
+            <CommandItem onSelect={
+              () => {
+                navigate("/instance-metrics")
+                setOpen(false)
+              }
+            }>
+              Metrics
+            </CommandItem>
+            <CommandItem
+
+              onSelect={
+                () => {
+                  navigate("/settings")
+                  setOpen(false)
+                }
+              }>
+              Settings
+            </CommandItem>
+          </CommandGroup>
+          <CommandGroup heading="Actions">
+            <CommandItem onSelect={
+              () => {
+                toggleTheme()
+                setOpen(false)
+              }
+            }>
+              Toggle Theme
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+
       <div className="border-b p-2">
         <Button variant="ghost" size="icon" aria-label="Home">
           <Github
@@ -87,25 +164,22 @@ export default function Sidebar() {
       <div className="flex flex-col gap-3 items-center p-2">
         <Link
           to="/"
-          className={`flex items-center p-2 rounded-md ${
-            location.pathname === "/" ? "bg-secondary" : ""
-          }`}
+          className={`flex items-center p-2 rounded-md ${location.pathname === "/" ? "bg-secondary" : ""
+            }`}
         >
           <SquareTerminal size={24} />
         </Link>
         <Link
           to="/instance-metrics"
-          className={`flex items-center p-2 rounded-md ${
-            location.pathname === "/instance-metrics" ? "bg-secondary" : ""
-          }`}
+          className={`flex items-center p-2 rounded-md ${location.pathname === "/instance-metrics" ? "bg-secondary" : ""
+            }`}
         >
           <ServerCogIcon size={24} />
         </Link>
         <Link
           to="/settings"
-          className={`flex items-center p-2 rounded-md ${
-            location.pathname === "/settings" ? "bg-secondary" : ""
-          }`}
+          className={`flex items-center p-2 rounded-md ${location.pathname === "/settings" ? "bg-secondary" : ""
+            }`}
         >
           <Settings2 size={24} />
         </Link>
@@ -171,22 +245,41 @@ export default function Sidebar() {
           )}
         </Button>
 
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="mb-2"
+                aria-label="Command Opener"
+                onClick={() => setOpen((open) => !open)}
+              >
+                <Search className="size-5 m-auto" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <span className="text-primary text-xs">Cmd/Ctrl + K</span>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+
+
+
+
         {/* server status */}
         <Popover>
-          <PopoverTrigger>
-            {isLoading ? (
-              <Button variant="link" size="icon" aria-label="Help">
+          <PopoverTrigger asChild>
+            <div className="cursor-pointer m-auto">
+              {isLoading ? (
                 <Loader2 className="size-6 animate-spin" />
-              </Button>
-            ) : isServerAvailable && !isLoading ? (
-              <Button variant="ghost" size="icon" aria-label="Help">
+              ) : isServerAvailable && !isLoading ? (
                 <CircleCheckIcon className="size-6 text-green-500" />
-              </Button>
-            ) : (
-              <Button variant="ghost" size="icon" aria-label="Help">
+              ) : (
                 <AlertCircleIcon className="size-6 text-red-500" />
-              </Button>
-            )}
+              )}
+            </div>
           </PopoverTrigger>
           <PopoverContent className="ml-2 w-full">
             <div className="flex items-center">
@@ -195,8 +288,8 @@ export default function Sidebar() {
                 {isLoading
                   ? "Loading..."
                   : isServerAvailable
-                  ? "Online"
-                  : "Offline"}
+                    ? "Online"
+                    : "Offline"}
               </p>
             </div>
             <div className="flex items-center">