UI: Fix custom tabs not showing in the manager

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/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/ui/manager/src/App.tsx

@@ -16,15 +16,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={

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

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

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

@@ -25,6 +25,7 @@ interface Props {
   slotSidebar?: React.ReactNode;
   slotPanel?: React.ReactNode;
   slotPages?: React.ReactNode;
+  hasTab: boolean;
 }
 const MINIMUM_CONTENT_WIDTH_PX = 100;
 
@@ -44,10 +45,12 @@ const useLayoutSyncingState = ({
   managerLayoutState,
   setManagerLayoutState,
   isDesktop,
+  hasTab,
 }: {
   managerLayoutState: Props['managerLayoutState'];
   setManagerLayoutState: Props['setManagerLayoutState'];
   isDesktop: boolean;
+  hasTab: boolean;
 }) => {
   // ref to keep track of previous managerLayoutState, to check if the props change
   const prevManagerLayoutStateRef = React.useRef<ManagerLayoutState>(managerLayoutState);
@@ -95,7 +98,7 @@ const useLayoutSyncingState = ({
 
   const isPagesShown =
     managerLayoutState.viewMode !== 'story' && managerLayoutState.viewMode !== 'docs';
-  const isPanelShown = managerLayoutState.viewMode === 'story';
+  const isPanelShown = managerLayoutState.viewMode === 'story' && !hasTab;
 
   const { panelResizerRef, sidebarResizerRef } = useDragging({
     setState: setInternalDraggingSizeState,
@@ -119,7 +122,7 @@ const useLayoutSyncingState = ({
   };
 };
 
-export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: Props) => {
+export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...slots }: Props) => {
   const { isDesktop, isMobile } = useLayout();
 
   const {
@@ -132,7 +135,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
     showPages,
     showPanel,
     isDragging,
-  } = useLayoutSyncingState({ managerLayoutState, setManagerLayoutState, isDesktop });
+  } = useLayoutSyncingState({ managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
 
   return (
     <LayoutContainer
@@ -142,6 +145,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
       panelPosition={managerLayoutState.panelPosition}
       isDragging={isDragging}
       viewMode={managerLayoutState.viewMode}
+      showPanel={showPanel}
     >
       <Notifications />
       {showPages && <PagesContainer>{slots.slotPages}</PagesContainer>}
@@ -171,8 +175,8 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
   );
 };
 
-const LayoutContainer = styled.div<LayoutState>(
-  ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition }) => {
+const LayoutContainer = styled.div<LayoutState & { showPanel: boolean }>(
+  ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition, showPanel }) => {
     return {
       width: '100%',
       height: ['100vh', '100dvh'], // This array is a special Emotion syntax to set a fallback if 100dvh is not supported
@@ -186,7 +190,7 @@ const LayoutContainer = styled.div<LayoutState>(
         gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
         gridTemplateRows: `1fr minmax(0, ${bottomPanelHeight}px)`,
         gridTemplateAreas: (() => {
-          if (viewMode === 'docs') {
+          if (viewMode === 'docs' || !showPanel) {
             // remove panel in docs viewMode
             return `"sidebar content content"
                   "sidebar content content"`;