feat: complete SensibleDB Explorer UI redesign with E2E test coverage#15
Merged
Conversation
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Implement all 5 phases of the SensibleDB Explorer redesign: Phase 1 (verified): Foundation - CSS tokens, component styles, graph interactions Phase 2: Home & Onboarding - Guided tour, connection wizard, contextual tooltips Phase 3a: Chat Interface - NL→NQL translation, structured responses, follow-up chips Phase 3b: Graph View - Node cards with foreignObject, InspectorPanel, Query Bar Phase 4: Reports - Formatted export (txt/PDF), share, time period selector Phase 5: Polish - Animations, ErrorBoundary, keyboard shortcuts (1-8, /, Ctrl+K/G/R) New components: - GuidedTour: 5-step overlay tour with localStorage persistence - ConnectionWizard: 4-step modal wizard for data sources - ContextualTooltip: Reusable tooltip with glossary explanations - InspectorPanel: Node details with connected items and 'Ask about' button - ErrorBoundary: Per-view error boundary with retry E2E testing: - Playwright setup with Tauri API mock for browser testing - 56 tests covering all views, navigation, keyboard shortcuts, design system - Test categories: Home, Graph, Chat, Report, Navigation, Onboarding, NQL, Data Views
… flow tests - Add webServer config to playwright.config.ts with auto-start on port 1420 - Align Playwright baseURL with Vite config port (1420) - Add reuseExistingServer for local dev convenience - Add 7 data flow tests verifying mock data renders with correct values: - Correct database name, node count (10), edge count (10) - Correct metric values in report view - Correct item/connection counts in status bar and chat welcome message - No skipped or deleted tests
- Add playwright-e2e job to .github/workflows/e2e-tests.yml - Installs Node.js 20, frontend dependencies, and Playwright Chromium - Runs npx playwright test with CI=true environment - Fix e2e-test.sh: replace hardcoded node/edge counts with assert_gt > 0
- Remove toBeGreaterThanOrEqual(0) assertion (always passes, verifies nothing) - Add 3 real error handling tests: - error boundary renders when component throws (navigate to unknown route) - app handles empty database gracefully (main content visible) - status bar shows zero counts when no db selected - Total: 65 E2E tests, all passing
- Change npm install to pnpm install (project uses pnpm exclusively) - Add pnpm/action-setup@v4 step - Add e2e/** and playwright.config.ts to path triggers so test changes re-run CI
- playwright.config.ts: use pnpm vite instead of npx vite for CI consistency - e2e-tests.yml: remove duplicate push block that caused YAML override bug
… error tests
- Replace fake error handling tests with real stability assertions
- Replace waitForTimeout with auto-waiting toBeVisible({ timeout: 5000 })
- Add content assertions in Data Flow tests
- 65 tests passing consistently
…tu-latest - Remove redundant e2e-tests job that ran grep-based static checks - Change playwright-e2e from macos-latest to ubuntu-latest (cost + reliability) - Keep only the real Playwright E2E browser tests in CI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete implementation of the SensibleDB Explorer UI redesign (all 5 phases) with comprehensive E2E test coverage.
What's Implemented
Phase 1: Foundation - CSS design tokens, component styles, NQL execution, graph interactions
Phase 2: Home & Onboarding - Guided tour, connection wizard, contextual tooltips with glossary
Phase 3a: Chat Interface - NL→NQL translation, structured responses, follow-up suggestion chips
Phase 3b: Graph View - Node cards with foreignObject, InspectorPanel, Query Bar, async force simulation
Phase 4: Reports - Formatted export (txt/PDF), share functionality, time period selector
Phase 5: Polish - CSS animations, ErrorBoundary, keyboard shortcuts (1-8, /, Ctrl+K/G/R)
E2E Test Coverage
CI Integration