From 956f6fd04df38eaccd97b4040d8efeffa50a96ef Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Corvo Date: Thu, 22 Feb 2024 13:56:56 -0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Adopt=20HDS=20copy?= =?UTF-8?q?=20snippet=20Desktop=20UI=20(#2146)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 💡 Adopt HDS copy snippet Desktop UI Adopt HDS copy snippet and delete usage of Copyable custom component --- addons/core/translations/form/en-us.yaml | 2 + ui/desktop/app/components/copyable/index.hbs | 35 ------ ui/desktop/app/components/copyable/index.js | 88 --------------- .../app/components/hidden-secret/index.hbs | 31 +++--- .../app/components/session/tabs/index.hbs | 22 ++-- ui/desktop/app/styles/app.scss | 77 +++---------- .../scopes/scope/projects/sessions/index.hbs | 67 ++++++------ .../scopes/scope/projects/targets/index.hbs | 103 +++++++++--------- .../scopes/scope/projects/targets/target.hbs | 11 +- ui/desktop/package.json | 1 - .../projects/sessions/index-test.js | 1 - .../acceptance/projects/targets/index-test.js | 2 +- .../integration/components/copyable-test.js | 23 ---- .../components/credentials-panel-test.js | 2 +- .../components/hidden-secret-test.js | 11 +- yarn.lock | 9 -- 16 files changed, 135 insertions(+), 350 deletions(-) delete mode 100644 ui/desktop/app/components/copyable/index.hbs delete mode 100644 ui/desktop/app/components/copyable/index.js delete mode 100644 ui/desktop/tests/integration/components/copyable-test.js diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml index 1003db93c..077a2a6fa 100644 --- a/addons/core/translations/form/en-us.yaml +++ b/addons/core/translations/form/en-us.yaml @@ -48,6 +48,8 @@ session_max_seconds: session_connection_limit: label: Maximum Connections help: The maximum number of connections allowed per session. For unlimited, specify "-1". +session_id: + label: Session ID worker_release_version: label: Release Version help: The version of the Boundary binary the worker is running. diff --git a/ui/desktop/app/components/copyable/index.hbs b/ui/desktop/app/components/copyable/index.hbs deleted file mode 100644 index 46f7584cc..000000000 --- a/ui/desktop/app/components/copyable/index.hbs +++ /dev/null @@ -1,35 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - - - - {{#if this.copied}} - - {{yield}} - - {{else}} - - {{yield}} - - {{/if}} - - {{#if this.isClipboardLibrarySupported}} - - {{this.actionText}} - - {{/if}} - \ No newline at end of file diff --git a/ui/desktop/app/components/copyable/index.js b/ui/desktop/app/components/copyable/index.js deleted file mode 100644 index 6173208d8..000000000 --- a/ui/desktop/app/components/copyable/index.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import Component from '@glimmer/component'; -import ClipboardJS from 'clipboard'; -import { action } from '@ember/object'; -import { getOwner } from '@ember/application'; -import { generateComponentID } from 'rose/utilities/component-auto-id'; -import { tracked } from '@glimmer/tracking'; -import { later } from '@ember/runloop'; - -export default class CopyableComponent extends Component { - // =attributes - - id = generateComponentID(); - copyableButtonId = `copyable-button-${this.id}`; - - actionIcon = 'flight-icons/svg/clipboard-copy-16'; - successIcon = 'flight-icons/svg/clipboard-checked-16'; - actionText = this.args.buttonText; - successText = this.args.acknowledgeText; - - @tracked copied = false; - - clipboard = null; - - confirmCopy() { - this.copied = true; - later(() => (this.copied = false), 1000); - } - - /** - * Checks for ClipboardJS support. - * @return {boolean} - */ - get isClipboardLibrarySupported() { - return ClipboardJS.isSupported(); - } - - // =methods - - /** - * Returns the first element with the specified class name if exists, - * otherwise undefined. - * @return {?HTMLElement} - */ - getFirstElementByClassName(className) { - const document = getOwner(this).lookup('service:-document').documentElement; - return document.getElementsByClassName(className)[0]; - } - - // =actions - - /** - * Initialize ClipboardJS library and register for it's events. - */ - @action - register() { - this.tearDown(); - /* istanbul ignore next */ - this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, { - text: () => this.args.text, - // ClipboardJS depends on inserting a hidden textarea that receives - // focus in order to copy text to the clipboard. However, our modal - // has a focus trap that prevents this focus. Thus we try to set the - // container to a modal (if exists), since this is the only container - // a user would be able to interact with. If a modal doesn't exist, - // container is set to `undefined` and thus uses the default body element. - container: this.getFirstElementByClassName('rose-dialog'), - }); - /* istanbul ignore next */ - this.clipboard.on('success', (clipboardEvent) => { - clipboardEvent.clearSelection(); - this.confirmCopy(); - }); - } - - /** - * Destroy ClipboardJS library instance and cancel icon timer. - */ - @action - tearDown() { - this.clipboard?.destroy(); - this.clipboard = null; - } -} diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs index 475cf5f1d..60b14ed5f 100644 --- a/ui/desktop/app/components/hidden-secret/index.hbs +++ b/ui/desktop/app/components/hidden-secret/index.hbs @@ -4,26 +4,25 @@ }}
- - {{t 'actions.toggle-secret'}} - - + /> + +
{{#if this.isHidden}} 
{{this.displaySecretValue}}
{{else}} {{this.textMask}} {{/if}} - +
+ +
\ No newline at end of file diff --git a/ui/desktop/app/components/session/tabs/index.hbs b/ui/desktop/app/components/session/tabs/index.hbs index bfcc82975..24eb93626 100644 --- a/ui/desktop/app/components/session/tabs/index.hbs +++ b/ui/desktop/app/components/session/tabs/index.hbs @@ -65,13 +65,10 @@ {{/if}} {{! Host ID }} - - {{@model.host.id}} - + {{/if}} @@ -120,13 +117,10 @@ {{/if}} {{! Target ID }} - - {{@model.target.id}} - + {{/if}} diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index b5453e015..ff13cc47e 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -208,32 +208,6 @@ } } -.copyable { - white-space: nowrap; - - .copyable-button { - margin: 0; - padding: 0 sizing.rems(xxs); - top: -2px; - } - - mark { - animation: fadeBackground 0.75s linear; - background-color: transparent; - color: inherit; - - @keyframes fadeBackground { - 0% { - background-color: var(--action-subtler-1); - } - - 100% { - background-color: transparent; - } - } - } -} - [class*='session-status-'] { color: var(--ui-gray-subtler-2); } @@ -446,12 +420,6 @@ $chevron-down: url("data:image/svg+xml;utf-8, <:body as |B|> - {{#if B.data.isAvailable}} - - + {{format-date-iso-human B.data.created_time}} + + + +
+ {{#if B.data.isAvailable}} + - {{B.data.id}} - - - {{else}} - + {{else}} + + {{B.data.id}} + + {{/if}} + - {{B.data.id}} - - {{/if}} + @isIconOnly={{true}} + @textToCopy={{B.data.id}} + data-test-session-id-copy={{B.data.id}} + /> +
{{B.data.target.displayName}} @@ -120,28 +121,22 @@ {{#if B.data.isAvailable}} {{#if B.data.proxy}} - - {{B.data.proxy}} - + {{/if}} {{/if}} - - - - + {{#if (can 'cancel session' B.data)}} @@ -102,13 +102,7 @@ - - {{B.data.id}} - + {{#if B.data.isActive}} @@ -130,40 +124,38 @@
- - {{B.data.project.id}} - +
{{#if B.data.project.name}} {{/if}} - - {{#if (can 'connect target' B.data)}} - {{#if (can 'read target' B.data)}} - - {{else}} - + +
+ {{#if (can 'connect target' B.data)}} + {{#if (can 'read target' B.data)}} + + {{else}} + + {{/if}} {{/if}} - {{/if}} +
@@ -201,6 +193,7 @@ {{#if (and this.selectedTarget this.selectedTarget.isActive)}} <:body as |B|> - - - - {{B.data.id}} - - - - {{B.data.proxy}} +
+ + {{B.data.id}} + + + +
+ {{B.data.proxy}} + + {{#if (can 'cancel session' B.data)}} - - {{@model.target.id}} - + diff --git a/ui/desktop/package.json b/ui/desktop/package.json index fd9f9f3ea..b3534ff07 100644 --- a/ui/desktop/package.json +++ b/ui/desktop/package.json @@ -66,7 +66,6 @@ "@playwright/test": "^1.30.0", "babel-loader": "^8.2.5", "broccoli-asset-rev": "^3.0.0", - "clipboard": "^2.0.8", "concurrently": "^8.0.1", "core": "*", "cross-env": "^7.0.3", diff --git a/ui/desktop/tests/acceptance/projects/sessions/index-test.js b/ui/desktop/tests/acceptance/projects/sessions/index-test.js index 8f2433e8e..4bf02149b 100644 --- a/ui/desktop/tests/acceptance/projects/sessions/index-test.js +++ b/ui/desktop/tests/acceptance/projects/sessions/index-test.js @@ -280,7 +280,6 @@ module('Acceptance | projects | sessions | index', function (hooks) { instances.session.update({ status: STATUS_SESSION_TERMINATED }); this.stubClientDaemonSearch('sessions', 'sessions', 'targets'); await visit(urls.sessions); - assert .dom(`[data-test-session-detail-link="${instances.session.id}"]`) .doesNotExist(); diff --git a/ui/desktop/tests/acceptance/projects/targets/index-test.js b/ui/desktop/tests/acceptance/projects/targets/index-test.js index 3f59651f8..2095c16b7 100644 --- a/ui/desktop/tests/acceptance/projects/targets/index-test.js +++ b/ui/desktop/tests/acceptance/projects/targets/index-test.js @@ -106,7 +106,7 @@ module('Acceptance | projects | targets | index', function (hooks) { type: 'org', scope: globalScope, }); - const org2Scope = { id: instances.scopes.org2.id, type: 'org' }; + const org2Scope = { id: instances.scopes.org.id, type: 'org' }; instances.scopes.project2 = this.server.create('scope', { type: 'project', scope: org2Scope, diff --git a/ui/desktop/tests/integration/components/copyable-test.js b/ui/desktop/tests/integration/components/copyable-test.js deleted file mode 100644 index c6a8019fb..000000000 --- a/ui/desktop/tests/integration/components/copyable-test.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.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 | copyable', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - this.set('actionText', 'text'); - await render( - hbs`{{this.actionText}}`, - ); - assert.ok(find('.copyable')); - assert.strictEqual(find('.copyable-content').textContent.trim(), 'text'); - assert.strictEqual(find('.copyable-button').textContent.trim(), 'Copy me'); - }); -}); diff --git a/ui/desktop/tests/integration/components/credentials-panel-test.js b/ui/desktop/tests/integration/components/credentials-panel-test.js index d26483017..133d4c2ab 100644 --- a/ui/desktop/tests/integration/components/credentials-panel-test.js +++ b/ui/desktop/tests/integration/components/credentials-panel-test.js @@ -60,6 +60,6 @@ module('Integration | Component | credentials-panel', function (hooks) { await click('[data-test-toggle-credentials]'); - assert.dom("[data-test-raw-secret]").isVisible(); + assert.dom('[data-test-raw-secret]').isVisible(); }); }); diff --git a/ui/desktop/tests/integration/components/hidden-secret-test.js b/ui/desktop/tests/integration/components/hidden-secret-test.js index 6bc707a9d..c0c5b693c 100644 --- a/ui/desktop/tests/integration/components/hidden-secret-test.js +++ b/ui/desktop/tests/integration/components/hidden-secret-test.js @@ -14,6 +14,9 @@ module('Integration | Component | hidden-secret', function (hooks) { setupIntl(hooks); setupMirage(hooks); + const HIDDEN_SECRET_TOGGLE = '.hidden-secret > button:first-child'; + const HIDDEN_SECRET_CONTENT = '.hidden-secret > .secret-content'; + // Global Secret for mocking this.secret = `{ "secret_key": "QWERTYUIOP", @@ -37,15 +40,13 @@ module('Integration | Component | hidden-secret', function (hooks) { test('it renders with a secret', async function (assert) { assert.expect(1); await renderComponent(); - assert - .dom('.hidden-secret > span > span') - .hasText('â–  â–  â–  â–  â–  â–  â–  â–  â–  â–  â–  â– '); + assert.dom(HIDDEN_SECRET_CONTENT).hasText('â–  â–  â–  â–  â–  â–  â–  â–  â–  â–  â–  â– '); }); test('it reveals secret when button is clicked', async function (assert) { assert.expect(1); await renderComponent(); - await click('.hidden-secret > button'); - assert.dom('.hidden-secret > span > span').hasText(this.secret); + await click(HIDDEN_SECRET_TOGGLE); + assert.dom(HIDDEN_SECRET_CONTENT).hasText(this.secret); }); }); diff --git a/yarn.lock b/yarn.lock index 982d4c101..e57b5a7d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8651,15 +8651,6 @@ clipboard@^2.0.11: select "^1.1.2" tiny-emitter "^2.0.0" -clipboard@^2.0.8: - version "2.0.8" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba" - integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ== - dependencies: - good-listener "^1.2.2" - select "^1.1.2" - tiny-emitter "^2.0.0" - cliui@^7.0.2: version "7.0.4" resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"