From 2d1ed7b8bde405fafd9aaa104e00f2263d094223 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Tue, 14 Feb 2023 15:32:19 -0600
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20rename=20div=20aroun?=
 =?UTF-8?q?d=20ordered-series-diagram=20(#1633)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 rename div around ordered-series-diagram

* refactor: 💡 remove margin top and add to min-height

* refactor: 💡 simplify diagrams

---------

Co-authored-by: Randall Morey <randall@randallmorey.com>
---
 .../ordered-series-diagram/index.hbs          | 18 ++++----
 .../worker-diagram/dual-filter/hcp/index.hbs  | 42 +++++++++----------
 .../worker-diagram/dual-filter/index.hbs      | 42 +++++++++----------
 .../app/components/worker-diagram/index.hbs   | 28 +++++++------
 .../worker-diagram/single-filter/index.hbs    | 20 ++++-----
 ui/admin/app/styles/app.scss                  | 20 ++++-----
 6 files changed, 82 insertions(+), 88 deletions(-)

diff --git a/ui/admin/app/components/ordered-series-diagram/index.hbs b/ui/admin/app/components/ordered-series-diagram/index.hbs
index e7ce96ed4..babe7c955 100644
--- a/ui/admin/app/components/ordered-series-diagram/index.hbs
+++ b/ui/admin/app/components/ordered-series-diagram/index.hbs
@@ -1,10 +1,8 @@
-<div class='worker-wrapper'>
-  <ol ...attributes class='ordered-series-diagram'>
-    {{yield
-      (hash
-        Item=(component 'ordered-series-diagram/item')
-        Group=(component 'ordered-series-diagram/group')
-      )
-    }}
-  </ol>
-</div>
\ No newline at end of file
+<ol class='ordered-series-diagram' ...attributes>
+  {{yield
+    (hash
+      Item=(component 'ordered-series-diagram/item')
+      Group=(component 'ordered-series-diagram/group')
+    )
+  }}
+</ol>
\ No newline at end of file
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 ad62b4f71..21a04bad5 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
@@ -18,13 +18,11 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t
-        'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'
-      }}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'}}
+  </p>
 {{else if @ingressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-on as |D|>
     <D.Item @icon='user'>
@@ -37,11 +35,11 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+  </p>
 {{else if @egressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-on-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -66,11 +64,11 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.hcp-dual-egress-on'}}
+  </p>
 {{else}}
   <OrderedSeriesDiagram data-test-dual-filter-hcp-egress-off-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -83,9 +81,9 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.hcp-worker'}}
+  </p>
 {{/if}}
\ 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 27c6e5000..ebda04384 100644
--- a/ui/admin/app/components/worker-diagram/dual-filter/index.hbs
+++ b/ui/admin/app/components/worker-diagram/dual-filter/index.hbs
@@ -18,13 +18,11 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t
-        'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'
-      }}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.dual-egress-on-ingress-on'}}
+  </p>
 {{else if @ingressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-on as |D|>
     <D.Item @icon='user'>
@@ -37,11 +35,11 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.ingress-worker'}}
+  </p>
 {{else if @egressWorkerFilterEnabled}}
   <OrderedSeriesDiagram data-test-dual-filter-egress-on-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -62,11 +60,11 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.dual-egress-on'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.dual-egress-on'}}
+  </p>
 {{else}}
   <OrderedSeriesDiagram data-test-dual-filter-egress-off-ingress-off as |D|>
     <D.Item @icon='user'>
@@ -79,9 +77,9 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.any-worker'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.any-worker'}}
+  </p>
 {{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/components/worker-diagram/index.hbs b/ui/admin/app/components/worker-diagram/index.hbs
index a3b8e2838..edb3cd95d 100644
--- a/ui/admin/app/components/worker-diagram/index.hbs
+++ b/ui/admin/app/components/worker-diagram/index.hbs
@@ -1,17 +1,19 @@
-{{#if (feature-flag 'target-worker-filters-v2-ingress')}}
-  {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
-    <WorkerDiagram::DualFilter::Hcp
-      @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
-      @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
-    />
+<div class='worker-diagram'>
+  {{#if (feature-flag 'target-worker-filters-v2-ingress')}}
+    {{#if (feature-flag 'target-worker-filters-v2-hcp')}}
+      <WorkerDiagram::DualFilter::Hcp
+        @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
+        @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
+      />
+    {{else}}
+      <WorkerDiagram::DualFilter
+        @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
+        @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
+      />
+    {{/if}}
   {{else}}
-    <WorkerDiagram::DualFilter
+    <WorkerDiagram::SingleFilter
       @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
-      @ingressWorkerFilterEnabled={{@ingressWorkerFilterEnabled}}
     />
   {{/if}}
-{{else}}
-  <WorkerDiagram::SingleFilter
-    @egressWorkerFilterEnabled={{@egressWorkerFilterEnabled}}
-  />
-{{/if}}
\ No newline at end of file
+</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 848b27d5d..fdbe22b0a 100644
--- a/ui/admin/app/components/worker-diagram/single-filter/index.hbs
+++ b/ui/admin/app/components/worker-diagram/single-filter/index.hbs
@@ -15,11 +15,11 @@
       </D.Item>
     </D.Group>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.egress-worker'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.egress-worker'}}
+  </p>
 {{else}}
   <OrderedSeriesDiagram data-test-single-filter-egress-off as |D|>
     <D.Item @icon='user'>
@@ -32,9 +32,9 @@
       {{t 'resources.target.workers.diagram.host'}}
     </D.Item>
   </OrderedSeriesDiagram>
-  <div class='worker-diagram-explainer'>
-    <Hds::Form::HelperText>
-      {{t 'resources.target.workers.filter-explainer.any-worker'}}
-    </Hds::Form::HelperText>
-  </div>
+  <p
+    class='hds-foreground-faint hds-typography-body-100 hds-font-weight-regular'
+  >
+    {{t 'resources.target.workers.filter-explainer.any-worker'}}
+  </p>
 {{/if}}
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index e0a10fac1..796a617d1 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -559,8 +559,6 @@
   }
 
   &-group {
-    display: flex;
-
     &-content {
       border-radius: 0.5rem;
       padding: 0 0.75rem 0.75rem;
@@ -600,6 +598,10 @@
 
   .hds-form-legend {
     font-size: sizing.rems(l) - sizing.rems(xxs); // 20
+
+    + .hds-form-helper-text {
+      margin-bottom: 1rem;
+    }
   }
 
   .hds-alert {
@@ -626,16 +628,12 @@
     }
   }
 
-  .worker-diagram-explainer {
-    min-height: 4rem; // 1
-  }
+  .worker-diagram {
+    min-height: 15rem;
 
-  .worker-wrapper {
-    display: flex;
-    align-items: center;
-    min-height: 11rem;
-    margin-top: sizing.rems(xs) - sizing.rems(xxxxs); // 10
-    width: 100%;
+    .ordered-series-diagram {
+      min-height: 10rem;
+    }
   }
 }