RI-7154: Color Theme select box shown incorrectly

* fix empty value set for theme if user has not configured it before

* add test case for default selection in theme dropdown

Author: pd-redis

redisinsight/ui/src/pages/settings/components/theme-settings/ThemeSettings.spec.tsx

@@ -8,7 +8,7 @@ import {
   screen,
   waitFor,
 } from 'uiSrc/utils/test-utils'
-import { Theme, THEMES } from 'uiSrc/constants'
+import { DEFAULT_THEME, Theme, THEMES } from 'uiSrc/constants'
 import { TelemetryEvent } from 'uiSrc/telemetry'
 import { updateUserConfigSettingsAction } from 'uiSrc/slices/user/user-settings'
 
@@ -42,6 +42,17 @@ describe('ThemeSettings', () => {
     expect(render(<ThemeSettings />)).toBeTruthy()
   })
 
+  it('should render the default theme option selected when there is no previous config', async () => {
+    render(<ThemeSettings />)
+
+    const selectedTheme = THEMES.find((t) => t.value === DEFAULT_THEME)
+    expect(selectedTheme).not.toBeUndefined()
+
+    await waitFor(() => {
+      expect(screen.getByText(selectedTheme?.inputDisplay as string)).toBeInTheDocument()
+    })
+  })
+
   it('should update the selected theme and dispatch telemetry on change', async () => {
     const initialTheme = Theme.Dark
     const newTheme = Theme.Light

redisinsight/ui/src/pages/settings/components/theme-settings/ThemeSettings.tsx

@@ -8,21 +8,22 @@ import {
 } from 'uiSrc/slices/user/user-settings'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { THEMES } from 'uiSrc/constants'
+import { DEFAULT_THEME, THEMES } from 'uiSrc/constants'
 
 const ThemeSettings = () => {
   const dispatch = useDispatch()
-  const [selectedTheme, setSelectedTheme] = useState('')
+  const [selectedTheme, setSelectedTheme] = useState<string>(DEFAULT_THEME)
   const options = THEMES
   const themeContext = useContext(ThemeContext)
   const { theme, changeTheme } = themeContext
   const { config } = useSelector(userSettingsSelector)
   const previousThemeRef = useRef<string>(theme)
 
   useEffect(() => {
-    if (config) {
-      setSelectedTheme(config.theme)
-      previousThemeRef.current = config.theme
+    if (config && config.theme) {
+      const configTheme = config.theme
+      setSelectedTheme(configTheme)
+      previousThemeRef.current = configTheme
     }
   }, [config])