Merge pull request #18106 from storybookjs/jono/ch-1904-excluded-all-…

…tabs-in-toolbar UI: Add a parent level toolbar exclusion key for tabs
storybookjs · May 4, 2022 · 1735cd3 · 1735cd3
2 parents ff00d58 + 1ea0c5c
commit 1735cd3
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 57 deletions.
diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md
@@ -54,4 +54,5 @@ You can use URL parameters to configure some of the available features:
 | **isFullscreen**    |    `full`    |           `true`           |
 | **showNav**         |    `nav`     |          `false`           |
 | **showPanel**       |   `panel`    | `false`, `right`, `bottom` |
-| **selectedPanel**   | `addonPanel` |        Any panel ID        |
+| **selectedPanel**   | `addonPanel` |        Any panel ID        |
+| **showTabs**        |    `tabs`    |           `true`           |
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
@@ -24,6 +24,7 @@ export interface Layout {
   panelPosition: PanelPositions;
   showNav: boolean;
   isToolshown: boolean;
+  showTabs: boolean;
 }
 
 export interface UI {
@@ -74,6 +75,7 @@ const defaultState: SubState = {
     showPanel: true,
     showNav: true,
     panelPosition: 'bottom',
+    showTabs: true,
   },
   selectedPanel: undefined,
   theme: themes.light,

diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
@@ -48,6 +48,7 @@ const initialUrlSupport = ({
     nav,
     shortcuts,
     addonPanel,
+    tabs,
     addons, // deprecated
     panelRight, // deprecated
     stories, // deprecated
@@ -62,6 +63,7 @@ const initialUrlSupport = ({
     showNav: !singleStory && parseBoolean(nav),
     showPanel: parseBoolean(panel),
     panelPosition: ['right', 'bottom'].includes(panel) ? panel : undefined,
+    showTabs: parseBoolean(tabs),
   };
   const ui: Partial<UI> = {
     enableShortcuts: parseBoolean(shortcuts),

diff --git a/lib/ui/src/app.stories.tsx b/lib/ui/src/app.stories.tsx
@@ -43,6 +43,7 @@ export const Default = () => (
         panelPosition: 'right',
         showNav: true,
         showPanel: true,
+        showTabs: true,
       }}
       panelCount={0}
       docsOnly={false}
@@ -70,6 +71,7 @@ export const LoadingState = () => (
         panelPosition: 'right',
         showNav: true,
         showPanel: true,
+        showTabs: true,
       }}
       panelCount={0}
       docsOnly={false}

diff --git a/lib/ui/src/components/layout/app.mockdata.tsx b/lib/ui/src/components/layout/app.mockdata.tsx
@@ -154,6 +154,7 @@ export const mockProps: DesktopProps = {
     panelPosition: 'right',
     isToolshown: true,
     initialActive: 'canvas',
+    showTabs: true,
   },
   viewMode: 'story',
   panelCount: 2,
@@ -184,6 +185,7 @@ export const realProps: DesktopProps = {
     panelPosition: 'right',
     isToolshown: true,
     initialActive: 'canvas',
+    showTabs: true,
   },
   viewMode: 'story',
   panelCount: 2,

diff --git a/lib/ui/src/components/preview/preview.mockdata.tsx b/lib/ui/src/components/preview/preview.mockdata.tsx
@@ -47,6 +47,7 @@ export const previewProps: PreviewProps = {
   options: {
     isFullscreen: false,
     isToolshown: true,
+    showTabs: true,
   },
   withLoader: false,
   docsOnly: false,

diff --git a/lib/ui/src/components/preview/preview.stories.tsx b/lib/ui/src/components/preview/preview.stories.tsx
@@ -132,35 +132,21 @@ export const HideAllDefaultTools = () => (
 export const WithCanvasTab = () => (
   <Consumer>
     {({ api }: Combo) => {
-      return (
-        <Preview
-          {...previewProps}
-          api={{
-            ...api,
-            getElements: () => ({}),
-          }}
-        />
-      );
+      return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />;
     }}
   </Consumer>
 );
 
 export const WithTabs = () => <Preview {...previewProps} />;
 
-export const WithToolbarExclusions = () => (
+export const WithTabsHidden = () => (
   <Consumer>
     {({ api }: Combo) => {
       return (
         <Preview
           {...previewProps}
-          api={{
-            ...api,
-            getElements: () => ({}),
-            getQueryParam: (key) => {
-              const params = { toolbarExclude: 'canvas,fullscreen' };
-              return params[key];
-            },
-          }}
+          options={{ ...previewProps.options, showTabs: false }}
+          api={{ ...api, getElements: () => ({}) }}
         />
       );
     }}

diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
@@ -147,7 +147,8 @@ const Preview = React.memo<PreviewProps>((props) => {
   const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
 
   const shouldScale = viewMode === 'story';
-  const { isToolshown } = options;
+  const { isToolshown, showTabs = true } = options;
+  const visibleTabsInToolbar = showTabs ? tabs : [];
 
   const previousStoryId = useRef(storyId);
   const previousViewMode = useRef(viewMode);
@@ -181,7 +182,13 @@ const Preview = React.memo<PreviewProps>((props) => {
         </Helmet>
       )}
       <ZoomProvider shouldScale={shouldScale}>
-        <ToolbarComp key="tools" story={story} api={api} isShown={isToolshown} tabs={tabs} />
+        <ToolbarComp
+          key="tools"
+          story={story}
+          api={api}
+          isShown={isToolshown}
+          tabs={visibleTabsInToolbar}
+        />
         <S.FrameWrap key="frame" offset={isToolshown ? 40 : 0}>
           {tabs.map(({ render: Render, match, ...t }, i) => {
             // @ts-ignore

diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
@@ -19,8 +19,6 @@ import { menuTool } from './tools/menu';
 import { addonsTool } from './tools/addons';
 import { remountTool } from './tools/remount';
 
-const TOOLBAR_EXCLUSION_PARAM = 'toolbarExclude';
-
 export const getTools = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.TOOL));
 
 export const getToolsExtra = (getFn: API['getElements']) =>
@@ -118,8 +116,7 @@ const useTools = (
   viewMode: PreviewProps['viewMode'],
   story: PreviewProps['story'],
   location: PreviewProps['location'],
-  path: PreviewProps['path'],
-  getQueryParam: API['getQueryParam']
+  path: PreviewProps['path']
 ) => {
   const toolsFromConfig = useMemo(() => getTools(getElements), [getElements]);
   const toolsExtraFromConfig = useMemo(() => getToolsExtra(getElements), [getElements]);
@@ -133,20 +130,9 @@ const useTools = (
     [defaultToolsExtra, toolsExtraFromConfig]
   );
 
-  const toolbarExclusions: string[] =
-    getQueryParam && getQueryParam(TOOLBAR_EXCLUSION_PARAM)
-      ? getQueryParam(TOOLBAR_EXCLUSION_PARAM).split(',')
-      : [];
-
   return useMemo(() => {
     return story && story.parameters
-      ? filterTools(tools, toolsExtra, tabs, {
-          viewMode,
-          story,
-          location,
-          path,
-          toolbarExclusions,
-        })
+      ? filterTools(tools, toolsExtra, tabs, { viewMode, story, location, path })
       : { left: tools, right: toolsExtra };
   }, [viewMode, story, location, path, tools, toolsExtra, tabs]);
 };
@@ -160,15 +146,7 @@ export interface ToolData {
 
 export const ToolRes: FunctionComponent<ToolData & RenderData> = React.memo<ToolData & RenderData>(
   ({ api, story, tabs, isShown, location, path, viewMode }) => {
-    const { left, right } = useTools(
-      api.getElements,
-      tabs,
-      viewMode,
-      story,
-      location,
-      path,
-      api.getQueryParam
-    );
+    const { left, right } = useTools(api.getElements, tabs, viewMode, story, location, path);
 
     return left || right ? (
       <Toolbar key="toolbar" shown={isShown} border>
@@ -213,24 +191,16 @@ export function filterTools(
     story,
     location,
     path,
-    toolbarExclusions,
   }: {
     viewMode: State['viewMode'];
     story: PreviewProps['story'];
     location: State['location'];
     path: State['path'];
-    toolbarExclusions: string[];
   }
 ) {
-  const isToolIncluded = (id: string) =>
-    toolbarExclusions.filter((exclusionKey) => id.match(new RegExp(`^${exclusionKey}.*`)))
-      .length === 0;
-
-  const filteredTabs = tabs.filter((tab) => isToolIncluded(tab.id));
-
   const toolsLeft = [
     menuTool,
-    filteredTabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(filteredTabs),
+    tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs),
     ...tools,
   ];
   const toolsRight = [...toolsExtra];
@@ -245,8 +215,7 @@ export function filterTools(
         location,
         path,
       })) &&
-    !toolbarItemHasBeenExcluded(item, story) &&
-    isToolIncluded(item.id);
+    !toolbarItemHasBeenExcluded(item, story);
 
   const left = toolsLeft.filter(filter);
   const right = toolsRight.filter(filter);

diff --git a/lib/ui/src/components/preview/utils/types.tsx b/lib/ui/src/components/preview/utils/types.tsx
@@ -13,6 +13,7 @@ export interface PreviewProps {
   options: {
     isFullscreen: boolean;
     isToolshown: boolean;
+    showTabs: boolean;
   };
   id: string;
   path: string;