Skip to content

Fix:Bug:API Key copy action lacks success feedback (Copied! text/icon/tooltip) after clicking <Copy API Key> #1564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
francmart514 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix:Bug:API Key copy action lacks success feedback (Copied! text/icon/tooltip) after clicking <Copy API Key> #1564

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
47be401
Fix:Bug:API Key copy action lacks success feedback (Copied! text/icon…
francmart514 Apr 27, 2026
050ddfa
update due to coderabbitai feedback relative to Capybara wait time an…
francmart514 Apr 27, 2026
47c0f39
updated due to Nitpick comments relative feedback from coderabbitai
francmart514 Apr 27, 2026
3d3c94a
updated per feedback
francmart514 Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 24 additions & 7 deletions app/javascript/controllers/clipboard_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
static targets = ["source", "iconDefault", "iconSuccess"];
static targets = ["source", "iconDefault", "iconSuccess", "textDefault", "textSuccess"];

copy(event) {
event.preventDefault();
Expand All @@ -18,11 +18,28 @@ export default class extends Controller {
}

showSuccess() {
this.iconDefaultTarget.classList.add("hidden");
this.iconSuccessTarget.classList.remove("hidden");
setTimeout(() => {
this.iconDefaultTarget.classList.remove("hidden");
this.iconSuccessTarget.classList.add("hidden");
}, 3000);
this.toggleTarget("iconDefault", true);
this.toggleTarget("iconSuccess", false);
this.toggleTarget("textDefault", true);
this.toggleTarget("textSuccess", false);

clearTimeout(this.resetTimeout);
this.resetTimeout = setTimeout(() => {
this.toggleTarget("iconDefault", false);
this.toggleTarget("iconSuccess", true);
this.toggleTarget("textDefault", false);
this.toggleTarget("textSuccess", true);
}, 2000);
}

disconnect() {
clearTimeout(this.resetTimeout);
}

toggleTarget(targetName, hide) {
const hasTarget = this[`has${targetName[0].toUpperCase()}${targetName.slice(1)}Target`];
if (!hasTarget) return;

this[`${targetName}Target`].classList.toggle("hidden", hide);
}
}
12 changes: 6 additions & 6 deletions app/views/settings/api_keys/created.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
<div class="flex items-center justify-between gap-3">
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
<%= render DS::Button.new(
text: "Copy API Key",
variant: "ghost",
icon: "copy",
data: { action: "clipboard#copy" }
) %>
<button type="button" data-action="clipboard#copy" class="font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700">
<span data-clipboard-target="iconDefault"><%= icon("copy", size: "md") %></span>
<span class="hidden" data-clipboard-target="iconSuccess"><%= icon("check", size: "md") %></span>
<span data-clipboard-target="textDefault">Copy API Key</span>
<span class="hidden" data-clipboard-target="textSuccess">Copied!</span>
</button>
</div>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions app/views/settings/api_keys/created.turbo_stream.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
<div class="flex items-center justify-between gap-3">
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
<%= render DS::Button.new(
text: "Copy API Key",
variant: "ghost",
icon: "copy",
data: { action: "clipboard#copy" }
) %>
<button type="button" data-action="clipboard#copy" class="font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700">
<span data-clipboard-target="iconDefault"><%= icon("copy", size: "md") %></span>
<span class="hidden" data-clipboard-target="iconSuccess"><%= icon("check", size: "md") %></span>
<span data-clipboard-target="textDefault">Copy API Key</span>
<span class="hidden" data-clipboard-target="textSuccess">Copied!</span>
</button>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
</div>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions app/views/settings/api_keys/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
<div class="flex items-center justify-between gap-3">
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
<%= render DS::Button.new(
text: "Copy API Key",
variant: "ghost",
icon: "copy",
data: { action: "clipboard#copy" }
) %>
<button type="button" data-action="clipboard#copy" class="font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700">
<span data-clipboard-target="iconDefault"><%= icon("copy", size: "md") %></span>
<span class="hidden" data-clipboard-target="iconSuccess"><%= icon("check", size: "md") %></span>
<span data-clipboard-target="textDefault">Copy API Key</span>
<span class="hidden" data-clipboard-target="textSuccess">Copied!</span>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -113,12 +113,12 @@
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
<div class="flex items-center justify-between gap-3">
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
<%= render DS::Button.new(
text: "Copy API Key",
variant: "ghost",
icon: "copy",
data: { action: "clipboard#copy" }
) %>
<button type="button" data-action="clipboard#copy" class="font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700">
<span data-clipboard-target="iconDefault"><%= icon("copy", size: "md") %></span>
<span class="hidden" data-clipboard-target="iconSuccess"><%= icon("check", size: "md") %></span>
<span data-clipboard-target="textDefault">Copy API Key</span>
<span class="hidden" data-clipboard-target="textSuccess">Copied!</span>
</button>
</div>
</div>
</div>
Expand Down
17 changes: 17 additions & 0 deletions test/system/settings/api_keys_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,23 @@ class Settings::ApiKeysTest < ApplicationSystemTestCase
assert_text "/api/v1/accounts"
end

test "should show temporary copied feedback when copying api key" do
ApiKey.create!(
user: @user,
name: "Clipboard API Key",
display_key: "clipboard_key_123",
scopes: [ "read" ]
)

visit settings_api_key_path
page.execute_script("Object.defineProperty(navigator, 'clipboard', { value: { writeText: () => Promise.resolve() }, writable: true, configurable: true })")

click_button "Copy API Key"

assert_selector 'span[data-clipboard-target="textSuccess"]', text: "Copied!", visible: true
assert_selector 'span[data-clipboard-target="iconSuccess"]', visible: true
end
Comment thread
coderabbitai[bot] marked this conversation as resolved.

test "should allow regenerating API key" do
api_key = ApiKey.create!(
user: @user,
Expand Down