chore: 🤖 create target worker explainer element (#1595)

* chore: 🤖 create target worker explainer element

Create a element that will explain what the filters and diagrams mean
when toggled and on screen.

* refactor: 💡 add logic directly to worker-diagram

* refactor: 💡 added logic to all worker diagrams

Added logic to all worker diagrams

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

@@ -380,6 +380,14 @@ target:
       ingress-worker: Ingress worker
       host: Host
       network: Private network
+    filter-explainer:
+      any-worker: In this configuration, the client will attemt to connect through any client-accessible worker.
+      egress-worker: In this configuration, the client will attemt to connect through any filtered egress worker.
+      ingress-worker: In this configuration, the client will attempt to conect through any filtered ingress worker.
+      hcp-worker: In this configuration, the client will attempt to connect through any HCP-managed worker.
+      ent-dual-egress-on: In this configuration, the client will attempt to  connect through any client-accessible "frontline" worker and reach the host through any filtered egress worker.
+      hcp-dual-egress-on: In this configuration, the client will attempt to connect through any HC-managed worker and reach the host through any filtered egress worker.
+      dual-egress-on-ingress-on: In this configuration, the client will attempt to connect through any filtered ingress worker and reach the house through any filtered egress worker.
     egress_worker_filter:
       title: Egress worker filter
       description: Optional. Specify workers that have access to the target (such as within a private network).

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

@@ -233,7 +233,6 @@
       <WorkerDiagram::SingleFilter
         @egressFilter={{this.egressWorkerFilterEnabled}}
       />
-
       <Form::Target::WorkerFilter
         @name='egress_worker_filter'
         @type='text'
@@ -255,7 +254,6 @@
           </F.Error>
         {{/if}}
       </Form::Target::WorkerFilter>
-
     {{/if}}
   {{else}}
     <Hds::Form::TextInput::Field

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

@@ -19,6 +19,11 @@
         </D.Item>
       </D.Group>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
+      </Hds::Form::HelperText>
+    </div>
   {{else if @ingressFilter}}
     <OrderedSeriesDiagram
       data-test-dual-filter-hcp-egress-off-ingress-on
@@ -34,6 +39,11 @@
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+      </Hds::Form::HelperText>
+    </div>
   {{else if @egressFilter}}
     <OrderedSeriesDiagram
       data-test-dual-filter-hcp-egress-on-ingress-off
@@ -61,6 +71,11 @@
         </D.Item>
       </D.Group>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.egress-on'}}
+      </Hds::Form::HelperText>
+    </div>
   {{else}}
     <OrderedSeriesDiagram
       data-test-dual-filter-hcp-egress-off-ingress-off
@@ -76,5 +91,10 @@
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
+      </Hds::Form::HelperText>
+    </div>
   {{/if}}
 </div>

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

@@ -19,6 +19,13 @@
         </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'>
@@ -31,6 +38,11 @@
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+      </Hds::Form::HelperText>
+    </div>
   {{else if @egressFilter}}
     <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
       <D.Item @icon='user'>
@@ -51,6 +63,11 @@
         </D.Item>
       </D.Group>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.egress-worker'}}
+      </Hds::Form::HelperText>
+    </div>
   {{else}}
     <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
       <D.Item @icon='user'>
@@ -63,5 +80,10 @@
         {{t 'resources.target.workers.diagram.host'}}
       </D.Item>
     </OrderedSeriesDiagram>
+    <div class='target-worker-filter-explainer'>
+      <Hds::Form::HelperText>
+        {{t 'resources.target.workers.filter-explainer.any-worker'}}
+      </Hds::Form::HelperText>
+    </div>
   {{/if}}
 </div>

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

@@ -15,6 +15,11 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
+  <div class='target-worker-filter-explainer'>
+    <Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.egress-worker'}}
+    </Hds::Form::HelperText>
+  </div>
 {{else}}
   <OrderedSeriesDiagram data-test-single-filter-egress-off as |D|>
     <D.Item @icon='user'>
@@ -27,4 +32,9 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
+  <div class='target-worker-filter-explainer'>
+    <Hds::Form::HelperText>
+      {{t 'resources.target.workers.filter-explainer.any-worker'}}
+    </Hds::Form::HelperText>
+  </div>
 {{/if}}

ui/admin/app/styles/app.scss

@@ -688,3 +688,8 @@
     margin-bottom: sizing.rems(l);
   }
 }
+
+.target-worker-filter-explainer {
+  min-height: 1rem;
+  margin: 1.125rem 0 1.5rem;
+}