Make USE_NEW_DESIGN deterministic by cache-busting config.json in design switcher

[Copilot]

USE_NEW_DESIGN was not consistently reflected in index.html routing because the client-side design switcher could reuse a stale cached config.json. This caused deployments with updated env values to sometimes continue loading the previous frontend.

• Config fetch behavior

  • Updated design-switch.js to request config.json with a cache-busting query param so each page load evaluates the current server-rendered config value.
  • This preserves existing precedence (?design= override first, config fallback second) while removing cache-driven nondeterminism.

• Regression coverage

  • Added an e2e assertion in tests/e2e/design-switch.spec.js verifying the switcher requests config.json with the cache-busting parameter and routes to modern UI when useNewDesign: true.

// design-switch.js
const xhr = new XMLHttpRequest();
xhr.open('GET', 'config.json?_=' + Date.now(), false);
xhr.send(null);

• Fixes The USE_NEW_DESIGN environment variable does not appear to reliably control which frontend design is used. #857

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Cache-bust design config for deterministic frontend routing

🐞 Bug fix 🧪 Tests 🕐 Less than 10 minutes

AI Description

• Cache-bust config requests so deployments use the current USE_NEW_DESIGN value.
• Preserve query override precedence and existing classic fallback behavior.
• Verify cache-busted requests route enabled configurations to the modern UI.

Diagram

sequenceDiagram
    participant B as Browser
    participant S as Design Switcher
    participant C as Config Server
    participant U as Selected UI
    B->>S: Load index.html
    alt Design override present
        S->>U: Redirect from override
    else No override
        S->>C: GET config.json?_=timestamp
        C-->>S: Current useNewDesign
        S->>U: Redirect from config
    end

Loading

High-Level Assessment

The localized timestamp query parameter is appropriate because it bypasses browser and intermediary cache entries without changing redirect timing or override precedence. Server-side cache headers would require broader deployment coordination, while replacing the synchronous request with asynchronous fetching could introduce a flash of the wrong design.

Files changed (2) +19 / -1

Bug fix (1) +2 / -1

design-switch.jsCache-bust runtime design configuration requests +2/-1

Cache-bust runtime design configuration requests

• Appends a timestamp query parameter when synchronously requesting 'config.json', preventing stale cached values from controlling frontend selection. Existing query override precedence, error handling, and classic fallback behavior remain unchanged.

design-switch.js

Tests (1) +17 / -0

design-switch.spec.jsCover cache-busted configuration routing +17/-0

Cover cache-busted configuration routing

• Adds a Playwright test that intercepts the configuration request, returns 'useNewDesign: true', and verifies both the modern UI redirect and timestamp query parameter.

tests/e2e/design-switch.spec.js

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can describe a rule in plain language on the Rules page and Qodo drafts it for you

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[Copilot]

Copilot review overview

🟢 Approval recommended

The changes address the caching issue and include regression coverage.

Review effort: Lite
Findings: None

What changed in this PR

This pull request makes USE_NEW_DESIGN routing deterministic by cache-busting config.json requests and adding regression coverage.

Changes:

• Adds a timestamp query parameter to configuration requests.
• Adds E2E coverage for cache busting and modern-design routing.

File	Description
tests/​e2e/​design-switch.spec.js	Verifies cache-busted requests and routing behavior.
design-switch.js	Cache-busts config.json requests.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.