From 812e509003bd7914ad0969ddc21a05eca942e434 Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Fri, 20 Jan 2023 13:44:48 -0500
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20create=20target=20worke?=
 =?UTF-8?q?r=20explainer=20element=20(#1595)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 |  8 +++++++
 .../components/form/target/details/index.hbs  |  2 --
 .../worker-diagram/dual-filter/hcp/index.hbs  | 20 +++++++++++++++++
 .../worker-diagram/dual-filter/index.hbs      | 22 +++++++++++++++++++
 .../worker-diagram/single-filter/index.hbs    | 10 +++++++++
 ui/admin/app/styles/app.scss                  |  5 +++++
 6 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index cf28c5b9b..4651fb9b1 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/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).
diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs
index 888c1691e..56cf42ff7 100644
--- a/ui/admin/app/components/form/target/details/index.hbs
+++ b/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
diff --git a/ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs b/ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs
index 28340d3c2..e42afa1d1 100644
--- a/ui/admin/app/components/worker-diagram/dual-filter/hcp/index.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/admin/app/components/worker-diagram/dual-filter/index.hbs b/ui/admin/app/components/worker-diagram/dual-filter/index.hbs
index 2382fc68a..16a51bde6 100644
--- a/ui/admin/app/components/worker-diagram/dual-filter/index.hbs
+++ b/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>
\ No newline at end of file
diff --git a/ui/admin/app/components/worker-diagram/single-filter/index.hbs b/ui/admin/app/components/worker-diagram/single-filter/index.hbs
index a2420e610..991f605b2 100644
--- a/ui/admin/app/components/worker-diagram/single-filter/index.hbs
+++ b/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}}
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 5382ad5b5..8cf2b9b12 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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;
+}