UI: Replace experimental_SIDEBAR_BOTTOM API with a status filter UI

[ghengeveld]

Closes #28680

What I did

I copied over the SidebarBottom filtering UI from the Visual Tests Addon and made it a core Storybook Manager component. It now shows warnings and errors from any addon, so that both the VTA and Vitest addon can use it. Compared to the VTA filter UI, "Changes" are now labeled "Warnings" because that's a more generic name and matches the actual story status we're filtering on. Functionally there is no difference.

The experimental_SIDEBAR_BOTTOM API is removed, though the Addon_TypesEnum definition is marked deprecated but kept to prevent older VTA versions from breaking. Similarly, experimental_SIDEBAR_TOP is marked deprecated. Defining a experimental_SIDEBAR_BOTTOM component simply doesn't do anything anymore. We can remove both enum types in Storybook 9.0.

A new SET_FILTER event is emitted whenever a filter function is set (i.e. a filter is toggled). This can be used by the VTA's onboarding as it currently uses its own internal event. Unfortunately this means VTA onboarding will be broken when using an older VTA version with a newer Storybook version.

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 pull request has been released as version 0.0.0-pr-28693-sha-ed560db4. Try it out in a new sandbox by running npx storybook@0.0.0-pr-28693-sha-ed560db4 sandbox or in an existing project with npx storybook@0.0.0-pr-28693-sha-ed560db4 upgrade.

More information

Published version	0.0.0-pr-28693-sha-ed560db4
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	sidebar-bottom-filters
Commit	ed560db4
Datetime	Wed Jul 24 11:39:44 UTC 2024 (1721821184)
Workflow run	10075932929

To request a new release of this pull request, mention the @storybookjs/core team.

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

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.4 MB	76.4 MB	0 B	-1.48	0%
initSize	198 MB	198 MB	5.2 kB	-1.39	0%
diffSize	121 MB	121 MB	5.2 kB	4.13	0%
buildSize	7.6 MB	7.6 MB	4.69 kB	1203.67	0.1%
buildSbAddonsSize	1.63 MB	1.63 MB	59 B	15.46	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	4.56 kB	Infinity	0.2%
buildSbPreviewSize	349 kB	349 kB	73 B	Infinity	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.47 MB	4.48 MB	4.69 kB	1203.67	0.1%
buildPreviewSize	3.12 MB	3.12 MB	0 B	-	0%
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	23.6s	7.8s	-15s -804ms	-0.87	-201.9%
generateTime	20.7s	24.1s	3.3s	0.54	13.9%
initTime	21.9s	25.8s	3.8s	1.57	🔺14.9%
buildTime	14.8s	13.1s	-1s -687ms	-1.43	🔰-12.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	8.2s	8.3s	143ms	-0.57	1.7%
devManagerResponsive	5.6s	5.5s	-147ms	-0.64	-2.7%
devManagerHeaderVisible	802ms	839ms	37ms	-0.35	4.4%
devManagerIndexVisible	843ms	865ms	22ms	-0.36	2.5%
devStoryVisibleUncached	1.1s	1.5s	348ms	0.22	22.8%
devStoryVisible	864ms	881ms	17ms	-0.41	1.9%
devAutodocsVisible	723ms	709ms	-14ms	-0.74	-2%
devMDXVisible	718ms	762ms	44ms	-0.21	5.8%
buildManagerHeaderVisible	819ms	748ms	-71ms	-0.71	-9.5%
buildManagerIndexVisible	825ms	754ms	-71ms	-0.71	-9.4%
buildStoryVisible	870ms	798ms	-72ms	-0.72	-9%
buildAutodocsVisible	721ms	679ms	-42ms	-0.87	-6.2%
buildMDXVisible	650ms	684ms	34ms	-0.45	5%

[greptile-apps]

PR Summary

Replaced the experimental_SIDEBAR_BOTTOM API with a new status filter UI in the Storybook sidebar, enhancing the filtering capabilities for warnings and errors.

• New Event: Added SET_FILTER event in code/core/src/core-events/index.ts and code/core/src/manager-api/modules/stories.ts for filter synchronization.
• New Components: Introduced FilterToggle.tsx and SidebarBottom.tsx in code/core/src/manager/components/sidebar/ for the new filtering UI.
• Deprecated API: Removed experimental_SIDEBAR_BOTTOM API and updated related files like Sidebar.tsx and Sidebar.stories.tsx.
• Story Definitions: Added stories for FilterToggle and SidebarBottom components to code/core/src/manager/components/sidebar/.
• Backward Compatibility: Deprecated Addon_TypesEnum definition retained to prevent breaking older VTA versions.

_{10 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 257f53d. 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 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[yannbf]

LGTM! I'll let @cdedreuille take a look into the stories.

[yannbf]

@cdedreuille could you chime in on the states and colors?

[yannbf]

@ghengeveld can we make a canary and try this with different versions of VTA?