refactor: 💡 rdp default client port and max connections labels (#2998)

addons/core/translations/form/en-us.yaml

@@ -50,6 +50,7 @@ session_max_seconds:
 session_connection_limit:
   label: Maximum Connections
   help: The maximum number of connections allowed per session.  For unlimited, specify "-1".
+  rdp-windows-notice: 'Note: The Windows Remote Desktop Connection client requires a connection limit of 2 or higher'
 session_id:
   label: Session ID
 worker_release_version:

addons/core/translations/resources/en-us.yaml

@@ -751,7 +751,7 @@ target:
     default_client_port:
       label: Default Client Port
       help: The local proxy port on which to listen by default when a session is started on a client.
-      rdp-windows-error: 'Note: Windows OS prevents port 3389 from being used.'
+      rdp-windows-notice: 'Note: Windows OS prevents port 3389 from being used.'
     sidebar:
       label: Session Recording
       help: Record SSH sessions on this target and save them to a storage bucket.

ui/admin/app/components/form/target/details/index.hbs

@@ -169,28 +169,26 @@
   <Hds::Form::TextInput::Field
     @isOptional={{true}}
     @value={{@model.default_client_port}}
-    @isInvalid={{this.showDefaultClientPortError}}
+    @isInvalid={{@model.errors.default_client_port}}
     @type='text'
     name='default_client_port'
     disabled={{form.disabled}}
     {{on 'input' (set-from-event @model 'default_client_port')}}
-    {{on 'blur' this.handleDefaultClientPortBlur}}
     as |F|
   >
     <F.Label>{{t 'resources.target.form.default_client_port.label'}}</F.Label>
-    <F.HelperText>{{t
-        'resources.target.form.default_client_port.help'
-      }}</F.HelperText>
-    {{#if this.showDefaultClientPortError}}
+    <F.HelperText data-test-default-client-port-helper-text>
+      {{t 'resources.target.form.default_client_port.help'}}
+      {{#if (eq @model.type 'rdp')}}
+        <br />
+        {{t 'resources.target.form.default_client_port.rdp-windows-notice'}}
+      {{/if}}
+    </F.HelperText>
+    {{#if @model.errors.default_client_port}}
       <F.Error as |E|>
         {{#each @model.errors.default_client_port as |error|}}
           <E.Message>{{error.message}}</E.Message>
         {{/each}}
-        {{#if this.showRDPWindowsDefaultClientPortError}}
-          <E.Message data-test-error-message-default-client-port-rdp-windows>
-            {{t 'resources.target.form.default_client_port.rdp-windows-error'}}
-          </E.Message>
-        {{/if}}
       </F.Error>
     {{/if}}
   </Hds::Form::TextInput::Field>
@@ -227,7 +225,13 @@
     as |F|
   >
     <F.Label>{{t 'form.session_connection_limit.label'}}</F.Label>
-    <F.HelperText>{{t 'form.session_connection_limit.help'}}</F.HelperText>
+    <F.HelperText data-test-max-connections-helper-text>
+      {{t 'form.session_connection_limit.help'}}
+      {{#if (eq @model.type 'rdp')}}
+        <br />
+        {{t 'form.session_connection_limit.rdp-windows-notice'}}
+      {{/if}}
+    </F.HelperText>
     {{#if @model.errors.session_connection_limit}}
       <F.Error as |E|>
         {{#each @model.errors.session_connection_limit as |error|}}

ui/admin/app/components/form/target/details/index.js

@@ -10,27 +10,14 @@ import {
   TYPE_TARGET_SSH,
 } from 'api/models/target';
 import { service } from '@ember/service';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 
 const icons = {
   ssh: 'terminal-screen',
   tcp: 'network',
   rdp: 'monitor',
 };
-const RDP_WINDOWS_INVALID_DEFAULT_CLIENT_PORT = '3389';
 
 export default class FormTargetComponent extends Component {
-  // attributes
-
-  /**
-   * Flag to show the RDP Windows default client port error.
-   * This is set to true when the default client port is '3389' for RDP targets.
-   * It is used to indicate that the default client port is not recommended for Windows RDP targets.
-   * @type {boolean}
-   */
-  @tracked showRDPWindowsDefaultClientPortError = false;
-
   // =services
 
   @service features;
@@ -67,18 +54,6 @@ export default class FormTargetComponent extends Component {
     return this.features.isEnabled('ssh-target');
   }
 
-  /**
-   * Checks if the default client port error should be shown.
-   * This is true if either the default client port `3389` error is shown or there is an error on the default client port field.
-   * @type {boolean}
-   */
-  get showDefaultClientPortError() {
-    return (
-      this.showRDPWindowsDefaultClientPortError ||
-      this.args.model.get('errors.default_client_port')
-    );
-  }
-
   /**
    * Checks if the injected application credential alert should be shown for SSH and RDP targets.
    * @type {boolean}
@@ -100,19 +75,4 @@ export default class FormTargetComponent extends Component {
   get showTargetTypeRadioGroup() {
     return (this.isRDPEnabled || this.isSSHEnabled) && this.args.model.isNew;
   }
-
-  // =actions
-
-  /**
-   * Validates the default client port for the target.
-   * If the target type is RDP and the default client port is set to '3389', it sets the error flag.
-   * @param {Event} event
-   */
-  @action
-  handleDefaultClientPortBlur(event) {
-    const defaultClientPort = event.target.value;
-    this.showRDPWindowsDefaultClientPortError =
-      defaultClientPort === RDP_WINDOWS_INVALID_DEFAULT_CLIENT_PORT &&
-      this.args.model.type === TYPE_TARGET_RDP;
-  }
 }

ui/admin/tests/acceptance/targets/create-test.js

@@ -623,10 +623,6 @@ module('Acceptance | targets | create', function (hooks) {
     await fillIn(selectors.FIELD_DEFAULT_CLIENT_PORT, '3389');
     await blur(selectors.FIELD_DEFAULT_CLIENT_PORT);
 
-    assert
-      .dom(selectors.FIELD_DEFAULT_CLIENT_PORT_RDP_WINDOWS_ERROR)
-      .hasText('Note: Windows OS prevents port 3389 from being used.');
-
     await click(commonSelectors.SAVE_BTN);
 
     assert.strictEqual(getRDPTargetCount(), rdpTargetCount + 1);
@@ -680,4 +676,42 @@ module('Acceptance | targets | create', function (hooks) {
       .hasText('The request was invalid.');
     assert.dom(selectors.FIELD_NAME_ERROR).hasText('Name is required.');
   });
+
+  test('it shows additional helper text in field labels for rdp targets', async function (assert) {
+    featuresService.enable('rdp-target');
+
+    const staticDefaultClientPortHelperText =
+      'The local proxy port on which to listen by default when a session is started on a client.';
+    const staticMaxConnectionsHelperText =
+      'The maximum number of connections allowed per session. For unlimited, specify "-1".';
+
+    setRunOptions({
+      rules: {
+        'color-contrast': {
+          enabled: false,
+        },
+      },
+    });
+
+    await visit(urls.newTarget);
+    assert.dom(selectors.FIELD_TYPE_CHECKED).hasValue(TYPE_TARGET_TCP);
+    assert
+      .dom(selectors.FIELD_DEFAULT_CLIENT_PORT_HELPER_TEXT)
+      .hasText(staticDefaultClientPortHelperText);
+    assert
+      .dom(selectors.FIELD_MAX_CONNECTIONS_HELPER_TEXT)
+      .hasText(staticMaxConnectionsHelperText);
+
+    await click(selectors.FIELD_TYPE_VALUE('rdp'));
+    assert
+      .dom(selectors.FIELD_DEFAULT_CLIENT_PORT_HELPER_TEXT)
+      .hasText(
+        `${staticDefaultClientPortHelperText} Note: Windows OS prevents port 3389 from being used.`,
+      );
+    assert
+      .dom(selectors.FIELD_MAX_CONNECTIONS_HELPER_TEXT)
+      .hasText(
+        `${staticMaxConnectionsHelperText} Note: The Windows Remote Desktop Connection client requires a connection limit of 2 or higher`,
+      );
+  });
 });

ui/admin/tests/acceptance/targets/selectors.js

@@ -6,6 +6,10 @@
 export const FIELD_TYPE_CHECKED = '[name="Type"]:checked';
 export const FIELD_TYPE_VALUE = (type) => `[value=${type}]`;
 export const FIELD_DEFAULT_PORT_LABEL = '[data-test-default-port-label]';
+export const FIELD_DEFAULT_CLIENT_PORT_HELPER_TEXT =
+  '[data-test-default-client-port-helper-text]';
+export const FIELD_MAX_CONNECTIONS_HELPER_TEXT =
+  '[data-test-max-connections-helper-text]';
 export const FIELD_INFO = '.info-field';
 export const FIELD_INFO_LABEL = '.info-field .hds-form-helper-text';
 export const FIELD_ALIAS = '[name="value"]';
@@ -24,8 +28,6 @@ export const FIELD_ENABLE_RECORDING_TOGGLE =
   '[name=target-enable-session-recording]';
 export const FIELD_ADD_NEW_STORAGE_BUCKET_LINK =
   '.enable-session-recording-toggle .hds-link-standalone';
-export const FIELD_DEFAULT_CLIENT_PORT_RDP_WINDOWS_ERROR =
-  '[data-test-error-message-default-client-port-rdp-windows';
 export const FIELD_DEFAULT_CLIENT_PORT = '[name="default_client_port"]';
 
 export const NEW_TARGET_BTN = '[data-test-new-target-button]';

ui/admin/tests/acceptance/targets/update-test.js

@@ -428,4 +428,50 @@ module('Acceptance | targets | update', function (hooks) {
       `${urls.sshTarget}/add-injected-application-credential-sources`,
     );
   });
+
+  test('it shows additional helper text in field labels for rdp targets', async function (assert) {
+    setRunOptions({
+      rules: {
+        'color-contrast': {
+          enabled: false,
+        },
+      },
+    });
+
+    featuresService.enable('rdp-target');
+
+    const staticDefaultClientPortHelperText =
+      'The local proxy port on which to listen by default when a session is started on a client.';
+    const staticMaxConnectionsHelperText =
+      'The maximum number of connections allowed per session. For unlimited, specify "-1".';
+
+    setRunOptions({
+      rules: {
+        'color-contrast': {
+          enabled: false,
+        },
+      },
+    });
+
+    await visit(urls.target);
+
+    assert
+      .dom(selectors.FIELD_DEFAULT_CLIENT_PORT_HELPER_TEXT)
+      .hasText(staticDefaultClientPortHelperText);
+    assert
+      .dom(selectors.FIELD_MAX_CONNECTIONS_HELPER_TEXT)
+      .hasText(staticMaxConnectionsHelperText);
+
+    await visit(urls.rdpTarget);
+    assert
+      .dom(selectors.FIELD_DEFAULT_CLIENT_PORT_HELPER_TEXT)
+      .hasText(
+        `${staticDefaultClientPortHelperText} Note: Windows OS prevents port 3389 from being used.`,
+      );
+    assert
+      .dom(selectors.FIELD_MAX_CONNECTIONS_HELPER_TEXT)
+      .hasText(
+        `${staticMaxConnectionsHelperText} Note: The Windows Remote Desktop Connection client requires a connection limit of 2 or higher`,
+      );
+  });
 });