RI-7574: allow setting default theme from query param (#5031)

* RI-7574: allow setting default theme from query param

* update theme lookup logic

* refactor theme provider

Author: KrumTy

redisinsight/ui/src/components/config/Config.tsx

@@ -1,15 +1,11 @@
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
 import { isNumber } from 'lodash'
 import { BrowserStorageItem, FeatureFlags, Theme } from 'uiSrc/constants'
 import { BuildType } from 'uiSrc/constants/env'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
-import {
-  localStorageService,
-  setObjectStorage,
-  themeService,
-} from 'uiSrc/services'
+import { localStorageService, setObjectStorage } from 'uiSrc/services'
 
 import {
   appFeatureFlagsFeaturesSelector,
@@ -44,6 +40,7 @@ import { fetchProfile } from 'uiSrc/slices/oauth/cloud'
 import { fetchDBSettings } from 'uiSrc/slices/app/db-settings'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { DatabaseSettingsData } from 'uiSrc/slices/interfaces'
+import { ThemeContext } from 'uiSrc/contexts/themeContext'
 
 const SETTINGS_PAGE_PATH = '/settings'
 const Config = () => {
@@ -54,6 +51,7 @@ const Config = () => {
     [FeatureFlags.cloudSso]: cloudSsoFeature,
     [FeatureFlags.envDependent]: envDependentFeature,
   } = useSelector(appFeatureFlagsFeaturesSelector)
+  const { changeTheme } = useContext(ThemeContext)
   const { pathname } = useLocation()
 
   const dispatch = useDispatch()
@@ -211,7 +209,7 @@ const Config = () => {
   const checkAndSetTheme = () => {
     const theme = config?.theme
     if (theme && localStorageService.get(BrowserStorageItem.theme) !== theme)
-      themeService.applyTheme(theme as Theme)
+      changeTheme(theme)
   }
 
   return null

redisinsight/ui/src/contexts/themeContext.tsx

@@ -26,6 +26,14 @@ interface Props {
 
 const THEME_NAMES = THEMES.map(({ value }) => value)
 
+const getQueryTheme = () => {
+  const queryThemeParam = new URLSearchParams(window.location.search)
+    .get('theme')
+    ?.toUpperCase()
+
+  return THEMES.find(({ value }) => value === queryThemeParam)?.value
+}
+
 export const defaultState = {
   theme: DEFAULT_THEME || Theme.System,
   usingSystemTheme:
@@ -41,14 +49,20 @@ export class ThemeProvider extends React.Component<Props> {
   constructor(props: any) {
     super(props)
 
+    const queryTheme = getQueryTheme()
     const storedThemeValue = localStorageService.get(BrowserStorageItem.theme)
-    const theme =
-      !storedThemeValue || !THEME_NAMES.includes(storedThemeValue)
-        ? defaultState.theme
-        : storedThemeValue
+
+    let theme = defaultState.theme
+
+    if (queryTheme) {
+      theme = queryTheme
+    } else if (storedThemeValue && THEME_NAMES.includes(storedThemeValue)) {
+      theme = storedThemeValue
+    }
+
     const usingSystemTheme = theme === Theme.System
 
-    themeService.applyTheme(theme)
+    themeService.applyTheme(theme as Theme)
 
     this.state = {
       theme: theme === Theme.System ? this.getSystemTheme() : theme,