ui: CopyButton amends (#10511)

* ui: Add with-copyable modifier

* Use with-copyable modifier for our own CopyButton

* Move copy-button styling and remove most of `copy-btn`

ui/packages/consul-ui/.docfy-config.js

@@ -2,6 +2,7 @@ const path = require('path');
 
 const autolinkHeadings = require('remark-autolink-headings');
 const refractor = require('refractor');
+const gherkin = require('refractor/lang/gherkin');
 const prism = require('@mapbox/rehype-prism');
 
 const fs = require('fs');
@@ -24,6 +25,7 @@ if($CONSUL_DOCFY_CONFIG.length > 0) {
   }
 }
 
+refractor.register(gherkin);
 refractor.alias('handlebars', 'hbs');
 refractor.alias('shell', 'sh');
 

ui/packages/consul-ui/app/components/buttons/index.scss

@@ -16,6 +16,3 @@ button.type-cancel {
 %app-view-content form button[type='button'].type-delete {
   @extend %dangerous-button;
 }
-button.copy-btn {
-  @extend %copy-button;
-}

ui/packages/consul-ui/app/components/buttons/layout.scss

@@ -34,30 +34,6 @@
   padding-top: calc(0.4em - 1px) !important;
   padding-bottom: calc(0.4em - 1px) !important;
 }
-%copy-button:empty {
-  padding: 0px !important;
-  margin-right: 0;
-  top: -1px;
-}
-%copy-button:empty::after {
-  content: '';
-  display: none;
-  position: absolute;
-  top: -2px;
-  left: -3px;
-  width: 20px;
-  height: 22px;
-}
-%copy-button:empty:hover::after {
-  display: block;
-}
-%copy-button:empty::before {
-  position: relative;
-  z-index: 1;
-}
-%copy-button:not(:empty)::before {
-  margin-right: 4px;
-}
 %internal-button {
   padding: 0.9em 1em;
   text-align: center;

ui/packages/consul-ui/app/components/buttons/skin.scss

@@ -11,20 +11,6 @@
   cursor: default;
   box-shadow: none;
 }
-%copy-button {
-  @extend %button;
-  min-height: 17px;
-}
-%copy-button::before {
-  @extend %with-copy-action-mask, %as-pseudo;
-  background-color: var(--gray-500);
-}
-%copy-button::after {
-  background-color: var(--gray-050);
-}
-%copy-button:not(:empty)::before {
-  margin-right: 10px;
-}
 %primary-button,
 %secondary-button,
 %dangerous-button {
@@ -34,22 +20,6 @@
   box-shadow: $decor-elevation-300;
 }
 /* color */
-%copy-button {
-  color: $color-action;
-  background-color: $color-transparent;
-}
-%copy-button:hover:not(:disabled):not(:active),
-%copy-button:focus {
-  /*frame-grey frame-blue*/
-  color: $color-action;
-  background-color: $gray-050;
-}
-%copy-button:hover::before {
-  background-color: $blue-500;
-}
-%copy-button:active {
-  background-color: $gray-200;
-}
 %primary-button {
   @extend %frame-blue-800;
 }

ui/packages/consul-ui/app/components/copy-button/README.mdx

@@ -1,35 +1,43 @@
 # CopyButton
 
-```hbs preview-template
+Button component used for copy-to-clipboard functionality so the user can easily copy specified text to their clipboard, along with tooltip-like notifications so the user has some sort of feedback to know the value has been copied.
-<p>
-  Icon Only:
-</p>
-<CopyButton
-  @value={{stringToCopy}}
-  @name="Thing"
-/>
 
-<p>
+This component is essentially a composition of our `{{with-copyable}}` modifier, our `{{tooltip}}` modifier plus specific Consul-flavored visual treatment. This is all glued together with our `<StateChart />` component to manage states.
-  Icon and text:
+
-</p>
+Can be used inline to render only a small icon for the button with no other text.
-<CopyButton
+
-  @value={{stringToCopy}}
+```hbs preview-template
-  @name="Thing"
+<figure>
->
+  <figcaption>Icon only</figcaption>
-  Copy me!
+
-</CopyButton>
+  <CopyButton
+    @value={{'stringToCopy'}}
+    @name="Thing"
+  />
+
+</figure>
+
+<figure>
+  <figcaption>Icon and text</figcaption>
+
+  <CopyButton
+    @value={{'stringToCopy'}}
+    @name="Thing"
+  >
+    Copy me!
+  </CopyButton>
+</figure>
 ```
 
-### Arguments
+## Arguments
 
 | Argument | Type | Default | Description |
 | --- | --- | --- | --- |
 | `value` | `String` | | The string to be copied to the clipboard on click |
-| `name` | `String` | | The 'Name' of the string to be copied. Mainly used for giving feedback to the user |
+| `name` | `String` | | The 'Name' of the string to be copied. Mainly used for accessibility reasons and giving feedback to the user |
 
-This component renders a simple button, when clicked copies the value (the `@value` attribute) to the users clipboard. A simple piece of feedback is given to the user in the form of a tooltip. When used inline an empty button is rendered.
 
-### See
+## See
 
 - [Component Source Code](./index.js)
 - [Template Source Code](./index.hbs)

ui/packages/consul-ui/app/components/copy-button/index.hbs

@@ -1,29 +1,30 @@
-<StateChart @src={{chart}} as |State Guard Action dispatch state|>
+<StateChart
-  <Ref @target={{this}} @name="dispatch" @value={{dispatch}} />
+  @src={{this.chart}}
+  as |State Guard Action dispatch state|
+>
   <div
-    {{did-insert this.connect}}
-    {{will-destroy this.disconnect}}
     class="copy-button"
-    id={{this.guid}}
     ...attributes
   >
+{{#let (fn dispatch 'SUCCESS') (fn dispatch 'ERROR') (fn dispatch 'RESET') as |success error reset|}}
     <button
-      title={{concat "Copy " @name " to the clipboard"}}
+      {{with-copyable @value success=success error=error}}
+      aria-label={{t 'components.copy-button.title' name=@name}}
       type="button"
       class="copy-btn"
-      data-clipboard-text={{@value}}
       ...attributes
       {{tooltip
-        (if (state-matches state 'success') (concat 'Copied ' @name '!!') 'There was a problem!')
+        (if (state-matches state 'success') (t 'components.copy-button.success' name=@name) (t 'components.copy-button.error'))
         options=(hash
           trigger='manual'
           showOnCreate=(not (state-matches state 'idle'))
           delay=(array 0 3000)
-          onHidden=(action dispatch 'RESET')
+          onHidden=reset
         )
       }}
     >
       {{~yield~}}
     </button>
+{{/let}}
   </div>
 </StateChart>

ui/packages/consul-ui/app/components/copy-button/index.js

@@ -1,29 +1,9 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
 import chart from './chart.xstate';
 
 export default class CopyButton extends Component {
-  @service('clipboard/os') clipboard;
-  @service('dom') dom;
-
   constructor() {
     super(...arguments);
     this.chart = chart;
-    this.guid = this.dom.guid(this);
-    this._listeners = this.dom.listeners();
-  }
-
-  @action
-  connect() {
-    this._listeners.add(this.clipboard.execute(`#${this.guid} button`), {
-      success: () => this.dispatch('SUCCESS'),
-      error: () => this.dispatch('ERROR'),
-    });
-  }
-
-  @action
-  disconnect() {
-    this._listeners.remove();
   }
 }

ui/packages/consul-ui/app/components/copy-button/index.scss

@@ -0,0 +1,8 @@
+@import './skin';
+@import './layout';
+%copy-button {
+  @extend %button;
+}
+.copy-button button {
+  @extend %copy-button;
+}

ui/packages/consul-ui/app/components/copy-button/layout.scss

@@ -0,0 +1,29 @@
+%copy-button {
+  min-height: 17px;
+}
+%copy-button:empty {
+  padding: 0px !important;
+  margin-right: 0;
+  top: -1px;
+}
+/* this is used to provide a small background to the icon only buttons */
+/* without knocking out any positioning when you hover over */
+%copy-button:empty::after {
+  content: '';
+  display: none;
+  position: absolute;
+  top: -2px;
+  left: -3px;
+  width: 20px;
+  height: 22px;
+}
+%copy-button:empty:hover::after {
+  display: block;
+}
+%copy-button:empty::before {
+  position: relative;
+  z-index: 1;
+}
+%copy-button:not(:empty)::before {
+  margin-right: 4px;
+}

ui/packages/consul-ui/app/components/copy-button/skin.scss

@@ -0,0 +1,22 @@
+%copy-button {
+  color: var(--blue-500);
+  background-color: var(--transparent);
+}
+%copy-button::before {
+  @extend %with-copy-action-mask, %as-pseudo;
+  background-color: var(--gray-500);
+}
+%copy-button::after {
+  background-color: var(--gray-050);
+}
+%copy-button:hover:not(:disabled):not(:active),
+%copy-button:focus {
+  color: var(--blue-500);
+  background-color: var(--gray-050);
+}
+%copy-button:hover::before {
+  background-color: var(--blue-500);
+}
+%copy-button:active {
+  background-color: var(--gray-200);
+}

ui/packages/consul-ui/app/modifiers/with-copyable.js

@@ -0,0 +1,55 @@
+import Modifier from 'ember-modifier';
+import { inject as service } from '@ember/service';
+import { runInDebug } from '@ember/debug';
+
+const typeAssertion = (type, value, withDefault) => {
+  return typeof value === type ? value : withDefault;
+};
+export default class WithCopyableModifier extends Modifier {
+  @service('clipboard/os') clipboard;
+
+  hash = null;
+  source = null;
+
+  connect([value], _hash) {
+    value = typeAssertion('string', value, this.element.innerText);
+    const hash = {
+      success: e => {
+        runInDebug(_ => console.info(`with-copyable: Copied \`${value}\``));
+        return typeAssertion('function', _hash.success, () => {})(e);
+      },
+      error: e => {
+        runInDebug(_ => console.info(`with-copyable: Error copying \`${value}\``));
+        return typeAssertion('function', _hash.error, () => {})(e);
+      },
+    };
+    this.source = this.clipboard
+      .execute(this.element, {
+        text: _ => value,
+        ...hash.options,
+      })
+      .on('success', hash.success)
+      .on('error', hash.error);
+    this.hash = hash;
+  }
+
+  disconnect() {
+    if (this.source && this.hash) {
+      this.source.off('success', this.hash.success).off('error', this.hash.error);
+
+      this.source.destroy();
+      this.hash = null;
+      this.source = null;
+    }
+  }
+
+  // lifecycle hooks
+  didReceiveArguments() {
+    this.disconnect();
+    this.connect(this.args.positional, this.args.named);
+  }
+
+  willRemove() {
+    this.disconnect();
+  }
+}

ui/packages/consul-ui/app/modifiers/with-copyable.mdx

@@ -0,0 +1,79 @@
+# with-copyable
+
+Modifier for adding copy-to-clipboard functionality to any component to allow
+the user to easily copy specified text to their clipboard by clicking on
+something. Mainly an Ember flavoured wrapper for
+[Clipboard.js](https://clipboardjs.com/) which the modifier uses for all its
+functionality.
+
+You can either explicitly specify the content to be copied to the users
+clipboard using the first (and only) parameter but if this is omitted it will
+use the content (`innerText`) of the DOM element it is attached to.
+
+Usually you will want to provide a `success` and `error` callback which you
+can provide with named parameters. An escape hatch through to Clipboard.js
+options is also provided via the `options` named parameter.
+
+
+```hbs preview-template
+<figure>
+  <figcaption>Explicitly specifying the text to be copied as the first parameter</figcaption>
+  <button
+    {{with-copyable "Copied text"
+      success=(action (mut this.copied) value="text")
+      error=(noop)
+    }}
+    type="button"
+  >Click me</button>
+
+  <pre>Clipboard Contents:
+{{this.copied}}</pre>
+</figure>
+```
+
+```hbs preview-template
+<figure>
+  <figcaption>Defaulting to the innerText of the DOM element</figcaption>
+  <button
+    {{with-copyable success=(action (mut this.copied) value="text")}}
+    type="button"
+  >Click <span><br />me</span></button>
+
+  <pre>Clipboard Contents:
+{{this.copied}}</pre>
+</figure>
+```
+
+The Clipboard.js class is provided via a `clipboard/os` Service, also includes
+a `clipboard/local-storage` Service that automatically replaces the OS based
+clipboard during testing to enable you to assert for text that would be copied
+to the clipboard. During acceptance testing there is a specific step
+specifically for this so you don't have to think about it:
+
+```gherkin acceptance-test
+Scenario:
+  When I click copyButton
+  Then I copied "stringToCopy"
+```
+
+## Positional Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `String` | The `innerText` of the element | The string to be copied to the clipboard on click |
+
+## Named Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `success` | `Function` | `(e) => {}` | A function to be called when the text has been successfully copied to the users clipboard |
+| `error` | `Function` | `(e) => {}` | A function to be called when there was an error copying text to the users clipboard |
+| `options` | `Object` | `{}` | An object containing any documented Clipboard.js options |
+
+
+
+## See
+
+- [Modifier Source Code](./index.js)
+
+---

ui/packages/consul-ui/app/services/clipboard/local-storage.js

@@ -1,10 +1,9 @@
-import Service from '@ember/service';
+import Service, { inject as service } from '@ember/service';
-
 import Clipboard from 'clipboard';
 
 class ClipboardCallback extends Clipboard {
-  constructor(trigger, cb) {
+  constructor(trigger, options, cb) {
-    super(trigger);
+    super(trigger, options);
     this._cb = cb;
   }
   onClick(e) {
@@ -17,12 +16,12 @@ class ClipboardCallback extends Clipboard {
 }
 
 export default class LocalStorageService extends Service {
-  storage = window.localStorage;
+  @service('-document') doc;
   key = 'clipboard';
 
-  execute(trigger) {
+  execute(trigger, options) {
-    return new ClipboardCallback(trigger, val => {
+    return new ClipboardCallback(trigger, options, val => {
-      this.storage.setItem(this.key, val);
+      this.doc.defaultView.localStorage.setItem(this.key, val);
     });
   }
 }

ui/packages/consul-ui/app/services/clipboard/os.js

@@ -3,7 +3,7 @@ import Service from '@ember/service';
 import Clipboard from 'clipboard';
 
 export default class OsService extends Service {
-  execute(trigger) {
+  execute() {
-    return new Clipboard(trigger);
+    return new Clipboard(...arguments);
   }
 }

ui/packages/consul-ui/app/styles/components.scss

@@ -10,6 +10,7 @@
 @import 'consul-ui/components/code-editor';
 @import 'consul-ui/components/composite-row';
 @import 'consul-ui/components/confirmation-dialog';
+@import 'consul-ui/components/copy-button';
 @import 'consul-ui/components/definition-table';
 @import 'consul-ui/components/display-toggle';
 @import 'consul-ui/components/dom-recycling-table';

ui/packages/consul-ui/tests/acceptance/components/copy-button.feature

@@ -22,5 +22,5 @@ Feature: components / copy-button
       node: node-0
     ---
     Then the url should be /dc-1/nodes/node-0/health-checks
-    When I click ".healthcheck-output:nth-child(1) button.copy-btn"
+    When I click ".healthcheck-output:nth-child(1) .copy-button button"
     Then I copied "The output"

ui/packages/consul-ui/translations/components/copy-button/en-us.yaml

@@ -0,0 +1,3 @@
+title: Copy {name} to the clipboard
+success: Copied {name}
+error: There was a problem.