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

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();
+  });
 });