From 788dab94caef634d7782f0d6a7efe605fd9ea8d3 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 29 Sep 2020 15:08:21 -0400
Subject: [PATCH] refactor: CopyButton to Copyable component

---
 ui/core/app/components/copy-button/index.hbs  | 19 ---------------
 ui/core/app/components/copyable/index.hbs     | 23 +++++++++++++++++++
 .../{copy-button => copyable}/index.js        |  7 +++---
 ui/core/app/styles/app.scss                   |  4 ++++
 .../components/copy-button-test.js            | 14 -----------
 .../integration/components/copyable-test.js   | 15 ++++++++++++
 ui/core/translations/actions/en-us.yaml       |  3 +--
 7 files changed, 46 insertions(+), 39 deletions(-)
 delete mode 100644 ui/core/app/components/copy-button/index.hbs
 create mode 100644 ui/core/app/components/copyable/index.hbs
 rename ui/core/app/components/{copy-button => copyable}/index.js (89%)
 delete mode 100644 ui/core/tests/integration/components/copy-button-test.js
 create mode 100644 ui/core/tests/integration/components/copyable-test.js

diff --git a/ui/core/app/components/copy-button/index.hbs b/ui/core/app/components/copy-button/index.hbs
deleted file mode 100644
index 94dca5ce1..000000000
--- a/ui/core/app/components/copy-button/index.hbs
+++ /dev/null
@@ -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}}
diff --git a/ui/core/app/components/copyable/index.hbs b/ui/core/app/components/copyable/index.hbs
new file mode 100644
index 000000000..848fa7685
--- /dev/null
+++ b/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}}
diff --git a/ui/core/app/components/copy-button/index.js b/ui/core/app/components/copyable/index.js
similarity index 89%
rename from ui/core/app/components/copy-button/index.js
rename to ui/core/app/components/copyable/index.js
index 33f444ed0..f77b4a4d9 100644
--- a/ui/core/app/components/copy-button/index.js
+++ b/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));
     }
   }
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index b1a6af3c1..9e72b055f 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -80,3 +80,7 @@
     }
   }
 }
+
+.copyable .copyable-button {
+  padding: 0rem;
+}
diff --git a/ui/core/tests/integration/components/copy-button-test.js b/ui/core/tests/integration/components/copy-button-test.js
deleted file mode 100644
index be5d05a01..000000000
--- a/ui/core/tests/integration/components/copy-button-test.js
+++ /dev/null
@@ -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');
-  });
-});
diff --git a/ui/core/tests/integration/components/copyable-test.js b/ui/core/tests/integration/components/copyable-test.js
new file mode 100644
index 000000000..07be2788f
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/ui/core/translations/actions/en-us.yaml b/ui/core/translations/actions/en-us.yaml
index 5598ee942..7e7a9002a 100644
--- a/ui/core/translations/actions/en-us.yaml
+++ b/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
\ No newline at end of file
+edit-form: Edit Form
\ No newline at end of file