fix(ui): restore issue copy buttons on HTTP (#8212)
## Thinking Path > - Paperclip is the control plane operators use to run AI-agent companies, so board actions like copying task state need to work reliably on the live board UI. > - The affected surface is the issue detail and issue chat UI, where operators copy task descriptions and comment text during triage and handoff. > - On self-hosted HTTP deployments, the async Clipboard API can exist but fail, which breaks these copy buttons silently. > - The internal FMAI reproduction pointed specifically at task description copy and task comment copy in the issue view. > - There is already an overlapping upstream PR, [#6353](https://github.com/paperclipai/paperclip/pull/6353), but it is currently `CONFLICTING` and does not provide a mergeable path. > - This pull request adds a shared clipboard helper with a fallback path, wires the task-detail and task-thread copy actions through it, and locks the behavior in with targeted tests. > - The benefit is that copy buttons keep working on HTTP self-hosted boards without changing behavior for secure deployments. ## Linked Issues or Issue Description - Fixes #3529 - Refs #6353 ## What Changed - Added `ui/src/lib/clipboard.ts` with a shared `copyTextToClipboard()` helper that tries the async Clipboard API first and falls back to `document.execCommand("copy")` when that path is blocked. - Updated `IssueDetail.tsx` so the task-level "Copy task as markdown" action uses the shared helper. - Updated both `IssueChatThread.tsx` and `IssueChatThreadClassic.tsx` so task comment copy actions, code-block copy actions, and system-notice copy actions use the shared helper. - Added focused regression coverage in `IssueDetail.test.tsx` and `IssueChatThread.test.tsx` for insecure-context fallback behavior. ## Verification - `corepack pnpm exec vitest run ui/src/pages/IssueDetail.test.tsx ui/src/components/IssueChatThread.test.tsx ui/src/components/IssueChatThreadSystemNotice.test.tsx` - `corepack pnpm exec tsc -p ui/tsconfig.json --noEmit` - Manual reviewer check: - Run Paperclip over HTTP. - Open an issue detail page. - Use `Copy task as markdown` and a comment `Copy message` action. - Confirm both copy successfully instead of silently failing. ## Risks - Low risk. The change is scoped to clipboard helpers and the specific issue-detail / issue-thread copy actions. - The fallback relies on `document.execCommand("copy")`, which is legacy browser behavior, but it is only used when the modern clipboard path is unavailable or blocked. ## Model Used - OpenAI GPT-5 Codex via Codex local adapter, tool-enabled coding workflow with terminal, git, and file-editing support. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] If this change affects the UI, I have included before/after screenshots - [ ] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [ ] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: FMAI Agents <joegalbert-ai@users.noreply.github.com> Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
joegalbert-ai
@@ -1637,6 +1637,68 @@ describe("IssueDetail", () => {
|
||||
expect(container.textContent).toContain("Plan mode");
|
||||
});
|
||||
|
||||
it("falls back to execCommand when copying the task from an insecure context", async () => {
|
||||
const clipboardWrite = vi.fn(async () => {
|
||||
throw new Error("Clipboard API blocked");
|
||||
});
|
||||
const execCommand = vi.fn(() => true);
|
||||
const originalClipboard = Object.getOwnPropertyDescriptor(navigator, "clipboard");
|
||||
const originalExecCommand = Object.getOwnPropertyDescriptor(document, "execCommand");
|
||||
Object.defineProperty(navigator, "clipboard", {
|
||||
configurable: true,
|
||||
value: { writeText: clipboardWrite },
|
||||
});
|
||||
Object.defineProperty(document, "execCommand", {
|
||||
configurable: true,
|
||||
value: execCommand,
|
||||
});
|
||||
mockIssuesApi.get.mockResolvedValue(createIssue({
|
||||
identifier: "PAP-1",
|
||||
title: "Copy me",
|
||||
description: "Task body",
|
||||
}));
|
||||
|
||||
try {
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
const copyButton = Array.from(container.querySelectorAll("button"))
|
||||
.find((button) => button.getAttribute("title") === "Copy task as markdown");
|
||||
expect(copyButton).toBeTruthy();
|
||||
|
||||
await act(async () => {
|
||||
copyButton!.click();
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(clipboardWrite).toHaveBeenCalledWith("# PAP-1: Copy me\n\nTask body");
|
||||
expect(execCommand).toHaveBeenCalledWith("copy");
|
||||
expect(mockPushToast).toHaveBeenCalledWith(expect.objectContaining({
|
||||
title: "Copied to clipboard",
|
||||
tone: "success",
|
||||
}));
|
||||
} finally {
|
||||
if (originalClipboard) {
|
||||
Object.defineProperty(navigator, "clipboard", originalClipboard);
|
||||
} else {
|
||||
// @ts-expect-error test cleanup for optional browser API
|
||||
delete navigator.clipboard;
|
||||
}
|
||||
if (originalExecCommand) {
|
||||
Object.defineProperty(document, "execCommand", originalExecCommand);
|
||||
} else {
|
||||
// @ts-expect-error test cleanup for optional browser API
|
||||
delete document.execCommand;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// PAP-140 flag-off parity: with the Conference Room Chat flag off, the task
|
||||
// thread surfaces must render master's behavior (classic fork, master copy,
|
||||
// master mention set).
|
||||
|
||||
@@ -118,6 +118,7 @@ import {
|
||||
} from "@/components/ui/dialog";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { formatIssueActivityAction } from "@/lib/activity-format";
|
||||
import { copyTextToClipboard } from "../lib/clipboard";
|
||||
import { buildIssuePropertiesPanelKey } from "../lib/issue-properties-panel-key";
|
||||
import { buildIssueSiblingNavigation, shouldRenderRichSubIssuesSection } from "../lib/issue-detail-subissues";
|
||||
import { filterIssueDescendants } from "../lib/issue-tree";
|
||||
@@ -3094,10 +3095,18 @@ export function IssueDetail() {
|
||||
const title = decodeEntities(issue.title);
|
||||
const body = decodeEntities(issue.description ?? "");
|
||||
const md = `# ${issue.identifier}: ${title}\n\n${body}`.trimEnd();
|
||||
await navigator.clipboard.writeText(md);
|
||||
setCopied(true);
|
||||
pushToast({ title: "Copied to clipboard", tone: "success" });
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
try {
|
||||
await copyTextToClipboard(md);
|
||||
setCopied(true);
|
||||
pushToast({ title: "Copied to clipboard", tone: "success" });
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (error) {
|
||||
pushToast({
|
||||
title: "Copy failed",
|
||||
body: error instanceof Error ? error.message : "Unable to copy task markdown",
|
||||
tone: "error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Gmail-style mobile toolbar when viewing an issue from inbox.
|
||||
|
||||
Reference in New Issue
Block a user