ui: Split up the socket mode from the socket path (#10581)

.changelog/10581.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Splitting up the socket mode and socket path in the Upstreams Instance List
+```

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|}}

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;
+  }
 }