From 15deb4bda1fe116a4948505edd1a194ef5a53731 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Thu, 18 Jun 2020 09:23:42 -0400
Subject: [PATCH] ui: Refactor Upstreams and Exposed Paths icons (#8139)

* Update Ports to have copy-button to the left

* Update exposed paths use a description list
---
 .../consul-exposed-path-list/index.hbs        | 102 +++++++++--------
 .../consul-upstream-instance-list/index.hbs   | 103 ++++++++----------
 .../components/consul-upstream-list/index.hbs |  57 ++++------
 .../components/composite-row/layout.scss      |  22 ++--
 .../styles/components/composite-row/skin.scss |  16 +--
 5 files changed, 140 insertions(+), 160 deletions(-)

diff --git a/ui-v2/app/components/consul-exposed-path-list/index.hbs b/ui-v2/app/components/consul-exposed-path-list/index.hbs
index ec580f01f..72d085db6 100644
--- a/ui-v2/app/components/consul-exposed-path-list/index.hbs
+++ b/ui-v2/app/components/consul-exposed-path-list/index.hbs
@@ -2,7 +2,7 @@
 {{#each items as |path|}}
   <li>
     <div>
-{{#let (concat address ':' path.Path) as |combinedAddress|}}
+    {{#let (concat address ':' path.Path) as |combinedAddress|}}
       <p class="combined-address">
         <span>
           {{combinedAddress}}
@@ -12,59 +12,57 @@
           @name="Address"
         />
       </p>
-{{/let}}
+    {{/let}}
     </div>
     <div>
-      <ul>
-      {{#if path.Protocol}}
-        <li class="protocol">
-          <span>
-            <Tooltip>
-                Protocol
-            </Tooltip>
-          </span>
-          <span>
-            {{path.Protocol}}
-          </span>
-        </li>
-      {{/if}}
-      {{#if path.ListenerPort}}
-        <li class="port">
-          <span>
-            <Tooltip>
-                Port
-            </Tooltip>
-          </span>
-          <span>
-            listening on :{{path.ListenerPort}}
-          </span>
-        </li>
-      {{/if}}
-      {{#if path.LocalPathPort}}
-        <li class="port">
-          <span>
-            <Tooltip>
-                Port
-            </Tooltip>
-          </span>
-          <span>
-            local port :{{path.LocalPathPort}}
-          </span>
-        </li>
-      {{/if}}
-      {{#if path.Path}}
-        <li class="path">
-          <span>
-            <Tooltip>
-                Path
-            </Tooltip>
-          </span>
-          <span>
-            {{path.Path}}
-          </span>
-        </li>
-      {{/if}}
-      </ul>
+    {{#if path.Protocol}}
+      <dl class="protocol">
+        <dt>
+          <Tooltip>
+              Protocol
+          </Tooltip>
+        </dt>
+        <dd>
+          {{path.Protocol}}
+        </dd>
+      </dl>
+    {{/if}}
+    {{#if path.ListenerPort}}
+      <dl class="port">
+        <dt>
+          <Tooltip>
+              Port
+          </Tooltip>
+        </dt>
+        <dd>
+          listening on :{{path.ListenerPort}}
+        </dd>
+      </dl>
+    {{/if}}
+    {{#if path.LocalPathPort}}
+      <dl class="port">
+        <dt>
+          <Tooltip>
+              Port
+          </Tooltip>
+        </dt>
+        <dd>
+          local port :{{path.LocalPathPort}}
+        </dd>
+      </dl>
+    {{/if}}
+    {{#if path.Path}}
+      <dl class="path">
+        <dt>
+          <Tooltip>
+              Path
+          </Tooltip>
+        </dt>
+        <dd>
+          {{path.Path}}
+        </dd>
+      </dl>
+    {{/if}}
     </div>
   </li>
 {{/each}}
diff --git a/ui-v2/app/components/consul-upstream-instance-list/index.hbs b/ui-v2/app/components/consul-upstream-instance-list/index.hbs
index 131db350e..34ae01ea3 100644
--- a/ui-v2/app/components/consul-upstream-instance-list/index.hbs
+++ b/ui-v2/app/components/consul-upstream-instance-list/index.hbs
@@ -1,59 +1,50 @@
 <ul data-test-proxy-upstreams>
-  {{#each items as |item|}}
-    <li>
-      <div>
-        <p data-test-destination-name>
-          {{item.DestinationName}}
-        </p>
-      </div>
-      <div>
-        <ul>
-{{#if (env 'CONSUL_NSPACES_ENABLED')}}
-  {{#if (not-eq item.DestinationType 'prepared_query')}}
-          <li class="nspace">
-            <span>
-              <Tooltip>
-                Namespace
-              </Tooltip>
-            </span>
-            <span>
-              {{or item.DestinationNamespace 'default'}}
-            </span>
-          </li>
+{{#each items as |item|}}
+  <li>
+    <div>
+      <p data-test-destination-name>
+        {{item.DestinationName}}
+      </p>
+    </div>
+    <div>
+  {{#if (env 'CONSUL_NSPACES_ENABLED')}}
+    {{#if (not-eq item.DestinationType 'prepared_query')}}
+      <dl class="nspace">
+        <dt>
+          <Tooltip>
+            Namespace
+          </Tooltip>
+        </dt>
+        <dd>
+          {{or item.DestinationNamespace 'default'}}
+        </dd>
+      </dl>
+    {{/if}}
   {{/if}}
-{{/if}}
-{{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}}
-          <li class="datacenter">
-            <span>
-              <Tooltip>
-                Datacenter
-              </Tooltip>
-            </span>
-            <span>
-              {{item.Datacenter}}
-            </span>
-          </li>
-{{/if}}
-{{#if (gt item.LocalBindPort 0)}}
-  {{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
-          <li class="port">
-            <span>
-              <Tooltip>
-                Address
-              </Tooltip>
-            </span>
-            <span>
-              <span>{{combinedAddress}}</span>
-              <CopyButton
-                @value={{combinedAddress}}
-                @name="Address"
-              />
-            </span>
-          </li>
-  {{/let}}
-{{/if}}
-        </ul>
-      </div>
-    </li>
-  {{/each}}
+    {{#if (and (not-eq item.Datacenter dc) (not-eq item.Datacenter ""))}}
+      <dl class="datacenter">
+        <dt>
+          <Tooltip>
+            Datacenter
+          </Tooltip>
+        </dt>
+        <dd>
+          {{item.Datacenter}}
+        </dd>
+      </dl>
+    {{/if}}
+    {{#if (gt item.LocalBindPort 0)}}
+    {{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
+      <dl class="port">
+        <CopyButton
+          @value={{combinedAddress}}
+          @name="Address"
+        />
+        <dd>{{combinedAddress}}</dd>
+      </dl>
+    {{/let}}
+    {{/if}}
+    </div>
+  </li>
+{{/each}}
 </ul>
diff --git a/ui-v2/app/components/consul-upstream-list/index.hbs b/ui-v2/app/components/consul-upstream-list/index.hbs
index f027f8eb5..bb1763f2d 100644
--- a/ui-v2/app/components/consul-upstream-list/index.hbs
+++ b/ui-v2/app/components/consul-upstream-list/index.hbs
@@ -1,6 +1,6 @@
 <ListCollection @items={{items}} class="consul-upstream-list" as |item index|>
   <BlockSlot @name="header">
-{{#if (service/exists item)}}
+  {{#if (service/exists item)}}
     <dl class={{service/health-checks item}}>
       <dt>
         Health
@@ -28,42 +28,33 @@
         {{item.Name}}
       </a>
     {{/if}}
-{{else}}
+  {{else}}
     <p data-test-service-name>
       {{item.Name}}
     </p>
-{{/if}}
+  {{/if}}
   </BlockSlot>
   <BlockSlot @name="details">
-    <ul>
-    {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}}
-      <li class="nspace">
-        <span>
-          <Tooltip>
-              Namespace
-          </Tooltip>
-        </span>
-        <span>
-          {{item.Namespace}}
-        </span>
-      </li>
-    {{/if}}
-    {{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
-      <li class="port">
-        <span>
-          <Tooltip>
-            Port
-          </Tooltip>
-        </span>
-        <span>
-          <span>:{{item.GatewayConfig.ListenerPort}}</span>
-          <CopyButton
-            @value={{item.GatewayConfig.ListenerPort}}
-            @name="Port"
-          />
-        </span>
-      </li>
-    {{/if}}
-    </ul>
+  {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq item.Namespace nspace))}}
+    <dl class="nspace">
+      <dt>
+        <Tooltip>
+            Namespace
+        </Tooltip>
+      </dt>
+      <dd>
+        {{item.Namespace}}
+      </dd>
+    </dl>
+  {{/if}}
+  {{#if (not-eq item.GatewayConfig.ListenerPort 0)}}
+    <dl class="port">
+      <CopyButton
+        @value={{item.GatewayConfig.ListenerPort}}
+        @name="Port"
+      />
+      <dd>:{{item.GatewayConfig.ListenerPort}}</dd>
+    </dl>
+  {{/if}}
   </BlockSlot>
 </ListCollection>
diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss
index 8c234d9ac..a4bba91ff 100644
--- a/ui-v2/app/styles/components/composite-row/layout.scss
+++ b/ui-v2/app/styles/components/composite-row/layout.scss
@@ -29,7 +29,7 @@
   align-self: center;
 }
 %composite-row-icon {
-  margin-right: 10px;
+  margin-right: 6px;
 }
 %composite-row-icon dt {
   display: none;
@@ -50,15 +50,12 @@
   display: inline-flex;
   flex-wrap: nowrap;
 }
-%composite-row-detail dt {
-  display: none;
-}
 %composite-row-header *,
 %composite-row-detail * {
   white-space: nowrap;
   flex-wrap: nowrap;
 }
-%composite-row-detail > dl,
+%composite-row-detail dl,
 %composite-row-detail > ul > li {
   margin-right: 12px;
 }
@@ -72,13 +69,18 @@
 %composite-row-detail .tag-list::before {
   top: 2px;
 }
-
+%composite-row-detail dl dt::before {
+  margin-right: 4px;
+}
 // Copy Button
 %composite-row .copy-button button {
   padding: 0 !important;
   margin: 0 !important;
 }
-%composite-row .copy-button {
+%composite-row-detail .copy-button {
+  margin-right: 4px;
+}
+%composite-row-header .copy-button {
   margin-left: 4px;
 }
 %composite-row .copy-button {
@@ -86,11 +88,9 @@
 }
 /* buttons need to be displayed in order for the tooltip */
 /* to track them */
-%composite-row-header .copy-button button,
-%composite-row-detail .copy-button button {
+%composite-row-header .copy-button button {
   opacity: 0;
 }
-%composite-row-header:hover .copy-button button,
-%composite-row-detail:hover .copy-button button {
+%composite-row-header:hover .copy-button button {
   opacity: 1;
 }
diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss
index 4bb9f9ed6..59ed63e6f 100644
--- a/ui-v2/app/styles/components/composite-row/skin.scss
+++ b/ui-v2/app/styles/components/composite-row/skin.scss
@@ -83,23 +83,23 @@
   @extend %with-swap-horizontal-mask, %as-pseudo;
   background-color: $gray-500;
 }
-%composite-row li.datacenter > span:first-child::before {
-  @extend %with-user-organization-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail li.nspace > span:first-child::before {
+%composite-row-detail dl.nspace dt::before {
   @extend %with-folder-outline-mask, %as-pseudo;
   background-color: $gray-500;
 }
-%composite-row-detail li.path > span:first-child::before {
+%composite-row-detail dl.datacenter dt::before {
+  @extend %with-user-organization-mask, %as-pseudo;
+  background-color: $gray-500;
+}
+%composite-row-detail dl.path dt::before {
   @extend %with-path-mask, %as-pseudo;
   background-color: $gray-500;
 }
-%composite-row-detail li.port > span:first-child::before {
+%composite-row-detail dl.port dt::before {
   @extend %with-port-mask, %as-pseudo;
   background-color: $gray-500;
 }
-%composite-row-detail li.protocol > span:first-child::before {
+%composite-row-detail dl.protocol dt::before {
   @extend %with-protocol-mask, %as-pseudo;
   background-color: $gray-500;
 }