diff --git a/ui/desktop/app/components/session/proxy-url/index.hbs b/ui/desktop/app/components/session/proxy-url/index.hbs index 945e66fcd..cd38faa9f 100644 --- a/ui/desktop/app/components/session/proxy-url/index.hbs +++ b/ui/desktop/app/components/session/proxy-url/index.hbs @@ -3,21 +3,26 @@ SPDX-License-Identifier: BUSL-1.1 }} -
- - - {{#each this.dropdownOptions as |optionId|}} - - {{t (concat 'resources.session.proxy-url.' optionId)}} - - {{/each}} - +
+ {{#unless this.isRDPTarget}} + + + {{#each this.dropdownOptions as |optionId|}} + + {{t (concat 'resources.session.proxy-url.' optionId)}} + + {{/each}} + + {{/unless}} {{#let this.copySnippetData as |snippet|}} {{#if snippet}} diff --git a/ui/desktop/app/components/session/proxy-url/index.js b/ui/desktop/app/components/session/proxy-url/index.js index 5c2c302b0..0a8be0094 100644 --- a/ui/desktop/app/components/session/proxy-url/index.js +++ b/ui/desktop/app/components/session/proxy-url/index.js @@ -8,12 +8,13 @@ import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { service } from '@ember/service'; import { - TYPE_TARGET_RDP, TYPE_TARGET_SSH, TYPE_TARGET_TCP, + TYPE_TARGET_RDP, } from 'api/models/target'; const ADDRESS_PORT = 'address-port'; +const DROPDOWN_OPTIONS = [ADDRESS_PORT, TYPE_TARGET_SSH]; export default class SessionProxyUrlComponent extends Component { // =services @@ -24,6 +25,10 @@ export default class SessionProxyUrlComponent extends Component { @tracked selectedValue = null; + get isRDPTarget() { + return this.args.targetType === TYPE_TARGET_RDP; + } + /** * Returns the current value to be displayed in the dropdown. * If a value is selected, it returns that value. @@ -43,38 +48,23 @@ export default class SessionProxyUrlComponent extends Component { */ get copySnippetData() { const { proxyAddress, proxyPort } = this.args; - switch (this.currentValue) { - case ADDRESS_PORT: - return { - address: proxyAddress, - port: proxyPort, - }; - case TYPE_TARGET_SSH: - return { - address: `ssh ${proxyAddress} -p ${proxyPort}`, - }; - case TYPE_TARGET_RDP: - // TODO: This is a just a placeholder. Update this based on the design and product requirements. - return { - address: `rdp ${proxyAddress} -p ${proxyPort}`, - }; - default: - return null; + if (this.currentValue === TYPE_TARGET_SSH) { + return { + address: `ssh ${proxyAddress} -p ${proxyPort}`, + }; } + // For TCP and RDP, we return the address and port + return { + address: proxyAddress, + port: proxyPort, + }; } - /** Returns the dropdown options based on the target type. + /** + * Only show AddressPort and SSH options. We do not show RDP here */ get dropdownOptions() { - let options = [ADDRESS_PORT]; - - options.push( - this.args.targetType === TYPE_TARGET_RDP - ? TYPE_TARGET_RDP - : TYPE_TARGET_SSH, - ); - - return options; + return DROPDOWN_OPTIONS; } // =actions diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 5196fd8c1..5787047fd 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -302,6 +302,10 @@ } } +.proxy-url-container.rdp-target { + margin-top: 1rem; +} + // Credentials Panel .credential-panel-header { display: flex; diff --git a/ui/desktop/tests/integration/components/proxy-url-test.js b/ui/desktop/tests/integration/components/proxy-url-test.js index 251d23121..4068e7c73 100644 --- a/ui/desktop/tests/integration/components/proxy-url-test.js +++ b/ui/desktop/tests/integration/components/proxy-url-test.js @@ -28,8 +28,8 @@ module('Integration | Component | session/proxy-url', function (hooks) { }, { targetType: TYPE_TARGET_RDP, - expectedCommand: (address, port) => `rdp ${address} -p ${port}`, - expectedSnippetCount: 1, + expectedCommand: (address, port) => `${address}:${port}`, + expectedSnippetCount: 2, }, { targetType: TYPE_TARGET_TCP, @@ -57,7 +57,7 @@ module('Integration | Component | session/proxy-url', function (hooks) { assert.dom('.hds-copy-snippet').exists({ count: expectedSnippetCount }); // Assert the content of the copy snippets - if (targetType === TYPE_TARGET_TCP) { + if (targetType === TYPE_TARGET_TCP || targetType === TYPE_TARGET_RDP) { assert .dom('.hds-copy-snippet:nth-of-type(1)') .hasText(this.proxyAddress); @@ -81,14 +81,6 @@ module('Integration | Component | session/proxy-url', function (hooks) { ], hiddenOptions: ['[data-test="rdp-option"]'], }, - { - targetType: TYPE_TARGET_RDP, - visibleOptions: [ - '[data-test="rdp-option"]', - '[data-test="address-port-option"]', - ], - hiddenOptions: ['[data-test="ssh-option"]'], - }, { targetType: TYPE_TARGET_TCP, visibleOptions: [ @@ -151,4 +143,22 @@ module('Integration | Component | session/proxy-url', function (hooks) { .hasText(`${this.proxyAddress}`); assert.dom('.hds-copy-snippet:nth-of-type(2)').hasText(`${this.proxyPort}`); }); + + test('does not show dropdown for RDP target type', async function (assert) { + this.set('proxyAddress', 'http://localhost'); + this.set('proxyPort', '1234'); + this.set('targetType', TYPE_TARGET_RDP); + + await render( + hbs` + + `, + ); + + assert.dom('.proxy-url-container .hds-dropdown').doesNotExist(); + }); });