refactor: 💡 Update how WorkerDiagram is used in Target form (#1626)

* refactor: 💡 Update how WorkerDiagram is used in Target form

* refactor: 💡 remove extra div wrappers

Remove div wrappers for worker diagrams that were no longer needed

* refactor: 💡 rename worker diagram attributes to be more clear

* refactor: 💡 remove style changes out of scope for updates

* refactor: 💡 update logic for how HCP diagram is shown

* chore: 🤖 Add multi-hop flags to OSS block for verbosity

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

@@ -224,21 +224,10 @@
       {{/if}}
       <F.Control>
         {{#if this.showTargetFilters}}
-          {{#if this.workerDiagramHCPDualFilter}}
+          <WorkerDiagram
-            <WorkerDiagram::DualFilter::Hcp
+            @egressWorkerFilterEnabled={{this.egressWorkerFilterEnabled}}
-              @egressFilter={{this.egressWorkerFilterEnabled}}
+            @ingressWorkerFilterEnabled={{this.ingressWorkerFilterEnabled}}
-              @ingressFilter={{this.ingressWorkerFilterEnabled}}
+          />
-            />
-          {{else if this.workerDiagramDualFilter}}
-            <WorkerDiagram::DualFilter
-              @egressFilter={{this.egressWorkerFilterEnabled}}
-              @ingressFilter={{this.ingressWorkerFilterEnabled}}
-            />
-          {{else}}
-            <WorkerDiagram::SingleFilter
-              @egressFilter={{this.egressWorkerFilterEnabled}}
-            />
-          {{/if}}
 
           {{#if (feature-flag 'target-worker-filters-v2-ingress')}}
             <Form::Target::WorkerFilter

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

@@ -61,22 +61,6 @@ export default class FormTargetComponent extends Component {
     return !this.args.model.worker_filter;
   }
 
-  //note: these getters will go away when we refactor worker diagram
-  /**
-   * determines when the enterprise dual filter diagrams should be shown
-   * @type {boolean}
-   */
-  get workerDiagramDualFilter() {
-    return this.features.isEnabled('target-worker-filters-v2-ingress');
-  }
-  /**
-   * determines when the hcp dual filter diagrams should be shown
-   * @type {boolean}
-   */
-  get workerDiagramHCPDualFilter() {
-    return this.features.isEnabled('target-worker-filters-v2-hcp');
-  }
-
   //actions
   @action
   toggleEgressFilter() {

ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs

@@ -1,102 +1,91 @@
-<div data-test-dual-filters-hcp>
+{{#if (and @egressWorkerFilterEnabled @ingressWorkerFilterEnabled)}}
-  {{#if (and @egressFilter @ingressFilter)}}
+  <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-on as |D|>
-    <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-on as |D|>
+    <D.Item @icon='user'>
-      <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
-        {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
-      </D.Item>
+    <D.Item @icon='settings'>
-      <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.ingress-worker'}}
-        {{t 'resources.target.workers.diagram.ingress-worker'}}
+    </D.Item>
-      </D.Item>
+    <D.Group
-      <D.Group
+      @title={{t 'resources.target.workers.diagram.network'}}
-        @title={{t 'resources.target.workers.diagram.network'}}
+      @color='highlight'
-        @color='highlight'
-      >
-        <D.Item @icon='settings'>
-          {{t 'resources.target.workers.diagram.egress-worker'}}
-        </D.Item>
-        <D.Item @icon='server'>
-          {{t 'resources.target.workers.diagram.host'}}
-        </D.Item>
-      </D.Group>
-    </OrderedSeriesDiagram>
-    <div class='target-worker-filter-explainer'>
-      <Hds::Form::HelperText>
-        {{t
-          'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'
-        }}
-      </Hds::Form::HelperText>
-    </div>
-  {{else if @ingressFilter}}
-    <OrderedSeriesDiagram
-      data-test-dual-filter-hcp-egress-off-ingress-on
-      as |D|
     >
-      <D.Item @icon='user'>
-        {{t 'resources.target.workers.diagram.client'}}
-      </D.Item>
       <D.Item @icon='settings'>
-        {{t 'resources.target.workers.diagram.ingress-worker'}}
+        {{t 'resources.target.workers.diagram.egress-worker'}}
       </D.Item>
       <D.Item @icon='server'>
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
-    </OrderedSeriesDiagram>
+    </D.Group>
-    <div class='target-worker-filter-explainer'>
+  </OrderedSeriesDiagram>
-      <Hds::Form::HelperText>
+  <div class='worker-diagram-explainer'>
-        {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+    <Hds::Form::HelperText>
-      </Hds::Form::HelperText>
+      {{t
-    </div>
+        'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'
-  {{else if @egressFilter}}
+      }}
-    <OrderedSeriesDiagram
+    </Hds::Form::HelperText>
-      data-test-dual-filter-hcp-egress-on-ingress-off
+  </div>
-      as |D|
+{{else if @ingressWorkerFilterEnabled}}
-    >
+  <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-on as |D|>
-      <D.Item @icon='user'>
+    <D.Item @icon='user'>
-        {{t 'resources.target.workers.diagram.client'}}
+      {{t 'resources.target.workers.diagram.client'}}
-      </D.Item>
+    </D.Item>
-      <D.Item @icon='settings'>
+    <D.Item @icon='settings'>
-        {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
+      {{t 'resources.target.workers.diagram.ingress-worker'}}
-          {{t 'resources.target.workers.diagram.hcp-worker'}}
+    </D.Item>
-        {{else}}
+    <D.Item @icon='server'>
-          {{t 'resources.target.workers.diagram.frontline-worker'}}
+      {{t 'resources.target.workers.diagram.host'}}
-        {{/if}}
+    </D.Item>
-      </D.Item>
+  </OrderedSeriesDiagram>
-      <D.Group
+  <div class='worker-diagram-explainer'>
-        @title={{t 'resources.target.workers.diagram.network'}}
+    <Hds::Form::HelperText>
-        @color='highlight'
+      {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
-      >
+    </Hds::Form::HelperText>
-        <D.Item @icon='settings'>
+  </div>
-          {{t 'resources.target.workers.diagram.egress-worker'}}
+{{else if @egressWorkerFilterEnabled}}
-        </D.Item>
+  <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-off as |D|>
-        <D.Item @icon='server'>
+    <D.Item @icon='user'>
-          {{t 'resources.target.workers.diagram.host'}}
+      {{t 'resources.target.workers.diagram.client'}}
-        </D.Item>
+    </D.Item>
-      </D.Group>
+    <D.Item @icon='settings'>
-    </OrderedSeriesDiagram>
+      {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
-    <div class='target-worker-filter-explainer'>
-      <Hds::Form::HelperText>
-        {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
-      </Hds::Form::HelperText>
-    </div>
-  {{else}}
-    <OrderedSeriesDiagram
-      data-test-dual-filter-hcp-egress-off-ingress-off
-      as |D|
-    >
-      <D.Item @icon='user'>
-        {{t 'resources.target.workers.diagram.client'}}
-      </D.Item>
-      <D.Item @icon='settings'>
         {{t 'resources.target.workers.diagram.hcp-worker'}}
+      {{else}}
+        {{t 'resources.target.workers.diagram.frontline-worker'}}
+      {{/if}}
+    </D.Item>
+    <D.Group
+      @title={{t 'resources.target.workers.diagram.network'}}
+      @color='highlight'
+    >
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.egress-worker'}}
       </D.Item>
       <D.Item @icon='server'>
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
-    </OrderedSeriesDiagram>
+    </D.Group>
-    <div class='target-worker-filter-explainer'>
+  </OrderedSeriesDiagram>
-      <Hds::Form::HelperText>
+  <div class='worker-diagram-explainer'>
-        {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
+    <Hds::Form::HelperText>
-      </Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
-    </div>
+    </Hds::Form::HelperText>
-  {{/if}}
+  </div>
-</div>
+{{else}}
+  <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-off as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
+    <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.hcp-worker'}}
+    </D.Item>
+    <D.Item @icon='server'>
+      {{t 'resources.target.workers.diagram.host'}}
+    </D.Item>
+  </OrderedSeriesDiagram>
+  <div class='worker-diagram-explainer'>
+    <Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
+    </Hds::Form::HelperText>
+  </div>
+{{/if}}

ui/admin/app/components/worker-diagram/dual-filter/index.hbs

@@ -1,89 +1,87 @@
-<div data-test-dual-filters>
+{{#if (and @egressWorkerFilterEnabled @ingressWorkerFilterEnabled)}}
-  {{#if (and @egressFilter @ingressFilter)}}
+  <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-on as |D|>
-    <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-on as |D|>
+    <D.Item @icon='user'>
-      <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
-        {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
-      </D.Item>
+    <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.ingress-worker'}}
+    </D.Item>
+    <D.Group
+      @title={{t 'resources.target.workers.diagram.network'}}
+      @color='highlight'
+    >
       <D.Item @icon='settings'>
-        {{t 'resources.target.workers.diagram.ingress-worker'}}
+        {{t 'resources.target.workers.diagram.egress-worker'}}
-      </D.Item>
-      <D.Group
-        @title={{t 'resources.target.workers.diagram.network'}}
-        @color='highlight'
-      >
-        <D.Item @icon='settings'>
-          {{t 'resources.target.workers.diagram.egress-worker'}}
-        </D.Item>
-        <D.Item @icon='server'>
-          {{t 'resources.target.workers.diagram.host'}}
-        </D.Item>
-      </D.Group>
-    </OrderedSeriesDiagram>
-    <div class='target-worker-filter-explainer'>
-      <Hds::Form::HelperText>
-        {{t
-          'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'
-        }}
-      </Hds::Form::HelperText>
-    </div>
-  {{else if @ingressFilter}}
-    <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|>
-      <D.Item @icon='user'>
-        {{t 'resources.target.workers.diagram.client'}}
-      </D.Item>
-      <D.Item @icon='settings'>
-        {{t 'resources.target.workers.diagram.ingress-worker'}}
       </D.Item>
       <D.Item @icon='server'>
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
-    </OrderedSeriesDiagram>
+    </D.Group>
-    <div class='target-worker-filter-explainer'>
+  </OrderedSeriesDiagram>
-      <Hds::Form::HelperText>
+  <div class='worker-diagram-explainer'>
-        {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+    <Hds::Form::HelperText>
-      </Hds::Form::HelperText>
+      {{t
-    </div>
+        'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'
-  {{else if @egressFilter}}
+      }}
-    <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
+    </Hds::Form::HelperText>
-      <D.Item @icon='user'>
+  </div>
-        {{t 'resources.target.workers.diagram.client'}}
+{{else if @ingressWorkerFilterEnabled}}
-      </D.Item>
+  <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
+    <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.ingress-worker'}}
+    </D.Item>
+    <D.Item @icon='server'>
+      {{t 'resources.target.workers.diagram.host'}}
+    </D.Item>
+  </OrderedSeriesDiagram>
+  <div class='worker-diagram-explainer'>
+    <Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+    </Hds::Form::HelperText>
+  </div>
+{{else if @egressWorkerFilterEnabled}}
+  <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
+    <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.frontline-worker'}}
+    </D.Item>
+    <D.Group
+      @title={{t 'resources.target.workers.diagram.network'}}
+      @color='highlight'
+    >
       <D.Item @icon='settings'>
-        {{t 'resources.target.workers.diagram.frontline-worker'}}
+        {{t 'resources.target.workers.diagram.egress-worker'}}
-      </D.Item>
-      <D.Group
-        @title={{t 'resources.target.workers.diagram.network'}}
-        @color='highlight'
-      >
-        <D.Item @icon='settings'>
-          {{t 'resources.target.workers.diagram.egress-worker'}}
-        </D.Item>
-        <D.Item @icon='server'>
-          {{t 'resources.target.workers.diagram.host'}}
-        </D.Item>
-      </D.Group>
-    </OrderedSeriesDiagram>
-    <div class='target-worker-filter-explainer'>
-      <Hds::Form::HelperText>
-        {{t 'resources.target.workers.filter-explainer.dual-egress-on'}}
-      </Hds::Form::HelperText>
-    </div>
-  {{else}}
-    <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
-      <D.Item @icon='user'>
-        {{t 'resources.target.workers.diagram.client'}}
-      </D.Item>
-      <D.Item @icon='settings'>
-        {{t 'resources.target.workers.diagram.any-worker'}}
       </D.Item>
       <D.Item @icon='server'>
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
-    </OrderedSeriesDiagram>
+    </D.Group>
-    <div class='target-worker-filter-explainer'>
+  </OrderedSeriesDiagram>
-      <Hds::Form::HelperText>
+  <div class='worker-diagram-explainer'>
-        {{t 'resources.target.workers.filter-explainer.any-worker'}}
+    <Hds::Form::HelperText>
-      </Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.dual-egress-on'}}
-    </div>
+    </Hds::Form::HelperText>
-  {{/if}}
+  </div>
-</div>
+{{else}}
+  <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
+    <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.any-worker'}}
+    </D.Item>
+    <D.Item @icon='server'>
+      {{t 'resources.target.workers.diagram.host'}}
+    </D.Item>
+  </OrderedSeriesDiagram>
+  <div class='worker-diagram-explainer'>
+    <Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.any-worker'}}
+    </Hds::Form::HelperText>
+  </div>
+{{/if}}

ui/admin/app/components/worker-diagram/index.hbs

@@ -1,6 +1,17 @@
-{{yield
+{{#if (feature-flag 'target-worker-filters-v2-ingress')}}
-  (hash
+  {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
-    SingleFilter=(component 'worker-diagram/single-filter')
+    <WorkerDiagram::DualFilter::Hcp
-    DualFilter=(component 'worker-diagram/dual-filter')
+      @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
-  )
+      @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
-}}
+    />
+  {{else}}
+    <WorkerDiagram::DualFilter
+      @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
+      @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
+    />
+  {{/if}}
+{{else}}
+  <WorkerDiagram::SingleFilter
+    @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
+  />
+{{/if}}

ui/admin/app/components/worker-diagram/single-filter/index.hbs

@@ -1,4 +1,4 @@
-{{#if @egressFilter}}
+{{#if @egressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-single-filter-egress-on as |D|>
     <D.Item @icon='user'>
       {{t 'resources.target.workers.diagram.client'}}
@@ -15,7 +15,7 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <div class='target-worker-filter-explainer'>
+  <div class='worker-diagram-explainer'>
     <Hds::Form::HelperText>
       {{t 'resources.target.workers.filter-explainer.egress-worker'}}
     </Hds::Form::HelperText>
@@ -32,7 +32,7 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <div class='target-worker-filter-explainer'>
+  <div class='worker-diagram-explainer'>
     <Hds::Form::HelperText>
       {{t 'resources.target.workers.filter-explainer.any-worker'}}
     </Hds::Form::HelperText>

ui/admin/app/styles/app.scss

@@ -626,7 +626,7 @@
     }
   }
 
-  .target-worker-filter-explainer {
+  .worker-diagram-explainer {
     min-height: 4rem; // 1
   }
 

ui/admin/config/environment.js

@@ -14,6 +14,8 @@ const featureEditions = {
     'byow-pki-upstream': true,
     'vault-worker-filter': false,
     'target-worker-filters-v2': true,
+    'target-worker-filters-v2-ingress': false,
+    'target-worker-filters-v2-hcp': false,
     'target-network-address': true,
     'credential-library-vault-ssh-certificate': false,
   },

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

@@ -106,7 +106,7 @@ module('Acceptance | targets | update', function (hooks) {
     assert.dom('[name=worker_filter]').isDisabled();
   });
 
-  test('show update filter button when the old worker filter field is not empty', async function (assert) {
+  test('show update filter button when the old worker filter field is has value', async function (assert) {
     featuresService.enable('target-worker-filters-v2');
     assert.expect(2);
     await visit(urls.target);
@@ -129,6 +129,25 @@ module('Acceptance | targets | update', function (hooks) {
     );
   });
 
+  test('onClick update filter should select the egress and ingress toggle and the worker_filter value is copied into egress_worker_filter and ingress_worker_filter', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    featuresService.enable('target-worker-filters-v2-ingress');
+    assert.expect(3);
+    await visit(urls.target);
+    assert.dom('[name=worker_filter]').isVisible();
+    const worker_filter_value = this.server.schema.targets.first().workerFilter;
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
+    await click('.hds-button[type="button"]', 'Update Filter');
+    assert.strictEqual(
+      this.server.schema.targets.first().egressWorkerFilter,
+      worker_filter_value
+    );
+    assert.strictEqual(
+      this.server.schema.targets.first().ingressWorkerFilter,
+      worker_filter_value
+    );
+  });
+
   test('show filter input field when the `egress_worker_filter` toggle is on', async function (assert) {
     featuresService.enable('target-worker-filters-v2');
     assert.expect(1);
@@ -173,6 +192,53 @@ module('Acceptance | targets | update', function (hooks) {
     );
   });
 
+  test('show filter input field when the `ingress_worker_filter` toggle is on', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    featuresService.enable('target-worker-filters-v2-ingress');
+    assert.expect(1);
+    await visit(urls.target);
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
+    await click('.hds-button[type="button"]', 'Update Filter');
+    assert.dom('[name=ingress_worker_filter]').isVisible();
+  });
+
+  test('hide filter input field when the `ingress_worker_filter` toggled is off', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    featuresService.enable('target-worker-filters-v2-ingress');
+    assert.expect(1);
+    await visit(urls.target);
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
+    await click('.hds-button[type="button"]', 'Update Filter');
+    await click('.hds-form-toggle__control', 'Ingress worker filter');
+    assert.dom('[name=ingress_worker_filter]').isNotVisible();
+  });
+
+  test('clear `ingress_worker_field` value from a target when the toggle is off and form is saved', async function (assert) {
+    featuresService.enable('target-worker-filters-v2');
+    featuresService.enable('target-worker-filters-v2-ingress');
+    assert.expect(5);
+    await visit(urls.target);
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
+    await click('.hds-button[type="button"]', 'Update Filter');
+    await fillIn('[name=ingress_worker_filter]', 'random filter string');
+    await click('.rose-form-actions [type="submit"]');
+    assert.strictEqual(currentURL(), urls.target);
+    assert.strictEqual(
+      this.server.schema.targets.first().ingressWorkerFilter,
+      'random filter string'
+    );
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
+    await click('.hds-form-toggle__control', 'Ingress worker filter');
+    await click('.rose-form-actions [type="submit"]');
+    //clear egress_worker_filter when the toggle is off
+    assert.strictEqual(currentURL(), urls.target);
+    assert.dom('[name=ingress_worker_filter]').doesNotExist();
+    assert.strictEqual(
+      this.server.schema.targets.first().ingressWorkerFilter,
+      null
+    );
+  });
+
   test('can cancel changes to existing target', async function (assert) {
     assert.expect(2);
     await visit(urls.targets);

ui/admin/tests/integration/components/form/target/details-test.js

@@ -1,57 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, getContext } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-import { setupIntl } from 'ember-intl/test-support';
-
-module('Integration | Component | form/target/details', function (hooks) {
-  setupRenderingTest(hooks);
-  setupIntl(hooks);
-
-  let featuresService;
-
-  hooks.beforeEach(function () {
-    const { owner } = getContext();
-    featuresService = owner.lookup('service:features');
-    this.model = { type: 'ssh' };
-    this.submit = () => {};
-    this.cancel = () => {};
-    this.changeType = () => {};
-  });
-
-  test('shows the correct worker diagram when `target-worker-filters-v2` is enabled', async function (assert) {
-    featuresService.enable('target-worker-filters-v2');
-    featuresService.disable('target-worker-filters-v2-ingress');
-    featuresService.disable('target-worker-filters-v2-hcp');
-    assert.expect(1);
-    await render(
-      hbs`<Form::Target::Details @model={{this.model}} @defaultPort='22' @submit={{this.submit}} @cancel={{this.cancel}} @changeType={{this.changeType}} />`
-    );
-
-    assert.dom('[data-test-single-filter-egress-off]').isVisible();
-  });
-
-  test('shows the correct worker diagram when `target-worker-filters-v2` and `target-worker-filters-v2-ingress` is enabled', async function (assert) {
-    featuresService.enable('target-worker-filters-v2');
-    featuresService.enable('target-worker-filters-v2-ingress');
-    featuresService.disable('target-worker-filters-v2-hcp');
-    assert.expect(1);
-    await render(
-      hbs`<Form::Target::Details @model={{this.model}} @defaultPort='22' @submit={{this.submit}} @cancel={{this.cancel}} @changeType={{this.changeType}} />`
-    );
-
-    assert.dom('[data-test-dual-filters]').isVisible();
-  });
-
-  test('shows the correct worker diagram when `target-worker-filters-v2` and `target-worker-filters-v2-ingress` and `target-worker-filters-v2-hcp` is enabled', async function (assert) {
-    featuresService.enable('target-worker-filters-v2');
-    featuresService.enable('target-worker-filters-v2-ingress');
-    featuresService.enable('target-worker-filters-v2-hcp');
-    assert.expect(1);
-    await render(
-      hbs`<Form::Target::Details @model={{this.model}} @defaultPort='22' @submit={{this.submit}} @cancel={{this.cancel}} @changeType={{this.changeType}} />`
-    );
-
-    assert.dom('[data-test-dual-filters-hcp]').isVisible();
-  });
-});

ui/admin/tests/integration/components/worker-diagram/dual-filter/hcp/index-test.js

@@ -20,33 +20,33 @@ module(
       featuresService.disable(targetWorkerFilterIngress);
     });
 
-    test('it renders the correct diagram when egressFilter is false and ingress is false', async function (assert) {
+    test('it renders the correct diagram when egress and ingress filter is false', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{false}} @ingressFilter={{false}} />`
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressWorkerFilterEnabled={{false}} @ingressWorkerFilterEnabled={{false}} />`
       );
 
       assert.dom('[data-test-dual-filter-hcp-egress-off-ingress-off]').exists();
     });
 
-    test('it renders the correct diagram when egressFilter is true and ingress is false', async function (assert) {
+    test('it renders the correct diagram when egress filter is true and ingress filter is false', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{true}} @ingressFilter={{false}} />`
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressWorkerFilterEnabled={{true}} @ingressWorkerFilterEnabled={{false}} />`
       );
 
       assert.dom('[data-test-dual-filter-hcp-egress-on-ingress-off]').exists();
     });
 
-    test('it renders the correct diagram when egressFilter is false and ingress is true', async function (assert) {
+    test('it renders the correct diagram when egress filter is false and ingress filter is true', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{false}} @ingressFilter={{true}} />`
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressWorkerFilterEnabled={{false}} @ingressWorkerFilterEnabled={{true}} />`
       );
 
       assert.dom('[data-test-dual-filter-hcp-egress-off-ingress-on]').exists();
     });
 
-    test('it renders the correct diagram when egressFilter is true and ingress is true', async function (assert) {
+    test('it renders the correct diagram when egress and ingress filter is true', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{true}} @ingressFilter={{true}} />`
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressWorkerFilterEnabled={{true}} @ingressWorkerFilterEnabled={{true}} />`
       );
 
       assert.dom('[data-test-dual-filter-hcp-egress-on-ingress-on]').exists();

ui/admin/tests/integration/components/worker-diagram/dual-filter/index-test.js

@@ -20,33 +20,33 @@ module(
       featuresService.disable(targetWorkerFilterHCP);
     });
 
-    test('it renders the correct diagram when egressFilter is false and ingress is false', async function (assert) {
+    test('it renders the correct diagram when egress and ingress filter is false', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter @egressFilter={{false}} @ingressFilter={{false}} />`
+        hbs`<WorkerDiagram::DualFilter @egressWorkerFilterEnabled={{false}} @ingressWorkerFilterEnabled={{false}} />`
       );
 
       assert.dom('[data-test-dual-filter-egress-off-ingress-off]').exists();
     });
 
-    test('it renders the correct diagram when egressFilter is true and ingress is false', async function (assert) {
+    test('it renders the correct diagram when egress filter is true and ingress filter is false', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter @egressFilter={{true}} @ingressFilter={{false}} />`
+        hbs`<WorkerDiagram::DualFilter @egressWorkerFilterEnabled={{true}} @ingressWorkerFilterEnabled={{false}} />`
       );
 
       assert.dom('[data-test-dual-filter-egress-on-ingress-off]').exists();
     });
 
-    test('it renders the correct diagram when egressFilter is false and ingress is true', async function (assert) {
+    test('it renders the correct diagram when egress filter is false and ingress filter is true', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter @egressFilter={{false}} @ingressFilter={{true}} />`
+        hbs`<WorkerDiagram::DualFilter @egressWorkerFilterEnabled={{false}} @ingressWorkerFilterEnabled={{true}} />`
       );
 
       assert.dom('[data-test-dual-filter-egress-off-ingress-on]').exists();
     });
 
-    test('it renders the correct diagram when egressFilter is true and ingress is true', async function (assert) {
+    test('it renders the correct diagram when egress and ingress filter is true', async function (assert) {
       await render(
-        hbs`<WorkerDiagram::DualFilter @egressFilter={{true}} @ingressFilter={{true}} />`
+        hbs`<WorkerDiagram::DualFilter @egressWorkerFilterEnabled={{true}} @ingressWorkerFilterEnabled={{true}} />`
       );
 
       assert.dom('[data-test-dual-filter-egress-on-ingress-on]').exists();

ui/admin/tests/integration/components/worker-diagram/index-test.js

@@ -17,18 +17,30 @@ module('Integration | Component | worker-diagram/index', function (hooks) {
     featuresService.disable(targetWorkerFilterIngress);
     featuresService.disable(targetWorkerFilterHCP);
     assert.expect(1);
-    await render(hbs`<WorkerDiagram::SingleFilter />`);
+    await render(hbs`<WorkerDiagram />`);
 
     assert.dom('[data-test-single-filter-egress-off]').isVisible();
   });
 
-  test('it renders a dual filter diagram', async function (assert) {
+  test('it renders a dual filter diagram when `target-worker-filters-v2-ingress` is enabled', async function (assert) {
     featuresService = this.owner.lookup('service:features');
     featuresService.enable(targetWorkerFilterIngress);
     featuresService.disable(targetWorkerFilterHCP);
     assert.expect(1);
-    await render(hbs`<WorkerDiagram::DualFilter />`);
+    await render(hbs`<WorkerDiagram />`);
 
     assert.dom('[data-test-dual-filter-egress-off-ingress-off]').isVisible();
   });
+
+  test('it renders a HCP dual filter diagram when `target-worker-filters-v2-hcp` is enabled', async function (assert) {
+    featuresService = this.owner.lookup('service:features');
+    featuresService.enable(targetWorkerFilterIngress);
+    featuresService.enable(targetWorkerFilterHCP);
+    assert.expect(1);
+    await render(hbs`<WorkerDiagram />`);
+
+    assert
+      .dom('[data-test-dual-filter-hcp-egress-off-ingress-off]')
+      .isVisible();
+  });
 });

ui/admin/tests/integration/components/worker-diagram/single-filter/index-test.js

@@ -10,19 +10,21 @@ module(
     setupRenderingTest(hooks);
     setupIntl(hooks);
 
-    test('it renders the correct diagram when egressFilter is false', async function (assert) {
+    test('it renders the correct diagram when egress filter is false', async function (assert) {
       assert.expect(2);
       await render(
-        hbs`<WorkerDiagram::SingleFilter @egressFilter={{false}} />`
+        hbs`<WorkerDiagram::SingleFilter @egressWorkerFilterEnabled={{false}} />`
       );
 
       assert.dom('[data-test-single-filter-egress-off]').isVisible();
       assert.dom('[data-test-single-filter-egress-on]').doesNotExist();
     });
 
-    test('it renders the correct diagram when egressFilter is true', async function (assert) {
+    test('it renders the correct diagram when egress filter is true', async function (assert) {
       assert.expect(2);
-      await render(hbs`<WorkerDiagram::SingleFilter @egressFilter={{true}} />`);
+      await render(
+        hbs`<WorkerDiagram::SingleFilter @egressWorkerFilterEnabled={{true}} />`
+      );
 
       assert.dom('[data-test-single-filter-egress-on]').isVisible();
       assert.dom('[data-test-single-filter-egress-off]').doesNotExist();