From e671478ae6e1059aebba62c8adb4cd81e4091631 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 4 Jul 2019 14:43:04 -0500 Subject: [PATCH 01/28] Add Structure icons --- ui/ember-cli-build.js | 2 +- ui/package.json | 1 + ui/yarn.lock | 5 +++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js index 6e2fb01c596..cfa0fb99667 100644 --- a/ui/ember-cli-build.js +++ b/ui/ember-cli-build.js @@ -11,7 +11,7 @@ module.exports = function(defaults) { blacklist: isProd ? ['ember-freestyle'] : [], }, svg: { - paths: ['public/images/icons'], + paths: ['node_modules/@hashicorp/structure-icons/dist', 'public/images/icons'], optimize: { plugins: [{ removeViewBox: false }], }, diff --git a/ui/package.json b/ui/package.json index 9f7e9ee36e5..fd5eaf14c39 100644 --- a/ui/package.json +++ b/ui/package.json @@ -29,6 +29,7 @@ "@babel/plugin-proposal-object-rest-spread": "^7.4.3", "@ember/jquery": "^0.6.0", "@ember/optional-features": "^0.7.0", + "@hashicorp/structure-icons": "^1.3.0", "broccoli-asset-rev": "^3.0.0", "bulma": "0.6.1", "core-js": "^2.4.1", diff --git a/ui/yarn.lock b/ui/yarn.lock index 8d682c2b483..55d0c6cdf95 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -766,6 +766,11 @@ dependencies: "@glimmer/util" "^0.38.1" +"@hashicorp/structure-icons@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@hashicorp/structure-icons/-/structure-icons-1.3.0.tgz#1c7c1cb43a1c1aa92b073a7aa7956495ae14c3e0" + integrity sha512-wTKpdaAPphEY2kg5QbQTSUlhqLTpBBR1+1dXp4LYTN0PtMSpetyDDDhcSyvKE8i4h2nwPJBRRfeFlE1snaHd7w== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" From fbf729d8bdc19ae7171a1eb3a6291397bdb53be0 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 4 Jul 2019 14:48:43 -0500 Subject: [PATCH 02/28] Add ember-cli-clipboard --- ui/package.json | 1 + ui/yarn.lock | 89 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) diff --git a/ui/package.json b/ui/package.json index fd5eaf14c39..44aa966fbe6 100644 --- a/ui/package.json +++ b/ui/package.json @@ -45,6 +45,7 @@ "ember-auto-import": "^1.2.21", "ember-cli": "~3.4.4", "ember-cli-babel": "^7.1.2", + "ember-cli-clipboard": "^0.13.0", "ember-cli-dependency-checker": "^3.0.0", "ember-cli-deprecation-workflow": "^1.0.1", "ember-cli-eslint": "^5.1.0", diff --git a/ui/yarn.lock b/ui/yarn.lock index 55d0c6cdf95..8e974becebd 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1619,6 +1619,13 @@ babel-plugin-ember-modules-api-polyfill@^2.6.0, babel-plugin-ember-modules-api-p dependencies: ember-rfc176-data "^0.3.8" +babel-plugin-ember-modules-api-polyfill@^2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.9.0.tgz#8503e7b4192aeb336b00265e6235258ff6b754aa" + integrity sha512-c03h50291phJ2gQxo/aIOvFQE2c6glql1A7uagE3XbPXpKVAJOUxtVDjvWG6UAB6BC5ynsJfMWvY0w4TPRKIHQ== + dependencies: + ember-rfc176-data "^0.3.9" + babel-plugin-feature-flags@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/babel-plugin-feature-flags/-/babel-plugin-feature-flags-0.3.1.tgz#9c827cf9a4eb9a19f725ccb239e85cab02036fc1" @@ -3167,6 +3174,15 @@ cli-width@^2.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk= +clipboard@^2.0.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d" + integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ== + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d" @@ -3859,6 +3875,11 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -4122,6 +4143,33 @@ ember-cli-babel@^7.1.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.2.0, ember-cl ensure-posix-path "^1.0.2" semver "^5.5.0" +ember-cli-babel@^7.7.3: + version "7.8.0" + resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.8.0.tgz#e596500eca0f5a7c9aaee755f803d1542f578acf" + integrity sha512-xUBgJQ81fqd7k/KIiGU+pjpoXhrmmRf9pUrqLenNSU5N+yeNFT5a1+w0b+p1F7oBphfXVwuxApdZxrmAHOdA3Q== + dependencies: + "@babel/core" "^7.0.0" + "@babel/plugin-proposal-class-properties" "^7.3.4" + "@babel/plugin-proposal-decorators" "^7.3.0" + "@babel/plugin-transform-modules-amd" "^7.0.0" + "@babel/plugin-transform-runtime" "^7.2.0" + "@babel/polyfill" "^7.0.0" + "@babel/preset-env" "^7.0.0" + "@babel/runtime" "^7.2.0" + amd-name-resolver "^1.2.1" + babel-plugin-debug-macros "^0.3.0" + babel-plugin-ember-modules-api-polyfill "^2.9.0" + babel-plugin-module-resolver "^3.1.1" + broccoli-babel-transpiler "^7.1.2" + broccoli-debug "^0.6.4" + broccoli-funnel "^2.0.1" + broccoli-source "^1.1.0" + clone "^2.1.2" + ember-cli-babel-plugin-helpers "^1.1.0" + ember-cli-version-checker "^2.1.2" + ensure-posix-path "^1.0.2" + semver "^5.5.0" + ember-cli-broccoli-sane-watcher@^2.1.1: version "2.2.2" resolved "https://registry.yarnpkg.com/ember-cli-broccoli-sane-watcher/-/ember-cli-broccoli-sane-watcher-2.2.2.tgz#9bb1b04ddeb2c086aecd8693cbaeca1d88dc160c" @@ -4133,6 +4181,17 @@ ember-cli-broccoli-sane-watcher@^2.1.1: rsvp "^3.0.18" sane "^2.4.1" +ember-cli-clipboard@^0.13.0: + version "0.13.0" + resolved "https://registry.yarnpkg.com/ember-cli-clipboard/-/ember-cli-clipboard-0.13.0.tgz#47d3de3aec09987409c162cbff36f966a2c138b7" + integrity sha512-AA2J5lliP/DXUFKnQ+r/D3e4xiN3ttlmN8W+8WfZg7K8VeOYlWpMyGcUjmuLa7inLUCMjLbtG6nXc20AQ5OjDg== + dependencies: + broccoli-funnel "^1.1.0" + clipboard "^2.0.0" + ember-cli-babel "^7.7.3" + ember-cli-htmlbars "^3.0.1" + fastboot-transform "^0.1.3" + ember-cli-dependency-checker@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/ember-cli-dependency-checker/-/ember-cli-dependency-checker-3.1.0.tgz#b39c6b537a1457d77892edf5ddcfa025cd1401e2" @@ -4825,6 +4884,11 @@ ember-rfc176-data@^0.3.8: resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.8.tgz#d46bbef9a0d57c803217b258cfd2e90d8e191848" integrity sha512-SQup3iG7SDLZNuf7nMMx5BC5truO8AYKRi80gApeQ07NsbuXV4LH75i5eOaxF0i8l9+H1tzv34kGe6rEh0C1NQ== +ember-rfc176-data@^0.3.9: + version "0.3.9" + resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.9.tgz#44b6e051ead6c044ea87bd551f402e2cf89a7e3d" + integrity sha512-EiTo5YQS0Duy0xp9gCP8ekzv9vxirNi7MnIB4zWs+thtWp/mEKgf5mkiiLU2+oo8C5DuavVHhoPQDmyxh8Io1Q== + ember-router-generator@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/ember-router-generator/-/ember-router-generator-1.2.3.tgz#8ed2ca86ff323363120fc14278191e9e8f1315ee" @@ -5448,6 +5512,14 @@ fast-sourcemap-concat@^1.4.0: source-map-url "^0.3.0" sourcemap-validator "^1.1.0" +fastboot-transform@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/fastboot-transform/-/fastboot-transform-0.1.3.tgz#7dea0b117594afd8772baa6c9b0919644e7f7dcd" + integrity sha512-6otygPIJw1ARp1jJb+6KVO56iKBjhO+5x59RSC9qiZTbZRrv+HZAuP00KD3s+nWMvcFDemtdkugki9DNFTTwCQ== + dependencies: + broccoli-stew "^1.5.0" + convert-source-map "^1.5.1" + faye-websocket@~0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4" @@ -6010,6 +6082,13 @@ globule@^1.0.0: lodash "~4.17.10" minimatch "~3.0.2" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= + dependencies: + delegate "^3.1.2" + graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6: version "4.1.15" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00" @@ -9626,6 +9705,11 @@ scss-tokenizer@^0.2.3: js-base64 "^2.1.8" source-map "^0.4.2" +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= + semver-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" @@ -10448,6 +10532,11 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-emitter@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + tiny-lr@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-1.1.1.tgz#9fa547412f238fedb068ee295af8b682c98b2aab" From 40dcfe2a1c2a81764af3779ec45ec1536be4d153 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 4 Jul 2019 15:55:01 -0500 Subject: [PATCH 03/28] Add qunit-dom --- ui/package.json | 1 + ui/yarn.lock | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/ui/package.json b/ui/package.json index 44aa966fbe6..aedf7edd58b 100644 --- a/ui/package.json +++ b/ui/package.json @@ -94,6 +94,7 @@ "lodash.intersection": "^4.4.0", "prettier": "^1.4.4", "query-string": "^5.0.0", + "qunit-dom": "^0.9.0", "sass": "^1.17.3" }, "engines": { diff --git a/ui/yarn.lock b/ui/yarn.lock index 8e974becebd..df23003fb17 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -9086,6 +9086,14 @@ quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quick-temp@^0.1.8: rimraf "^2.5.4" underscore.string "~3.3.4" +qunit-dom@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/qunit-dom/-/qunit-dom-0.9.0.tgz#99d15fffbf06059e543bb93dae8fe0a3f42a27b9" + integrity sha512-MvVEoCcf8BHVPD3gXg5GBfNy3JMZ3U3yOha4MB1rFs698EpvxMprOfC+NMEGvOF9Epm6GrsA0BFOdCKHd8Orrw== + dependencies: + broccoli-funnel "^2.0.2" + broccoli-merge-trees "^3.0.1" + qunit@~2.6.0: version "2.6.2" resolved "https://registry.yarnpkg.com/qunit/-/qunit-2.6.2.tgz#551210c5cf857258a4fe39a7fe15d9e14dfef22c" From e92b316e30f2e2d3b4ee050709464e6272fc36fe Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 4 Jul 2019 16:07:13 -0500 Subject: [PATCH 04/28] Add prototype copy button for client UUID --- ui/app/templates/clients/client.hbs | 5 ++- ui/app/templates/components/x-copy-button.hbs | 15 ++++++++ .../components/x-copy-button-test.js | 34 +++++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 ui/app/templates/components/x-copy-button.hbs create mode 100644 ui/tests/integration/components/x-copy-button-test.js diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index 7e87fee34b9..aaa4d799817 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -2,7 +2,10 @@

{{or model.name model.shortId}} - {{model.id}} + + {{model.id}} + {{x-copy-button clipboardText=model.id}} +

diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs new file mode 100644 index 00000000000..5a42697bbf0 --- /dev/null +++ b/ui/app/templates/components/x-copy-button.hbs @@ -0,0 +1,15 @@ +{{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }} +{{#if (eq state 'success')}} + {{x-icon 'copy-success'}} +{{else if (eq state 'error')}} + {{x-icon 'alert-triangle'}} +{{else}} + {{#copy-button + class='button is-outlined is-small' + clipboardText=clipboardText + success=(action (mut state) 'success') + error=(action (mut state) 'error') + }} + {{x-icon 'copy-action'}} + {{/copy-button}} +{{/if}} \ No newline at end of file diff --git a/ui/tests/integration/components/x-copy-button-test.js b/ui/tests/integration/components/x-copy-button-test.js new file mode 100644 index 00000000000..c531651bc97 --- /dev/null +++ b/ui/tests/integration/components/x-copy-button-test.js @@ -0,0 +1,34 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { click, render } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +import { triggerCopyError, triggerCopySuccess } from 'ember-cli-clipboard/test-support'; + +module('Integration | Component | x-copy-button', function(hooks) { + setupRenderingTest(hooks); + + test('it shows the copy icon by default', async function(assert) { + await render(hbs`{{x-copy-button class='copy-button'}}`); + + assert.dom('.copy-button .icon-is-copy-action').exists(); + }); + + test('it shows the success icon on success', async function(assert) { + await render(hbs`{{x-copy-button class='copy-button'}}`); + + await click('.copy-button button'); + await triggerCopySuccess('.copy-button button'); + + assert.dom('.copy-button .icon-is-copy-success').exists(); + }); + + test('it shows the error icon on error', async function(assert) { + await render(hbs`{{x-copy-button class='copy-button'}}`); + + await click('.copy-button button'); + await triggerCopyError('.copy-button button'); + + assert.dom('.copy-button .icon-is-alert-triangle').exists(); + }); +}); From 398daec7da9f880506deb8b7763dc1f457f8dd16 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 4 Jul 2019 16:32:01 -0500 Subject: [PATCH 05/28] Add hackish styling To be refined!! --- ui/app/styles/core/buttons.scss | 24 +++++++++++++++++++ ui/app/templates/clients/client.hbs | 4 ++-- ui/app/templates/components/x-copy-button.hbs | 4 ++-- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 9a360f3c979..559c1005acf 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -37,6 +37,11 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); } } + &.is-borderless { + border: 0; + box-shadow: none; + } + @each $name, $pair in $colors { $color: nth($pair, 1); $color-invert: nth($pair, 2); @@ -128,3 +133,22 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); } } } + +.x-copy-button-hover-container:hover { + .x-copy-button { + display: block; + } +} + +.x-copy-button { + padding-left: 0.5rem; + display: none; + + .button { + color: inherit; + + svg { + fill: currentColor; + } + } +} diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index aaa4d799817..bfb0fac85f1 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -1,10 +1,10 @@
-

+

{{or model.name model.shortId}} {{model.id}} - {{x-copy-button clipboardText=model.id}} + {{x-copy-button clipboardText=model.id class='x-copy-button'}}

diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index 5a42697bbf0..32baa15e627 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -1,11 +1,11 @@ {{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }} {{#if (eq state 'success')}} - {{x-icon 'copy-success'}} +
{{x-icon 'copy-success'}}
{{else if (eq state 'error')}} {{x-icon 'alert-triangle'}} {{else}} {{#copy-button - class='button is-outlined is-small' + class='button is-borderless is-small' clipboardText=clipboardText success=(action (mut state) 'success') error=(action (mut state) 'error') From 935c577f3dd7b5a266aca34b709408fa6c8556c0 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 5 Jul 2019 14:44:15 -0500 Subject: [PATCH 06/28] Add auto-reset after success Thanks to @eshtadc for this article: https://dockyard.com/blog/2018/04/18/bending-time-in-ember-tests --- ui/app/components/x-copy-button.js | 14 ++++++++++++++ ui/app/templates/components/x-copy-button.hbs | 2 +- .../integration/components/x-copy-button-test.js | 13 ++++++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 ui/app/components/x-copy-button.js diff --git a/ui/app/components/x-copy-button.js b/ui/app/components/x-copy-button.js new file mode 100644 index 00000000000..1b0d48486b4 --- /dev/null +++ b/ui/app/components/x-copy-button.js @@ -0,0 +1,14 @@ +import Component from '@ember/component'; +import { run } from '@ember/runloop'; + +export default Component.extend({ + actions: { + success() { + this.set('state', 'success'); + + run.later(() => { + this.set('state', null); + }, 2000); + }, + }, +}); diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index 32baa15e627..e945d346f71 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -7,7 +7,7 @@ {{#copy-button class='button is-borderless is-small' clipboardText=clipboardText - success=(action (mut state) 'success') + success=(action 'success') error=(action (mut state) 'error') }} {{x-icon 'copy-action'}} diff --git a/ui/tests/integration/components/x-copy-button-test.js b/ui/tests/integration/components/x-copy-button-test.js index c531651bc97..5bd7c2e6052 100644 --- a/ui/tests/integration/components/x-copy-button-test.js +++ b/ui/tests/integration/components/x-copy-button-test.js @@ -3,6 +3,8 @@ import { setupRenderingTest } from 'ember-qunit'; import { click, render } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; +import sinon from 'sinon'; + import { triggerCopyError, triggerCopySuccess } from 'ember-cli-clipboard/test-support'; module('Integration | Component | x-copy-button', function(hooks) { @@ -14,13 +16,22 @@ module('Integration | Component | x-copy-button', function(hooks) { assert.dom('.copy-button .icon-is-copy-action').exists(); }); - test('it shows the success icon on success', async function(assert) { + test('it shows the success icon on success and resets afterward', async function(assert) { + const clock = sinon.useFakeTimers(); + await render(hbs`{{x-copy-button class='copy-button'}}`); await click('.copy-button button'); await triggerCopySuccess('.copy-button button'); assert.dom('.copy-button .icon-is-copy-success').exists(); + + clock.runAll(); + + assert.dom('.copy-button .icon-is-copy-success').doesNotExist(); + assert.dom('.copy-button .icon-is-copy-action').exists(); + + clock.restore(); }); test('it shows the error icon on error', async function(assert) { From 042cf8369b7fd30e6754739a27b03dae38fdc428 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 5 Jul 2019 14:47:18 -0500 Subject: [PATCH 07/28] =?UTF-8?q?Fix=20size=20of=20success=20=E2=80=9Cbutt?= =?UTF-8?q?on=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This shouldn’t really be a button, I just wanted it to have the same spacing and size as the button. --- ui/app/templates/components/x-copy-button.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index e945d346f71..b75d75565c3 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -1,6 +1,6 @@ {{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }} {{#if (eq state 'success')}} -
{{x-icon 'copy-success'}}
+
{{x-icon 'copy-success'}}
{{else if (eq state 'error')}} {{x-icon 'alert-triangle'}} {{else}} From 8611562c0db0699cbd7f936c7e9968390863c573 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 5 Jul 2019 15:02:02 -0500 Subject: [PATCH 08/28] Add copy button for allocation id --- ui/app/templates/allocations/allocation/index.hbs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs index 280744b08bb..33b87ae98a2 100644 --- a/ui/app/templates/allocations/allocation/index.hbs +++ b/ui/app/templates/allocations/allocation/index.hbs @@ -13,10 +13,13 @@
{{/if}} -

+

Allocation {{model.name}} {{model.clientStatus}} - {{model.id}} + + {{model.id}} + {{x-copy-button clipboardText=model.id class='x-copy-button'}} + {{#if model.isRunning}} {{two-step-button data-test-stop From 190a20a39ace5211af6e32a541531ea632eb8170 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 5 Jul 2019 15:02:54 -0500 Subject: [PATCH 09/28] Move class name into component --- ui/app/components/x-copy-button.js | 2 ++ ui/app/templates/allocations/allocation/index.hbs | 2 +- ui/app/templates/clients/client.hbs | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/app/components/x-copy-button.js b/ui/app/components/x-copy-button.js index 1b0d48486b4..b6bc8ebe0cc 100644 --- a/ui/app/components/x-copy-button.js +++ b/ui/app/components/x-copy-button.js @@ -2,6 +2,8 @@ import Component from '@ember/component'; import { run } from '@ember/runloop'; export default Component.extend({ + classNames: ['x-copy-button'], + actions: { success() { this.set('state', 'success'); diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs index 33b87ae98a2..5f4e0260192 100644 --- a/ui/app/templates/allocations/allocation/index.hbs +++ b/ui/app/templates/allocations/allocation/index.hbs @@ -18,7 +18,7 @@ {{model.clientStatus}} {{model.id}} - {{x-copy-button clipboardText=model.id class='x-copy-button'}} + {{x-copy-button clipboardText=model.id}} {{#if model.isRunning}} {{two-step-button diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index bfb0fac85f1..3c821eee412 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -4,7 +4,7 @@ {{or model.name model.shortId}} {{model.id}} - {{x-copy-button clipboardText=model.id class='x-copy-button'}} + {{x-copy-button clipboardText=model.id}}

From 11afd990a7b76a9909c2b0328f17381ad3d27bef Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 5 Jul 2019 15:09:32 -0500 Subject: [PATCH 10/28] Add always-showing success tooltip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I’m trying out this UX as seen on GitHub PR pages. Easily removed if undesirable! --- ui/app/styles/components/tooltip.scss | 6 ++++-- ui/app/templates/components/x-copy-button.hbs | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss index 68842c13333..9c26fb5c257 100644 --- a/ui/app/styles/components/tooltip.scss +++ b/ui/app/styles/components/tooltip.scss @@ -45,12 +45,14 @@ transition: top 0.1s ease-in-out; } -.tooltip:hover::after { +.tooltip:hover::after, +.tooltip.always-active::after { opacity: 1; bottom: 120%; } -.tooltip:hover::before { +.tooltip:hover::before, +.tooltip.always-active::before { opacity: 1; top: -20%; } diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index b75d75565c3..8a5008b7099 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -1,6 +1,10 @@ {{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }} {{#if (eq state 'success')}} -
{{x-icon 'copy-success'}}
+
+ + {{x-icon 'copy-success'}} + +
{{else if (eq state 'error')}} {{x-icon 'alert-triangle'}} {{else}} From 5b532ba733e9bbec99404c6f38339ef320296f2d Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 5 Jul 2019 15:20:36 -0500 Subject: [PATCH 11/28] Change button to only hide when asked to MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If there are no uses where it should be hidden until hover, I’ll just entirely remove that. --- ui/app/styles/core/buttons.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 559c1005acf..24f68acb44f 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -142,7 +142,10 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); .x-copy-button { padding-left: 0.5rem; - display: none; + + .hidden-until-hover { + display: none; + } .button { color: inherit; From 827d08650cde1ae0a70fba5a093fb007d1809982 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 09:01:31 -0500 Subject: [PATCH 12/28] Add button wrapper for error icon --- ui/app/templates/components/x-copy-button.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index 8a5008b7099..921a6a006d2 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -6,7 +6,9 @@ {{else if (eq state 'error')}} - {{x-icon 'alert-triangle'}} +
+ {{x-icon 'alert-triangle'}} +
{{else}} {{#copy-button class='button is-borderless is-small' From e584232e320c76ebd0c13348195c01492845e818 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 10:51:06 -0500 Subject: [PATCH 13/28] =?UTF-8?q?Change=20success/error=20=E2=80=9Cbutton?= =?UTF-8?q?=E2=80=9Ds=20to=20be=20static?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/app/styles/core/buttons.scss | 4 ++++ ui/app/templates/components/x-copy-button.hbs | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 24f68acb44f..3c2dc536451 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -150,6 +150,10 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); .button { color: inherit; + &.is-static { + background-color: inherit; + } + svg { fill: currentColor; } diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index 921a6a006d2..2ec19035c23 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -1,12 +1,12 @@ {{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }} {{#if (eq state 'success')}} -
+
{{x-icon 'copy-success'}}
{{else if (eq state 'error')}} -
+
{{x-icon 'alert-triangle'}}
{{else}} From fb8e716488300d28309b9a1bd20b59fb2949997a Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 10:52:43 -0500 Subject: [PATCH 14/28] Move copy button up slightly --- ui/app/styles/core/buttons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 3c2dc536451..a3a635d0bda 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -142,6 +142,7 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); .x-copy-button { padding-left: 0.5rem; + margin-bottom: 2px; .hidden-until-hover { display: none; From 4b08c30eef94856687c12b8dc36307579c7cce92 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 10:53:54 -0500 Subject: [PATCH 15/28] Remove show-on-hover functionality MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If this is ever needed somewhere, it’s easily brought back. --- ui/app/styles/core/buttons.scss | 10 ---------- ui/app/templates/allocations/allocation/index.hbs | 2 +- ui/app/templates/clients/client.hbs | 2 +- 3 files changed, 2 insertions(+), 12 deletions(-) diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index a3a635d0bda..2c2215b41b6 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -134,20 +134,10 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); } } -.x-copy-button-hover-container:hover { - .x-copy-button { - display: block; - } -} - .x-copy-button { padding-left: 0.5rem; margin-bottom: 2px; - .hidden-until-hover { - display: none; - } - .button { color: inherit; diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs index 5f4e0260192..67d3a9794a3 100644 --- a/ui/app/templates/allocations/allocation/index.hbs +++ b/ui/app/templates/allocations/allocation/index.hbs @@ -13,7 +13,7 @@
{{/if}} -

+

Allocation {{model.name}} {{model.clientStatus}} diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index 3c821eee412..aaa4d799817 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -1,5 +1,5 @@
-

+

{{or model.name model.shortId}} From b2d9e0c9b4c2a92a3c7731d3e69c8c18fe717b0b Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 11:15:15 -0500 Subject: [PATCH 16/28] Add default state --- ui/app/components/x-copy-button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/app/components/x-copy-button.js b/ui/app/components/x-copy-button.js index b6bc8ebe0cc..24f387a64d2 100644 --- a/ui/app/components/x-copy-button.js +++ b/ui/app/components/x-copy-button.js @@ -4,6 +4,8 @@ import { run } from '@ember/runloop'; export default Component.extend({ classNames: ['x-copy-button'], + state: null, + actions: { success() { this.set('state', 'success'); From a28e9ded3151973fb83d246bda4d2415a939a2b7 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 11:16:34 -0500 Subject: [PATCH 17/28] Add tooltip for copy error --- ui/app/styles/components/tooltip.scss | 1 + ui/app/templates/components/x-copy-button.hbs | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss index 9c26fb5c257..38bddb5e6ae 100644 --- a/ui/app/styles/components/tooltip.scss +++ b/ui/app/styles/components/tooltip.scss @@ -1,5 +1,6 @@ .tooltip { position: relative; + pointer-events: all; } .tooltip::after { diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs index 2ec19035c23..7e9c2bdbf59 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/x-copy-button.hbs @@ -7,7 +7,9 @@

{{else if (eq state 'error')}}
- {{x-icon 'alert-triangle'}} + + {{x-icon 'alert-triangle'}} +
{{else}} {{#copy-button From fe30164eeba0f72559f704eed24b56a47b4f8e48 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 11:37:07 -0500 Subject: [PATCH 18/28] Rename component Thanks to @lukemelia for this suggestion on handling component name overlaps: https://github.com/emberjs/ember.js/issues/17997#issuecomment-488438438 --- ui/app/components/addon-copy-button.js | 1 + ui/app/components/{x-copy-button.js => copy-button.js} | 2 +- ui/app/styles/core/buttons.scss | 2 +- ui/app/templates/allocations/allocation/index.hbs | 2 +- ui/app/templates/clients/client.hbs | 2 +- .../components/{x-copy-button.hbs => copy-button.hbs} | 4 ++-- ui/tests/integration/components/x-copy-button-test.js | 8 ++++---- 7 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 ui/app/components/addon-copy-button.js rename ui/app/components/{x-copy-button.js => copy-button.js} (89%) rename ui/app/templates/components/{x-copy-button.hbs => copy-button.hbs} (93%) diff --git a/ui/app/components/addon-copy-button.js b/ui/app/components/addon-copy-button.js new file mode 100644 index 00000000000..b0a0ab9c45a --- /dev/null +++ b/ui/app/components/addon-copy-button.js @@ -0,0 +1 @@ +export { default } from 'ember-cli-clipboard/components/copy-button'; diff --git a/ui/app/components/x-copy-button.js b/ui/app/components/copy-button.js similarity index 89% rename from ui/app/components/x-copy-button.js rename to ui/app/components/copy-button.js index 24f387a64d2..f677bba344b 100644 --- a/ui/app/components/x-copy-button.js +++ b/ui/app/components/copy-button.js @@ -2,7 +2,7 @@ import Component from '@ember/component'; import { run } from '@ember/runloop'; export default Component.extend({ - classNames: ['x-copy-button'], + classNames: ['copy-button'], state: null, diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 2c2215b41b6..98b02a8402a 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -134,7 +134,7 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); } } -.x-copy-button { +.copy-button { padding-left: 0.5rem; margin-bottom: 2px; diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs index 67d3a9794a3..578ec2ab7e9 100644 --- a/ui/app/templates/allocations/allocation/index.hbs +++ b/ui/app/templates/allocations/allocation/index.hbs @@ -18,7 +18,7 @@ {{model.clientStatus}} {{model.id}} - {{x-copy-button clipboardText=model.id}} + {{copy-button clipboardText=model.id}} {{#if model.isRunning}} {{two-step-button diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs index aaa4d799817..a7aff9372dd 100644 --- a/ui/app/templates/clients/client.hbs +++ b/ui/app/templates/clients/client.hbs @@ -4,7 +4,7 @@ {{or model.name model.shortId}} {{model.id}} - {{x-copy-button clipboardText=model.id}} + {{copy-button clipboardText=model.id}} diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/copy-button.hbs similarity index 93% rename from ui/app/templates/components/x-copy-button.hbs rename to ui/app/templates/components/copy-button.hbs index 7e9c2bdbf59..2c362db8646 100644 --- a/ui/app/templates/components/x-copy-button.hbs +++ b/ui/app/templates/components/copy-button.hbs @@ -12,12 +12,12 @@ {{else}} - {{#copy-button + {{#addon-copy-button class='button is-borderless is-small' clipboardText=clipboardText success=(action 'success') error=(action (mut state) 'error') }} {{x-icon 'copy-action'}} - {{/copy-button}} + {{/addon-copy-button}} {{/if}} \ No newline at end of file diff --git a/ui/tests/integration/components/x-copy-button-test.js b/ui/tests/integration/components/x-copy-button-test.js index 5bd7c2e6052..cdde40beaa3 100644 --- a/ui/tests/integration/components/x-copy-button-test.js +++ b/ui/tests/integration/components/x-copy-button-test.js @@ -7,11 +7,11 @@ import sinon from 'sinon'; import { triggerCopyError, triggerCopySuccess } from 'ember-cli-clipboard/test-support'; -module('Integration | Component | x-copy-button', function(hooks) { +module('Integration | Component | copy-button', function(hooks) { setupRenderingTest(hooks); test('it shows the copy icon by default', async function(assert) { - await render(hbs`{{x-copy-button class='copy-button'}}`); + await render(hbs`{{copy-button class='copy-button'}}`); assert.dom('.copy-button .icon-is-copy-action').exists(); }); @@ -19,7 +19,7 @@ module('Integration | Component | x-copy-button', function(hooks) { test('it shows the success icon on success and resets afterward', async function(assert) { const clock = sinon.useFakeTimers(); - await render(hbs`{{x-copy-button class='copy-button'}}`); + await render(hbs`{{copy-button class='copy-button'}}`); await click('.copy-button button'); await triggerCopySuccess('.copy-button button'); @@ -35,7 +35,7 @@ module('Integration | Component | x-copy-button', function(hooks) { }); test('it shows the error icon on error', async function(assert) { - await render(hbs`{{x-copy-button class='copy-button'}}`); + await render(hbs`{{copy-button class='copy-button'}}`); await click('.copy-button button'); await triggerCopyError('.copy-button button'); From a1dd378f1260742f6619509b8df899c21545217c Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 11:38:30 -0500 Subject: [PATCH 19/28] Move copy-button styling into its own file --- ui/app/styles/components.scss | 1 + ui/app/styles/components/copy-button.scss | 16 ++++++++++++++++ ui/app/styles/core/buttons.scss | 17 ----------------- 3 files changed, 17 insertions(+), 17 deletions(-) create mode 100644 ui/app/styles/components/copy-button.scss diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss index 031f1b886ab..aa74aea6236 100644 --- a/ui/app/styles/components.scss +++ b/ui/app/styles/components.scss @@ -2,6 +2,7 @@ @import './components/badge'; @import './components/boxed-section'; @import './components/codemirror'; +@import './components/copy-button'; @import './components/cli-window'; @import './components/dropdown'; @import './components/ember-power-select'; diff --git a/ui/app/styles/components/copy-button.scss b/ui/app/styles/components/copy-button.scss new file mode 100644 index 00000000000..163aaddb6e7 --- /dev/null +++ b/ui/app/styles/components/copy-button.scss @@ -0,0 +1,16 @@ +.copy-button { + padding-left: 0.5rem; + margin-bottom: 2px; + + .button { + color: inherit; + + &.is-static { + background-color: inherit; + } + + svg { + fill: currentColor; + } + } +} diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 98b02a8402a..bad307ee8c2 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -133,20 +133,3 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2); } } } - -.copy-button { - padding-left: 0.5rem; - margin-bottom: 2px; - - .button { - color: inherit; - - &.is-static { - background-color: inherit; - } - - svg { - fill: currentColor; - } - } -} From 5270bec69f84f626b92445945699f9b13d10a0d7 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 11:46:29 -0500 Subject: [PATCH 20/28] Add copy button to styleguide --- ui/app/templates/components/freestyle/sg-copy-button.hbs | 6 ++++++ ui/app/templates/freestyle.hbs | 4 ++++ 2 files changed, 10 insertions(+) create mode 100644 ui/app/templates/components/freestyle/sg-copy-button.hbs diff --git a/ui/app/templates/components/freestyle/sg-copy-button.hbs b/ui/app/templates/components/freestyle/sg-copy-button.hbs new file mode 100644 index 00000000000..a715317c35e --- /dev/null +++ b/ui/app/templates/components/freestyle/sg-copy-button.hbs @@ -0,0 +1,6 @@ +{{#freestyle-usage "copy-button" title="Copy Button"}} + + e8c898a0-794b-9063-7a7f-bf0c4a405f83 + {{copy-button clipboardText="e8c898a0-794b-9063-7a7f-bf0c4a405f83"}} + +{{/freestyle-usage}} diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs index a68982d1f3d..e6ccfd6836e 100644 --- a/ui/app/templates/freestyle.hbs +++ b/ui/app/templates/freestyle.hbs @@ -35,6 +35,10 @@ {{freestyle/sg-buttons}} {{/section.subsection}} + {{#section.subsection name="Copy Button"}} + {{freestyle/sg-copy-button}} + {{/section.subsection}} + {{#section.subsection name="Diff Viewer"}} {{freestyle/sg-diff-viewer}} {{/section.subsection}} From 94751880b8459a9c60ea4aba1e3a34a7a03240d4 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 11:48:54 -0500 Subject: [PATCH 21/28] Rename missed file --- .../components/{x-copy-button-test.js => copy-button-test.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ui/tests/integration/components/{x-copy-button-test.js => copy-button-test.js} (100%) diff --git a/ui/tests/integration/components/x-copy-button-test.js b/ui/tests/integration/components/copy-button-test.js similarity index 100% rename from ui/tests/integration/components/x-copy-button-test.js rename to ui/tests/integration/components/copy-button-test.js From 3d46b61bc0b087c1038176f24bb96c2d7f68aff2 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 12:10:06 -0500 Subject: [PATCH 22/28] Add another default property --- ui/app/components/copy-button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/components/copy-button.js b/ui/app/components/copy-button.js index f677bba344b..bc49813d1eb 100644 --- a/ui/app/components/copy-button.js +++ b/ui/app/components/copy-button.js @@ -4,6 +4,7 @@ import { run } from '@ember/runloop'; export default Component.extend({ classNames: ['copy-button'], + clipboardText: null, state: null, actions: { From 9180fbe710cb4c2bf5620955e727d3e43ce29c6d Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 12:17:51 -0500 Subject: [PATCH 23/28] Add explanation of re-export --- ui/app/components/addon-copy-button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/components/addon-copy-button.js b/ui/app/components/addon-copy-button.js index b0a0ab9c45a..56178c181fb 100644 --- a/ui/app/components/addon-copy-button.js +++ b/ui/app/components/addon-copy-button.js @@ -1 +1,2 @@ +// This lets us use copy-button to wrap ember-cli-clipboard’s component export { default } from 'ember-cli-clipboard/components/copy-button'; From a826034e5a01a580acf8e273593c7a32b38b1846 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 12:18:51 -0500 Subject: [PATCH 24/28] Remove outdated FIXME --- ui/app/templates/components/copy-button.hbs | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/app/templates/components/copy-button.hbs b/ui/app/templates/components/copy-button.hbs index 2c362db8646..954d67fcecd 100644 --- a/ui/app/templates/components/copy-button.hbs +++ b/ui/app/templates/components/copy-button.hbs @@ -1,4 +1,3 @@ -{{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }} {{#if (eq state 'success')}}
From f9f405ca51bc7e6dab5480c33a951b0f01b04524 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 12:23:20 -0500 Subject: [PATCH 25/28] Remove trailing newline --- ui/app/templates/components/freestyle/sg-copy-button.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/templates/components/freestyle/sg-copy-button.hbs b/ui/app/templates/components/freestyle/sg-copy-button.hbs index a715317c35e..f3af7cf96c8 100644 --- a/ui/app/templates/components/freestyle/sg-copy-button.hbs +++ b/ui/app/templates/components/freestyle/sg-copy-button.hbs @@ -3,4 +3,4 @@ e8c898a0-794b-9063-7a7f-bf0c4a405f83 {{copy-button clipboardText="e8c898a0-794b-9063-7a7f-bf0c4a405f83"}} -{{/freestyle-usage}} +{{/freestyle-usage}} \ No newline at end of file From 5e302ee745653f372e178c627f4edac764ed658e Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 8 Jul 2019 12:25:18 -0500 Subject: [PATCH 26/28] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1c87736d37..dcd8a362cf3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ IMPROVEMENTS: * driver/docker: Added logging defaults to use json-file log driver with log rotation [[GH-5846](https://github.com/hashicorp/nomad/pull/5846)] * metrics: Added namespace label as appropriate to metrics [[GH-5847](https://github.com/hashicorp/nomad/issues/5847)] * ui: Moved client status, draining, and eligibility fields into single state column [[GH-5789](https://github.com/hashicorp/nomad/pull/5789)] + * ui: Added buttons to copy client and allocation UUIDs [[GH-5926](https://github.com/hashicorp/nomad/pull/5926)] BUG FIXES: From e8a1ae037195bd7ffdd6f4c2e9dcf4f0f7704765 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 15 Jul 2019 11:40:06 -0500 Subject: [PATCH 27/28] Convert success action to task --- ui/app/components/copy-button.js | 15 +++++++-------- ui/app/templates/components/copy-button.hbs | 2 +- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/ui/app/components/copy-button.js b/ui/app/components/copy-button.js index bc49813d1eb..4c99948928d 100644 --- a/ui/app/components/copy-button.js +++ b/ui/app/components/copy-button.js @@ -1,5 +1,6 @@ import Component from '@ember/component'; import { run } from '@ember/runloop'; +import { task } from 'ember-concurrency'; export default Component.extend({ classNames: ['copy-button'], @@ -7,13 +8,11 @@ export default Component.extend({ clipboardText: null, state: null, - actions: { - success() { - this.set('state', 'success'); + indicateSuccess: task(function*() { + this.set('state', 'success'); - run.later(() => { - this.set('state', null); - }, 2000); - }, - }, + yield run.later(() => { + this.set('state', null); + }, 2000); + }), }); diff --git a/ui/app/templates/components/copy-button.hbs b/ui/app/templates/components/copy-button.hbs index 954d67fcecd..344c77f3588 100644 --- a/ui/app/templates/components/copy-button.hbs +++ b/ui/app/templates/components/copy-button.hbs @@ -14,7 +14,7 @@ {{#addon-copy-button class='button is-borderless is-small' clipboardText=clipboardText - success=(action 'success') + success=(perform indicateSuccess) error=(action (mut state) 'error') }} {{x-icon 'copy-action'}} From 5db4a876e9a65d2735889fe38f2f0a98754f6dae Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 15 Jul 2019 12:01:56 -0500 Subject: [PATCH 28/28] Remove run.later in favour of timeout --- ui/app/components/copy-button.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/ui/app/components/copy-button.js b/ui/app/components/copy-button.js index 4c99948928d..d8a891d8575 100644 --- a/ui/app/components/copy-button.js +++ b/ui/app/components/copy-button.js @@ -1,6 +1,5 @@ import Component from '@ember/component'; -import { run } from '@ember/runloop'; -import { task } from 'ember-concurrency'; +import { task, timeout } from 'ember-concurrency'; export default Component.extend({ classNames: ['copy-button'], @@ -11,8 +10,7 @@ export default Component.extend({ indicateSuccess: task(function*() { this.set('state', 'success'); - yield run.later(() => { - this.set('state', null); - }, 2000); - }), + yield timeout(2000); + this.set('state', null); + }).restartable(), });