fix(settings): show 'Copied!' feedback on API key copy button (#1563)

[RenzoMXD]

Summary

• Fixes the missing visual confirmation when clicking Copy API Key on the API Key settings page.
• The button now swaps to a check icon + "Copied!" label for ~3 seconds after copy, then reverts. Clipboard write itself was already working.
• Touches the two relevant views and one locale file. No JS controller change required — the existing clipboard_controller.js already handles the swap; the views just weren't supplying the targets it needs.

Root cause

clipboard_controller#showSuccess() toggles data-clipboard-target="iconDefault" and iconSuccess elements. The api_keys views rendered a single DS::Button with data-action="clipboard#copy" but did not provide those targets, so the controller threw a missing-target error on click and no feedback rendered.

Fix

Wrap each DS::Button Copy action in iconDefault/iconSuccess clipboard-target spans, with the success span containing a parallel DS::Button using the check icon and the new "Copied!" label. This matches the existing working pattern in app/views/mfa/new.html.erb, app/views/invite_codes/_invite_code.html.erb, and app/views/settings/profiles/show.html.erb.

Files:

• app/views/settings/api_keys/show.html.erb — both the newly created and current_api_key sections.
• app/views/settings/api_keys/created.html.erb.
• config/locales/views/settings/api_keys/en.yml — added copied: "Copied!" under each affected section.

Test plan

• Manual UI test against a clean self-hosted Docker stack:
  • Reproduced the original bug (Copy button → clipboard writes, no visible feedback, Stimulus "missing target" error in the console).
  • Rebuilt with this branch and verified: clicking Copy swaps to "✓ Copied!" for ~3s, then reverts. No console errors.
  • Verified on both settings/api_keys/show (currently active key) and settings/api_keys/created (just-after-creation flow).
• bundle exec erb_lint app/views/settings/api_keys/show.html.erb app/views/settings/api_keys/created.html.erb → No errors.
• bundle exec brakeman --no-pager --no-progress → 0 security warnings.

Notes

• Only en.yml is updated; the other 13 locale files for settings/api_keys fall back to English for the new copied key. Translation PRs can follow separately, consistent with how other recent UI strings have been added.
• The PR title and branch name retain the old fix/1668- slug because this branch was repurposed in-place — the previous content (transaction status filter for enable_banking) is now covered by the merged work tracked in fix(transactions): include enable_banking in pending/confirmed status filter #1885.

Fixes #1563

Summary by CodeRabbit

• New Features
  • Improved API key copy-to-clipboard experience: the UI now shows a distinct visual success state (checkmark + success text) after copying, providing clearer feedback in both newly-created and current API key views.
• Documentation
  • Added localized "Copied!" text for API key screens.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: be371a70-d95c-4f5a-ad8d-06088d97f09c

📥 Commits

Reviewing files that changed from the base of the PR and between bca330c and 12ed06b.

📒 Files selected for processing (1)

• config/locales/views/settings/api_keys/en.yml

✅ Files skipped from review due to trivial changes (1)

• config/locales/views/settings/api_keys/en.yml

---

📝 Walkthrough

Walkthrough

API key views now render two clipboard-targeted button states (default and hidden success) so the clipboard controller can toggle to a "Copied!" state; three locale entries for copied: "Copied!" were added to support the success text.

Changes

API Key Copy Button Success Feedback

Layer / File(s)	Summary
Two-state copy button UI pattern in API key views app/views/settings/api_keys/created.html.erb, app/views/settings/api_keys/show.html.erb	Replaced single clipboard copy buttons with paired data-clipboard-target wrappers: a visible default copy state and a hidden success (checkmark/"Copied!") state so the clipboard controller can swap visibility after copy.
Locale strings for copy feedback across API key views config/locales/views/settings/api_keys/en.yml	Added copied: "Copied!" entries in three view sections (newly_created, current_api_key, new.created) to provide the success label shown after copying.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

• jjmata

Poem

A rabbit taps the copy light, 🐰
Two buttons dance from dark to bright,
Click once — a check and "Copied!" gleam,
A tiny cheer for a tiny stream,
Happy bytes in moonlit night.

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding 'Copied!' feedback to the API key copy button, which is the primary objective of this PR.
Linked Issues check	✅ Passed	All coding requirements from issue #1563 are met: clipboard targets are wired to provide 'Copied!' feedback on copy success, matching standard UX patterns.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing clipboard feedback on API key copy buttons; no unrelated modifications are present.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[sure-design]

Heads-up: duplicate fix in review

PR #1885 (fix(transactions): include enable_banking in pending/confirmed status filter) by @web-dev0521 addresses the same bug (#1668) with an almost identical approach — delegating to Transaction.pending / Transaction.excluding_pending scopes and using PENDING_CHECK_SQL in EntrySearch.

Both PRs are open and non-draft as of today. Maintainers should pick one to merge and close the other to avoid a double-apply. A quick diff comparison would confirm which implementation is preferred.

Posted by automated PR review scan.

---

Generated by Claude Code

[RenzoMXD]

@coderabbitai please review again.

[coderabbitai]

@RenzoMXD Sure! I'll kick off a fresh review of your PR right away.

✅ Actions performed

Full review triggered.

[jjmata]

Review

Simple, correct fix. The clipboard Stimulus controller already supports iconDefault/iconSuccess targets — this PR wires them up to show "Copied!" feedback after the copy action.

One minor UX note:

Both the iconSuccess buttons also have data: { action: "clipboard#copy" }. This means if a user clicks "Copied!" a second time, it copies again (which is probably fine). However, it also means the success state is indefinite — the "Copied!" button stays visible until the page refreshes, since the clipboard controller presumably hides it after a timeout. Worth confirming the existing clipboard controller already handles the reset-after-timeout behavior, otherwise users will be stuck on "Copied!" until they reload.

Missing locale key at end of file:

The en.yml addition for api_keys/created is missing a trailing newline (the file ends with copy_key: "Copy API Key" and the new copied: "Copied!" line is the last line without a newline). Minor, but erb_lint or YAML parsers are sometimes fussy about this.

Otherwise looks good — the three copy button locations are consistently updated.

---

Generated by Claude Code

[RenzoMXD]

@jjmata Thanks for your review.
I've updated code you mentioned. Could you review again please?
thanks.