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

app/javascript/controllers/clipboard_controller.js

@@ -1,7 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["source", "iconDefault", "iconSuccess"];
+  static targets = ["source", "iconDefault", "iconSuccess", "textDefault", "textSuccess"];
+  static values = { successDuration: { type: Number, default: 2500 } };
 
   copy(event) {
     event.preventDefault();
@@ -18,11 +19,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);
+    }, this.successDurationValue);
+  }
+
+  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);
   }
 }

app/views/settings/api_keys/_copy_button.html.erb

@@ -0,0 +1,8 @@
+<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-surface-inset-hover">
+  <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"><%= t("settings.api_keys.shared.copy_key") %></span>
+  <span class="hidden" data-clipboard-target="textSuccess"><%= t("settings.api_keys.shared.copied") %></span>
+</button>

app/views/settings/api_keys/created.html.erb

@@ -24,12 +24,7 @@
       <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" }
-          ) %>
+          <%= render "settings/api_keys/copy_button" %>
         </div>
       </div>
     </div>

app/views/settings/api_keys/created.turbo_stream.erb

@@ -29,12 +29,7 @@
             <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" }
-                ) %>
+                <%= render "settings/api_keys/copy_button" %>
               </div>
             </div>
           </div>

app/views/settings/api_keys/show.html.erb

@@ -25,12 +25,7 @@
         <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" }
-            ) %>
+            <%= render "settings/api_keys/copy_button" %>
           </div>
         </div>
       </div>
@@ -113,12 +108,7 @@
         <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" }
-            ) %>
+            <%= render "settings/api_keys/copy_button" %>
           </div>
         </div>
       </div>

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

@@ -11,6 +11,9 @@ en:
         read_balances: "View Balances"
         write_transactions: "Create Transactions"
     api_keys:
+      shared:
+        copy_key: "Copy API Key"
+        copied: "Copied!"
       show:
         title: "API Key Management"
         no_api_key:

test/system/settings/api_keys_test.rb

@@ -83,6 +83,25 @@ 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"
+
+    using_wait_time 5 do
+      assert_selector 'span[data-clipboard-target="textSuccess"]', text: "Copied!", visible: true
+      assert_selector 'span[data-clipboard-target="iconSuccess"]', visible: true
+    end
+  end
+
   test "should allow regenerating API key" do
     api_key = ApiKey.create!(
       user: @user,