feat: add copy functionality to output modal with tooltip support

[viktoravelino]

Jira: LE-182
Issue: #7581

This pull request adds a "Copy to clipboard" button to the component output modal, allowing users to easily copy output or log content. It includes logic to handle different output types, provides user feedback with a tooltip and success message, and adds end-to-end tests to ensure correct behavior and accessibility.

Feature: Output Modal Copy Button

• Added a "Copy" button to the OutputModal component, allowing users to copy either output or log content to the clipboard, with support for both string and JSON content types. The button displays a tooltip and changes to a check icon upon successful copy, with a success message shown to the user. (src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx) [1] [2] [3] [4]

Testing: End-to-End Coverage

• Introduced a new Playwright test suite to verify the copy button's functionality, including copying plain text and JSON outputs, success message display, icon state transitions, and tooltip visibility. (src/frontend/tests/extended/features/output-modal-copy-button.spec.ts)

Summary by CodeRabbit

Release Notes

• New Features
  • Output modal copy button: Users can now quickly copy component outputs and logs with a single click
  • Visual feedback: Button icon toggles between copy and check to indicate successful copying
  • Success notification: Confirmation message displays when content is copied to clipboard
  • Tooltip guidance: Helpful text appears when hovering over the copy button

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Screen.Recording.2026-01-29.at.4.55.17.PM.mov

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

This pull request adds a copy-to-clipboard feature to the output modal component. A new copy button in the modal header allows users to copy component outputs or logs, with visual feedback via icon toggling (copy to check) and success alert messages.

Changes

Cohort / File(s)	Summary
Output Modal Copy Feature src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx	Added copy button UI with tooltip; implemented handleCopy logic that retrieves output/log content via getOutputContent using useFlowStore, writes to clipboard, displays success alert via useAlertStore, and toggles icon state; manages internal isCopied state with 2-second reset.
Output Modal Copy Tests src/frontend/tests/extended/features/output-modal-copy-button.spec.ts	New test suite with three test cases validating: text output copying with success feedback and icon transitions, JSON output copying from API requests, and copy button tooltip behavior on hover.

Sequence Diagram

sequenceDiagram
    actor User
    participant OutputModal as Output Modal<br/>(Component)
    participant FlowStore as useFlowStore
    participant Clipboard as Clipboard API
    participant AlertStore as useAlertStore

    User->>OutputModal: Click copy button
    OutputModal->>FlowStore: Retrieve flowPool
    FlowStore-->>OutputModal: Return latest node data
    OutputModal->>OutputModal: Extract output/log content<br/>via getOutputContent
    OutputModal->>Clipboard: Write content to clipboard
    Clipboard-->>OutputModal: Success
    OutputModal->>AlertStore: Trigger success alert
    AlertStore-->>OutputModal: Display message
    OutputModal->>OutputModal: Toggle isCopied state<br/>(copy → check icon)
    rect rgba(100, 150, 200, 0.5)
        Note over OutputModal: Wait 2 seconds
    end
    OutputModal->>OutputModal: Reset isCopied state

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 3 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR lacks unit tests for new OutputModal component functionality (getOutputContent() and handleCopy()), despite E2E tests being present and project establishing unit testing patterns.	Add unit tests in tests directory under outputModal/ to test getOutputContent() with various data scenarios and handleCopy() for clipboard interaction and state transitions.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	Tests lack comprehensive error coverage, use hardcoded timeouts instead of conditional waits, depend on external HTTP endpoint, and missing test docstrings violate project testing guidelines.	Add test docstrings per guidelines. Replace hardcoded waitForTimeout() with conditional expect() waits. Mock httpbin.org endpoint using page.route(). Add error scenario tests for API failures, clipboard errors, and malformed responses.
Test File Naming And Structure	⚠️ Warning	Test file lacks comprehensive coverage with no edge cases, error conditions, or proper test documentation; uses hardcoded waits instead of conditional expects.	Add tests for edge cases (empty outputs, copy failures, network errors), replace hardcoded timeouts with conditional waits, add docstrings, and mock external endpoints.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding copy functionality to the output modal with tooltip support, which aligns with the primary modifications across both the component implementation and test suite.
Excessive Mock Usage Warning	✅ Passed	Test file contains zero mock objects with appropriate E2E test design using Playwright to validate real user interactions and actual application state.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/le-182

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	17.49% (5063/28940)	10.79% (2426/22473)	11.61% (734/6321)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
2101	0 💤	0 ❌	0 🔥	26.553s ⏱️

[codecov]

Codecov Report

❌ Patch coverage is 0% with 26 lines in your changes missing coverage. Please review.
✅ Project coverage is 34.84%. Comparing base (c4cb760) to head (731e76a).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...Nodes/GenericNode/components/outputModal/index.tsx	0.00%	26 Missing ⚠️

❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage.
❌ Your project status has failed because the head coverage (41.75%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11493      +/-   ##
==========================================
- Coverage   35.33%   34.84%   -0.49%     
==========================================
  Files        1437     1421      -16     
  Lines       69246    68291     -955     
  Branches    10102    10053      -49     
==========================================
- Hits        24465    23794     -671     
+ Misses      43531    43264     -267     
+ Partials     1250     1233      -17     

Flag	Coverage Δ
frontend	16.01% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...Nodes/GenericNode/components/outputModal/index.tsx	0.00% <0.00%> (ø)

... and 51 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx (1)

1-57: Harden clipboard flow and clear the reset timer.

navigator.clipboard.writeText can fail or be unavailable in certain contexts (HTTP, restricted permissions), and repeated clicks can leave multiple timers running. Guard availability before use, handle errors, and clear prior timers with cleanup on unmount—patterns already established elsewhere in the codebase.

Also add aria-label to the icon-only button for screen reader accessibility; the tooltip alone does not substitute for it.

🔧 Proposed hardening (availability guard + timer cleanup + accessibility)

-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
@@
   const [activeTab, setActiveTab] = useState<"Outputs" | "Logs">("Outputs");
   const [isCopied, setIsCopied] = useState(false);
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@
-  const handleCopy = () => {
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    };
+  }, []);
+
+  const handleCopy = async () => {
     const content = getOutputContent();
     if (!content) return;
 
-    navigator.clipboard.writeText(content).then(() => {
+    if (!navigator.clipboard?.writeText) return;
+
+    try {
+      await navigator.clipboard.writeText(content);
       setIsCopied(true);
       setSuccessData({ title: "Copied to clipboard" });
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    });
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    } catch {
+      setIsCopied(false);
+      // Consider surfacing a user-visible error via alert store.
+    }
   };
@@
         <ShadTooltip content="Copy" side="bottom">
           <Button
             variant="ghost"
             size="icon"
             className="absolute right-12 top-2 p-2"
             onClick={handleCopy}
             data-testid="copy-output-button"
+            aria-label="Copy output to clipboard"
           >

🤖 Fix all issues with AI agents

In `@src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx`:
- Around line 76-88: The icon-only copy Button (component Button with props
onClick={handleCopy} and data-testid="copy-output-button", rendering
ForwardedIconComponent and toggling via isCopied) lacks an accessible label; add
an aria-label (or aria-labelledby) to the Button so screen readers announce its
purpose (e.g., use aria-label={`Copy output${isCopied ? ' — copied' : ''}`} or
similar) and ensure the label updates based on isCopied to reflect the current
state.

In `@src/frontend/tests/extended/features/output-modal-copy-button.spec.ts`:
- Around line 4-186: Each test case in the "Output Modal Copy Button" suite
lacks a concise docstring describing purpose, scenario, and expected outcome;
add a one- or two-line descriptive comment or docstring immediately inside each
test(...) block (for the tests titled "user should be able to copy text output
from component output modal", "copy button should work with JSON output from API
Request component", and "copy button tooltip should display correctly") so the
intent is clear to readers and CI logs; place the comment at the top of each
test function body (right after the async ({ page }) => { line) and keep it
short (purpose, scenario, expected result).
- Around line 91-103: The test currently hits the real https://httpbin.org/json
when filling the API Request URL; instead, before calling
page.getByTestId("data_sourceAPI Request").hover() or before clicking
add-component-button-api-request, add a page.route(...) that intercepts requests
to "https://httpbin.org/json" and responds with a deterministic mocked JSON
payload and a 200 status so the API Request component uses the mock; ensure the
route is registered on the same Page instance used in the test and
remove/restore the route if necessary after the test to avoid cross-test
interference.
- Around line 4-8: The three Playwright tests under the "Output Modal Copy
Button" suite (the test described by test.describe and the async test callback)
lack docstrings and use brittle waitForTimeout() calls and an external HTTP
endpoint; add a concise test-level docstring at the top of each test explaining
the scenario and expected outcome, replace all hardcoded
page.waitForTimeout(...) usages with conditional waits using expect(...) with
appropriate timeouts (e.g., expect(locator).toBeVisible/hasText/waitFor with
timeout) to avoid flakiness, and for the test that fetches
https://httpbin.org/json replace the live request with a mocked network response
using Playwright's route.fulfill or test.route to return a deterministic payload
so CI/offline runs are stable; locate and update the async test function and any
helper functions interacting with the modal copy button, the external request,
or the wait calls to implement these changes.

🧹 Nitpick comments (1)

src/frontend/tests/extended/features/output-modal-copy-button.spec.ts (1)

69-72: Replace fixed sleeps with expect+timeout to reduce flakiness.

waitForTimeout can make tests slow and brittle. Prefer waiting on a condition with a timeout.

⏱️ Suggested change

-      // Wait for the icon to revert back to copy icon
-      await page.waitForTimeout(2500);
-      await expect(
-        copyButton.locator('[data-testid="icon-Copy"]'),
-      ).toBeVisible();
+      // Wait for the icon to revert back to copy icon
+      await expect(
+        copyButton.locator('[data-testid="icon-Copy"]'),
+      ).toBeVisible({ timeout: 3000 });
@@
-      // Wait for tooltip to appear
-      await page.waitForTimeout(500);
-
-      // Check if the tooltip is visible
-      await expect(page.getByText("Copy")).toBeVisible();
+      // Check if the tooltip is visible
+      await expect(page.getByText("Copy")).toBeVisible({ timeout: 2000 });

Also applies to: 181-184