refactor: 💡 remove dropdown for rdp type

ui/desktop/app/components/session/proxy-url/index.hbs

@@ -3,21 +3,26 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<div class='proxy-url-container' data-test-proxy-url>
-  <Hds::Dropdown @listPosition='bottom-left' as |dd|>
-    <dd.ToggleButton
-      @color='secondary'
-      @text={{t (concat 'resources.session.proxy-url.' this.currentValue)}}
-    />
-    {{#each this.dropdownOptions as |optionId|}}
-      <dd.Interactive
-        data-test={{concat optionId '-option'}}
-        {{on 'click' (fn this.handleSelect optionId dd.close)}}
-      >
-        {{t (concat 'resources.session.proxy-url.' optionId)}}
-      </dd.Interactive>
-    {{/each}}
-  </Hds::Dropdown>
+<div
+  class='proxy-url-container{{if this.isRDPTarget " rdp-target"}}'
+  data-test-proxy-url
+>
+  {{#unless this.isRDPTarget}}
+    <Hds::Dropdown @listPosition='bottom-left' as |dd|>
+      <dd.ToggleButton
+        @color='secondary'
+        @text={{t (concat 'resources.session.proxy-url.' this.currentValue)}}
+      />
+      {{#each this.dropdownOptions as |optionId|}}
+        <dd.Interactive
+          data-test={{concat optionId '-option'}}
+          {{on 'click' (fn this.handleSelect optionId dd.close)}}
+        >
+          {{t (concat 'resources.session.proxy-url.' optionId)}}
+        </dd.Interactive>
+      {{/each}}
+    </Hds::Dropdown>
+  {{/unless}}
 
   {{#let this.copySnippetData as |snippet|}}
     {{#if snippet}}

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

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;

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`
+      <Session::ProxyUrl
+        @proxyAddress={{this.proxyAddress}}
+        @proxyPort={{this.proxyPort}}
+        @targetType={{this.targetType}}
+      />
+    `,
+    );
+
+    assert.dom('.proxy-url-container .hds-dropdown').doesNotExist();
+  });
 });