UI target worker filter deprecation message (#1574)

* feat: 🎸 Add worker_filter deprecation message to target form

* test: 💍 fix test selectors for worker_filter message

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

@@ -353,6 +353,12 @@ target:
       add:
         title: Add Injected Application Credential Sources
         description: Select injected Application credential sources to assign to this target.
+  workers:
+    title: Workers
+    description: Optional. You can customize how your workers route traffic to this target by setting up a filter that matches specific worker tags. If your target is in a private network, we recommend setting up an egress filter to specify a worker inside the network so that Boundary can access the host. Ingress and egress filters are allowed to select the same worker.
+    deprecation_message:
+      title: Worker filters have been updated
+      description: This target is configured using an older version of worker filters. You can update to the new filters but this will also update this field in the Boundary API. We will continue to use this filter until you update.
 credential-store:
   title: Credential Store
   title_plural: Credential Stores

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

@@ -125,28 +125,6 @@
     {{/if}}
   </Hds::Form::TextInput::Field>
 
-  <Hds::Form::TextInput::Field
-    @isRequired={{false}}
-    @isOptional={{true}}
-    @value={{@model.worker_filter}}
-    @isInvalid={{@model.errors.worker_filter}}
-    @type='text'
-    name='worker_filter'
-    disabled={{form.disabled}}
-    {{on 'input' (set-from-event @model 'worker_filter')}}
-    as |F|
-  >
-    <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
-    <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
-    {{#if @model.errors.worker_filter}}
-      <F.Error as |E|>
-        {{#each @model.errors.worker_filter as |error|}}
-          <E.Message>{{error.message}}</E.Message>
-        {{/each}}
-      </F.Error>
-    {{/if}}
-  </Hds::Form::TextInput::Field>
-
   <Hds::Form::TextInput::Field
     @isRequired={{@model.isTCP}}
     @isOptional={{not @model.isTCP}}
@@ -172,6 +150,75 @@
     {{/if}}
   </Hds::Form::TextInput::Field>
 
+  {{#if (feature-flag 'target-worker-filters-v2')}}
+    <Hds::Form::Fieldset
+      class='target-workers'
+      @layout='horizontal'
+      @isRequired={{false}}
+      as |F|
+    >
+      <F.Legend>{{t 'resources.target.workers.title'}}</F.Legend>
+      <F.HelperText>{{t 'resources.target.workers.description'}}</F.HelperText>
+      {{#if this.showDeprecationMessage}}
+        <F.Control>
+          <Hds::Alert @color='highlight' @type='inline' as |A|>
+            <A.Title>{{t
+                'resources.target.workers.deprecation_message.title'
+              }}</A.Title>
+            <A.Description>{{t
+                'resources.target.workers.deprecation_message.description'
+              }}</A.Description>
+          </Hds::Alert>
+        </F.Control>
+      {{/if}}
+      <F.Control>
+        <Hds::Form::TextInput::Field
+          @isRequired={{false}}
+          @isOptional={{true}}
+          @value={{@model.worker_filter}}
+          @isInvalid={{@model.errors.worker_filter}}
+          @type='text'
+          name='worker_filter'
+          disabled={{true}}
+          {{on 'input' (set-from-event @model 'worker_filter')}}
+          as |F|
+        >
+          <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
+          <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
+          {{#if @model.errors.worker_filter}}
+            <F.Error as |E|>
+              {{#each @model.errors.worker_filter as |error|}}
+                <E.Message>{{error.message}}</E.Message>
+              {{/each}}
+            </F.Error>
+          {{/if}}
+        </Hds::Form::TextInput::Field>
+      </F.Control>
+    </Hds::Form::Fieldset>
+  {{else}}
+    <Hds::Form::TextInput::Field
+      @isRequired={{false}}
+      @isOptional={{true}}
+      @value={{@model.worker_filter}}
+      @isInvalid={{@model.errors.worker_filter}}
+      @type='text'
+      name='worker_filter'
+      disabled={{form.disabled}}
+      {{on 'input' (set-from-event @model 'worker_filter')}}
+      as |F|
+    >
+      <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
+      <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
+      {{#if @model.errors.worker_filter}}
+        <F.Error as |E|>
+          {{#each @model.errors.worker_filter as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Hds::Form::TextInput::Field>
+  {{/if}}
+
   {{#if (can 'save model' @model)}}
     <form.actions
       @enableEditText={{t 'actions.edit-form'}}

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

@@ -29,4 +29,12 @@ export default class FormTargetComponent extends Component {
   get icon() {
     return icons[this.args.model.type];
   }
+
+  /**
+   * determines when the worker filter deprecation message should be shown
+   * @type {boolean}
+   */
+  get showDeprecationMessage() {
+    return !this.args.model.isNew && this.args.model.worker_filter;
+  }
 }

ui/admin/app/styles/app.scss

@@ -597,3 +597,15 @@
     padding: 0 sizing.rems(l);
   }
 }
+
+.target-workers {
+  margin-top: sizing.rems(xxl);
+
+  .hds-form-legend {
+    font-size: sizing.rems(l) - sizing.rems(xxs); // 20
+  }
+
+  .hds-alert {
+    margin-bottom: sizing.rems(l);
+  }
+}

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

@@ -85,6 +85,7 @@ module('Acceptance | targets | create', function (hooks) {
   });
 
   test('can create type `ssh`', async function (assert) {
+    featuresService.disable('target-worker-filters-v2');
     assert.expect(4);
     const targetCount = getTargetCount();
     const sshTargetCount = getSSHTargetCount();
@@ -110,6 +111,7 @@ module('Acceptance | targets | create', function (hooks) {
   });
 
   test('can create type `tcp`', async function (assert) {
+    featuresService.disable('target-worker-filters-v2');
     assert.expect(4);
     const targetCount = getTargetCount();
     const tcpTargetCount = getTCPTargetCount();

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

@@ -15,6 +15,8 @@ module('Acceptance | targets | read', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  let featuresService;
+
   const instances = {
     scopes: {
       global: null,
@@ -34,6 +36,7 @@ module('Acceptance | targets | read', function (hooks) {
   };
 
   hooks.beforeEach(function () {
+    featuresService = this.owner.lookup('service:features');
     // Generate resources
     instances.scopes.global = this.server.create('scope', { id: 'global' });
     instances.scopes.org = this.server.create('scope', {
@@ -87,6 +90,58 @@ module('Acceptance | targets | read', function (hooks) {
     assert.strictEqual(currentURL(), urls.tcpTarget);
   });
 
+  test('visiting an ssh target shows the worker_filter deprecation message when worker_filter has value and "target-worker-filters-v2" is enabled', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    assert.expect(1);
+    instances.sshTarget.worker_filter = 'worker filter present';
+    await visit(urls.sshTarget);
+
+    assert.dom('.hds-alert').isVisible();
+  });
+
+  test('visiting a tcp target shows the worker_filter deprecation message when worker_filter has value and "target-worker-filters-v2" is enabled', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    assert.expect(1);
+    instances.tcpTarget.worker_filter = 'worker filter present';
+    await visit(urls.tcpTarget);
+
+    assert.dom('.hds-alert').isVisible();
+  });
+
+  test('visiting an ssh target does not show the worker_filter deprecation message when worker_filter has no value and "target-worker-filters-v2" is enabled', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    assert.expect(1);
+    instances.sshTarget.worker_filter = null;
+    await visit(urls.sshTarget);
+
+    assert.dom('.hds-alert').doesNotExist();
+  });
+
+  test('visiting a tcp target does not show the worker_filter deprecation message when worker_filter has no value and "target-worker-filters-v2" is enabled', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    assert.expect(1);
+    instances.tcpTarget.worker_filter = null;
+    await visit(urls.tcpTarget);
+
+    assert.dom('.hds-alert').doesNotExist();
+  });
+
+  test('visiting an ssh target does not show the worker_filter deprecation message when "target-worker-filters-v2" is disabled', async function (assert) {
+    featuresService.disable('target-worker-filters-v2');
+    assert.expect(1);
+    await visit(urls.sshTarget);
+
+    assert.dom('.hds-alert').doesNotExist();
+  });
+
+  test('visiting a tcp target does not show the worker_filter deprecation message when "target-worker-filters-v2" is disabled', async function (assert) {
+    featuresService.disable('target-worker-filters-v2');
+    assert.expect(1);
+    await visit(urls.tcpTarget);
+
+    assert.dom('.hds-alert').doesNotExist();
+  });
+
   test('cannot navigate to a ssh target form without proper authorization', async function (assert) {
     assert.expect(2);
     await visit(urls.projectScope);

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

@@ -14,6 +14,8 @@ module('Acceptance | targets | update', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  let featuresService;
+
   const instances = {
     scopes: {
       global: null,
@@ -31,6 +33,8 @@ module('Acceptance | targets | update', function (hooks) {
   };
 
   hooks.beforeEach(function () {
+    featuresService = this.owner.lookup('service:features');
+    featuresService.disable('target-worker-filters-v2');
     // Generate resources
     instances.scopes.global = this.server.create('scope', { id: 'global' });
     instances.scopes.org = this.server.create('scope', {
@@ -78,6 +82,30 @@ module('Acceptance | targets | update', function (hooks) {
     );
   });
 
+  test('updating a target shows the worker_filter deprecation message when "target-worker-filters-v2" is enabled', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    assert.expect(1);
+    await visit(urls.target);
+
+    assert.dom('.hds-alert').isVisible();
+  });
+
+  test('updating a target does not show the worker_filter deprecation message when "target-worker-filters-v2" is disabled', async function (assert) {
+    featuresService.disable('target-worker-filters-v2');
+    assert.expect(1);
+    await visit(urls.target);
+
+    assert.dom('.hds-alert').doesNotExist();
+  });
+
+  test('cannot edit worker_filter when "target-worker-filters-v2" is enabled', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    assert.expect(1);
+    await visit(urls.target);
+
+    assert.dom('[name=worker_filter]').isDisabled();
+  });
+
   test('can cancel changes to existing target', async function (assert) {
     assert.expect(2);
     await visit(urls.targets);