Create Worker Diagram for egress and ingress filters (#1584)

* feat: 🎸 create Worker Diagram for OSS

✅ Closes: ICU-7579

* refactor: 💡 change ordered series icon to have white background

* feat: 🎸 Create Worker Diagram for egress and ingress filters

✅ Closes: ICU-7592

* refactor: 💡 remove wrapping divs and update data-test attrs

* refactor: 💡 revert HDS icon background color change

* refactor: 💡 make data-test attr more verbose

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

@@ -374,7 +374,9 @@ target:
     diagram:
       client: Client
       any-worker: Any worker
+      front-line-worker: Front line worker
       egress-worker: Egress worker
+      ingress-worker: Ingress worker
       host: Host
       network: Private network
 credential-store:

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

@@ -0,0 +1,67 @@
+<div data-test-dual-filters>
+  {{#if (and @egressFilter @ingressFilter)}}
+    <OrderedSeriesDiagram data-test-dual-filter-egress-on-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.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>
+  {{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>
+  {{else if @egressFilter}}
+    <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.front-line-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>
+  {{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>
+  {{/if}}
+</div>

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

@@ -1 +1,6 @@
-{{yield (hash SingleFilter=(component 'worker-diagram/single-filter'))}}
+{{yield
+  (hash
+    SingleFilter=(component 'worker-diagram/single-filter')
+    DualFilter=(component 'worker-diagram/dual-filter')
+  )
+}}

ui/admin/config/environment.js

@@ -149,6 +149,7 @@ module.exports = function (environment) {
     ENV.featureFlags['ssh-target'] = true;
     ENV.featureFlags['vault-worker-filter'] = true;
     ENV.featureFlags['target-worker-filters-v2'] = true;
+    ENV.featureFlags['target-worker-filters-v2-ingress'] = true;
     ENV.featureFlags['target-network-address'] = true;
     ENV.featureFlags['credential-library-vault-ssh-cert'] = true;
   }

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

@@ -0,0 +1,79 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module(
+  'Integration | Component | worker-diagram/dual-filter',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks);
+
+    test('it renders the correct diagram when egressFilter is false and ingress is false', async function (assert) {
+      assert.expect(4);
+      await render(
+        hbs`<WorkerDiagram::DualFilter @egressFilter={{false}} @ingressFilter={{false}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-egress-off-ingress-off]').isVisible();
+      assert
+        .dom('[data-test-dual-filter-egress-on-ingress-off]')
+        .doesNotExist();
+      assert
+        .dom('[data-test-dual-filter-egress-off-ingress-on]')
+        .doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').doesNotExist();
+    });
+
+    test('it renders the correct diagram when egressFilter is true and ingress is false', async function (assert) {
+      assert.expect(4);
+      await render(
+        hbs`<WorkerDiagram::DualFilter @egressFilter={{true}} @ingressFilter={{false}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-egress-on-ingress-off]').isVisible();
+      assert
+        .dom('[data-test-dual-filter-egress-off-ingress-on]')
+        .doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').doesNotExist();
+      assert
+        .dom('[data-test-dual-filter-egress-off-ingress-off]')
+        .doesNotExist();
+    });
+
+    test('it renders the correct diagram when egressFilter is false and ingress is true', async function (assert) {
+      assert.expect(4);
+      await render(
+        hbs`<WorkerDiagram::DualFilter @egressFilter={{false}} @ingressFilter={{true}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-egress-off-ingress-on]').isVisible();
+      assert
+        .dom('[data-test-dual-filter-egress-on-ingress-off]')
+        .doesNotExist();
+      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').doesNotExist();
+      assert
+        .dom('[data-test-dual-filter-egress-off-ingress-off]')
+        .doesNotExist();
+    });
+
+    test('it renders the correct diagram when egressFilter is true and ingress is true', async function (assert) {
+      assert.expect(4);
+      await render(
+        hbs`<WorkerDiagram::DualFilter @egressFilter={{true}} @ingressFilter={{true}} />`
+      );
+
+      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').isVisible();
+      assert
+        .dom('[data-test-dual-filter-egress-off-ingress-on]')
+        .doesNotExist();
+      assert
+        .dom('[data-test-dual-filter-egress-on-ingress-off]')
+        .doesNotExist();
+      assert
+        .dom('[data-test-dual-filter-egress-off-ingress-off]')
+        .doesNotExist();
+    });
+  }
+);

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

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