Skip to content

feat(admin): Replace the sidebar with region and page switchers - #8536

Open
onewland wants to merge 16 commits into
masterfrom
feat/admin-header-tool-menu
Open

onewland wants to merge 16 commits into
masterfrom
feat/admin-header-tool-menu

Conversation

@onewland

@onewland onewland commented Oct 9, 2026 •

Copy link
Copy Markdown
Contributor

Replaces the sidebar with two switchers in the header, so every page gets the full width and moving around admin takes one hover.

Screenshot 2026-10-10 at 7 21 23 AM Screenshot 2026-10-10 at 7 21 41 AM

Switch regions without losing your place

  • The region pill lists every known region. Picking one opens the same page in that region. For example, from Querylog in us, choosing de lands on Querylog in de, so comparing a tool across regions no longer means re-navigating each time.
  • The current region is marked. Links are normal links, so cmd-click opens a region in a new tab.
  • Deployments with no other regions configured (e.g. local dev) show the region as a plain label.

Switch pages within the current region

  • The current page title is now a menu of every tool you have access to, with the current page highlighted. This replaces the sidebar.
  • The home page keeps its full tile grid and doesn't show a page title.

Both menus open on hover or keyboard focus.

Layout

  • The sidebar (nav.tsx) and its styles are removed.
  • Pages get padding now that the sidebar no longer offsets them from the edge.

Code

  • The tile grid moves into a shared ToolGrid component (tool_grid.tsx), used by both the home page and the page menu.
  • The sidebar's allowed-tools test is ported to ToolGrid. New header tests cover region links keeping the current page, the no-regions case, and the page menu.

Testing

  • Jest suite passes (42 tests) and the bundle builds.
  • Checked both menus in headless Chrome against mocked endpoints, including moving the pointer slowly from each trigger onto its menu.

Current state (QuickTime recording):
https://github.com/user-attachments/assets/cdfaa501-fce5-4a24-81c5-c251d6d151ee

🤖 Generated with Claude Code

onewland and others added 7 commits October 9, 2026 13:39
Replace the home page sidebar with a grid of tool tiles that have
descriptions and a hover effect, and show regions as a row of buttons
colored to match the header banner.

Switch the admin UI to a solarized dark palette, including the Mantine
and Bootstrap themes and the SQL editor, and move the "MEREDITH IS #1"
line into a low-contrast diagonal tiling on the page background.

Move the less used tools (Snubsplain, SnQL to SQL, EAP Stats,
Replacements) to the end of the list.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
If /tools failed or returned an unexpected body, the tool grid stayed
empty with no explanation. Catch the failure and show it under the
Tools heading.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Replace the solarized dark palette with near-black text on near-white
surfaces, dropping the Mantine and Bootstrap dark-theme overrides and
returning the SQL editor to its light syntax colors.

Draw the slogan tiling at a steeper angle, wrapping each copy so it
tiles seamlessly, and only show it on the home page.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The steeper angle made the background text hard to read.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Replace the saturated blue table header with a light slate blue and
dark text, give tables a white body, and use a border color that shows
on both the header and the body.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Hovering (or focusing) the region in the header opens a compact version
of the home page's tool grid, so the sidebar is no longer needed. The
header now shows the current page after the region, centered between the
logo and the ADMIN label, and pages get padding now that the sidebar no
longer offsets them.

The tile grid moves into a shared ToolGrid component used by both the
home page and the menu. Nav and its test are removed; the allowed-tools
coverage moves to a ToolGrid test.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@onewland
onewland requested a review from a team as a code owner October 9, 2026 21:59
onewland and others added 3 commits October 9, 2026 15:08
…d-home-tiles

# Conflicts:
#	snuba/admin/static/welcome/index.tsx
Right-align the button on the same line as the region pills and give it
the pills' type and height, outlined in a muted red so it doesn't read
as another region.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…-tool-menu

# Conflicts:
#	snuba/admin/static/welcome/index.tsx
Move the <style> block from index.html into static/styles.css and import
it from index.tsx after bootstrap, so esbuild bundles it into bundle.css
in the same precedence order as before.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Base automatically changed from feat/admin-solarized-home-tiles to master October 9, 2026 23:01
onewland and others added 3 commits October 9, 2026 19:39
… into feat/admin-header-tool-menu

# Conflicts:
#	snuba/admin/dist/index.html
…ool-menu

# Conflicts:
#	snuba/admin/static/body.tsx
#	snuba/admin/static/header.tsx
#	snuba/admin/static/index.tsx
#	snuba/admin/static/nav.tsx
#	snuba/admin/static/styles.css
#	snuba/admin/static/theme.tsx
#	snuba/admin/static/welcome/index.tsx
The region pill now opens a list of every known region; picking one
opens the same page in that region. The page title becomes a separate
menu for switching pages within the current region, with the current
page highlighted. Each menu is centered under its trigger and kept
inside the window.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@onewland onewland changed the title feat(admin): Replace the sidebar with a header tool menu feat(admin): Replace the sidebar with region and page switchers Oct 10, 2026

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 4b635d3. Configure here.

flex: 1,
minWidth: 0,
margin: 10,
padding: "20px 24px",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shell overflows new body padding

Low Severity

Body spacing changed from a 10px margin to 20px padding, but the SQL shell still sizes itself with calc(100vh - 75px). The shell is now taller than the remaining content box, so the input row sits a few pixels below the fold on tracing and system shell pages.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 4b635d3. Configure here.

onewland and others added 2 commits October 10, 2026 07:26
Add a caret to the top of each header menu that points at its trigger,
staying over the trigger even when the menu is shifted to fit the window.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants