From a831bd06a5e9581fbc7da3a909f6a5969273f6ad Mon Sep 17 00:00:00 2001 From: Cameron Perera Date: Tue, 29 Aug 2023 15:52:25 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20Proxy=20URL=20info?= =?UTF-8?q?=20to=20session=20detail=20screen=20(#1868)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 add Proxy URL info to session detail screen ✅ Closes: ICU-10311 * chore: 🤖 add setupIntl to proxy-url tests * refactor: 💡 update styles for proxy-url component * refactor: 💡 display proxy info based on target type * refactor: 💡 move proxy-url into session specific directory * refactor: 💡 change template logic for which command to show * refactor: 💡 remove isSSH getter for session/proxy-url --- addons/core/translations/resources/en-us.yaml | 3 + .../components/session/proxy-url/index.hbs | 39 +++++++ .../app/components/session/proxy-url/index.js | 36 +++++++ ui/desktop/app/styles/app.scss | 23 ++++ .../scope/projects/sessions/session.hbs | 8 +- .../integration/components/proxy-url-test.js | 102 ++++++++++++++++++ 6 files changed, 210 insertions(+), 1 deletion(-) create mode 100644 ui/desktop/app/components/session/proxy-url/index.hbs create mode 100644 ui/desktop/app/components/session/proxy-url/index.js create mode 100644 ui/desktop/tests/integration/components/proxy-url-test.js diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml index 91baf4f81..cfcccd7dc 100644 --- a/addons/core/translations/resources/en-us.yaml +++ b/addons/core/translations/resources/en-us.yaml @@ -306,6 +306,9 @@ session: raw-api: show: View API output hide: Hide API output + proxy-url: + address-port: Address & port + ssh: SSH org: title: Org title_plural: Orgs diff --git a/ui/desktop/app/components/session/proxy-url/index.hbs b/ui/desktop/app/components/session/proxy-url/index.hbs new file mode 100644 index 000000000..eed74a3a1 --- /dev/null +++ b/ui/desktop/app/components/session/proxy-url/index.hbs @@ -0,0 +1,39 @@ +
+ + + + + + {{#if this.isAddressAndPort}} + + + {{/if}} + {{#unless this.isAddressAndPort}} + + {{/unless}} +
\ No newline at end of file diff --git a/ui/desktop/app/components/session/proxy-url/index.js b/ui/desktop/app/components/session/proxy-url/index.js new file mode 100644 index 000000000..d62a20f3e --- /dev/null +++ b/ui/desktop/app/components/session/proxy-url/index.js @@ -0,0 +1,36 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import { TYPE_TARGET_SSH } from 'api/models/target'; + +export default class SessionProxyUrlComponent extends Component { + @service intl; + + @tracked selectedValue = + this.args.targetType === TYPE_TARGET_SSH + ? this.intl.t('resources.session.proxy-url.ssh') + : this.intl.t('resources.session.proxy-url.address-port'); + + get isAddressAndPort() { + return ( + this.selectedValue === + this.intl.t('resources.session.proxy-url.address-port') + ); + } + + get sshCommand() { + return `ssh ${this.args.proxyAddress} -p ${this.args.proxyPort}`; + } + + @action + updateContent(value, closeCallback) { + this.selectedValue = value; + closeCallback(); + } +} diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 536f6512e..a27ff8c71 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -541,6 +541,29 @@ $chevron-down: url("data:image/svg+xml;utf-8, -
{{t 'actions.copy-to-clipboard'}}
+ {{#if (and @model.proxy_address @model.proxy_port)}} + + {{/if}} {{#if @model.credentials}} diff --git a/ui/desktop/tests/integration/components/proxy-url-test.js b/ui/desktop/tests/integration/components/proxy-url-test.js new file mode 100644 index 000000000..289def2cc --- /dev/null +++ b/ui/desktop/tests/integration/components/proxy-url-test.js @@ -0,0 +1,102 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'desktop/tests/helpers'; +import { render, click } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; +import { setupIntl } from 'ember-intl/test-support'; +import { TYPE_TARGET_TCP, TYPE_TARGET_SSH } from 'api/models/target'; + +module('Integration | Component | session/proxy-url', function (hooks) { + setupRenderingTest(hooks); + setupIntl(hooks); + + test('it renders', async function (assert) { + assert.expect(2); + this.set('proxyAddress', 'http://localhost'); + this.set('proxyPort', '1234'); + this.set('targetType', TYPE_TARGET_TCP); + + await render( + hbs` + + ` + ); + + assert.dom('.copy-address').hasText(this.proxyAddress); + assert.dom('.copy-port').hasText(this.proxyPort); + }); + + test('it switches to SSH command on dropdown click', async function (assert) { + assert.expect(2); + this.set('proxyAddress', 'http://localhost'); + this.set('proxyPort', '1234'); + this.set('targetType', TYPE_TARGET_TCP); + + await render( + hbs` + + ` + ); + await click('.proxy-url-container .hds-dropdown-toggle-button'); + await click('[data-test-ssh-option]'); + + assert.dom('.copy-ssh-command').isVisible(); + assert + .dom('.copy-ssh-command') + .hasText(`ssh ${this.proxyAddress} -p ${this.proxyPort}`); + }); + + test('shows address & port info when target type is TCP', async function (assert) { + assert.expect(2); + this.set('proxyAddress', 'http://localhost'); + this.set('proxyPort', '1234'); + this.set('targetType', TYPE_TARGET_TCP); + + await render( + hbs` + + ` + ); + + assert.dom('.copy-address').hasText(this.proxyAddress); + assert.dom('.copy-port').hasText(this.proxyPort); + }); + + test('shows ssh command when target type is SSH', async function (assert) { + assert.expect(2); + this.set('proxyAddress', 'http://localhost'); + this.set('proxyPort', '1234'); + this.set('targetType', TYPE_TARGET_SSH); + + await render( + hbs` + + ` + ); + + assert.dom('.copy-ssh-command').isVisible(); + assert + .dom('.copy-ssh-command') + .hasText(`ssh ${this.proxyAddress} -p ${this.proxyPort}`); + }); +});