Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Sidebar context menu addon API #29557

Merged
merged 59 commits into from
Nov 19, 2024
Merged

Conversation

ndelangen
Copy link
Member

@ndelangen ndelangen commented Nov 6, 2024

What I did

  • allow custom link in menu list component
  • add a new method on the testProvider addon type for adding a contextMenu rendering
  • adjust the Tree component to render a context menu, including statuses & contextMenu renderings from testProviders
  • hoist the state of the sidebarBottom into a state module in manager-api

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

I'll be adding this section as soon as we have alignment on this feature's implementation

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-storybook/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 78.4 MB 78.4 MB 0 B 0.35 0%
initSize 144 MB 144 MB 167 kB 1.68 0.1%
diffSize 65.2 MB 65.3 MB 167 kB 99.22 0.3%
buildSize 6.88 MB 7.03 MB 156 kB 97.52 2.2%
buildSbAddonsSize 1.51 MB 1.51 MB 0 B - 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.9 MB 2.06 MB 156 kB 1788.27 🔺7.6%
buildSbPreviewSize 271 kB 271 kB 0 B - 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.88 MB 4.04 MB 156 kB 1788.27 3.9%
buildPreviewSize 3 MB 3 MB 148 B 0.99 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 22.8s 6.7s -16s -124ms -1.31 🔰-240.2%
generateTime 19.2s 21.2s 2s -0.05 9.5%
initTime 13.1s 15.5s 2.3s 0.33 15.3%
buildTime 9.2s 8.2s -941ms -0.66 -11.3%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 5.8s 5.5s -254ms -0.03 -4.6%
devManagerResponsive 3.7s 3.3s -413ms -0.36 -12.3%
devManagerHeaderVisible 549ms 613ms 64ms 0.89 10.4%
devManagerIndexVisible 805ms 686ms -119ms 0.73 -17.3%
devStoryVisibleUncached 863ms 1.1s 319ms 1.23 27%
devStoryVisible 804ms 683ms -121ms 0.84 -17.7%
devAutodocsVisible 467ms 519ms 52ms 0.38 10%
devMDXVisible 481ms 502ms 21ms 0.21 4.2%
buildManagerHeaderVisible 495ms 540ms 45ms -0.2 8.3%
buildManagerIndexVisible 508ms 556ms 48ms -0.22 8.6%
buildStoryVisible 498ms 534ms 36ms -0.27 6.7%
buildAutodocsVisible 522ms 446ms -76ms -0.46 -17%
buildMDXVisible 417ms 416ms -1ms -0.36 -0.2%

Greptile Summary

Added context menu functionality to Storybook's sidebar, allowing addons to inject custom links and actions through a new experimental test provider API.

  • Added contextMenu property to Addon_TestProviderType in code/core/src/types/modules/addons.ts for custom menu items
  • Implemented useContextMenu hook in code/core/src/manager/components/sidebar/Tree.tsx to manage hover/click states
  • Added test provider state management in code/core/src/manager-api/modules/experimental_testmodule.ts
  • Modified TooltipLinkList in code/core/src/components/components/tooltip/TooltipLinkList.tsx to support custom content rendering
  • Added example implementation in test addon (code/addons/test/src/manager.tsx) for running tests via context menu

Sorry, something went wrong.

Unverified

This user has not yet uploaded their public signing key.
…cting anything into context menu
Copy link

nx-cloud bot commented Nov 6, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f771bdf. 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

Sent with 💌 from NxCloud.

Unverified

This user has not yet uploaded their public signing key.
@ndelangen ndelangen self-assigned this Nov 11, 2024

Unverified

This user has not yet uploaded their public signing key.

Unverified

This user has not yet uploaded their public signing key.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Unverified

This user has not yet uploaded their public signing key.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@ndelangen ndelangen marked this pull request as ready for review November 13, 2024 09:19

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…torybookjs/storybook into norbert/addon-api-context-menu
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

14 file(s) reviewed, 16 comment(s)
Edit PR Review Bot Settings | Greptile

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@@ -133,7 +133,7 @@ const WithTooltipPure = ({
{/* @ts-expect-error (non strict) */}
{typeof tooltip === 'function' ? tooltip({ onHide: () => onVisibleChange(false) }) : tooltip}
</Tooltip>
);
) : null;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an optimization that makes a lot of sense to me...
Why call a function which we will not use the returned JSX of?

Comment on lines +182 to 190
api.on(TESTING_MODULE_CRASH_REPORT, onCrashReport);
api.on(TESTING_MODULE_RUN_ALL_REQUEST, clearState);
api.on(TESTING_MODULE_PROGRESS_REPORT, onProgressReport);

return () => {
api.getChannel()?.off(TESTING_MODULE_CRASH_REPORT, onCrashReport);
api.getChannel()?.off(TESTING_MODULE_PROGRESS_REPORT, onProgressReport);
api.getChannel()?.off(TESTING_MODULE_RUN_ALL_REQUEST, clearState);
api.off(TESTING_MODULE_CRASH_REPORT, onCrashReport);
api.off(TESTING_MODULE_PROGRESS_REPORT, onProgressReport);
api.off(TESTING_MODULE_RUN_ALL_REQUEST, clearState);
};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm considering moving this code into the state module as well.

Right now, every time testProviders changes (which happens a LOT due to that's where the state is), we unsubscribe and resubscribe.

It's technically possible to miss events during this short period.

ndelangen and others added 11 commits November 15, 2024 12:37

Partially verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
…ckly moves their mouse around

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Unverified

The email in this signature doesn’t match the committer email.
…torybookjs/storybook into norbert/addon-api-context-menu

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…js/storybook into norbert/addon-api-context-menu
ndelangen and others added 7 commits November 18, 2024 15:52

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…torybookjs/storybook into norbert/addon-api-context-menu

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Unverified

The email in this signature doesn’t match the committer email.
@ndelangen ndelangen requested a review from JReinhold November 19, 2024 12:34
@ndelangen ndelangen merged commit 14c0ab5 into next Nov 19, 2024
60 checks passed
@ndelangen ndelangen deleted the norbert/addon-api-context-menu branch November 19, 2024 12:34
@github-actions github-actions bot mentioned this pull request Nov 19, 2024
5 tasks
@JReinhold JReinhold mentioned this pull request Nov 19, 2024
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants