fix(ui): save theme config values immediately

ui/src/App.test.tsx

@@ -19,6 +19,7 @@ const uiDefaults: UIDefaults = {
   AlertsPerGroup: 5,
   CollapseGroups: "collapsedOnMobile",
   Theme: "auto",
+  Animations: true,
   MultiGridLabel: "cluster",
   MultiGridSortReverse: false,
 };
@@ -40,6 +41,7 @@ beforeEach(() => {
 
 afterEach(() => {
   localStorage.setItem("savedFilters", "");
+  localStorage.setItem("themeConfig", "");
   jest.restoreAllMocks();
   window.history.pushState({}, "App", "/");
   global.window.location = {

ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.tsx

@@ -71,7 +71,6 @@ const AlertGroupSortConfiguration: FC<{
                 id="configuration-sort-reverse"
                 className="custom-control-input"
                 type="checkbox"
-                value=""
                 checked={settingsStore.gridConfig.config.reverseSort || false}
                 onChange={(event) => onSortReverseChange(event.target.checked)}
               />

ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.tsx

@@ -19,7 +19,6 @@ const AlertGroupTitleBarColor: FC<{
             id="configuration-colortitlebar"
             className="custom-control-input"
             type="checkbox"
-            value=""
             checked={
               settingsStore.alertGroupConfig.config.colorTitleBar || false
             }

ui/src/Components/MainModal/Configuration/AnimationsConfiguration.tsx

@@ -19,7 +19,6 @@ const AnimationsConfiguration: FC<{
             id="configuration-animations"
             className="custom-control-input"
             type="checkbox"
-            value=""
             checked={settingsStore.themeConfig.config.animations || false}
             onChange={(event) => onChange(event.target.checked)}
           />

ui/src/Components/MainModal/Configuration/FilterBarConfiguration.tsx

@@ -18,7 +18,6 @@ const FilterBarConfiguration: FC<{
             id="configuration-autohide"
             className="custom-control-input"
             type="checkbox"
-            value=""
             checked={settingsStore.filterBarConfig.config.autohide || false}
             onChange={(event) => onAutohideChange(event.target.checked)}
           />

ui/src/Components/MainModal/Configuration/MultiGridConfiguration.tsx

@@ -24,7 +24,6 @@ const MultiGridConfiguration: FC<{
               id="configuration-multigrid-sort-reverse"
               className="custom-control-input"
               type="checkbox"
-              value=""
               checked={
                 settingsStore.multiGridConfig.config.gridSortReverse || false
               }

ui/src/Components/MainModal/Configuration/ThemeConfiguration.test.tsx

@@ -5,7 +5,7 @@ import { mount } from "enzyme";
 import toDiffableHtml from "diffable-html";
 
 import { MockThemeContext } from "__mocks__/Theme";
-import { Settings } from "Stores/Settings";
+import { Settings, ThemeT } from "Stores/Settings";
 import { ThemeConfiguration } from "./ThemeConfiguration";
 
 let settingsStore: Settings;
@@ -29,7 +29,7 @@ describe("<ThemeConfiguration />", () => {
   });
 
   it("resets stored config to defaults if it is invalid", (done) => {
-    (settingsStore.themeConfig.config.theme as string) = "foo";
+    settingsStore.themeConfig.setTheme("foo" as ThemeT);
     const tree = FakeConfiguration();
     const select = tree.find("div.react-select__value-container");
     expect(select.text()).toBe(settingsStore.themeConfig.options.auto.label);

ui/src/Components/MainModal/Configuration/ThemeConfiguration.tsx

@@ -26,7 +26,7 @@ const ThemeConfiguration: FC<{
     };
   };
 
-  const onCollapseChange = (newValue: ThemeT) => {
+  const onChange = (newValue: ThemeT) => {
     settingsStore.themeConfig.setTheme(newValue);
   };
 
@@ -40,9 +40,7 @@ const ThemeConfiguration: FC<{
         instanceId="configuration-theme"
         defaultValue={valueToOption(settingsStore.themeConfig.config.theme)}
         options={Object.values(settingsStore.themeConfig.options)}
-        onChange={(option) =>
-          onCollapseChange((option as OptionT).value as ThemeT)
-        }
+        onChange={(option) => onChange((option as OptionT).value as ThemeT)}
         hideSelectedOptions
       />
     </div>

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`<AlertGroupTitleBarColor /> matches snapshot with default values 1`] =
       <input id=\\"configuration-colortitlebar\\"
              class=\\"custom-control-input\\"
              type=\\"checkbox\\"
-             value
       >
       <label class=\\"custom-control-label cursor-pointer mr-3\\"
              for=\\"configuration-colortitlebar\\"

ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`<AnimationsConfiguration /> matches snapshot with default values 1`] =
       <input id=\\"configuration-animations\\"
              class=\\"custom-control-input\\"
              type=\\"checkbox\\"
-             value
              checked
       >
       <label class=\\"custom-control-label cursor-pointer mr-3\\"

ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`<FilterBarConfiguration /> matches snapshot with default values 1`] = `
       <input id=\\"configuration-autohide\\"
              class=\\"custom-control-input\\"
              type=\\"checkbox\\"
-             value
              checked
       >
       <label class=\\"custom-control-label cursor-pointer mr-3\\"

ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap

@@ -57,7 +57,6 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
         <input id=\\"configuration-multigrid-sort-reverse\\"
                class=\\"custom-control-input\\"
                type=\\"checkbox\\"
-               value
         >
         <label class=\\"custom-control-label cursor-pointer mr-3\\"
                for=\\"configuration-multigrid-sort-reverse\\"

ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap

@@ -103,7 +103,6 @@ exports[`<Configuration /> matches snapshot 1`] = `
             <input id=\\"configuration-autohide\\"
                    class=\\"custom-control-input\\"
                    type=\\"checkbox\\"
-                   value
                    checked
             >
             <label class=\\"custom-control-label cursor-pointer mr-3\\"
@@ -196,7 +195,6 @@ exports[`<Configuration /> matches snapshot 1`] = `
             <input id=\\"configuration-colortitlebar\\"
                    class=\\"custom-control-input\\"
                    type=\\"checkbox\\"
-                   value
             >
             <label class=\\"custom-control-label cursor-pointer mr-3\\"
                    for=\\"configuration-colortitlebar\\"
@@ -212,7 +210,6 @@ exports[`<Configuration /> matches snapshot 1`] = `
             <input id=\\"configuration-animations\\"
                    class=\\"custom-control-input\\"
                    type=\\"checkbox\\"
-                   value
                    checked
             >
             <label class=\\"custom-control-label cursor-pointer mr-3\\"
@@ -598,7 +595,6 @@ exports[`<Configuration /> matches snapshot 1`] = `
               <input id=\\"configuration-multigrid-sort-reverse\\"
                      class=\\"custom-control-input\\"
                      type=\\"checkbox\\"
-                     value
               >
               <label class=\\"custom-control-label cursor-pointer mr-3\\"
                      for=\\"configuration-multigrid-sort-reverse\\"

ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap

@@ -122,7 +122,6 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                 <input id=\\"configuration-autohide\\"
                        class=\\"custom-control-input\\"
                        type=\\"checkbox\\"
-                       value
                        checked
                 >
                 <label class=\\"custom-control-label cursor-pointer mr-3\\"
@@ -215,7 +214,6 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                 <input id=\\"configuration-colortitlebar\\"
                        class=\\"custom-control-input\\"
                        type=\\"checkbox\\"
-                       value
                 >
                 <label class=\\"custom-control-label cursor-pointer mr-3\\"
                        for=\\"configuration-colortitlebar\\"
@@ -231,7 +229,6 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                 <input id=\\"configuration-animations\\"
                        class=\\"custom-control-input\\"
                        type=\\"checkbox\\"
-                       value
                        checked
                 >
                 <label class=\\"custom-control-label cursor-pointer mr-3\\"
@@ -617,7 +614,6 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   <input id=\\"configuration-multigrid-sort-reverse\\"
                          class=\\"custom-control-input\\"
                          type=\\"checkbox\\"
-                         value
                   >
                   <label class=\\"custom-control-label cursor-pointer mr-3\\"
                          for=\\"configuration-multigrid-sort-reverse\\"

ui/src/Stores/Settings.ts

@@ -2,6 +2,7 @@ import { action } from "mobx";
 import { localStored } from "mobx-stored";
 
 import { UIDefaults } from "Models/UI";
+import { OptionT } from "Common/Select";
 
 interface SavedFiltersStorage {
   filters: string[];
@@ -191,20 +192,21 @@ interface ThemeConfigStorage {
   animations: boolean;
 }
 class ThemeConfig {
-  options = Object.freeze({
-    auto: {
-      label: "Automatic theme, follow browser preference",
-      value: "auto",
-    },
-    light: { label: "Light theme", value: "light" },
-    dark: { label: "Dark theme", value: "dark" },
-  });
-
+  options: { [key: string]: OptionT };
   config: ThemeConfigStorage;
   setTheme: (v: ThemeT) => void;
   setAnimations: (v: boolean) => void;
 
   constructor(defaultTheme: ThemeT, animations: boolean) {
+    this.options = Object.freeze({
+      auto: {
+        label: "Automatic theme, follow browser preference",
+        value: "auto",
+      },
+      light: { label: "Light theme", value: "light" },
+      dark: { label: "Dark theme", value: "dark" },
+    });
+
     this.config = localStored(
       "themeConfig",
       {
@@ -212,7 +214,7 @@ class ThemeConfig {
         animations: animations,
       },
       {
-        delay: 100,
+        delay: 0,
       }
     );
     this.setTheme = action((v: ThemeT) => {