Modernize admin SQL query tool to Tailwind CSS + shadcn/ui by Copilot · Pull Request #315 · Raid-Hub/Web-App

Copilot · 2026-02-06T05:52:06Z

The admin SQL query tool at /admin/query was using outdated patterns (styled-components, raw HTML elements, deprecated components) inconsistent with the rest of the admin dashboard.

Changes

Component Library Migration

Replaced all styled-components (Container, CodeTextArea, CancelButton, ErrorMessage, WarningMessage, TableArea, Attribution) with Tailwind utility classes
Replaced raw HTML elements with shadcn/ui components:
- <button> → Button with variants (default, destructive, outline)
- <input> → Input
- <select> → Select with SelectTrigger, SelectContent, SelectItem
- Custom table → Table, TableHeader, TableRow, TableHead, TableBody, TableCell
- Panel → Card, CardHeader, CardTitle, CardContent
Added Badge for status indicators (unsaved changes, row count)

SQL Editor Enhancement

Replaced plain <textarea> with CodeMirror 6:

<SqlEditor value={queryText} onChange={setQueryText} />

Features: SQL syntax highlighting, line numbers, bracket matching, custom dark theme matching admin dashboard aesthetic.

Layout & Structure

Removed deprecated PageWrapper, Flex components
Added AdminPageHeader for consistency
Reorganized saved query toolbar with proper spacing and visual hierarchy
Moved table edit controls to card header

UX Improvements

Toast notifications via sonner for query execution, cancellation, errors
Semantic error/warning cards with appropriate colors (red-500/yellow-500)
Row count badge in table header

Mutation Hook Cleanup

Simplified useRaidHubAdminQuery AbortController pattern:

Moved abort error handling to onError callback
Removed conditional reset during render (anti-pattern)
Added toast for cancellation feedback

Dependencies Added

@codemirror/lang-sql, @codemirror/view, @codemirror/state, codemirror

All existing functionality preserved: SELECT/EXPLAIN queries, high cost warnings, query cancellation, saved queries (localStorage), column format editing.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

checkpoint.prisma.io
- Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/Web-App/Web-App/node_modules/prisma/build/child {"product":"prisma","version":"6.5.0","cli_install_type":"local","information":"","local_timestamp":"2026-02-06T05:54:38Z","project_hash":"e746e93b","cli_path":"/home/REDACTED/work/Web-App/Web-App/node_modules/.bin/prisma","cli_path_hash":"d1777587","endpoi (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/Web-App/Web-App/node_modules/prisma/build/child {"product":"prisma","version":"6.5.0","cli_install_type":"local","information":"","local_timestamp":"2026-02-06T05:54:39Z","project_hash":"e746e93b","cli_path":"/home/REDACTED/work/Web-App/Web-App/node_modules/.bin/prisma","cli_path_hash":"d1777587","endpoi (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/Web-App/Web-App/node_modules/prisma/build/child {"product":"prisma","version":"6.5.0","cli_install_type":"local","information":"","local_timestamp":"2026-02-06T05:59:00Z","project_hash":"e746e93b","cli_path":"/home/REDACTED/work/Web-App/Web-App/node_modules/.bin/prisma","cli_path_hash":"d1777587","endpoi (dns block)
fonts.googleapis.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/Web-App/Web-App/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Overview

The admin SQL query tool at /admin/query uses outdated patterns (styled-components, deprecated components, raw HTML elements) while the rest of the admin dashboard has been modernized with Tailwind CSS and shadcn/ui. This PR should bring the query tool up to the same standard.

Files to Change

All files under src/components/admin/query/ and src/services/raidhub/useRaidHubAdminQuery.ts, plus the page at src/app/admin/query/page.tsx.

Current files:

src/components/admin/query/query-dashboard.tsx — main dashboard component
src/components/admin/query/query-data-view.tsx — results/error display
src/components/admin/query/table/SQLTable.tsx — custom results table
src/components/admin/query/table/Cell.tsx — table cell renderer
src/components/admin/query/table/ColumnLabel.tsx — editable column headers
src/components/admin/query/table/formats.tsx — column format renderers
src/services/raidhub/useRaidHubAdminQuery.ts — mutation hook

Required Changes

1. Replace `styled-components` with Tailwind CSS

Remove all styled-components usage from query tool files (Container, CodeTextArea, CancelButton, ErrorMessage, WarningMessage, TableArea, Attribution)
Use Tailwind utility classes instead, consistent with the rest of the admin dashboard

2. Replace raw HTML elements with shadcn/ui components

The project already has these shadcn components installed (in src/components/ui/ and re-exported from src/shad/). Use them:

Button (from ~/shad/button) with appropriate variants (default, destructive, outline) instead of raw <button> elements
Select, SelectTrigger, SelectContent, SelectItem (from ~/shad/select) instead of raw <select> for the saved query picker and column format selector
Input (from ~/shad/input or ~/components/ui/input) instead of raw <input> for the query title field
Card, CardHeader, CardTitle, CardContent (from ~/shad/card) for the results panel instead of the deprecated Panel component
Table, TableHeader, TableRow, TableHead, TableBody, TableCell (from ~/shad/table) instead of the custom SQLTable + deprecated Table component. See src/components/admin/badge/badges-display.tsx and src/components/admin/reporting/tabs/instance-info-tab.tsx for examples of how the shadcn Table is used in the admin dashboard already.
Badge (from ~/shad/badge) for status indicators like "Unsaved Changes", row count, query cost
Tabs, TabsList, TabsTrigger, TabsContent (from ~/shad/tabs) to organize Results vs Explain Plan output
Alert or proper styled containers for error messages and warnings instead of the styled-components ErrorMessage and WarningMessage
Tooltip (from ~/shad/tooltip) for button descriptions

3. Add a proper SQL code editor

Replace the plain <textarea> with CodeMirror 6 for SQL editing:

Install @codemirror/lang-sql, @codemirror/view, @codemirror/state, and a dark theme like @codemirror/theme-one-dark (or use @uiw/codemirror-theme-vscode for a VS Code-like dark theme)
Create a reusable SqlEditor component that wraps CodeMirror with:
- SQL syntax highlighting
- Line numbers
- Bracket matching
- Dark theme matching the admin dashboard aesthetic (dark background)
- Controlled value via props
- onChange callback
If adding CodeMirror adds too much complexity, at minimum use a <textarea> with monospace font, proper Tailwind styling, and the shadcn design system. But CodeMirror is strongly preferred.

4. Remove deprecated component usage

Remove imports of PageWrapper from ~/components/PageWrapper
Remove imports of Flex from ~/components/__deprecated__/layout/Flex
Remove imports of Panel from ~/components/__deprecated__/Panel
Remove imports of Table from ~/components/Table (the old non-shadcn table)
Use standard Tailwind flex/grid layouts instead

5. Improve the saved queries UX

Replace the raw <select> dropdown with shadcn Select component for picking saved queries
Style the Save/Save New/Delete buttons with shadcn Button variants
Use Badge component for the "Unsaved Changes" indicator
Consider grouping the saved query management into a cleaner toolbar layout

6. Improve results table

Replace the custom SQLTable component with shadcn's Table components
Keep the column format editing functionality but use shadcn Select for the format picker
Use shadcn Input for the column label editor
Remove the embedded logo image and attribution from the table (that's presentation-layer stuff for screenshots, not the query tool itself)
Add row count display using Badge

7. Clean up the mutation hook (`useRaidHubAdminQuery.ts`)

The manual AbortController pattern with conditional reset during render is an anti-pattern. Clean it up:
- Move the abort check into the mutation's onError or...

This pull request was created from Copilot chat.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

vercel · 2026-02-06T05:52:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
raid-hub	Error		Feb 6, 2026 6:02am

Co-authored-by: owens1127 <98496129+owens1127@users.noreply.github.com>

…r logic Co-authored-by: owens1127 <98496129+owens1127@users.noreply.github.com>

Initial plan

5742b92

Copilot AI assigned Copilot and owens1127 Feb 6, 2026

Copilot started work on behalf of owens1127 February 6, 2026 05:52 View session

vercel Bot deployed to Preview February 6, 2026 05:53 View deployment

Modernize admin SQL query tool with Tailwind CSS and shadcn/ui

47eeb6a

Co-authored-by: owens1127 <98496129+owens1127@users.noreply.github.com>

vercel Bot had a problem deploying to Preview February 6, 2026 05:57 Failure

Fix linter warnings and add codemirror dependency

df93257

Co-authored-by: owens1127 <98496129+owens1127@users.noreply.github.com>

vercel Bot had a problem deploying to Preview February 6, 2026 06:00 Failure

Address code review feedback: remove unused theme, fix AbortControlle…

fcd5a9c

…r logic Co-authored-by: owens1127 <98496129+owens1127@users.noreply.github.com>

vercel Bot had a problem deploying to Preview February 6, 2026 06:02 Failure

Copilot AI changed the title ~~[WIP] Update admin SQL query tool to modern standards~~ Modernize admin SQL query tool to Tailwind CSS + shadcn/ui Feb 6, 2026

Copilot AI requested a review from owens1127 February 6, 2026 06:05

Copilot finished work on behalf of owens1127 February 6, 2026 06:05

Navigation Menu

Uh oh!

Modernize admin SQL query tool to Tailwind CSS + shadcn/ui - #315

Modernize admin SQL query tool to Tailwind CSS + shadcn/ui#315
owens1127 with Copilot wants to merge 4 commits into
mainfrom
copilot/update-admin-query-tool

Copilot AI commented Feb 6, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Feb 6, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Copilot AI commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Component Library Migration

SQL Editor Enhancement

Layout & Structure

UX Improvements

Mutation Hook Cleanup

Dependencies Added

I tried to connect to the following addresses, but was blocked by firewall rules:

Overview

Files to Change

Current files:

Required Changes

1. Replace styled-components with Tailwind CSS

2. Replace raw HTML elements with shadcn/ui components

3. Add a proper SQL code editor

4. Remove deprecated component usage

5. Improve the saved queries UX

6. Improve results table

7. Clean up the mutation hook (useRaidHubAdminQuery.ts)

Uh oh!

vercel Bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Feb 6, 2026 •

edited

Loading

1. Replace `styled-components` with Tailwind CSS

7. Clean up the mutation hook (`useRaidHubAdminQuery.ts`)

vercel Bot commented Feb 6, 2026 •

edited

Loading