UI: Update sidebar status indicators and tooltips

[ghengeveld]

Closes #28679

What I did

This updates the sidebar with new status indicators (⭕️ and ⚠️) and tooltips.

Groups and components have an aggregate status and a tooltip summarizing the number of errors, warnings and pending statuses. Clicking one of these opens the first descendant story with that status.

Stories have their own aggregate status and a tooltip showing individual addons' statuses for this story. Clicking one of these selects the story and invokes the addon's onClick handler for this status, which would typically open its addon panel.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.4 MB	76.3 MB	-81.5 kB	-Infinity	-0.1%
initSize	198 MB	198 MB	-60.4 kB	-Infinity	0%
diffSize	122 MB	122 MB	21.1 kB	Infinity	0%
buildSize	7.6 MB	7.61 MB	14 kB	Infinity	0.2%
buildSbAddonsSize	1.63 MB	1.63 MB	915 B	Infinity	0.1%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.31 MB	9.98 kB	Infinity	0.4%
buildSbPreviewSize	349 kB	349 kB	-124 B	-Infinity	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.48 MB	4.49 MB	10.8 kB	Infinity	0.2%
buildPreviewSize	3.12 MB	3.12 MB	3.24 kB	Infinity	0.1%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.2s	25.1s	17.8s	Infinity	🔺71.2%
generateTime	21.5s	19.8s	-1s -747ms	-Infinity	🔰-8.8%
initTime	20.9s	20.3s	-644ms	-Infinity	-3.2%
buildTime	14.1s	17.5s	3.3s	Infinity	🔺19.1%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	8.2s	12.6s	4.3s	Infinity	🔺34.6%
devManagerResponsive	5.5s	7.6s	2.1s	Infinity	🔺28%
devManagerHeaderVisible	842ms	964ms	122ms	Infinity	🔺12.7%
devManagerIndexVisible	875ms	1s	131ms	Infinity	🔺13%
devStoryVisibleUncached	1.2s	1.8s	655ms	Infinity	🔺34.5%
devStoryVisible	899ms	1s	149ms	Infinity	🔺14.2%
devAutodocsVisible	688ms	853ms	165ms	Infinity	🔺19.3%
devMDXVisible	735ms	989ms	254ms	Infinity	🔺25.7%
buildManagerHeaderVisible	804ms	1s	258ms	Infinity	🔺24.3%
buildManagerIndexVisible	814ms	1.1s	334ms	Infinity	🔺29.1%
buildStoryVisible	861ms	1.1s	272ms	Infinity	🔺24%
buildAutodocsVisible	748ms	936ms	188ms	Infinity	🔺20.1%
buildMDXVisible	742ms	857ms	115ms	Infinity	🔺13.4%

Greptile Summary

This update enhances the Storybook sidebar with new status indicators and tooltips for better user experience and interactivity.

• code/core/src/manager/components/sidebar/StatusContext.tsx: Introduced a new context and hook for managing and summarizing story statuses.
• code/core/src/manager/components/sidebar/Tree.tsx: Added new status icons and tooltips, including logic for status aggregation and click handling.
• code/core/src/manager/components/sidebar/IconSymbols.tsx: Updated to include new status indicators for errors, warnings, and a generic dot.
• code/core/src/components/components/tooltip/ListItem.tsx: Enhanced Item component with href and onClick properties, and refactored for better readability.
• code/core/src/types/modules/api-stories.ts: Added an optional onClick property to API_StatusObject interface for interactive elements.

[greptile-apps]

LGTM

_{8 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c6ebc2c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[yannbf]

Changes look good to me, would be nice if there were tests for this. Could you write any sort of test? The stories are likely failing because of this line:

storybook/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx

Line 22 in bc6bd59

const child = Children.only(children) as ReactElement;

[yannbf]

@ghengeveld can you take a look in these two regressions:

1 - Does this make sense, given that this story doesn't have a status? I'd assume the element wouldn't be rendered and therefore not take space

2 - I don't think we discussed about how stories would look like in search, but the change caused effects in the search: