Dynamic Toolbar Tab Title

[BrknRules]

Is your feature request related to a problem? Please describe.

I was attempting to create a toolbar tab and panel to show analytics for a current story - how often a story is being used and where. In order to improve visibility, I wanted the title of the toolbar tab to show the total number of instances the story was being used. Prior to this, this usage analytics tab was implemented in a sub-toolbar which fetched the story data using useAddonState().

Describe the solution you'd like

To be able to somehow be able to dynamically change the toolbar titles outside of using addons.add(), and to be able to retrieve data for the story using useAddonState() to provide data to the title.

Describe alternatives you've considered

As mentioned above, this was implemented in a panel sub-toolbar, but was fairly hidden away and difficult to find.

Are you able to assist to bring the feature to reality?

no

Additional context

^ prior toolbar title

^ desired toolbar title that updates when navigating between different stories to show their usage.

[Marklb]

Are you talking about an addon toolbar tab? Is the problem with addons.add() that you are passing a static string to the title? Based on the description, to me, it sounds like you want something like what the Controls, Actions, Interactions, and others addons do. They provide a React component to the title, which should have access to the hooks.

Interactions addon src:

storybook/code/addons/interactions/src/manager.tsx

Lines 10 to 46 in 176017d

	function Title() {
	const [addonState = {}] = useAddonState(ADDON_ID);
	const { hasException, interactionsCount } = addonState as any;
	return (
	<div>
	<Spaced col={1}>
	<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Interactions</span>
	{interactionsCount && !hasException ? (
	<Badge status="neutral">{interactionsCount}</Badge>
	) : null}
	{hasException ? <TabIcon status={CallStates.ERROR} /> : null}
	</Spaced>
	</div>
	);
	}
	addons.register(ADDON_ID, (api) => {
	addons.add(PANEL_ID, {
	type: types.PANEL,
	title: Title,
	match: ({ viewMode }) => viewMode === 'story',
	render: ({ active }) => {
	const newLocal = useCallback(({ state }: Combo) => {
	return {
	storyId: state.storyId,
	};
	}, []);
	return (
	<AddonPanel active={active}>
	<Consumer filter={newLocal}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
	</AddonPanel>
	);
	},
	});
	});

[BrknRules]

In the package in my node_modules I have title typed as (() => string | string in the Addon interface, which makes sense for how it may be dynamic for the other addons, but when I try to use the above pattern you provided in manager.tsx or pass in a function that returns a string, I get a warning:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
and the tab does not render.

[Marklb]

I am not sure why you are getting that error, without seeing the code. Just to have a small simplified example to play with, I forked one of my old 6.5.3 Stackblitz projects and stripped it down to a single story, without much configuration, and added a .storybook/manager.tsx containing the addon code linked in my previous comment. After changing the constants and swapping the panel for a simple component containing a simple button, it works as I expect. Here is the project: https://stackblitz.com/edit/github-qjqvmy-cqrrwi?file=.storybook%2Fmanager.tsx

In case the Stackblitz isn't working, the following is the manager.tsx that the Stackblitz example has:

import React, { useState, useEffect } from 'react';
import { addons, types } from '@storybook/addons';
import { STORY_CHANGED } from '@storybook/core-events';

const ADDON_ID = 'custom-addon';
const EVENT_ID = `${ADDON_ID}/event`;
const PANEL_ID = `${ADDON_ID}/panel`;
const PARAM_KEY = `custom-addon`;

function CustomPanel({ api }) {
  const handleClick = (event) => {
    api.emit(EVENT_ID, { event });
  };

  return (
    <div style={{ display: 'block' }}>
      <button onClick={handleClick}>
        Click here to increment counter in tab title.
      </button>
    </div>
  );
}

addons.register(ADDON_ID, (api) => {
  addons.addPanel(PANEL_ID, {
    title() {
      const [actionsCount, setActionsCount] = useState(0);
      const onEvent = () => setActionsCount((previous) => previous + 1);
      const onChange = () => setActionsCount(0);

      useEffect(() => {
        api.on(EVENT_ID, onEvent);
        api.on(STORY_CHANGED, onChange);
        return () => {
          api.off(EVENT_ID, onEvent);
          api.off(STORY_CHANGED, onChange);
        };
      });

      const suffix = actionsCount === 0 ? '' : ` (${actionsCount})`;
      return `Custom ${suffix}`;
    },
    type: types.PANEL,
    render: ({ active, key }) => <CustomPanel key={key} api={api} />,
    paramKey: PARAM_KEY,
  });
});

[BrknRules]

I've adjusted your Stackblitz manager.tsx to closer match my use case of wanting the add-on to be a top-level tab instead of in the pop-up panel. I've changed the add-on type to types.TAB and am using the addons.add() function instead of addons.addPanel(). This time I get a different error TypeError: match is not a function. (In 'match(lp)', 'match' is undefined), but it seems something doesn't like it when I try to make a tab title dynamic.

My changed manager.tsx: https://stackblitz.com/edit/github-qjqvmy-ju9xxk?file=.storybook%2Fmanager.tsx

The file with the changes I made in case the above doesn't work:

import React, { useState, useEffect } from 'react';
import { addons, types } from '@storybook/addons';
import { STORY_CHANGED } from '@storybook/core-events';

const ADDON_ID = 'custom-addon';
const EVENT_ID = `${ADDON_ID}/event`;
const PANEL_ID = `${ADDON_ID}/panel`;
const PARAM_KEY = `custom-addon`;

function CustomPanel({ api }) {
  const handleClick = (event) => {
    api.emit(EVENT_ID, { event });
  };

  return (
    <div style={{ display: 'block' }}>
      <button onClick={handleClick}>
        Click here to increment counter in tab title.
      </button>
    </div>
  );
}

addons.register(ADDON_ID, (api) => {
  // changed from .addPanel() to .add()
  addons.add(PANEL_ID, {
    title() {
      const [actionsCount, setActionsCount] = useState(0);
      const onEvent = () => setActionsCount((previous) => previous + 1);
      const onChange = () => setActionsCount(0);

      useEffect(() => {
        api.on(EVENT_ID, onEvent);
        api.on(STORY_CHANGED, onChange);
        return () => {
          api.off(EVENT_ID, onEvent);
          api.off(STORY_CHANGED, onChange);
        };
      });

      const suffix = actionsCount === 0 ? '' : ` (${actionsCount})`;
      return `Custom ${suffix}`;
    },
    // changed from types.PANEL to types.TAB
    type: types.TAB,
    render: ({ active, key }) => <CustomPanel key={key} api={api} />,
    paramKey: PARAM_KEY,
  });
});

[Marklb]

Someone else may can correct me, but I don't think those tabs can do that. I tried getting around being able to pass a function, by giving the property a getter function, but it didn't get recognized as changed for rerendering and I am not sure if there is a way to cause it to.

[BrknRules]

I see, thanks for exploring this with me! It would be nice for these top-level tabs to also have dynamic title functionality as they have great visibility and can help surface or alert important information that may be missed when one doesn't open a panel - especially if they can be formatted with different colours or icons.