Skip to content

Add copy-to-clipboard button for issue IDs in Beadspace dashboard#86

Merged
0101 merged 2 commits into
mainfrom
copy-id
Jun 26, 2026
Merged

Add copy-to-clipboard button for issue IDs in Beadspace dashboard#86
0101 merged 2 commits into
mainfrom
copy-id

Conversation

@0101

@0101 0101 commented Jun 25, 2026

Copy link
Copy Markdown
Owner

Problem

The Beadspace canvas dashboard shows each issue's ID in the table, but there was no quick way to grab it — you had to manually select the text. Copying an ID (e.g. to paste into a bd command or a commit message) is a frequent action and deserved a one-click affordance.

Changes

src/Server/BeadspaceTemplate.html — a copy-to-clipboard button next to every issue ID:

  • Renders a small clipboard icon in each row's col-id cell; the icon swaps to a green check for 1.2s on success.
  • Hidden until row hover on pointer devices; always visible on touch (no hover there).
  • copyTextToClipboard uses navigator.clipboard.writeText with a document.execCommand('copy') textarea fallback for environments where the async API is unavailable.
  • Click calls e.stopPropagation() so copying does not toggle the row's detail panel.
  • The copied ID is stripped of control characters (\u0000-\u001F\u007F) before being written, preventing clipboard/pastejacking injection.
  • The fallback textarea is always removed via finally, so a throwing execCommand can't leak detached DOM nodes.
  • Accessible: aria-label, title, and a :focus-visible outline.

src/Client/CanvasPane.fs — adds allow="clipboard-write" to the canvas iframe. The dashboard runs cross-origin (127.0.0.1:5002) inside the app, so the Clipboard API needs this Permissions-Policy delegation.

src/Tests/BeadspaceCanvasTests.fs — three Playwright E2E tests:

  • Every issue row exposes exactly one copy button.
  • Clicking the button copies the ID and does not expand the detail panel (uses a web-first assertion for the copied feedback class to avoid a TOCTOU flake against the self-clearing timer).
  • Clicking the row body still expands the detail panel (regression guard for the stopPropagation change).

Tests

  • dotnet test — BeadspaceCanvas E2E suite: 14/14 passing (includes the 3 new tests; the clipboard-read assertion confirms the copy works end-to-end).
  • dotnet build src/Client/Client.fsproj — succeeds, 0 warnings.

Each issue row's ID cell gets a copy button (clipboard API with execCommand fallback), shown on hover and always on touch. Click copies the ID with stopPropagation so the detail panel doesn't toggle, and shows a check for 1.2s.

The canvas iframe is cross-origin, so CanvasPane grants allow=clipboard-write. The copied id is stripped of control chars to prevent pastejacking, and the fallback textarea is cleaned up via finally. Adds 3 E2E tests using a web-first assertion for the feedback class.
Copilot AI review requested due to automatic review settings June 25, 2026 14:57

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Assume a modern browser/Electron host where navigator.clipboard.writeText is available on the loopback (secure-context) canvas origin after a user click. Collapses copyTextToClipboard to a single Clipboard API call (keeping control-char sanitization) and removes the unused failure-feedback path. Net -28 lines.
@0101 0101 merged commit bec1bcc into main Jun 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants