Skip to content

Conversation

KrumTy
Copy link
Collaborator

@KrumTy KrumTy commented Oct 3, 2025

Description

For RiC we want to get the theme from SM. The agreed upon approach is to pass it as query param. This PR sets up the handling of such query param. There will be another one for SM that will pass it.

The theme comes from:

  1. default is set to RI_DEFAULT_THEME env variable ('SYSTEM' by default)
  2. then a localstorage item is checked, under theme key
  3. then user settings config is checked, fetched from the /settings endpoint, taking the data from sqlite db. Once this setting is fetched, if the config theme is different than the one in localstorage, an update is triggered to update the localstorage and app state

Now, with this change, I'm adding a step inbetween 1. and 2., call it 1.5 - if theme query param is passed and it contains valid theme key value, that will be used over the default/localstorage value (updating the localstorage in the process). If

For RiC there's no sqlitdb config, the endpoint returns theme:null, hence the 3rd point above will not update the app theme.

For non-RiC (e.g. web/docker build) the query param will only override the default theme, then this state will be overridden by the /settings theme data, should one present. This is just explaining the behaviour, although it's not expected to use the theme query param for these builds.

const theme = config?.theme
if (theme && localStorageService.get(BrowserStorageItem.theme) !== theme)
themeService.applyTheme(theme as Theme)
changeTheme(theme)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changing theme via changeTheme is the correct approach as it updates the theme provider and calls themeService.applyTheme internally

@KrumTy KrumTy marked this pull request as ready for review October 3, 2025 14:09
valkirilov
valkirilov previously approved these changes Oct 6, 2025

const getQueryTheme = () => {
const queryThemeParam = new URLSearchParams(window.location.search)
.get('theme')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: It's not directly related to your changes, but I would suggest putting this "magic string" behind an enum.

We have similar logic in about 15 other places in the codebase where we use the same approach. I believe having a centralized location where we can view a list of all the available query parameters that Redis Insight accepts and handles will be beneficial. It will be both cleaner and also better in terms of self-explanatory "code documentation".

If you find this advice useful, we can log a separate tech debt ticket with low priority and reference it outside the scope of this change.

Copy link
Contributor

github-actions bot commented Oct 6, 2025

Code Coverage - Frontend unit tests

St.
Category Percentage Covered / Total
🟢 Statements 82.13% 20037/24397
🟡 Branches 67.43% 8661/12845
🟡 Functions 76.21% 5330/6994
🟢 Lines 82.55% 19616/23763

Test suite run success

5162 tests passing in 677 suites.

Report generated by 🧪jest coverage report action from be9103e

@KrumTy KrumTy merged commit 13dd2a9 into main Oct 6, 2025
18 checks passed
@KrumTy KrumTy deleted the fe/feature/theme-query-param branch October 6, 2025 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants