refactor: CopyButton to Copyable component

ui/core/app/components/copy-button/index.hbs

@@ -1,19 +0,0 @@
-{{#if this.isClipboardLibrarySupported}}
-  <span
-    {{did-insert this.register}}
-    {{will-destroy this.destroy}}
-  >
-    <span id={{this.targetId}} class="copy-target">
-      {{yield}}
-    </span>
-
-    <Rose::Button
-      class="copy-button"
-      @iconRight={{this.icon}}
-      aria-label={{t "resources.actions.copy"}}
-      data-clipboard-target={{concat "#" this.targetId}}
-    />
-  </span>
-{{else}}
-  {{yield}}
-{{/if}}

ui/core/app/components/copyable/index.hbs

@@ -0,0 +1,23 @@
+{{#if this.isClipboardLibrarySupported}}
+  <span
+    id={{this.id}}
+    aria-labelledby={{concat "copyable-text-" this.id}}
+    class="copyable"
+    {{did-insert this.register}}
+    {{will-destroy this.destroy}}
+  >
+    <span class="copyable-content">
+      {{yield}}
+    </span>
+
+    <Rose::Button
+      id={{concat "copyable-text-" this.id}}
+      class="copyable-button"
+      @style="ghost"
+      @iconOnly={{this.icon}}
+      data-clipboard-text={{@text}}
+    >{{@text}}</Rose::Button>
+  </span>
+{{else}}
+  {{yield}}
+{{/if}}

ui/core/app/components/copyable/index.js

@@ -7,12 +7,11 @@ import { task, timeout } from 'ember-concurrency';
 import { set } from '@ember/object';
 import { bind } from '@ember/runloop';
 
-export default class CopyButtonComponent extends Component {
+export default class CopyableComponent extends Component {
 
   // =attributes
 
   id = generateComponentID();
-  targetId = `copy-target-${this.id}`;
   icon = 'copy-action';
 
   @tracked clipboard;
@@ -40,7 +39,7 @@ export default class CopyButtonComponent extends Component {
    * @return {boolean}
    */
   get isClipboardLibrarySupported() {
-    return ClipboardJS?.isSupported();
+    return ClipboardJS.isSupported();
   }
 
   /**
@@ -59,7 +58,7 @@ export default class CopyButtonComponent extends Component {
   @action
   register() {
     if(!this.clipboard) {
-      this.clipboard = new ClipboardJS('.copy-button');
+      this.clipboard = new ClipboardJS('.copyable-button');
       this.clipboard.on('success', bind(this, this.onCopySuccess));
     }
   }

ui/core/app/styles/app.scss

@@ -80,3 +80,7 @@
     }
   }
 }
+
+.copyable .copyable-button {
+  padding: 0rem;
+}

ui/core/tests/integration/components/copy-button-test.js

@@ -1,14 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | copy-button', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    await render(hbs`<CopyButton>text</CopyButton>`);
-    assert.ok(find('.copy-button'));
-    assert.equal(find('.copy-target').textContent.trim(), 'text');
-  });
-});

ui/core/tests/integration/components/copyable-test.js

@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | copyable', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`<Copyable @text="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');
+  });
+});

ui/core/translations/actions/en-us.yaml

@@ -27,5 +27,4 @@ add-members: Add Members
 add-hosts: Add Hosts
 set-password: Set Password
 change-password: Change Password
-edit-form: Edit Form
-copy: Copy
+edit-form: Edit Form