[MISC] Add copy-to-clipboard button for file execution ID in LogModal

[chandrasekharan-zipstack]

What

• Add a copy icon button next to the file execution ID in the Execution Log Details modal

Why

• Improves user experience by allowing quick copy of file execution IDs to clipboard, consistent with existing execution ID copy functionality

How

• Modified LogModal.jsx to display copy button for both execution ID and file execution ID
• Added corresponding CSS styling in LogModal.css for the copy button appearance

Can this PR break any existing features. If yes, please list possible items. If no, please explain why.

• No, this is a new feature addition that only adds a UI button without modifying existing functionality

Notes on Testing

• Test copy button functionality in LogModal when viewing execution logs with file IDs
• Verify the button appears alongside the execution ID in the modal title
• Confirm the copied text matches the file execution ID

Screenshots

Checklist

• I have read and understood the Contribution Guidelines

[coderabbitai]

Warning

Rate limit exceeded

@chandrasekharan-zipstack has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 7 minutes and 56 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Walkthrough

Adds a reusable useCopyToClipboard hook and integrates copy-to-clipboard buttons in LogModal and DetailedLogs; updates LogModal CSS with .log-modal-title and .copy-btn-outlined styles and adjusts .clear-button spacing.

Changes

Cohort / File(s)	Summary
Log Modal — UI & Styles frontend/src/components/logging/log-modal/LogModal.jsx, frontend/src/components/logging/log-modal/LogModal.css	JSX: computes displayId (fileId or executionId), renders "File Execution ID {displayId}" title and conditionally a copy Button that invokes the new clipboard helper. CSS: reformats .clear-button, adds .log-modal-title and nested .copy-btn-outlined rules plus hover state.
Detailed Logs — UI frontend/src/components/logging/detailed-logs/DetailedLogs.jsx	Replaces an in-component clipboard helper with the new useCopyToClipboard hook and updates the Execution ID copy button to call copyToClipboard(id, "Execution ID"); minor formatting commas.
New Hook frontend/src/hooks/useCopyToClipboard.js	Adds useCopyToClipboard hook that validates navigator.clipboard, writes text via clipboard.writeText, and emits success/error alerts via useAlertStore; exported as a named export.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Modal as LogModal / DetailedLogs (UI)
  participant Hook as useCopyToClipboard
  participant Clipboard as Browser Clipboard (navigator.clipboard)
  participant Alert as Alert Store

  User->>Modal: Click copy button
  Modal->>Hook: copyToClipboard(displayId, "Label")
  Hook->>Clipboard: writeText(displayId)
  alt writeText succeeds
    Clipboard-->>Hook: Promise resolved
    Hook->>Alert: success("Label copied to clipboard")
    Alert-->>Modal: show success
  else writeText fails
    Clipboard-->>Hook: Promise rejected
    Hook->>Alert: error("Failed to copy: <err>")
    Alert-->>Modal: show error
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a copy-to-clipboard button for file execution ID in LogModal, which aligns with the core objective of the PR.
Description check	✅ Passed	The PR description is comprehensive and includes all major required sections: What, Why, How, breaking changes assessment, testing notes, screenshots, and a completed checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/logging/log-modal/LogModal.jsx`:
- Around line 180-193: The title and copy button in LogModal.jsx can produce a
trailing dash and copy an empty/undefined id; update the rendering for displayId
(derived from executionId/fileId) so the title omits " - {displayId}" when
displayId is falsy, and guard the copy action by either hiding/disabling the
Copy Button when displayId is missing or by preventing handleCopyToClipboard
from being called with an empty value; also add an accessible name to the
icon-only Button (e.g., aria-label or title) so the CopyOutlined icon is
announced, and reference the existing symbols displayId, fileId, executionId,
handleCopyToClipboard, and the Button/CopyOutlined in LogModal.jsx when making
the changes.

🧹 Nitpick comments (1)

frontend/src/components/logging/log-modal/LogModal.jsx (1)

35-57: Consider extracting the clipboard helper to a shared utility.
There’s a near-identical helper in frontend/src/components/logging/detailed-logs/DetailedLogs.jsx (lines 124-146). A shared hook/utility would avoid drift in error handling and alert wording.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/logging/log-modal/LogModal.jsx`:
- Around line 33-35: The UI always labels the shown ID as "File Execution ID"
even when displayId comes from executionId; update the logic around displayId
(where fileId || executionId is set) to also compute a corresponding idLabel
(e.g., use "File ID" when fileId is present, otherwise "Execution ID") and
replace the hard-coded title strings in the LogModal component (references:
displayId, fileId, executionId) so both the top title and the secondary title
(the other occurrence around the later block) render the correct label based on
which ID is used.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[athul-rs]

lgtm