Add "Copy to clipboard" button for Output Data and Logs in test step panel by seslash · Pull Request #109 · openutm/verification

seslash · 2026-03-13T18:26:21Z

For more details see issue #108

…panel For more details see issue #108

Copilot

Pull request overview

Adds a “Copy to clipboard” affordance to the ScenarioEditor bottom panel so users can quickly copy either the pretty-printed Output Data JSON or the currently filtered Logs for a step (per issue #108).

Changes:

Update the bottom panel tab header layout to make room for actions and add styling for a copy button (including success state styling).
Add copy-to-clipboard logic and UI (Copy/Copied states) to BottomPanel for Output Data and filtered Logs.
Refactor status badge color logic into named variables for readability.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
web-editor/src/styles/BottomPanel.module.css	Adds layout/styles for tab grouping and the new copy button + success state.
web-editor/src/components/ScenarioEditor/BottomPanel.tsx	Implements copy button behavior (output/logs), success feedback state, and small status badge refactor.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web-editor/src/components/ScenarioEditor/BottomPanel.tsx

+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });


web-editor/src/components/ScenarioEditor/BottomPanel.tsx

+                    {canCopy && (
+                        <button
+                            className={`${styles.copyButton} ${copied ? styles.copyButtonSuccess : ''}`}
+                            onClick={handleCopy}
+                            aria-label="Copy to clipboard"
+                            type="button"
+                        >


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Adds a “Copy to clipboard” action to the ScenarioEditor bottom panel so users can quickly copy either the currently displayed Output Data (pretty JSON) or the currently filtered Logs from a selected test step.

Changes:

Adds a copy button to the Output Data / Logs tab bar with success feedback (“Copied!”).
Implements clipboard copy logic with navigator.clipboard.writeText and a legacy execCommand('copy') fallback.
Updates bottom panel tab bar layout/styles to accommodate the new action.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
web-editor/src/components/ScenarioEditor/BottomPanel.tsx	Adds copy-to-clipboard behavior, success feedback state, and renders the Copy/Copied button in the tab bar.
web-editor/src/styles/BottomPanel.module.css	Adjusts tab layout (tab group + right-aligned action) and styles the copy button + success state.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web-editor/src/components/ScenarioEditor/BottomPanel.tsx

+    const handleCopy = useCallback(() => {
+        let textToCopy = '';
+        if (activeTab === 'output' && result) {
+            textToCopy = JSON.stringify(result, null, 2);
+        } else if (activeTab === 'logs' && filteredLogs.length > 0) {
+            textToCopy = filteredLogs.join('\n');
+        }
+        if (!textToCopy) return;
+
+        const handleSuccess = () => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        };
+
+        const fallbackCopy = () => {
+            try {
+                const textarea = document.createElement('textarea');
+                textarea.value = textToCopy;
+                textarea.setAttribute('readonly', '');
+                textarea.style.position = 'absolute';
+                textarea.style.left = '-9999px';
+                document.body.appendChild(textarea);
+                const selection = document.getSelection();
+                const selected = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+                textarea.select();
+                const successful = document.execCommand('copy');
+                document.body.removeChild(textarea);
+                if (selected && selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(selected);
+                }
+                if (successful) {
+                    handleSuccess();
+                } else if (typeof window !== 'undefined' && typeof window.alert === 'function') {
+                    window.alert('Failed to copy to clipboard.');
+                }
+            } catch {
+                if (typeof window !== 'undefined' && typeof window.alert === 'function') {
+                    window.alert('Failed to copy to clipboard.');
+                }
+            }
+        };
+
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+            navigator.clipboard.writeText(textToCopy)
+                .then(handleSuccess)
+                .catch(() => {
+                    fallbackCopy();
+                });
+        } else {
+            fallbackCopy();
+        }
+    }, [activeTab, result, filteredLogs]);
+
+    const canCopy = activeTab === 'output' ? !!result : filteredLogs.length > 0;
+


web-editor/src/components/ScenarioEditor/BottomPanel.tsx

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Adds a “Copy to clipboard” action in the ScenarioEditor BottomPanel so users can quickly copy the currently active “Output Data” or “Logs” content, with brief success feedback.

Changes:

Adds a Copy/Copied UI control to the Output/Logs tab bar and copies tab-specific content (pretty JSON for Output, filtered lines for Logs).
Introduces temporary “Copied!” feedback state with timeout cleanup.
Updates BottomPanel tab layout styling to accommodate a right-aligned action button.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
web-editor/src/styles/BottomPanel.module.css	Adds layout styles for a tab group + copy button in the tab header.
web-editor/src/components/ScenarioEditor/BottomPanel.tsx	Implements copy-to-clipboard logic, success feedback state, and integrates the Copy button into the tab header.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web-editor/src/components/ScenarioEditor/BottomPanel.tsx

+                    {canCopy && (
+                        <button
+                            className={`${styles.copyButton} ${copied ? styles.copyButtonSuccess : ''}`}
+                            onClick={handleCopy}
+                            aria-label="Copy to clipboard"
+                            type="button"
+                        >


web-editor/src/components/ScenarioEditor/BottomPanel.tsx

RomanPszonka

please address copilot suggestions

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Adds a “Copy to clipboard” action to the ScenarioEditor BottomPanel so users can quickly copy the currently displayed Output Data (pretty-printed JSON) or Logs (respecting the active log-level filter), addressing issue #108.

Changes:

Introduces a copy-to-clipboard button with temporary “Copied!” success feedback in the BottomPanel tab bar.
Implements clipboard copy with navigator.clipboard.writeText plus a DOM-based fallback for older/blocked environments.
Updates BottomPanel tab bar styling to accommodate right-aligned actions and adjusts status badge coloring.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
web-editor/src/styles/BottomPanel.module.css	Adds layout styles for a tab group + right-aligned copy button and success state styling.
web-editor/src/components/ScenarioEditor/BottomPanel.tsx	Implements copy behavior, success feedback timing/cleanup, and UI placement next to the Output/Logs tabs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web-editor/src/components/ScenarioEditor/BottomPanel.tsx

+        }
+    }, [activeTab, result, filteredLogs]);
+
+    const canCopy = activeTab === 'output' ? !!result : filteredLogs.length > 0;


web-editor/src/components/ScenarioEditor/BottomPanel.tsx

+        if (typeof navigator !== 'undefined' && navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+            navigator.clipboard.writeText(textToCopy)
+                .then(handleSuccess)
+                .catch(() => {
+                    fallbackCopy();
+                });


hrishiballal

Thank you for this, this is very handy and my JS is very basic so looking forward to testing it and will add issues if there is a problem.

Add "Copy to clipboard" button for Output Data and Logs in test step …

3ddf79f

…panel For more details see issue #108

seslash requested review from RomanPszonka, Copilot and hrishiballal March 13, 2026 18:26

seslash self-assigned this Mar 13, 2026

seslash added the enhancement New feature or request label Mar 13, 2026

Copilot started reviewing on behalf of seslash March 13, 2026 18:26 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

Potential fix for pull request finding

2eb0492

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

seslash requested a review from Copilot March 13, 2026 19:02

Copilot started reviewing on behalf of seslash March 13, 2026 19:02 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

Potential fix for pull request finding

d81816a

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

seslash requested a review from Copilot March 13, 2026 19:12

Copilot started reviewing on behalf of seslash March 13, 2026 19:13 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

RomanPszonka requested changes Mar 14, 2026

View reviewed changes

Apply suggestions from code review

828c8ae

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

seslash requested a review from Copilot March 17, 2026 22:38

Copilot started reviewing on behalf of seslash March 17, 2026 22:38 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

hrishiballal approved these changes Mar 18, 2026

View reviewed changes

Resolve comments

ec27edf

seslash merged commit c19b6be into main Mar 18, 2026
2 checks passed

seslash deleted the add_copy_button branch March 18, 2026 20:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "Copy to clipboard" button for Output Data and Logs in test step panel#109

Add "Copy to clipboard" button for Output Data and Logs in test step panel#109
seslash merged 5 commits intomainfrom
add_copy_button

seslash commented Mar 13, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RomanPszonka left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

hrishiballal left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

seslash commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RomanPszonka left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

hrishiballal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

seslash commented Mar 13, 2026 •

edited

Loading