UI: Make TagsFilter state persistent

code/.storybook/preview.tsx

@@ -34,6 +34,8 @@ import * as templatePreview from '../core/template/stories/preview';
 import '../renderers/react/template/components/index';
 import { isChromatic } from './isChromatic';
 
+sb.mock(import('@storybook/global'), { spy: true });
+
 sb.mock('../core/template/stories/test/ModuleMocking.utils.ts');
 sb.mock('../core/template/stories/test/ModuleSpyMocking.utils.ts', { spy: true });
 sb.mock('../core/template/stories/test/ModuleAutoMocking.utils.ts');

code/core/src/core-server/presets/common-manager.ts

@@ -1,7 +1,4 @@
 /* these imports are in the exact order in which the panels need to be registered */
-import { global } from '@storybook/global';
-
-import { addons, Tag } from 'storybook/manager-api';
 
 // THE ORDER OF THESE IMPORTS MATTERS! IT DEFINES THE ORDER OF PANELS AND TOOLS!
 import controlsManager from '../../controls/manager';
@@ -12,36 +9,8 @@ import measureManager from '../../measure/manager';
 import outlineManager from '../../outline/manager';
 import viewportManager from '../../viewport/manager';
 
-const TAG_FILTERS = 'tag-filters';
-const STATIC_FILTER = 'static-filter';
-
-const tagFiltersManager = addons.register(TAG_FILTERS, (api) => {
-  // FIXME: this ensures the filter is applied after the first render
-  //        to avoid a strange race condition in Webkit only.
-  const staticExcludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
-    (acc, entry) => {
-      const [tag, option] = entry;
-      if ((option as any).excludeFromSidebar) {
-        acc[tag] = true;
-      }
-      return acc;
-    },
-    {} as Record<string, boolean>
-  );
-
-  api.experimental_setFilter(STATIC_FILTER, (item) => {
-    const tags = item.tags ?? [];
-    return (
-      // we can filter out the primary story, but we still want to show autodocs
-      (tags.includes(Tag.DEV) || item.type === 'docs') &&
-      tags.filter((tag) => staticExcludeTags[tag]).length === 0
-    );
-  });
-});
-
 export default [
   measureManager,
-  tagFiltersManager,
   actionsManager,
   backgroundsManager,
   componentTestingManager,

code/core/src/manager-api/modules/layout.ts

@@ -121,30 +121,36 @@ export interface SubAPI {
 
 type PartialSubState = Partial<SubState>;
 
-export const defaultLayoutState: SubState = {
-  ui: {
-    enableShortcuts: true,
-  },
-  layout: {
-    initialActive: ActiveTabs.CANVAS,
-    showToolbar: true,
-    navSize: 300,
-    bottomPanelHeight: 300,
-    rightPanelWidth: 400,
-    recentVisibleSizes: {
-      navSize: 300,
-      bottomPanelHeight: 300,
-      rightPanelWidth: 400,
+export const DEFAULT_NAV_SIZE = 300;
+export const DEFAULT_BOTTOM_PANEL_HEIGHT = 300;
+export const DEFAULT_RIGHT_PANEL_WIDTH = 400;
+
+export const getDefaultLayoutState: () => SubState = () => {
+  return {
+    ui: {
+      enableShortcuts: true,
+    },
+    layout: {
+      initialActive: ActiveTabs.CANVAS,
+      showToolbar: true,
+      navSize: DEFAULT_NAV_SIZE,
+      bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
+      rightPanelWidth: DEFAULT_RIGHT_PANEL_WIDTH,
+      recentVisibleSizes: {
+        navSize: DEFAULT_NAV_SIZE,
+        bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
+        rightPanelWidth: DEFAULT_RIGHT_PANEL_WIDTH,
+      },
+      panelPosition: 'bottom',
+      showTabs: true,
     },
-    panelPosition: 'bottom',
-    showTabs: true,
-  },
-  layoutCustomisations: {
-    showSidebar: undefined,
-    showToolbar: undefined,
-  },
-  selectedPanel: undefined,
-  theme: create(),
+    layoutCustomisations: {
+      showSidebar: undefined,
+      showToolbar: undefined,
+    },
+    selectedPanel: undefined,
+    theme: create(),
+  };
 };
 
 export const focusableUIElements = {
@@ -434,6 +440,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
 
     getInitialOptions() {
       const { theme, selectedPanel, layoutCustomisations, ...options } = provider.getConfig();
+      const defaultLayoutState = getDefaultLayoutState();
 
       return {
         ...defaultLayoutState,