diff --git a/lib/ui/src/core/layout.js b/lib/ui/src/core/layout.js index 52b9dd5c701b..ae308c73c0c6 100644 --- a/lib/ui/src/core/layout.js +++ b/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 }; }