Fix broken dashboards: inject theme-toggle/back-to-top/mermaid bootstrap on all 126 dashboard pages#2480
Conversation
Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/300fe764-350a-430a-86bd-6b81196556ac Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
…ll 126 dashboard pages Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/300fe764-350a-430a-86bd-6b81196556ac Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
🏷️ Automatic Labeling SummaryThis PR has been automatically labeled based on the files changed and PR metadata. Applied Labels: html-css,javascript,testing,refactor,size-xl Label Categories
For more information, see |
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
There was a problem hiding this comment.
Pull request overview
This PR fixes a cross-cutting dashboard regression where the static /dashboards/*.html pages were missing the trailing bootstrap that wires up Mermaid initialization, the back-to-top button, and the theme toggle (dark/light mode). It also adds regression tests (unit + Cypress) to prevent silent reintroduction across all dashboard language variants.
Changes:
- Updates
scripts/build-dashboard-pages.pyto extract all trailing scripts up to</body>(instead of only the first<script>). - Adds
scripts/patch-dashboard-bootstrap.pyto backfill the bootstrap block into already-committeddashboards/*.htmlpages (idempotently). - Adds structural/unit assertions and Cypress runtime assertions to verify the bootstrap presence and that the theme toggle actually works.
Reviewed changes
Copilot reviewed 131 out of 131 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/build-dashboard-pages.py | Widens TAIL_SCRIPTS_RE to capture all tail scripts (including the inject bootstrap) up to </body>. |
| scripts/patch-dashboard-bootstrap.py | New idempotent patcher to insert the inject bootstrap after the dashboard entry script in committed dashboard pages. |
| dashboards/*.html (126 files) | Adds the inject-IIFE bootstrap block after the main entry script on every dashboard page/language variant. |
| tests/dashboard-pages.test.js | Adds a per-dashboard-file structural regression guard for the bootstrap block. |
| cypress/support/commands.js | Adds cy.expectThemeToggleWorks() helper to assert runtime theme toggling. |
| cypress/e2e/dashboards-per-chart/_helpers.js | Wires the theme-toggle runtime assertion into the per-dashboard suite (non-hub dashboards). |
| // DOMContentLoaded. The handler sets `aria-pressed` on the button | ||
| // during init; use that as the readiness signal. | ||
| cy.get('#theme-toggle', { timeout: 15000 }) | ||
| .should('have.attr', 'aria-pressed') | ||
| .and('match', /^(true|false)$/); |
| // The bootstrap must be the documented imperative-inject IIFE | ||
| // (so Vite's HTML transformer does not try to bundle the | ||
| // referenced modules). Anchor on the IIFE entry-point and the | ||
| // three inject() calls in that order. | ||
| expect(html, `${filename} bootstrap is missing the inject() IIFE wrapper`).toMatch( | ||
| /function inject\(src,\s*isModule\)/, | ||
| ); |
Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/d1ba60ed-2993-466f-8c9c-296043982b98 Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
| it('ships /js/theme-toggle.js + /js/back-to-top.js + /js/lib/mermaid-init.mjs bootstrap', () => { | ||
| html ||= readPage(filename); | ||
| expect(html, `${filename} missing /js/theme-toggle.js bootstrap`).toContain("/js/theme-toggle.js"); | ||
| expect(html, `${filename} missing /js/back-to-top.js bootstrap`).toContain("/js/back-to-top.js"); | ||
| expect(html, `${filename} missing /js/lib/mermaid-init.mjs bootstrap`).toContain("/js/lib/mermaid-init.mjs"); |
| .should('have.attr', 'aria-pressed') | ||
| .and('match', /^(true|false)$/); |
|
@copilot apply changes based on the comments in this thread |
Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/ffa3d9eb-89b5-4d93-8c7d-548fe24530c6 Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
Implemented the review-thread fixes in
I also pushed |
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
cypress/support/commands.jsandtests/dashboard-pages.test.js.