[WIP] Implement query history section in the drawer

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Contexte :

• Le tab "queries" et le composant QueryEditor existent déjà dans web/pages/DeploymentPage.tsx. Le bouton d'exécution appelle actuellement une fonction onRun() vide (// TODO: call backend here).
• Un Drawer est présent dans DeploymentPage.tsx (input id='my-drawer-4') et est utilisé pour afficher une sidebar/drawer depuis l'UI (le bouton "Run query" ouvre ce drawer). L'utilisateur a indiqué que la section d'historique des requêtes doit être implémentée dans ce drawer.

Objectif :
Implémenter la section "Query History" dans le drawer afin que les utilisateurs puissent consulter, réutiliser et gérer leurs requêtes SQL précédentes.

Comportement attendu / exigences :

• Afficher dans le drawer une liste des requêtes SQL précédemment exécutées, avec :
  • Un extrait ou le texte complet de la requête
  • Timestamp d'exécution
  • Nombre de colonnes / rows (si disponible)
  • Actions rapides : Run (ré-exécuter dans QueryEditor), Insert (insérer dans l'éditeur sans exécuter), Delete (supprimer de l'historique), Pin (optionnel)
• Permettre la recherche/filtrage simple par texte
• Cliquer sur Run doit :
  • Mettre à jour l'éditeur QueryEditor (param url.params.q ou état local) avec la requête sélectionnée
  • Fermer le drawer
  • Déclencher onRun() pour exécuter la requête
• Persistance :
  • Implémentation initiale en stockage local (localStorage) par utilisateur.
  • Prévoir couche d'abstraction (web/lib/queryHistory.ts) pour pouvoir remplacer localStorage par un endpoint backend plus tard.
• Sécurité :
  • Ne pas exécuter automatiquement des requêtes dangereuses côté client sans confirmation (par ex. DDL) – si exécution automatique est demandée, afficher un prompt de confirmation pour les requêtes non-SELECT.
• Tests :
  • Tests unitaires pour la couche queryHistory (ajout, suppression, lecture)
  • Tests d'intégration pour l'interaction Drawer -> QueryEditor (sélection de requête, mise à jour de l'éditeur, exécution)

Fichiers à créer / modifier :

• Modifier : web/pages/DeploymentPage.tsx
  • Remplacer le Drawer existant pour embarquer le nouveau composant QueryHistoryDrawer ou l'inclure.
  • Connecter l'action Run pour déclencher navigate({ params: { q: selectedQuery } }) et appeler onRun.
• Créer : web/components/QueryHistory.tsx
  • Composant Preact réutilisable pour afficher la liste, gérer actions et recherche.
• Créer : web/lib/queryHistory.ts
  • Petite API JS/TS pour gérer lecture/écriture dans localStorage et conversion des entrées (schema: {id, sql, ts, rows?, cols?}).
• Tests : tests/web/queryHistory.test.ts, tests/web/QueryHistory.integration.test.tsx

Tâches détaillées :

1. Ajouter web/lib/queryHistory.ts : API simple getHistory(), addEntry(entry), removeEntry(id), clear(), pin/unpin.
2. Créer web/components/QueryHistory.tsx : liste paginée, actions Run/Insert/Delete, champ recherche.
3. Modifier web/pages/DeploymentPage.tsx : importer QueryHistory et ouvrir le drawer existant pour afficher ce composant. Ajouter interaction Run -> mettre l'URL param q et fermer drawer; appeler onRun (ou exposer une prop callback pour exécuter). Gérer confirmation pour requêtes non-SELECT.
4. Mettre à jour QueryEditor.onRun pour ajouter une entrée dans l'historique après exécution réussie (via queryHistory.addEntry).
5. Ajouter tests unitaires et d'intégration.
6. Documentation courte dans web/README.md expliquant le stockage local et comment basculer vers backend.

Critères d'acceptation :

• Le drawer montre l'historique des requêtes et permet Run/Insert/Delete.
• Sélection Run remplit l'éditeur, ferme le drawer et exécute la requête.
• Les entrées sont persistées dans localStorage et l'API queryHistory est couverte par des tests.

Notes :

• Préférer une UX simple et réutilisable (composant indépendant). Les appels réseau pour exécution SQL restent inchangés (le backend d'exécution est hors-scope de cette PR).
• Assigner la PR à @abdotop pour revue.

This pull request was created as a result of the following prompt from Copilot chat.

Contexte :

• Le tab "queries" et le composant QueryEditor existent déjà dans web/pages/DeploymentPage.tsx. Le bouton d'exécution appelle actuellement une fonction onRun() vide (// TODO: call backend here).
• Un Drawer est présent dans DeploymentPage.tsx (input id='my-drawer-4') et est utilisé pour afficher une sidebar/drawer depuis l'UI (le bouton "Run query" ouvre ce drawer). L'utilisateur a indiqué que la section d'historique des requêtes doit être implémentée dans ce drawer.

Objectif :
Implémenter la section "Query History" dans le drawer afin que les utilisateurs puissent consulter, réutiliser et gérer leurs requêtes SQL précédentes.

Comportement attendu / exigences :

• Afficher dans le drawer une liste des requêtes SQL précédemment exécutées, avec :
  • Un extrait ou le texte complet de la requête
  • Timestamp d'exécution
  • Nombre de colonnes / rows (si disponible)
  • Actions rapides : Run (ré-exécuter dans QueryEditor), Insert (insérer dans l'éditeur sans exécuter), Delete (supprimer de l'historique), Pin (optionnel)
• Permettre la recherche/filtrage simple par texte
• Cliquer sur Run doit :
  • Mettre à jour l'éditeur QueryEditor (param url.params.q ou état local) avec la requête sélectionnée
  • Fermer le drawer
  • Déclencher onRun() pour exécuter la requête
• Persistance :
  • Implémentation initiale en stockage local (localStorage) par utilisateur.
  • Prévoir couche d'abstraction (web/lib/queryHistory.ts) pour pouvoir remplacer localStorage par un endpoint backend plus tard.
• Sécurité :
  • Ne pas exécuter automatiquement des requêtes dangereuses côté client sans confirmation (par ex. DDL) – si exécution automatique est demandée, afficher un prompt de confirmation pour les requêtes non-SELECT.
• Tests :
  • Tests unitaires pour la couche queryHistory (ajout, suppression, lecture)
  • Tests d'intégration pour l'interaction Drawer -> QueryEditor (sélection de requête, mise à jour de l'éditeur, exécution)

Fichiers à créer / modifier :

• Modifier : web/pages/DeploymentPage.tsx
  • Remplacer le Drawer existant pour embarquer le nouveau composant QueryHistoryDrawer ou l'inclure.
  • Connecter l'action Run pour déclencher navigate({ params: { q: selectedQuery } }) et appeler onRun.
• Créer : web/components/QueryHistory.tsx
  • Composant Preact réutilisable pour afficher la liste, gérer actions et recherche.
• Créer : web/lib/queryHistory.ts
  • Petite API JS/TS pour gérer lecture/écriture dans localStorage et conversion des entrées (schema: {id, sql, ts, rows?, cols?}).
• Tests : tests/web/queryHistory.test.ts, tests/web/QueryHistory.integration.test.tsx

Tâches détaillées :

1. Ajouter web/lib/queryHistory.ts : API simple getHistory(), addEntry(entry), removeEntry(id), clear(), pin/unpin.
2. Créer web/components/QueryHistory.tsx : liste paginée, actions Run/Insert/Delete, champ recherche.
3. Modifier web/pages/DeploymentPage.tsx : importer QueryHistory et ouvrir le drawer existant pour afficher ce composant. Ajouter interaction Run -> mettre l'URL param q et fermer drawer; appeler onRun (ou exposer une prop callback pour exécuter). Gérer confirmation pour requêtes non-SELECT.
4. Mettre à jour QueryEditor.onRun pour ajouter une entrée dans l'historique après exécution réussie (via queryHistory.addEntry).
5. Ajouter tests unitaires et d'intégration.
6. Documentation courte dans web/README.md expliquant le stockage local et comment basculer vers backend.

Critères d'acceptation :

• Le drawer montre l'historique des requêtes et permet Run/Insert/Delete.
• Sélection Run remplit l'éditeur, ferme le drawer et exécute la requête.
• Les entrées sont persistées dans localStorage et l'API queryHistory est couverte par des tests.

Notes :

• Préférer une UX simple et réutilisable (composant indépendant). Les appels réseau pour exécution SQL restent inchangés (le backend d'exécution est hors-scope de cette PR).
• Assigner la PR à @abdotop pour revue.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.