feat: 🎸 Add HCP logic to Worker Diagram component (#1585)

* 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

* feat: 🎸 Add HCP logic to Worker Diagram component

✅ Closes: ICU-7594

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

* refactor: 💡 revert HDS icon background color change

* refactor: 💡 make data-test attr more verbose

* test: 💍 fix data-test selectors for dual filter tests

* refactor: 💡 refactor test for worker-diagram dual-filter

Seperate test for `worker-diagram/dual-filter` into tow seperate test.
One for HCP and one for Enterprise.

✅ Closes: ICU-7594

* chore: 🤖 actual test for last commit

actual test for last commit

* chore: 🤖 split woker-diagram dual-filter into two components

Split worker-diagram-dual-filter component into two seperate component
and fixed test to reflect changes.

✅ Closes: ICU-7594

* refactor: 💡 quick test refactor

Refactor test for `worker-diagram-dual-filter`

* refactor: 💡 refactor dual-filter test

Refactor worker-diagram-dual-filter test to better align with if the
diagram exist, rather than what the text inside of the diagram states.

✅ Closes: ICU-7594

Co-authored-by: dvonanderson <devon.anderson@hashicorp.com>

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

@@ -375,6 +375,7 @@ target:
       client: Client
       any-worker: Any worker
       front-line-worker: Front line worker
+      hcp-worker: HCP worker
       egress-worker: Egress worker
       ingress-worker: Ingress worker
       host: Host

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

@@ -0,0 +1,80 @@
+<div data-test-dual-filters-hcp>
+  {{#if (and @egressFilter @ingressFilter)}}
+    <OrderedSeriesDiagram data-test-dual-filter-hcp-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-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'}}
+      </D.Item>
+      <D.Item @icon='server'>
+        {{t 'resources.target.workers.diagram.host'}}
+      </D.Item>
+    </OrderedSeriesDiagram>
+  {{else if @egressFilter}}
+    <OrderedSeriesDiagram
+      data-test-dual-filter-hcp-egress-on-ingress-off
+      as |D|
+    >
+      <D.Item @icon='user'>
+        {{t 'resources.target.workers.diagram.client'}}
+      </D.Item>
+      <D.Item @icon='settings'>
+        {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
+          {{t 'resources.target.workers.diagram.hcp-worker'}}
+        {{else}}
+          {{t 'resources.target.workers.diagram.front-line-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>
+      </D.Group>
+    </OrderedSeriesDiagram>
+  {{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>
+  {{/if}}
+</div>

ui/admin/config/environment.js

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

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

@@ -0,0 +1,55 @@
+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 | hcp',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks);
+
+    let featuresService;
+    const targetWorkerFilterIngress = 'target-worker-filters-v2-ingress';
+    const targetWorkerFilterHCP = 'target-worker-filters-v2-hcp';
+
+    hooks.beforeEach(function () {
+      featuresService = this.owner.lookup('service:features');
+      featuresService.enable(targetWorkerFilterHCP);
+      featuresService.disable(targetWorkerFilterIngress);
+    });
+
+    test('it renders the correct diagram when egressFilter is false and ingress is false', async function (assert) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{false}} @ingressFilter={{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) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{true}} @ingressFilter={{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) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{false}} @ingressFilter={{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) {
+      await render(
+        hbs`<WorkerDiagram::DualFilter::Hcp @egressFilter={{true}} @ingressFilter={{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

@@ -5,75 +5,51 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 
 module(
-  'Integration | Component | worker-diagram/dual-filter',
+  'Integration | Component | worker-diagram | dual-filter',
   function (hooks) {
     setupRenderingTest(hooks);
     setupIntl(hooks);
 
+    let featuresService;
+    const targetWorkerFilterIngress = 'target-worker-filters-v2-ingress';
+    const targetWorkerFilterHCP = 'target-worker-filters-v2-hcp';
+
+    hooks.beforeEach(function () {
+      featuresService = this.owner.lookup('service:features');
+      featuresService.enable(targetWorkerFilterIngress);
+      featuresService.disable(targetWorkerFilterHCP);
+    });
+
     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();
+      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) {
-      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();
+      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) {
-      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();
+      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) {
-      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();
+      assert.dom('[data-test-dual-filter-egress-on-ingress-on]').exists();
     });
   }
 );