Merge pull request #4081 from RedisInsight/fe/feature/RI-6156_Change_theme_for_proxy

#RIVS-6156 - Change theme key of local storage

Author: vlad-dargel

redisinsight/ui/src/contexts/themeContext.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import { ipcThemeChange } from 'uiSrc/electron/utils'
 import { BrowserStorageItem, Theme, THEMES, THEME_MATCH_MEDIA_DARK } from '../constants'
 import { localStorageService, themeService } from '../services'
 
 interface Props {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 const THEME_NAMES = THEMES.map(({ value }) => value)
@@ -36,14 +37,15 @@ export class ThemeProvider extends React.Component<Props> {
     }
   }
 
-  getSystemTheme = () => (window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches ? Theme.Dark : Theme.Light)
+  getSystemTheme = () => (window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches ? Theme.Dark : Theme.Light)
 
   changeTheme = (themeValue: any) => {
     let actualTheme = themeValue
     if (themeValue === Theme.System) {
       actualTheme = this.getSystemTheme()
     }
-    window.app?.ipc?.invoke?.('theme:change', themeValue)
+
+    ipcThemeChange(themeValue)
 
     this.setState({ theme: actualTheme, usingSystemTheme: themeValue === Theme.System }, () => {
       themeService.applyTheme(themeValue)

redisinsight/ui/src/electron/utils/index.ts

@@ -2,5 +2,6 @@ import { ipcCheckUpdates, ipcSendEvents } from './ipcCheckUpdates'
 
 export * from './ipcAuth'
 export * from './ipcAppRestart'
+export * from './ipcThemeChange'
 
 export { ipcCheckUpdates, ipcSendEvents }

redisinsight/ui/src/electron/utils/ipcThemeChange.ts

@@ -0,0 +1,8 @@
+import { IpcInvokeEvent } from '../constants'
+
+export const ipcThemeChange = async (value: string) => {
+  await window.app?.ipc?.invoke?.(
+    IpcInvokeEvent.themeChange,
+    value,
+  )
+}

redisinsight/ui/src/services/storage.ts

@@ -1,17 +1,26 @@
 import { isObjectLike } from 'lodash'
+import { Maybe } from 'uiSrc/utils'
 import BrowserStorageItem from '../constants/storage'
 
 class StorageService {
   private storage: Storage
 
-  constructor(storage: Storage) {
+  private envKey: Maybe<string>
+
+  constructor(storage: Storage, envKey?: string) {
     this.storage = storage
+    this.envKey = envKey
+  }
+
+  private getKey(itemName: string): string {
+    return this.envKey ? `${this.envKey}_${itemName}` : itemName
   }
 
   get(itemName: string = '') {
+    const key = this.getKey(itemName)
     let item
     try {
-      item = this.storage.getItem(itemName)
+      item = this.storage.getItem(key)
     } catch (error) {
       console.error(`getItem from storage error: ${error}`)
     }
@@ -26,28 +35,28 @@ class StorageService {
     return null
   }
 
-  getAll() {
-    return this.storage
-  }
-
   set(itemName: string = '', item: any) {
     try {
+      const key = this.getKey(itemName)
       if (isObjectLike(item)) {
-        this.storage.setItem(itemName, JSON.stringify(item))
+        this.storage.setItem(key, JSON.stringify(item))
       } else {
-        this.storage.setItem(itemName, item)
+        this.storage.setItem(key, item)
       }
     } catch (error) {
       console.error(`setItem to storage error: ${error}`)
     }
   }
 
   remove(itemName: string = '') {
-    this.storage.removeItem(itemName)
+    const key = this.getKey(itemName)
+    this.storage.removeItem(key)
   }
 }
-export const localStorageService = new StorageService(localStorage)
-export const sessionStorageService = new StorageService(sessionStorage)
+const envKey = window.__RI_PROXY_PATH__
+
+export const localStorageService = new StorageService(localStorage, envKey)
+export const sessionStorageService = new StorageService(sessionStorage, envKey)
 
 export const getObjectStorageField = (itemName = '', field = '') => {
   try {

redisinsight/ui/src/services/theme.ts

@@ -13,22 +13,23 @@ class ThemeService {
   }
 
   applyTheme(newTheme: Theme) {
-    const actualTheme = newTheme
+    let actualTheme = newTheme
+
     if (newTheme === Theme.System) {
-      if (window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches) {
-        newTheme = Theme.Dark
+      if (window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches) {
+        actualTheme = Theme.Dark
       } else {
-        newTheme = Theme.Light
+        actualTheme = Theme.Light
       }
     }
 
     const sheet = new CSSStyleSheet()
-    sheet?.replaceSync(this.themes[newTheme])
+    sheet?.replaceSync(this.themes[actualTheme])
 
     document.adoptedStyleSheets = [sheet]
 
     localStorageService.set(BrowserStorageItem.theme, actualTheme)
-    document.body.classList.value = `theme_${newTheme}`
+    document.body.classList.value = `theme_${actualTheme}`
   }
 
   static getTheme() {