From 2a22d71a143b840a35b6509564058ad5b685fbbb Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Wed, 22 Mar 2023 15:05:01 -0400
Subject: [PATCH] [ui] Copyable server and client attribute values (#16548)

* Copyable server and client attribute values

* Changelog
---
 .changelog/16548.txt                          |  3 +++
 ui/app/components/copy-button.js              |  3 ++-
 ui/app/components/metadata-kv.hbs             |  5 +++++
 ui/app/styles/components/copy-button.scss     |  4 ++++
 ui/app/styles/core/buttons.scss               |  4 ++++
 ui/app/templates/clients/client/index.hbs     |  1 +
 .../components/attributes-section.hbs         |  4 ++--
 .../templates/components/attributes-table.hbs |  1 +
 ui/app/templates/components/copy-button.hbs   | 22 +++++++++++++------
 ui/app/templates/servers/server/index.hbs     |  9 +++++++-
 10 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 .changelog/16548.txt

diff --git a/.changelog/16548.txt b/.changelog/16548.txt
new file mode 100644
index 000000000..ffdb8f5e0
--- /dev/null
+++ b/.changelog/16548.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added copy-to-clipboard buttons to server and client pages
+```
diff --git a/ui/app/components/copy-button.js b/ui/app/components/copy-button.js
index 979ecd701..cf12ae24e 100644
--- a/ui/app/components/copy-button.js
+++ b/ui/app/components/copy-button.js
@@ -1,10 +1,11 @@
 import Component from '@ember/component';
 import { task, timeout } from 'ember-concurrency';
-import { classNames } from '@ember-decorators/component';
+import { classNames, classNameBindings } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
 @classic
 @classNames('copy-button')
+@classNameBindings('inset')
 export default class CopyButton extends Component {
   clipboardText = null;
   state = null;
diff --git a/ui/app/components/metadata-kv.hbs b/ui/app/components/metadata-kv.hbs
index 79ddc0ce4..48fa99692 100644
--- a/ui/app/components/metadata-kv.hbs
+++ b/ui/app/components/metadata-kv.hbs
@@ -51,6 +51,11 @@
       {{~@key}}
     </td>
     <td title="{{@value}}">
+      <CopyButton
+        @inset={{true}}
+        @compact={{true}}
+        @clipboardText={{@value}}
+      />
       <span data-test-value>{{@value}}</span>
       {{#if @editable}}
       <button class="button is-light is-compact edit-existing-metadata-button" type="button"
diff --git a/ui/app/styles/components/copy-button.scss b/ui/app/styles/components/copy-button.scss
index 163aaddb6..77d760af2 100644
--- a/ui/app/styles/components/copy-button.scss
+++ b/ui/app/styles/components/copy-button.scss
@@ -2,6 +2,10 @@
   padding-left: 0.5rem;
   margin-bottom: 2px;
 
+  &.inset {
+    display: inline-block;
+  }
+
   .button {
     color: inherit;
 
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
index e2269bd71..9861eb597 100644
--- a/ui/app/styles/core/buttons.scss
+++ b/ui/app/styles/core/buttons.scss
@@ -42,6 +42,10 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
     box-shadow: none;
   }
 
+  &.is-inset {
+    background-color: transparent;
+  }
+
   &.is-disabled {
     opacity: 0.7;
     box-shadow: none;
diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
index fdf962818..5560f63e2 100644
--- a/ui/app/templates/clients/client/index.hbs
+++ b/ui/app/templates/clients/client/index.hbs
@@ -808,6 +808,7 @@
         data-test-attributes
         @attributePairs={{this.model.attributes.structured}}
         @class="attributes-table"
+        @copyable={{true}}
       />
     </div>
   </div>
diff --git a/ui/app/templates/components/attributes-section.hbs b/ui/app/templates/components/attributes-section.hbs
index bed9dd8be..8908abca6 100644
--- a/ui/app/templates/components/attributes-section.hbs
+++ b/ui/app/templates/components/attributes-section.hbs
@@ -6,9 +6,9 @@
       </td>
     </tr>
     <AttributesSection @prefix={{if this.prefix (concat this.prefix "." key) key}} @attributes={{value}}
-    @key={{key}} @value={{value}} @editable={{@editable}} @onKVSave={{@onKVSave}} />
+    @key={{key}} @value={{value}} @editable={{@editable}} @onKVSave={{@onKVSave}} @copyable={{@copyable}} />
   {{else}}
     <MetadataKv @prefix={{this.prefix}}
-    @key={{key}} @value={{value}} @editable={{@editable}} @onKVSave={{@onKVSave}} />
+    @key={{key}} @value={{value}} @editable={{@editable}} @onKVSave={{@onKVSave}} @copyable={{@copyable}} />
   {{/if}}
 {{/each-in}}
diff --git a/ui/app/templates/components/attributes-table.hbs b/ui/app/templates/components/attributes-table.hbs
index 8be2385df..6a589aa67 100644
--- a/ui/app/templates/components/attributes-table.hbs
+++ b/ui/app/templates/components/attributes-table.hbs
@@ -10,6 +10,7 @@
       @editable={{@editable}}
       @onKVEdit={{@onKVEdit}}
       @onKVSave={{@onKVSave}}
+      @copyable={{@copyable}}
     />
   </tbody>
 </table>
diff --git a/ui/app/templates/components/copy-button.hbs b/ui/app/templates/components/copy-button.hbs
index 61e6f86de..616fbbd4a 100644
--- a/ui/app/templates/components/copy-button.hbs
+++ b/ui/app/templates/components/copy-button.hbs
@@ -1,20 +1,28 @@
 {{#if (eq this.state 'success')}}
   <div class='button is-small is-static {{if @compact "is-compact"}} {{unless @border "is-borderless"}}'>
-    <span class="tooltip text-center always-active" role="tooltip" aria-label="Copied!">
-      {{x-icon 'copy-success'}}
-    </span>
+    {{#if @inset}}
+      <span aria-label="Copied!">{{x-icon 'copy-success'}}</span>
+    {{else}}
+      <span class="tooltip text-center always-active" role="tooltip" aria-label="Copied!">
+        {{x-icon 'copy-success'}}
+      </span>
+    {{/if}}
     {{yield}}
   </div>
 {{else if (eq this.state 'error')}}
   <div class='button is-small is-static {{if @compact "is-compact"}} {{unless @border "is-borderless"}}'>
-    <span class="tooltip text-center" role="tooltip" aria-label="Error copying">
-      {{x-icon 'alert-triangle'}}
-    </span>
+    {{#if @inset}}
+      <span aria-label="Error copying">{{x-icon 'alert-triangle'}}</span>
+    {{else}}
+      <span class="tooltip text-center" role="tooltip" aria-label="Error copying">
+        {{x-icon 'alert-triangle'}}
+      </span>
+    {{/if}}
     {{yield}}
   </div>
 {{else}}
   <AddonCopyButton
-    @class="button is-small {{if @compact "is-compact"}} {{unless @border "is-borderless"}}"
+    @class="button is-small {{if @compact "is-compact"}} {{unless @border "is-borderless"}} {{if @inset "is-inset"}}"
     @clipboardText={{this.clipboardText}}
     @success={{perform this.indicateSuccess}}
     @error={{action (mut this.state) "error"}}
diff --git a/ui/app/templates/servers/server/index.hbs b/ui/app/templates/servers/server/index.hbs
index fd931606a..82b3d2e5b 100644
--- a/ui/app/templates/servers/server/index.hbs
+++ b/ui/app/templates/servers/server/index.hbs
@@ -34,7 +34,14 @@
         <t.body as |row|>
           <tr data-test-server-tag>
             <td>{{row.model.name}}</td>
-            <td>{{row.model.value}}</td>
+            <td>
+              <CopyButton
+                @inset={{true}}
+                @compact={{true}}
+                @clipboardText={{row.model.value}}
+              />
+              {{row.model.value}}
+            </td>
           </tr>
         </t.body>
       </ListTable>