Merge pull request #5858 from storybooks/tech/workaround-persisted-op…

…tions-with-defaults

Tech/workaround persisted options with defaults

lib/ui/src/core/layout.js

@@ -59,6 +59,23 @@ const checkDeprecatedLayoutOptions = options => {
   return {};
 };
 
+const initial = {
+  ui: {
+    enableShortcuts: true,
+    sortStoriesByKind: false,
+    sidebarAnimations: true,
+  },
+  layout: {
+    isToolshown: true,
+    isFullscreen: false,
+    showPanel: true,
+    showNav: true,
+    panelPosition: 'bottom',
+  },
+  theme: themes.light,
+};
+
+let hasSetOptions = false;
 export default function({ store }) {
   const api = {
     toggleFullscreen(toggled) {
@@ -132,7 +149,13 @@ export default function({ store }) {
     },
 
     setOptions: options => {
-      const { layout, ui, selectedPanel, theme } = store.getState();
+      // The very first time the user sets their options, we don't consider what is in the store.
+      // At this point in time, what is in the store is what we *persisted*. We did that in order
+      // to avoid a FOUC (e.g. initial rendering the wrong theme while we waited for the stories to load)
+      // However, we don't want to have a memory about these things, otherwise we see bugs like the
+      // user setting a name for their storybook, persisting it, then never being able to unset it
+      // without clearing localstorage. See https://github.com/storybooks/storybook/issues/5857
+      const { layout, ui, selectedPanel, theme } = hasSetOptions ? store.getState() : initial;
 
       if (options) {
         const updatedLayout = {
@@ -170,29 +193,14 @@ export default function({ store }) {
         if (Object.keys(modification).length) {
           store.setState(modification, { persistence: 'permanent' });
         }
-      }
-    },
-  };
-
-  const fromState = pick(store.getState(), 'layout', 'ui', 'selectedPanel', 'theme');
 
-  const initial = {
-    ui: {
-      enableShortcuts: true,
-      sortStoriesByKind: false,
-      sidebarAnimations: true,
-    },
-    layout: {
-      isToolshown: true,
-      isFullscreen: false,
-      showPanel: true,
-      showNav: true,
-      panelPosition: 'bottom',
+        hasSetOptions = true;
+      }
     },
-    theme: themes.light,
   };
 
-  const state = merge(initial, fromState);
+  const persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel', 'theme');
+  const state = merge(initial, persisted);
 
   return { api, state };
 }