feat: add URL hash navigation and keyboard support to drawer

Enhance the namespace detail drawer with URL-aware navigation and
keyboard accessibility features.

Changes:
- URL hash support: /polaris/namespaces#alpha opens alpha drawer
- Deep linking: URLs can be bookmarked and shared
- Browser back/forward: Navigate drawer history with browser buttons
- Keyboard navigation: Escape key closes the drawer
- URL synchronization: Hash updates when drawer opens/closes

Technical implementation:
- Use React Router v5 useHistory/useLocation hooks
- Initialize drawer state from location.hash on mount
- Sync drawer state when hash changes (back/forward navigation)
- Update hash when drawer opens/closes via history.push()
- Add global keydown listener for Escape key

Tests:
- Added test for clicking namespace button opens drawer
- Added test for initializing drawer from URL hash
- All 50 tests passing

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
2026-02-09 08:00:39 -05:00
parent 4544284df0
commit 1b082a24db
2 changed files with 114 additions and 8 deletions
@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { describe, expect, it, vi } from 'vitest';
@@ -218,4 +219,74 @@ describe('NamespacesListView', () => {
const errorScore = scoreLabels.find(el => el.textContent === '0%');
expect(errorScore).toHaveAttribute('data-status', 'error');
});
it('opens drawer when namespace button is clicked and URL hash is updated', async () => {
const user = userEvent.setup();
const data = makeAuditData([
makeResult({
Name: 'deploy-a',
Namespace: 'alpha',
Results: {
c1: {
ID: 'c1',
Message: '',
Details: [],
Success: true,
Severity: 'warning',
Category: 'X',
},
},
}),
]);
mockUsePolarisDataContext.mockReturnValue({
data,
loading: false,
error: null,
});
renderWithRouter(<NamespacesListView />);
// Click the namespace button
const alphaButton = screen.getByText('alpha');
await user.click(alphaButton);
// Drawer should open (check for the panel title)
expect(screen.getByText(/Polaris — alpha/)).toBeInTheDocument();
});
it('initializes drawer from URL hash', () => {
const data = makeAuditData([
makeResult({
Name: 'deploy-a',
Namespace: 'test-ns',
Results: {
c1: {
ID: 'c1',
Message: '',
Details: [],
Success: true,
Severity: 'warning',
Category: 'X',
},
},
}),
]);
mockUsePolarisDataContext.mockReturnValue({
data,
loading: false,
error: null,
});
// Render with initial hash in URL
render(
<MemoryRouter initialEntries={['/polaris/namespaces#test-ns']}>
<NamespacesListView />
</MemoryRouter>
);
// Drawer should be open with the namespace from hash
expect(screen.getByText(/Polaris — test-ns/)).toBeInTheDocument();
});
});