feat: Add ability to set default theme for UI (#2062)

* feat: Add ability to set default theme for UI * fix(schema): Added new configuration value to schema config * Update config/flipt.schema.cue Co-authored-by: George <[email protected]> * Update config/flipt.schema.json Co-authored-by: George <[email protected]> --------- Co-authored-by: George <[email protected]>
flipt-io · Aug 31, 2023 · c082585 · c082585
1 parent 402a8a0
commit c082585
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 16 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/config/flipt.schema.cue b/config/flipt.schema.cue
@@ -216,7 +216,10 @@ import "strings"
 		}
 	}
 
-	#ui: enabled?: bool | *true
+	#ui: {
+		enabled?: 		bool | *true
+		default_theme?: "light" | "dark" | *"system"
+	}
 
 	#audit: {
 		sinks?: {

diff --git a/config/flipt.schema.json b/config/flipt.schema.json
@@ -66,8 +66,8 @@
           "properties": {
             "domain": { "type": "string" },
             "secure": { "type": "boolean" },
-            "token_lifetime": {"type": "string"},
-            "state_lifetime": {"type": "string"},
+            "token_lifetime": { "type": "string" },
+            "state_lifetime": { "type": "string" },
             "csrf": {
               "type": "object",
               "properties": {
@@ -436,10 +436,7 @@
           "type": "integer"
         },
         "conn_max_lifetime": {
-          "oneOf": [
-            {"type": "integer"},
-            {"type": "string"}
-          ]
+          "oneOf": [{ "type": "integer" }, { "type": "string" }]
         },
         "prepared_statements_enabled": {
           "type": "boolean"
@@ -637,6 +634,12 @@
           "type": "boolean",
           "default": true,
           "deprecated": true
+        },
+        "default_theme": {
+          "type": "string",
+          "enum": ["light", "dark", "system"],
+          "default": "system",
+          "deprecated": false
         }
       },
       "title": "UI"

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 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ @@
     # ui:
     #   enabled: true
+    #   default_theme: system
     # cors:
     #   enabled: false
@@ Expand Down @@