feat: 🎸 create Worker Diagram for OSS (#1583)

* feat: 🎸 create Worker Diagram for OSS

✅ Closes: ICU-7579

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

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

@@ -359,6 +359,12 @@ target:
     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.
+    diagram:
+      client: Client
+      any-worker: Any worker
+      egress-worker: Egress worker
+      host: Host
+      network: Private network
 credential-store:
   title: Credential Store
   title_plural: Credential Stores

ui/admin/app/components/ordered-series-diagram/index.hbs

@@ -1,4 +1,4 @@
-<ol class='ordered-series-diagram'>
+<ol ...attributes class='ordered-series-diagram'>
   {{yield
     (hash
       Item=(component 'ordered-series-diagram/item')

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

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

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

@@ -0,0 +1,30 @@
+{{#if @egressFilter}}
+  <OrderedSeriesDiagram data-test-single-filter-egress-on as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </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-single-filter-egress-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}}

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

@@ -0,0 +1,24 @@
+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/index', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  let featuresService;
+  const targetWorkerFilterIngress = 'target-worker-filters-v2-ingress';
+  const targetWorkerFilterHCP = 'target-worker-filters-v2-hcp';
+
+  test('it renders a single filter diagram', async function (assert) {
+    featuresService = this.owner.lookup('service:features');
+    featuresService.disable(targetWorkerFilterIngress);
+    featuresService.disable(targetWorkerFilterHCP);
+    assert.expect(1);
+    await render(hbs`<WorkerDiagram::SingleFilter />`);
+
+    assert.dom('[data-test-single-filter-egress-off]').isVisible();
+  });
+});

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

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