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

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.

@ndelangen ndelangen self-assigned this Nov 11, 2024
@ndelangen ndelangen marked this pull request as ready for review November 13, 2024 09:19
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

code/addons/test/src/manager.tsx Outdated Show resolved Hide resolved
code/core/src/manager/components/sidebar/Tree.stories.tsx Outdated Show resolved Hide resolved
code/core/src/manager/components/sidebar/Tree.stories.tsx Outdated Show resolved Hide resolved
code/core/src/manager/components/sidebar/Tree.tsx Outdated Show resolved Hide resolved
code/core/src/manager/components/sidebar/Tree.tsx Outdated Show resolved Hide resolved
code/core/src/manager/components/sidebar/Tree.tsx Outdated Show resolved Hide resolved
@@ -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 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