From ce2fb39f596e8469047fde67dff3a9821c50add0 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 30 Sep 2020 22:15:30 -0400
Subject: [PATCH] refactor: Show acknowledgement text when copied using copyabl

---
 ui/core/app/components/copyable/index.hbs                 | 4 ++--
 ui/core/app/components/copyable/index.js                  | 8 ++++----
 .../scopes/scope/auth-methods/auth-method/-header.hbs     | 6 +++++-
 .../auth-methods/auth-method/accounts/account/-header.hbs | 6 +++++-
 .../auth-method/accounts/account/set-password/-header.hbs | 6 +++++-
 .../scope/auth-methods/auth-method/accounts/index.hbs     | 6 +++++-
 ui/core/app/templates/scopes/scope/auth-methods/index.hbs | 6 +++++-
 .../app/templates/scopes/scope/groups/group/-header.hbs   | 6 +++++-
 .../app/templates/scopes/scope/groups/group/members.hbs   | 6 +++++-
 ui/core/app/templates/scopes/scope/groups/index.hbs       | 6 +++++-
 .../project/host-catalogs/host-catalog/-header.hbs        | 6 +++++-
 .../host-catalogs/host-catalog/host-sets/-header.hbs      | 6 +++++-
 .../host-catalog/host-sets/host-set/hosts.hbs             | 6 +++++-
 .../host-catalogs/host-catalog/host-sets/index.hbs        | 6 +++++-
 .../project/host-catalogs/host-catalog/hosts/-header.hbs  | 6 +++++-
 .../project/host-catalogs/host-catalog/hosts/index.hbs    | 6 +++++-
 .../scopes/scope/projects/project/host-catalogs/index.hbs | 6 +++++-
 .../scopes/scope/projects/project/sessions/index.hbs      | 6 +++++-
 .../scopes/scope/projects/project/targets/index.hbs       | 6 +++++-
 .../scope/projects/project/targets/target/-header.hbs     | 6 +++++-
 .../scope/projects/project/targets/target/host-sets.hbs   | 6 +++++-
 ui/core/app/templates/scopes/scope/roles/index.hbs        | 6 +++++-
 ui/core/app/templates/scopes/scope/roles/role/-header.hbs | 6 +++++-
 .../templates/scopes/scope/roles/role/grants/-header.hbs  | 6 +++++-
 .../app/templates/scopes/scope/roles/role/principals.hbs  | 6 +++++-
 .../scopes/scope/roles/role/principals/-header.hbs        | 8 ++++++--
 ui/core/app/templates/scopes/scope/users/index.hbs        | 6 +++++-
 ui/core/app/templates/scopes/scope/users/user/index.hbs   | 6 +++++-
 ui/core/tests/integration/components/copyable-test.js     | 2 +-
 29 files changed, 138 insertions(+), 34 deletions(-)

diff --git a/ui/core/app/components/copyable/index.hbs b/ui/core/app/components/copyable/index.hbs
index fc47d613c..499c4fc43 100644
--- a/ui/core/app/components/copyable/index.hbs
+++ b/ui/core/app/components/copyable/index.hbs
@@ -15,8 +15,8 @@
       class="copyable-button"
       @style="ghost"
       @iconOnly={{this.icon}}
-      title={{@buttonText}}
-    >{{@buttonText}}</Rose::Button>
+      title={{this.copyableButtonText}}
+    >{{this.copyableButtonText}}</Rose::Button>
   </span>
 {{else}}
   {{yield}}
diff --git a/ui/core/app/components/copyable/index.js b/ui/core/app/components/copyable/index.js
index cefc032fa..010c12758 100644
--- a/ui/core/app/components/copyable/index.js
+++ b/ui/core/app/components/copyable/index.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import ClipboardJS from 'clipboard';
 import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 import { generateComponentID } from 'rose/utilities/component-auto-id';
 import { task, timeout } from 'ember-concurrency';
 import { set } from '@ember/object';
@@ -12,10 +11,9 @@ export default class CopyableComponent extends Component {
   // =attributes
 
   id = generateComponentID();
-  copyableButtonId = `copyable-button-${this.id}`;
   icon = 'copy-action';
-
-  @tracked text;
+  copyableButtonId = `copyable-button-${this.id}`;
+  copyableButtonText = this.args.buttonText;
 
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
@@ -29,8 +27,10 @@ export default class CopyableComponent extends Component {
    */
   @task(function * () {
     set(this, 'icon', 'copy-success');
+    set(this, 'copyableButtonText', this.args.acknowledgeText);
     yield timeout(1000);
     set(this, 'icon', 'copy-action');
+    set(this, 'copyableButtonText', this.args.buttonText);
   }).drop() successIconTimer;
 
   // =methods
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
index 0748ed7b8..bd1bc825e 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.auth-method.title"}}</h2>
 <p>{{t "resources.auth-method.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
index c7a1ec474..d67dca8b1 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
@@ -1,4 +1,8 @@
 <h2>{{t "resources.account.title"}}</h2>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
index 1805683a2..c7d1d4670 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.account.title"}}</h2>
 <p>{{t 'resources.account.messages.set-password.description'}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
index d399eb1d8..195e5a00b 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
@@ -24,7 +24,11 @@
             {{account.username}}
           </row.cell>
           <row.cell>
-            <Copyable @text={{account.id}}>
+            <Copyable
+              @text={{account.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{account.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/index.hbs b/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
index 26027d51b..08b4606fe 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
@@ -46,7 +46,11 @@
                 </Rose::Badge>
               </row.cell>
               <row.cell>
-                <Copyable @text={{authMethod.id}}>
+                <Copyable
+                  @text={{authMethod.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{authMethod.id}}</code>
                 </Copyable>
               </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/groups/group/-header.hbs b/ui/core/app/templates/scopes/scope/groups/group/-header.hbs
index a876cafac..ae241529b 100644
--- a/ui/core/app/templates/scopes/scope/groups/group/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/group/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.group.title"}}</h2>
 <p>{{t "resources.group.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/groups/group/members.hbs b/ui/core/app/templates/scopes/scope/groups/group/members.hbs
index ce5eee601..a478d6b83 100644
--- a/ui/core/app/templates/scopes/scope/groups/group/members.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/group/members.hbs
@@ -17,7 +17,11 @@
             {{member.displayName}}
           </row.headerCell>
           <row.cell>
-            <Copyable @text={{member.id}}>
+            <Copyable
+              @text={{member.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{member.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/groups/index.hbs b/ui/core/app/templates/scopes/scope/groups/index.hbs
index 9f9ad3fd2..559fb8314 100644
--- a/ui/core/app/templates/scopes/scope/groups/index.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/index.hbs
@@ -39,7 +39,11 @@
                 <p>{{group.description}}</p>
               </row.headerCell>
               <row.cell>
-                <Copyable @text={{group.id}}>
+                <Copyable
+                  @text={{group.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{group.id}}</code>
                 </Copyable>
               </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
index 8857383a2..647741ad9 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.host-catalog.title"}}</h2>
 <p>{{t "resources.host-catalog.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
index 26afcea96..3c76eafd3 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.host-set.title"}}</h2>
 <p>{{t "resources.host-set.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
index 7b65efa26..74cbbe2bb 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
@@ -25,7 +25,11 @@
             <Rose::Badge>{{host.type}}</Rose::Badge>
           </row.cell>
           <row.cell>
-            <Copyable @text={{host.id}}>
+            <Copyable
+              @text={{host.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{host.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
index f2dff570d..bb5f4c14c 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
@@ -26,7 +26,11 @@
             </Rose::Badge>
           </row.cell>
           <row.cell>
-            <Copyable @text={{hostSet.id}}>
+            <Copyable
+              @text={{hostSet.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{hostSet.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
index f0d679039..d2628a102 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.host.title"}}</h2>
 <p>{{t "resources.host.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
index 87ae8db1a..e29e8dca1 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
@@ -27,7 +27,11 @@
             </Rose::Badge>
           </row.cell>
           <row.cell>
-            <Copyable @text={{host.id}}>
+            <Copyable
+              @text={{host.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{host.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
index 2f758b992..0a70b3ee4 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
@@ -47,7 +47,11 @@
                 </Rose::Badge>
               </row.cell>
               <row.cell>
-                <Copyable @text={{hostCatalog.id}}>
+                <Copyable
+                  @text={{hostCatalog.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{hostCatalog.id}}</code>
                 </Copyable>
               </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs
index b4e5d3e4f..16fc16a1c 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs
@@ -28,7 +28,11 @@
           {{#each @model as |sessionAggregate|}}
             <body.row as |row|>
               <row.headerCell>
-                <Copyable @text={{sessionAggregate.session.id}}>
+                <Copyable
+                  @text={{sessionAggregate.session.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{sessionAggregate.session.id}}</code>
                 </Copyable>
               </row.headerCell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
index ff84ac48e..2cb938f29 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -51,7 +51,11 @@
                 {{/if}}
               </row.cell>
               <row.cell>
-                <Copyable @text={{target.id}}>
+                <Copyable
+                  @text={{target.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{target.id}}</code>
                 </Copyable>
               </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
index b96093e47..b6f507ea4 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.target.title"}}</h2>
 <p>{{t "resources.target.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
index e03aa2610..f6e32b99a 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
@@ -22,7 +22,11 @@
             <Rose::Badge>{{t (concat 'resources.host-set.types.' hostSet.model.type)}}</Rose::Badge>
           </row.cell>
           <row.cell>
-            <Copyable @text={{hostSet.model.id}}>
+            <Copyable
+              @text={{hostSet.model.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{hostSet.model.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/roles/index.hbs b/ui/core/app/templates/scopes/scope/roles/index.hbs
index 417860216..77c5d7d6a 100644
--- a/ui/core/app/templates/scopes/scope/roles/index.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/index.hbs
@@ -41,7 +41,11 @@
                 <p>{{role.description}}</p>
               </row.headerCell>
               <row.cell>
-                <Copyable @text={{role.id}}>
+                <Copyable
+                  @text={{role.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{role.id}}</code>
                 </Copyable>
               </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
index 926771735..03164c9b2 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.role.title"}}</h2>
 <p>{{t "resources.role.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs
index ccea2b2d0..48e974188 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.role.title"}}</h2>
 <p>{{t "resources.role.grant.description"}}</p>
-<Copyable @text={{@model.id}}>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
   <code>{{@model.id}}</code>
 </Copyable>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/roles/role/principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
index 58041d4a0..668b93e4f 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
@@ -21,7 +21,11 @@
             {{t (concat 'resources.role.principal.types.' principal.type)}}
           </row.cell>
           <row.cell>
-            <Copyable @text={{principal.model.id}}>
+            <Copyable
+              @text={{principal.model.id}}
+              @buttonText={{t "actions.copy-to-clipboard"}}
+              @acknowledgeText={{t "states.copied"}}
+            >
               <code>{{principal.model.id}}</code>
             </Copyable>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs
index 057a23f76..499d7ff96 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs
@@ -1,5 +1,9 @@
 <h2>{{t "resources.role.title"}}</h2>
 <p>{{t "resources.role.principal.description"}}</p>
-<Copyable @text={{@model.role.id}}>
-  <code>{{@model.role.id}}</code>
+<Copyable
+  @text={{@model.id}}
+  @buttonText={{t "actions.copy-to-clipboard"}}
+  @acknowledgeText={{t "states.copied"}}
+>
+  <code>{{@model.id}}</code>
 </Copyable>
diff --git a/ui/core/app/templates/scopes/scope/users/index.hbs b/ui/core/app/templates/scopes/scope/users/index.hbs
index 50bcd7b74..7f5154949 100644
--- a/ui/core/app/templates/scopes/scope/users/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/index.hbs
@@ -41,7 +41,11 @@
                 <p>{{user.description}}</p>
               </row.headerCell>
               <row.cell>
-                <Copyable @text={{user.id}}>
+                <Copyable
+                  @text={{user.id}}
+                  @buttonText={{t "actions.copy-to-clipboard"}}
+                  @acknowledgeText={{t "states.copied"}}
+                >
                   <code>{{user.id}}</code>
                 </Copyable>
               </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/users/user/index.hbs b/ui/core/app/templates/scopes/scope/users/user/index.hbs
index 7f9218f1b..e88672ab6 100644
--- a/ui/core/app/templates/scopes/scope/users/user/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/user/index.hbs
@@ -7,7 +7,11 @@
   <page.header>
     <h2>{{t "resources.user.title"}}</h2>
     <p>{{t "resources.user.description"}}</p>
-    <Copyable @text={{@model.id}}>
+    <Copyable
+      @text={{@model.id}}
+      @buttonText={{t "actions.copy-to-clipboard"}}
+      @acknowledgeText={{t "states.copied"}}
+    >
       <code>{{@model.id}}</code>
     </Copyable>
   </page.header>
diff --git a/ui/core/tests/integration/components/copyable-test.js b/ui/core/tests/integration/components/copyable-test.js
index 07be2788f..8d6a29cf9 100644
--- a/ui/core/tests/integration/components/copyable-test.js
+++ b/ui/core/tests/integration/components/copyable-test.js
@@ -7,7 +7,7 @@ module('Integration | Component | copyable', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    await render(hbs`<Copyable @text="Copy me">text</Copyable>`);
+    await render(hbs`<Copyable @buttonText="Copy me">text</Copyable>`);
     assert.ok(find('.copyable'));
     assert.equal(find('.copyable-content').textContent.trim(), 'text');
     assert.equal(find('.copyable-button').textContent.trim(), 'Copy me');