feat: Add ability to set default theme for UI

flipt-io · Aug 30, 2023 · 58413b7 · 58413b7
1 parent a8ffa95
commit 58413b7
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 9 deletions.
diff --git a/config/default.yml b/config/default.yml
@@ -9,6 +9,7 @@
 
 # ui:
 # enabled: true
+# default_theme: system
 
 # cors:
 # enabled: false

diff --git a/go.work.sum b/go.work.sum
@@ -1115,6 +1115,7 @@ github.com/prometheus/procfs v0.8.0/go.mod h1:z7EfXMXOkbkqb9IINtpCn86r/to3BnA0ua
 github.com/prometheus/tsdb v0.7.1/go.mod h1:qhTCs0VvXwvX/y3TZrWD7rabWM+ijKTux40TwIPHuXU=
 github.com/rogpeppe/fastuuid v0.0.0-20150106093220-6724a57986af/go.mod h1:XWv6SoW27p1b0cqNHllgS5HIMJraePCO15w5zCzIWYg=
 github.com/rogpeppe/go-charset v0.0.0-20180617210344-2471d30d28b4/go.mod h1:qgYeAmZ5ZIpBWTGllZSQnw97Dj+woV0toclVaRGI8pc=
+github.com/russross/blackfriday v1.6.0 h1:KqfZb0pUVN2lYqZUYRddxF4OR8ZMURnJIG5Y3VRLtww=
 github.com/russross/blackfriday v1.6.0/go.mod h1:ti0ldHuxg49ri4ksnFxlkCfN+hvslNlmVHqNRXXJNAY=
 github.com/ryanuber/columnize v0.0.0-20160712163229-9b3edd62028f/go.mod h1:sm1tb6uqfes/u+d4ooFouqFdy9/2g9QGwK3SQygK0Ts=
 github.com/safchain/ethtool v0.0.0-20190326074333-42ed695e3de8/go.mod h1:Z0q5wiBQGYcxhMZ6gUqHn6pYNLypFAvaL3UvgZLR0U4=

diff --git a/internal/config/config.go b/internal/config/config.go
@@ -434,7 +434,8 @@ func DefaultConfig() *Config {
  },
 
  UI: UIConfig{
- Enabled: true,
+ Enabled: true,
+ DefaultTheme: SystemUITheme,
  },
 
  Cors: CorsConfig{

diff --git a/internal/config/ui.go b/internal/config/ui.go
@@ -2,18 +2,28 @@ package config
 
 import "github.com/spf13/viper"
 
+type UITheme string
+
+const (
+ SystemUITheme = UITheme("system")
+ DarkUITheme = UITheme("dark")
+ LightUITheme = UITheme("light")
+)
+
 // cheers up the unparam linter
 var _ defaulter = (*UIConfig)(nil)
 
 // UIConfig contains fields, which control the behaviour
 // of Flipt's user interface.
 type UIConfig struct {
- Enabled bool `json:"enabled" mapstructure:"enabled"`
+ Enabled bool `json:"enabled" mapstructure:"enabled"`
+ DefaultTheme UITheme `json:"defaultTheme" mapstructure:"default_theme"`
 }
 
 func (c *UIConfig) setDefaults(v *viper.Viper) error {
  v.SetDefault("ui", map[string]any{
- "enabled": true,
+ "enabled": true,
+ "default_theme": SystemUITheme,
  })
 
  return nil

diff --git a/ui/src/app/meta/metaSlice.ts b/ui/src/app/meta/metaSlice.ts
@@ -2,6 +2,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { getConfig, getInfo } from '~/data/api';
 import { IConfig, IInfo, StorageType } from '~/types/Meta';
+import { Theme } from '~/types/Preferences';
 
 interface IMetaSlice {
  info: IInfo;
@@ -23,6 +24,9 @@ const initialState: IMetaSlice = {
  storage: {
  type: StorageType.DATABASE,
  readOnly: false
+ },
+ ui: {
+ defaultTheme: Theme.SYSTEM
  }
  }
 };

diff --git a/ui/src/app/preferences/Preferences.tsx b/ui/src/app/preferences/Preferences.tsx
@@ -1,6 +1,5 @@
 import { Switch } from '@headlessui/react';
 import { Formik } from 'formik';
-import nightwind from 'nightwind/helper';
 import { useDispatch, useSelector } from 'react-redux';
 import Select from '~/components/forms/Select';
 import { Theme, Timezone } from '~/types/Preferences';
@@ -45,15 +44,14 @@ export default function Preferences() {
  <Select
  id="location"
  name="location"
- value={theme || Theme.LIGHT}
+ value={theme || Theme.SYSTEM}
  options={[
  { value: Theme.LIGHT, label: 'Light' },
  { value: Theme.DARK, label: 'Dark' },
  { value: Theme.SYSTEM, label: 'System' }
  ]}
  onChange={(e) => {
  dispatch(themeChanged(e.target.value as Theme));
- nightwind.enable(Theme.DARK === (e.target.value as Theme));
  }}
  />
  </div>

diff --git a/ui/src/app/preferences/preferencesSlice.ts b/ui/src/app/preferences/preferencesSlice.ts
@@ -2,14 +2,17 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { RootState } from '~/store';
 import { Theme, Timezone } from '~/types/Preferences';
+import { fetchConfigAsync } from '~/app/meta/metaSlice';
+
+export const preferencesKey = 'preferences';
 
 interface IPreferencesState {
  theme: Theme;
  timezone: Timezone;
 }
 
 const initialState: IPreferencesState = {
- theme: Theme.LIGHT,
+ theme: Theme.SYSTEM,
  timezone: Timezone.LOCAL
 };
 
@@ -23,6 +26,18 @@ export const preferencesSlice = createSlice({
  timezoneChanged: (state, action) => {
  state.timezone = action.payload;
  }
+ },
+ extraReducers(builder) {
+ builder.addCase(fetchConfigAsync.fulfilled, (state, action) => {
+ const currentPreference = JSON.parse(
+ localStorage.getItem(preferencesKey) || '{}'
+ ) as IPreferencesState;
+
+ // If there isn't currently a set theme, set to the default theme
+ if (!currentPreference.theme) {
+ state.theme = action.payload.ui.defaultTheme;
+ }
+ });
  }
 });
 

diff --git a/ui/src/store.ts b/ui/src/store.ts
@@ -6,12 +6,14 @@ import {
 
 import { metaSlice } from './app/meta/metaSlice';
 import { namespacesSlice } from './app/namespaces/namespacesSlice';
-import { preferencesSlice } from './app/preferences/preferencesSlice';
+import {
+ preferencesKey,
+ preferencesSlice
+} from './app/preferences/preferencesSlice';
 import { LoadingStatus } from './types/Meta';
 
 const listenerMiddleware = createListenerMiddleware();
 
-const preferencesKey = 'preferences';
 const namespaceKey = 'namespace';
 
 listenerMiddleware.startListening({

diff --git a/ui/src/types/Meta.ts b/ui/src/types/Meta.ts
@@ -1,3 +1,5 @@
+import { Theme } from './Preferences';
+
 export interface IInfo {
  version: string;
  latestVersion?: string;
@@ -14,8 +16,13 @@ export interface IStorage {
  readOnly?: boolean;
 }
 
+export interface IUI {
+ defaultTheme: Theme;
+}
+
 export interface IConfig {
  storage: IStorage;
+ ui: IUI;
 }
 
 export enum StorageType {