feat(QueryHistory): Enhance query deletion and integrate history management in DeploymentPage

Author: abdotop

web/components/Filtre.tsx

@@ -120,7 +120,7 @@ export const FilterMenu = (
         <Filter class='h-4 w-4' />
         Filters
       </summary>
-      <div class='dropdown-content z-10 w-110 mt-2'>
+      <div class='dropdown-content w-110 mt-2'>
         <div class='bg-base-100 rounded-box shadow border border-base-300 p-3 space-y-3'>
           <div class='space-y-2 max-h-72 overflow-y-auto pr-1'>
             {rows.map((r) => (
@@ -201,7 +201,7 @@ export const SortMenu = ({ tag, sortKeyOptions }: {
         <ArrowUpDown class='h-4 w-4' />
         Sort
       </summary>
-      <div class='dropdown-content z-10 w-80 mt-2'>
+      <div class='dropdown-content w-80 mt-2'>
         <div class='bg-base-100 rounded-box shadow border border-base-300 p-3 space-y-3'>
           <div class='space-y-2 max-h-60 overflow-y-auto pr-1'>
             {rows.map((r) => (

web/components/QueryHistory.tsx

@@ -1,42 +1,29 @@
 import { ChevronRight, Clock, Play, Search, Trash2 } from 'lucide-preact'
 import { A } from '../lib/router.tsx'
+import { onRun, queriesHistory } from '../pages/DeploymentPage.tsx'
+import { log } from 'node:console'
 
-interface QueryHistoryItem {
+export type QueryHistoryItem = {
   query: string
   timestamp: string
   columns?: number
   rows?: number
 }
 
-const deleteQuery = (_hash: string) => {
-  // TODO: implement delete functionality
+const deleteQuery = (hash: string) => {
+  const updatedHistory = { ...queriesHistory.value }
+  delete updatedHistory[hash]
+  queriesHistory.value = updatedHistory
 }
 
 export function QueryHistory({
   onRunQuery,
 }: {
   onRunQuery?: (query: string) => void
 }) {
-  const filteredHistory = [
-    {
-      query: 'SELECT * FROM users;',
-      timestamp: '2024-06-01T12:00:00Z',
-      columns: 5,
-      rows: 100,
-    },
-    {
-      query: 'SELECT id, name FROM products WHERE price > 100;',
-      timestamp: '2024-06-02T15:30:00Z',
-      columns: 2,
-      rows: 50,
-    },
-    {
-      query: 'UPDATE orders SET status = "shipped" WHERE id = 123;',
-      timestamp: '2024-06-03T09:45:00Z',
-      columns: 1,
-      rows: 1,
-    },
-  ]
+  const filteredHistory = Object.entries(queriesHistory.value).sort((a, b) =>
+    new Date(b[1].timestamp).getTime() - new Date(a[1].timestamp).getTime()
+  )
 
   return (
     <div class='flex flex-col h-full'>
@@ -52,9 +39,9 @@ export function QueryHistory({
         </div>
       </div>
       <div class='flex-1 overflow-y-auto'>
-        {filteredHistory.map((item, index) => (
+        {filteredHistory.map(([hash, item]) => (
           <div
-            key={index}
+            key={hash}
             class='p-4 border-b border-base-300 hover:bg-base-200'
           >
             <div class='flex items-center justify-between'>
@@ -75,8 +62,7 @@ export function QueryHistory({
                   type='button'
                   class='btn btn-xs btn-ghost'
                   title='Run query'
-                  onClick={() =>
-                    onRunQuery ? onRunQuery(item.query) : undefined}
+                  onClick={() => onRun(item.query)}
                 >
                   <Play class='w-4 h-4' />
                 </button>
@@ -92,7 +78,7 @@ export function QueryHistory({
                   class='btn btn-xs btn-ghost text-error'
                   title='Delete from history'
                   disabled={!deleteQuery}
-                  onClick={() => deleteQuery(item.timestamp)}
+                  onClick={() => deleteQuery(hash)}
                 >
                   <Trash2 class='w-4 h-4' />
                 </button>

web/pages/DeploymentPage.tsx

@@ -10,7 +10,6 @@ import {
   Download,
   Eye,
   FileText,
-  History,
   Info,
   MoreHorizontal,
   Play,
@@ -30,7 +29,9 @@ import {
 } from '../components/Filtre.tsx'
 import { effect, Signal } from '@preact/signals'
 import { api } from '../lib/api.ts'
-import { QueryHistory } from '../components/QueryHistory.tsx'
+import { QueryHistory, QueryHistoryItem } from '../components/QueryHistory.tsx'
+import { jsx } from 'preact/compat/jsx-dev-runtime'
+import { JSX } from 'preact'
 
 type AnyRecord = Record<string, unknown>
 
@@ -50,7 +51,7 @@ const comparators = {
 
 const tableData = api['POST/api/deployment/table/data'].signal()
 const querier = api['GET/api/deployment/query'].signal()
-const queriesHistory = new Signal<AnyRecord>(
+export const queriesHistory = new Signal<Record<string, QueryHistoryItem>>(
   JSON.parse(localStorage.getItem('savedQueries') || '{}'),
 )
 type Order = 'ASC' | 'DESC'
@@ -112,18 +113,19 @@ effect(() => {
   }
 })
 
-const onRun = () => {
+export const onRun = (query?: string) => {
   if (querier.pending) return
   const { dep, tab, q } = url.params
-  if (dep && tab === 'queries' && q) {
-    querier.fetch({ deployment: dep, sql: q })
+  if (dep && tab === 'queries' && (query || q)) {
+    querier.fetch({ deployment: dep, sql: query || q || '' })
   }
 }
 
 function sha(message: string) {
   const data = new TextEncoder().encode(message)
   return crypto.subtle.digest('SHA-1', data)
 }
+
 function hashQuery(query: string) {
   const hash = sha(query).then((hashBuffer) => {
     const hashArray = Array.from(new Uint8Array(hashBuffer))
@@ -138,10 +140,14 @@ function hashQuery(query: string) {
 const onSave = () => {
   const query = (url.params.q || '').trim()
   if (query) {
-    console.log('queryHash', queryHash.value)
-
     if (!queryHash.value) return
-    queriesHistory.value = { ...queriesHistory.value, [queryHash.value]: query }
+    queriesHistory.value = {
+      ...queriesHistory.value,
+      [queryHash.value]: {
+        query,
+        timestamp: new Date().toISOString(),
+      },
+    }
   }
 }
 
@@ -434,11 +440,14 @@ export function Header() {
       </div>
       <div class='flex-none'>
         <label
-          htmlFor='my-drawer-4'
+          htmlFor='drawer-right'
+          onClick={() => {
+            drawerTab.value = 'history'
+          }}
           class='btn btn-outline btn-xs md:btn-sm drawer-button'
         >
-          <History class='h-4 w-4 mr-2' />
-          <span class='hidden sm:inline'>History</span>
+          <FileText class='h-4 w-4 mr-2' />
+          <span class='hidden sm:inline'>Saved Queries</span>
         </label>
       </div>
     </div>
@@ -669,7 +678,7 @@ export function TabNavigation({
           )}
           {activeTab !== 'logs' && (
             <label
-              onClick={activeTab === 'queries' ? onRun : undefined}
+              onClick={activeTab === 'queries' ? () => onRun() : undefined}
               htmlFor={activeTab === 'tables' ? 'my-drawer-4' : undefined}
               class='btn btn-primary btn-sm'
             >
@@ -751,7 +760,7 @@ export function LogsViewer() {
       <div class='flex-1 min-h-0 overflow-hidden'>
         <div class='w-full overflow-x-auto overflow-y-auto h-full'>
           <table class='table table-zebra w-full'>
-            <thead class='sticky top-0 z-20 bg-base-100 shadow-sm'>
+            <thead class='sticky top-0 bg-base-100 shadow-sm'>
               <tr class='border-b border-base-300'>
                 {logThreads.map((header) => (
                   <th
@@ -879,29 +888,37 @@ export function LogsViewer() {
   )
 }
 
-const TabViews = {
-  tables: <DataTable />,
-  queries: <QueryEditor />,
-  logs: <LogsViewer />,
-}
+type DrawerTab = 'history'
+
+const drawerTab = new Signal<DrawerTab>('history')
+
+const drawerViews: Record<DrawerTab, JSX.Element> = {
+  history: <QueryHistory />,
+} as const
 
 const Drawer = () => (
   <div class='drawer drawer-end'>
-    <input id='my-drawer-4' type='checkbox' class='drawer-toggle' />
+    <input id='drawer-right' type='checkbox' class='drawer-toggle' />
     <div class='drawer-side'>
       <label
-        htmlFor='my-drawer-4'
+        htmlFor='drawer-right'
         aria-label='close sidebar'
         class='drawer-overlay'
       >
       </label>
       <div class='bg-base-200 text-base-content min-h-full w-96'>
-        <QueryHistory />
+        {drawerViews[drawerTab.value]}
       </div>
     </div>
   </div>
 )
 
+const TabViews = {
+  tables: <DataTable />,
+  queries: <QueryEditor />,
+  logs: <LogsViewer />,
+}
+
 export const DeploymentPage = () => {
   const tab = (url.params.tab as 'tables' | 'queries' | 'logs') || 'tables'
   const view = TabViews[tab]