From ab6a675209af9acd8a7e5f5bc3863501c0455771 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Wed, 11 Aug 2021 13:00:32 -0400
Subject: [PATCH] ui: Split up the socket mode from the socket path (#10581)

---
 .changelog/10581.txt                          |  3 +++
 .../consul/upstream-instance/list/index.hbs   | 26 +++++++------------
 .../consul/upstream-instance/list/index.scss  |  5 +++-
 3 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 .changelog/10581.txt

diff --git a/.changelog/10581.txt b/.changelog/10581.txt
new file mode 100644
index 0000000000..574945a52f
--- /dev/null
+++ b/.changelog/10581.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Splitting up the socket mode and socket path in the Upstreams Instance List
+```
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
index df4d2391c8..0f97376991 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
@@ -38,32 +38,24 @@
         </dl>
       {{/if}}
       {{#if item.LocalBindSocketPath}}
-{{#let (if item.LocalBindSocketMode
-          (hash
-            label=(concat '(Local bind mode)')
-            value=(concat '(Mode:' item.LocalBindSocketMode ')')
-          )
-          (hash
-            label=""
-            value=""
-          )
-        )
-as |mode|}}
-          <dl class="local-bind-socket">
+          <dl>
             <dt>
-              <span>
-                Local bind socket {{mode.label}}
-              </span>
+                Local bind socket path
             </dt>
             <dd>
               <CopyButton
                 @value={{item.LocalBindSocketPath}}
-                @name="Socket path"
+                @name="Local bind socket path"
               />
               {{item.LocalBindSocketPath}}
             </dd>
           </dl>
-{{/let}}
+          <dl class="local-bind-mode">
+            <dt class>mode</dt>
+            <dd>
+              {{or item.LocalBindSocketMode '-'}}
+            </dd>
+          </dl>
       {{else}}
         {{#if (gt item.LocalBindPort 0)}}
   {{#let (concat (or item.LocalBindAddress '127.0.0.1') ':' item.LocalBindPort) as |combinedAddress|}}
diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
index ea10171381..63f2ecf79e 100644
--- a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
@@ -3,7 +3,7 @@
     @extend %composite-row;
   }
   dl {
-    @extend %icon-definition;
+    @extend %horizontal-kv-list;
   }
   dl.datacenter dt::before {
     @extend %with-user-organization-mask, %as-pseudo;
@@ -11,4 +11,7 @@
   dl.nspace dt::before {
     @extend %with-folder-outline-mask, %as-pseudo;
   }
+  dl.local-bind-mode dt {
+    font-weight: $typo-weight-semibold;
+  }
 }