Copy header link #30411
Copy header link #30411
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
6 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
| document.body.appendChild(tmp); | ||
| tmp.select(); | ||
| document.execCommand('copy'); | ||
| document.body.removeChild(tmp); |
There was a problem hiding this comment.
style: potential memory leak if an error occurs between appendChild and removeChild - wrap in try/finally
| document.body.appendChild(tmp); | |
| tmp.select(); | |
| document.execCommand('copy'); | |
| document.body.removeChild(tmp); | |
| document.body.appendChild(tmp); | |
| try { | |
| tmp.select(); | |
| document.execCommand('copy'); | |
| } finally { | |
| document.body.removeChild(tmp); | |
| } |
| global.document = { | ||
| createElement: vi.fn(), | ||
| } as any as Document; |
There was a problem hiding this comment.
logic: Mocking document with just createElement is insufficient for testing the fallback copy mechanism. Need to mock body.appendChild, execCommand, body.removeChild, and activeElement.
| global.document = { | |
| createElement: vi.fn(), | |
| } as any as Document; | |
| global.document = { | |
| createElement: vi.fn(), | |
| body: { | |
| appendChild: vi.fn(), | |
| removeChild: vi.fn() | |
| }, | |
| execCommand: vi.fn(), | |
| activeElement: null | |
| } as any as Document; |
| // DOM mocking is not enabled which will cause the function to throw | ||
| try { | ||
| await copyToClipboard('text'); | ||
| } catch (e) {} |
There was a problem hiding this comment.
style: Silently catching all errors masks potential issues. Should verify the expected error is thrown when DOM APIs are not available.
| const copyUrl = new URL(window.parent.location.href); | ||
| copyUrl.hash = hash; |
There was a problem hiding this comment.
logic: Using window.parent.location.href could break if Storybook is embedded in a multi-level iframe structure. Consider using a more robust way to get the root URL.
There was a problem hiding this comment.
6 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
| Object.assign(navigator, { | ||
| clipboard: { | ||
| writeText, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
style: Consider using vi.stubGlobal('navigator', {...}) instead of Object.assign for more reliable test setup and teardown
| onClick={(event: SyntheticEvent) => { | ||
| copyToClipboard(copyUrl.href); |
There was a problem hiding this comment.
logic: copyToClipboard should handle promise rejection from clipboard API
Closes #30407
What I did
createCopyToClipboardFunctionto a separate file for clearer availability for reuse.createCopyToClipboardFunction. Decided not to fully test the fallback method since DOM mocking doesn't seem to be working andnavigator.clipboardis pretty much generally available.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
yarn task --task sandbox --start-from auto --template react-vite/default-tsDocumentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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/coreteam 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>Greptile Summary
Extracted clipboard functionality into a reusable utility with modern API support and DOM fallback, improving code organization across Storybook components.
createCopyToClipboardFunction.tswith Clipboard API and DOM fallback implementationcreateCopyToClipboardFunction.test.tssyntaxhighlighter.tsxto use the new utility instead of inline implementationmdx.tsxusing the new utility💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!