Merge pull request #25792 from storybookjs/jeppe/25322-bug-main-secti…

…on-disappears-when-navigating-to-addon-tab

UI: Fix custom tabs not showing in the manager

.circleci/config.yml

@@ -43,7 +43,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.36.0-focal
+      - image: mcr.microsoft.com/playwright:v1.41.1-jammy
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -359,6 +359,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running Test Runner
           command: yarn task --task test-runner --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) --no-link --start-from=never --junit
@@ -379,6 +392,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running Test Runner in Dev mode
           command: yarn task --task test-runner-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) --no-link --start-from=never --junit
@@ -418,6 +444,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running E2E Tests
           command: yarn task --task e2e-tests --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) --no-link --start-from=never --junit
@@ -441,6 +480,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running E2E Tests
           command: yarn task --task e2e-tests-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) --no-link --start-from=never --junit
@@ -464,6 +516,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running Bench
           command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit

MIGRATION.md

@@ -70,6 +70,7 @@
     - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket)
     - [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
   - [Addon author changes](#addon-author-changes)
+    - [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
@@ -1050,6 +1051,48 @@ Note that both these methods require initialization, so you should await `previe
 
 ### Addon author changes
 
+#### Tab addons are now routed to a query parameter
+
+The TAB type addons now should no longer specify the `match` or `route` property.
+
+Instead storybook will automatically show the addon's rendered content when the query parameter `tab` is set to the addon's ID.
+
+Example:
+
+```tsx
+import { addons, types } from "@storybook/manager-api";
+
+addons.register("my-addon", () => {
+  addons.add("my-addon/panel", {
+    type: types.TAB,
+    title: "My Addon",
+    render: () => <div>Hello World</div>,
+  });
+});
+```
+
+Tool type addon will now receive the `tabId` property passed to their `match` function.
+That way they can chose to show/hide their content based on the current tab.
+
+When the canvas is shown, the `tabId` will be set to `undefined`.
+
+Example:
+
+```tsx
+import { addons, types } from "@storybook/manager-api";
+
+addons.register("my-addon", () => {
+  addons.add("my-addon/tool", {
+    type: types.TOOL,
+    title: "My Addon",
+    match: ({ tabId }) => tabId === "my-addon/panel",
+    render: () => <div>👀</div>,
+  });
+});
+```
+
+The URL the tab gets rendered on will be `http://localhost:6006/?path=/story/my-story&tab=my-addon/tab`.
+
 #### Removed `config` preset
 
 In Storybook 7.0 we have deprecated the preset field `config` and it has been replaced with `previewAnnotations`. The `config` preset is now completely removed in Storybook 8.0.

code/addons/a11y/src/manager.tsx

@@ -29,7 +29,7 @@ addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: '',
     type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
     render: () => <VisionSimulator />,
   });
 

code/addons/backgrounds/src/manager.tsx

@@ -9,7 +9,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: () => (
       <Fragment>
         <BackgroundSelector />

code/addons/measure/src/manager.tsx

@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(TOOL_ID, {
     type: types.TOOL,
     title: 'Measure',
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
     render: () => <Tool />,
   });
 });

code/addons/outline/src/manager.tsx

@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'Outline',
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: () => <OutlineSelector />,
   });
 });

code/addons/themes/docs/getting-started/postcss.md

@@ -64,7 +64,7 @@ Use `prefers-color-scheme` media in your CSS:
 }
 @media (prefers-color-scheme: dark) {
   html {
-    --text-color: white
+    --text-color: white;
   }
 }
 ```

code/addons/themes/src/manager.tsx

@@ -7,7 +7,7 @@ addons.register(ADDON_ID, () => {
   addons.add(THEME_SWITCHER_ID, {
     title: 'Themes',
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: ThemeSwitcher,
     paramKey: PARAM_KEY,
   });

code/addons/toolbars/src/manager.tsx

@@ -7,7 +7,7 @@ addons.register(ADDON_ID, () =>
   addons.add(ADDON_ID, {
     title: ADDON_ID,
     type: types.TOOL,
-    match: () => true,
+    match: ({ tabId }) => !tabId,
     render: () => <ToolbarManager />,
   })
 );

code/addons/viewport/src/manager.tsx

@@ -9,7 +9,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'viewport / media-queries',
     type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
     render: () => <ViewportTool />,
   });
 });

code/lib/manager-api/src/modules/url.ts

@@ -144,6 +144,12 @@ export interface SubAPI {
    * @returns {void}
    */
   setQueryParams: (input: QueryParams) => void;
+  /**
+   * Set the query parameters for the current URL & navigates.
+   * @param {QueryParams} input - An object containing the query parameters to set.
+   * @returns {void}
+   */
+  applyQueryParams: (input: QueryParams) => void;
 }
 
 export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
@@ -188,6 +194,12 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
         provider.channel?.emit(UPDATE_QUERY_PARAMS, update);
       }
     },
+    applyQueryParams(input) {
+      const { path, queryParams } = api.getUrlState();
+
+      navigateTo(path, { ...queryParams, ...input } as any);
+      api.setQueryParams(input);
+    },
     navigateUrl(url, options) {
       navigate(url, { plain: true, ...options });
     },

code/lib/types/src/modules/addons.ts

@@ -351,7 +351,7 @@ export interface Addon_BaseType {
   /**
    * This will determine the value of `active` prop of your render function.
    */
-  match?: (matchOptions: RouterData) => boolean;
+  match?: (matchOptions: RouterData & { tabId?: string }) => boolean;
   /**
    * The actual contents of your addon.
    *
@@ -423,7 +423,6 @@ export interface Addon_WrapperType {
       children: ReactNode;
       id: string;
       storyId: StoryId;
-      active: boolean;
     }>
   >;
 }

code/package.json

@@ -76,18 +76,18 @@
     "defaults"
   ],
   "resolutions": {
-    "@playwright/test": "1.36.0",
+    "@playwright/test": "1.41.1",
     "@storybook/theming": "workspace:*",
     "@vitest/[email protected]": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch",
     "esbuild": "^0.18.0",
-    "playwright": "1.36.0",
-    "playwright-core": "1.36.0",
+    "playwright": "1.41.1",
+    "playwright-core": "1.41.1",
     "serialize-javascript": "^3.1.0",
     "type-fest": "~2.19"
   },
   "dependencies": {
     "@nx/workspace": "17.0.2",
-    "@playwright/test": "1.36.0",
+    "@playwright/test": "1.41.1",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",

code/ui/manager/src/App.tsx

@@ -13,15 +13,17 @@ type Props = {
   managerLayoutState: ComponentProps<typeof Layout>['managerLayoutState'];
   setManagerLayoutState: ComponentProps<typeof Layout>['setManagerLayoutState'];
   pages: Addon_PageType[];
+  hasTab: boolean;
 };
 
-export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => {
+export const App = ({ managerLayoutState, setManagerLayoutState, pages, hasTab }: Props) => {
   const { setMobileAboutOpen } = useLayout();
 
   return (
     <>
       <Global styles={createGlobal} />
       <Layout
+        hasTab={hasTab}
         managerLayoutState={managerLayoutState}
         setManagerLayoutState={setManagerLayoutState}
         slotMain={<Preview id="main" withLoader />}

code/ui/manager/src/components/layout/Layout.stories.tsx

@@ -61,6 +61,7 @@ const meta = {
     slotPanel: <MockPanel />,
     slotPages: <MockPage />,
     setManagerLayoutState: fn(),
+    hasTab: false,
   },
   parameters: {
     theme: 'light',