refactor: Show acknowledgement text when copied using copyabl

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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');