[ui] Copyable server and client attribute values (#16548)

* Copyable server and client attribute values

* Changelog

.changelog/16548.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added copy-to-clipboard buttons to server and client pages
+```

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;

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"

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;
 

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;

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>

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

ui/app/templates/components/attributes-table.hbs

@@ -10,6 +10,7 @@
       @editable={{@editable}}
       @onKVEdit={{@onKVEdit}}
       @onKVSave={{@onKVSave}}
+      @copyable={{@copyable}}
     />
   </tbody>
 </table>

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!">
+    {{#if @inset}}
-      {{x-icon 'copy-success'}}
+      <span aria-label="Copied!">{{x-icon 'copy-success'}}</span>
-    </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">
+    {{#if @inset}}
-      {{x-icon 'alert-triangle'}}
+      <span aria-label="Error copying">{{x-icon 'alert-triangle'}}</span>
-    </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"}}

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>