F #3951: Add system schema option (#836)

src/fireedge/src/client/actions/general.js

@@ -1,5 +1,7 @@
+const { Setting: { SCHEMES } } = require('client/constants')
+
 const CHANGE_ZONE = 'CHANGE_ZONE'
-const CHANGE_THEME_TYPE = 'CHANGE_THEME_TYPE'
+const CHANGE_SCHEME = 'CHANGE_SCHEME'
 const CHANGE_LOADING = 'CHANGE_LOADING'
 const TOGGLE_MENU = 'TOGGLE_MENU'
 const FIX_MENU = 'FIX_MENU'
@@ -10,7 +12,7 @@ const REMOVE_SNACKBAR = 'REMOVE_SNACKBAR'
 
 const Actions = {
   CHANGE_ZONE,
-  CHANGE_THEME_TYPE,
+  CHANGE_SCHEME,
   CHANGE_LOADING,
   TOGGLE_MENU,
   FIX_MENU,
@@ -25,13 +27,13 @@ module.exports = {
     type: CHANGE_ZONE,
     payload: { zone }
   }),
-  updateTheme: (dispatch, getState) => {
+  updateScheme: (dispatch, getState) => {
     const current = getState()
     const currentTheme = current.Authenticated?.theme
-    const userTheme = current.Authenticated?.user?.TEMPLATE?.FIREEDGE?.THEME ?? 'dark'
+    const userScheme = current.Authenticated?.user?.TEMPLATE?.FIREEDGE?.SCHEME
 
-    if (['dark', 'light'].includes(userTheme) && currentTheme !== userTheme) {
-      dispatch(({ type: CHANGE_THEME_TYPE, payload: { theme: userTheme } }))
+    if (Object.values(SCHEMES).includes(userScheme) && currentTheme !== userScheme) {
+      dispatch(({ type: CHANGE_SCHEME, payload: { scheme: userScheme } }))
     }
   },
   changeLoading: isLoading => ({

src/fireedge/src/client/components/HOC/Translate.js

@@ -82,7 +82,7 @@ const translate = (str = '', values) => {
     key = context.hash[key]
   }
 
-  if (Array.isArray(values)) {
+  if (key && Array.isArray(values)) {
     key = sprintf(key, ...values)
   }
 

src/fireedge/src/client/constants/index.js

@@ -69,6 +69,7 @@ export const DEBUG_LEVEL = {
 }
 
 export * as T from 'client/constants/translates'
+export * as Setting from 'client/constants/setting'
 export * from 'client/constants/flow'
 export * from 'client/constants/states'
 export * from 'client/constants/provision'

src/fireedge/src/client/constants/setting.js

@@ -0,0 +1,5 @@
+export const SCHEMES = {
+  SYSTEM: 'system',
+  DARK: 'dark',
+  LIGHT: 'light'
+}

src/fireedge/src/client/constants/translates.js

@@ -62,9 +62,10 @@ module.exports = {
   /* sections */
   Dashboard: 'Dashboard',
   Settings: 'Settings',
-  /* sections - settgins */
+  /* sections - settings */
   Dark: 'Dark',
   Light: 'Light',
+  System: 'System',
   /* sections - system */
   User: 'User',
   Users: 'Users',

src/fireedge/src/client/containers/Settings/index.js

@@ -25,7 +25,7 @@ import {
 
 import { useAuth, useGeneral } from 'client/hooks'
 import { Tr, TranslateContext } from 'client/components/HOC'
-import { T } from 'client/constants'
+import { T, Setting } from 'client/constants'
 import SubmitButton from 'client/components/FormControl/SubmitButton'
 
 const useStyles = makeStyles(theme => ({
@@ -56,11 +56,11 @@ const Settings = () => {
   const context = React.useContext(TranslateContext)
   // const langAvailables = Array.isArray(window?.langs) ? window?.langs : []
 
-  const { theme: currentTheme } = useGeneral()
+  const { scheme: currentScheme } = useGeneral()
   const { updateUser } = useAuth()
 
-  const [{ theme, lang }, setSettings] = React.useState({
-    theme: currentTheme,
+  const [settings, setSettings] = React.useState({
+    scheme: currentScheme,
     lang: context.lang
   })
 
@@ -77,8 +77,13 @@ const Settings = () => {
   const handleSubmit = evt => {
     evt.preventDefault()
 
+    const values = Object.entries(settings)
+      .map(([key, value]) => `\n ${String(key).toUpperCase()} = "${value}"`)
+
+    console.log({values})
+
     updateUser({
-      template: `FIREEDGE = [\n THEME = "${theme}",\n LANG = "${lang}" ]\n`
+      template: `FIREEDGE = [\n SCHEME = "${scheme}",\n LANG = "${lang}" ]\n`
     }).then(() => context.changeLang(lang))
   }
 
@@ -97,21 +102,22 @@ const Settings = () => {
           {`${Tr(T.Configuration)} UI`}
         </Typography>
         <TextField
-          id='select-theme-type'
+          id='select-scheme-type'
           select
           fullWidth
-          name='theme'
+          name='scheme'
           color='secondary'
-          label='Theme'
-          value={theme}
+          label='Scheme'
+          value={settings.scheme}
           onChange={handleChange}
           SelectProps={{
             native: true
           }}
           variant='outlined'
         >
-          <option value='light'>{T.Light}</option>
-          <option value='dark'>{T.Dark}</option>
+          <option value={Setting.SCHEMES.LIGHT}>{T.Light}</option>
+          <option value={Setting.SCHEMES.DARK}>{T.Dark}</option>
+          <option value={Setting.SCHEMES.SYSTEM}>{T.System}</option>
         </TextField>
 
         {/* is not operative yet */}

src/fireedge/src/client/hooks/useAuth.js

@@ -15,7 +15,7 @@ import {
   logout as logoutRequest
 } from 'client/actions/user'
 import { setGroups } from 'client/actions/pool'
-import { updateTheme, enqueueError, enqueueSuccess } from 'client/actions/general'
+import { updateScheme, enqueueError, enqueueSuccess } from 'client/actions/general'
 
 const useAuth = () => {
   const {
@@ -80,7 +80,7 @@ const useAuth = () => {
       .then(user => dispatch(successAuth({ user })))
       .then(serviceOne.getGroups)
       .then(groups => dispatch(setGroups(groups)))
-      .then(() => dispatch(updateTheme))
+      .then(() => dispatch(updateScheme))
       .catch(err => dispatch(failureAuth({ error: err })))
   }, [dispatch, JWT_NAME, authUser])
 

src/fireedge/src/client/hooks/useGeneral.js

@@ -9,7 +9,7 @@ export default function useGeneral () {
     isLoading,
     isOpenMenu,
     isFixMenu,
-    theme
+    scheme
   } = useSelector(state => state?.General, shallowEqual)
   const dispatch = useDispatch()
 
@@ -41,7 +41,7 @@ export default function useGeneral () {
   )
 
   return {
-    theme,
+    scheme,
     isFixMenu,
     isLoading,
     isOpenMenu,

src/fireedge/src/client/icons/logo.js

@@ -12,7 +12,7 @@ const Logo = memo(({ width, height, spinner, withText, viewBox, ...props }) => {
     child5: { from: '#bfe6f2', to: '#ffffff' }
   }
   const textColor = {
-    top: theme.palette.primary.contrastText,
+    top: theme.palette.text.primary,
     bottom: '#0098c3'
   }
   return (

src/fireedge/src/client/providers/muiProvider.js

@@ -1,14 +1,23 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 
-import { CssBaseline, ThemeProvider, StylesProvider } from '@material-ui/core'
+import { CssBaseline, ThemeProvider, StylesProvider, useMediaQuery } from '@material-ui/core'
 import { createTheme, generateClassName } from 'client/theme'
 import { useGeneral } from 'client/hooks'
+import { Setting } from 'client/constants'
+
+const { SCHEMES: { DARK, LIGHT, SYSTEM } } = Setting
 
 const MuiProvider = ({ theme: appTheme, children }) => {
-  const { theme } = useGeneral()
+  const { scheme } = useGeneral()
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
 
-  const changeThemeType = () => createTheme(appTheme(theme))
+  const changeThemeType = () => {
+    const prefersScheme = prefersDarkMode ? DARK : LIGHT
+    const userScheme = scheme === SYSTEM ? prefersScheme : scheme
+
+    return createTheme(appTheme(userScheme))
+  }
 
   const [muitheme, setTheme] = React.useState(changeThemeType)
 
@@ -19,7 +28,7 @@ const MuiProvider = ({ theme: appTheme, children }) => {
     }
   }, [])
 
-  React.useEffect(() => { setTheme(changeThemeType) }, [theme])
+  React.useEffect(() => setTheme(changeThemeType), [scheme, prefersDarkMode])
 
   return (
     <ThemeProvider theme={muitheme}>

src/fireedge/src/client/reducers/general.js

@@ -16,6 +16,7 @@
 const { Actions: PoolActions } = require('../actions/pool')
 const { Actions: UserActions } = require('../actions/user')
 const { Actions: GeneralActions } = require('../actions/general')
+const { Setting: { SCHEMES } } = require('client/constants')
 
 const initial = {
   zone: 0,
@@ -23,7 +24,7 @@ const initial = {
   isLoading: false,
   isOpenMenu: false,
   isFixMenu: false,
-  theme: 'dark'
+  scheme: SCHEMES.DARK
 }
 
 const General = (state = initial, action) => {
@@ -58,7 +59,7 @@ const General = (state = initial, action) => {
           notification => notification.key !== action.key
         )
       }
-    case GeneralActions.CHANGE_THEME_TYPE:
+    case GeneralActions.CHANGE_SCHEME:
       return { ...state, ...action.payload }
     case GeneralActions.CHANGE_LOADING:
       return { ...state, ...action.payload }