fix: persist local feature flag overrides (#17882)

ui/src/mockState.tsx

@@ -25,6 +25,10 @@ export const localState: LocalStorage = {
       theme: 'dark',
     },
   },
+  flags: {
+    original: {},
+    override: {},
+  },
   VERSION: '2.0.0',
   ranges: {
     '0349ecda531ea000': pastFifteenMinTimeRange,

ui/src/normalizers/localStorage/localStorage.ts

@@ -34,11 +34,12 @@ export const normalizeGetLocalStorage = (state: LocalStorage): LocalStorage => {
 }
 
 export const normalizeSetLocalStorage = (state: LocalStorage): LocalStorage => {
-  const {app, ranges, autoRefresh, userSettings} = state
+  const {app, flags, ranges, autoRefresh, userSettings} = state
   return {
     VERSION,
     autoRefresh,
     userSettings,
+    flags,
     app: normalizeApp(app),
     ranges: setLocalStateRanges(ranges),
     resources: normalizeResources(state),

ui/src/shared/utils/featureFlag.ts

@@ -51,10 +51,12 @@ export const set = (flagName: string, value: string | boolean) => {
   store.dispatch(setOverride(flagName, value))
 }
 
-export const toggle = (flagName: string) => {
+export const toggle = (flagName: string): boolean => {
   const flags = getUserFlags()
 
   set(flagName, !flags[flagName])
+
+  return !flags[flagName]
 }
 
 // Expose utility in dev tools console for convenience

ui/src/types/localStorage.ts

@@ -1,11 +1,13 @@
 import {UserSettingsState} from 'src/userSettings/reducers'
 import {AutoRefreshState} from 'src/shared/reducers/autoRefresh'
+import {FlagState} from 'src/shared/reducers/flags'
 import {RangeState} from 'src/dashboards/reducers/ranges'
 import {AppState, ResourceState} from 'src/types'
 
 export interface LocalStorage {
   VERSION: string
   app: AppState['app']
+  flags: FlagState
   ranges: RangeState
   autoRefresh: AutoRefreshState
   userSettings: UserSettingsState