Support overriding theme through URL search parameter

[joshuali925]

Description

This PR allows theme to be overridden by search parameter.

• If theme is dark, OSD sets theme to dark.
• If theme is browser, OSD sets theme to match browser.
• If theme is light, OSD sets theme to light.
• If theme is absent or any other value, OSD behavior does not change.

Theme can be a search param in either location.search or location.hash. For example

• http://localhost:5601/app/home#/?theme=dark
• http://localhost:5601/app/management?theme=light
• http://localhost:5601/app/home?theme=browser#/?theme=dark
  • it will prioritize the value in search param over hash, so theme will be browser

This override will only be in-effect if the parameter is present in the URL. It only changes the actual theme and does not change theme selection on UI. This is more for the embeded use case and not a user facing feature.

This PR depends on #5652. The handlebars files don't seem to have tests, will add tests for 5652 in general later.

Issues Resolved

Screenshot

Testing the changes

Changelog

• feat: support overriding theme through URL search parameter

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 64.30%. Comparing base (9d692ef) to head (0c9f0f5).
Report is 50 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7791      +/-   ##
==========================================
+ Coverage   63.81%   64.30%   +0.48%     
==========================================
  Files        3656     3674      +18     
  Lines       81205    81135      -70     
  Branches    12949    12926      -23     
==========================================
+ Hits        51823    52173     +350     
+ Misses      26202    25751     -451     
- Partials     3180     3211      +31     

Flag	Coverage Δ
Linux_1	30.21% <ø> (+0.13%)	⬆️
Linux_2	56.19% <ø> (+0.31%)	⬆️
Linux_3	40.62% <ø> (+0.19%)	⬆️
Linux_4	31.40% <ø> (+0.11%)	⬆️
Windows_1	30.23% <ø> (+0.11%)	⬆️
Windows_2	56.14% <ø> (+0.31%)	⬆️
Windows_3	40.62% <ø> (+0.19%)	⬆️
Windows_4	31.40% <ø> (+0.11%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AMoo-Miki]

Does it matter that #5652 is not in 2.x?

[joshuali925]

Does it matter that #5652 is not in 2.x?

we can still backport this PR to 2.x but it will be dead code due to #6978. we do want to revert #6978 for 2.17 so this gets out, but we might disable the UI part

[virajsanghvi]

if this parameter only impacts dark/light mode, can we name it after that and not use theme?

[joshuali925]

yes it's like 'colorscheme' vs 'background', and "theme" only impacts background. i thought about something like darkMode, but it also needs to support "browser". do you have any recommendation?

[virajsanghvi]

we specify urls params in the url fragment?

[joshuali925]

we'll take it if it's in the hash. when hashrouter is used i think many parts of dashboards use hash for url params

[AMoo-Miki]

In a future enhancement, we MIGHT be having an interceptor on the server side to handle language and theme changes among others. After intercepting, it will clean the URL and redirect to the destination without the lang and theme. If we look into the hash here, we cannot unlook at it later and that would make the transition challenging if not impossble without a breaking change.

IMO, we should drop this piece and stick to the one above.