ui: Wrap service names on show and instance routes (#14771)

* Wrap service names on show and instance routes
Moves the trailing type/kind/actions to the second row of the header
no matter what length the service name is. Wraps service name text.

* Change grid format of AppView globally

* Add tooltips to the last element of breadcrumbs

ui/packages/consul-ui/app/components/app-view/index.hbs

@@ -13,14 +13,16 @@
                   </YieldSlot>
               </nav>
               <div class="title">
-                <YieldSlot @name="header">
-                    {{yield}}
-                </YieldSlot>
-                <div class="actions">
-                    <YieldSlot @name="actions">
-                      <PortalTarget @name="app-view-actions" />
+                <div class="title-left-container">
+                  <YieldSlot @name="header">
                       {{yield}}
-                    </YieldSlot>
+                  </YieldSlot>
+                </div>
+                <div class="actions">
+                  <YieldSlot @name="actions">
+                    <PortalTarget @name="app-view-actions" />
+                    {{yield}}
+                  </YieldSlot>
                 </div>
               </div>
               <YieldSlot @name="nav">

ui/packages/consul-ui/app/components/app-view/index.scss

@@ -10,6 +10,9 @@
 %app-view-header .title {
   @extend %app-view-title;
 }
+%app-view-title .title-left-container {
+  @extend %app-view-title-left-container;
+}
 %app-view-header .actions {
   @extend %app-view-actions;
 }

ui/packages/consul-ui/app/components/app-view/layout.scss

@@ -1,27 +1,40 @@
 /* layout */
 %app-view-title {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "title actions";
   position: relative;
   z-index: 5;
 }
-%app-view-actions {
+%app-view-title-left-container {
+  grid-area: title;
   display: flex;
-  align-items: flex-start;
-  margin-left: auto;
+  flex-wrap: wrap;
+  align-items: center;
+  white-space: normal;
 }
-/* units */
-%app-view-title {
-  padding-bottom: 0.2em;
+%app-view-title-left-container > :first-child {
+  flex-basis: 100%;
 }
-%app-view-title > :not(:last-child) {
+
+%app-view-title-left-container > :not(:first-child) {
   margin-right: 8px;
 }
+
 %app-view-actions {
+  grid-area: actions;
+  align-self: end;
+  display: flex;
+  align-items: flex-start;
+  margin-left: auto;
   margin-top: 9px;
 }
 
+/* units */
+%app-view-title {
+  padding-bottom: 1.4em;
+}
+
 /* content */
 /* TODO: Think about an %app-form or similar */
 %app-view-content form:not(.filter-bar) fieldset {

ui/packages/consul-ui/app/components/app-view/skin.scss

@@ -1,4 +1,4 @@
-%app-view-title > *:first-child {
+%app-view-title-left-container > *:first-child {
   @extend %h100;
 }
 %app-view-title {

ui/packages/consul-ui/app/components/breadcrumbs/layout.scss

@@ -1,6 +1,14 @@
+%breadcrumbs {
+  display: grid;
+  grid-auto-flow: column;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 %breadcrumbs > li {
   list-style-type: none;
   display: inline-flex;
+  overflow: hidden
 }
 %breadcrumb-milestone::before {
   margin-right: 4px;
@@ -10,6 +18,8 @@
   /* as the separator is a '/' the left margin needs */
   /* to be different from the right in order to center it */
   margin-left: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 %breadcrumb::before {
   margin-right: 8px;

ui/packages/consul-ui/app/templates/dc/kv/edit.hbs

@@ -63,6 +63,7 @@ as |parts|}}
         {{! We push on a '' here so make sure we get a trailing slash/separator }}
           <li>
             <Action
+              {{action breadcrumb}}
               @href={{href-to 'dc.kv.folder'
                   (join '/'
                     (append
@@ -149,4 +150,4 @@ as |parts|}}
   </DataLoader>
   {{/let}}
 {{/let}}
-</Route>
+</Route>

ui/packages/consul-ui/app/templates/dc/kv/index.hbs

@@ -108,7 +108,7 @@ as |sort filters parent items|}}
         <ol>
           <li><a href={{href-to 'dc.kv'}}>Key / Values</a></li>
     {{#each (slice 0 -2 (split parent.Key '/')) as |breadcrumb index|}}
-          <li><a href={{href-to 'dc.kv.folder' (join '/' (append (slice 0 (add index 1) (split parent.Key '/')) ''))}}>{{breadcrumb}}</a></li>
+          <li><a {{tooltip breadcrumb}} href={{href-to 'dc.kv.folder' (join '/' (append (slice 0 (add index 1) (split parent.Key '/')) ''))}}>{{breadcrumb}}</a></li>
     {{/each}}
         </ol>
       </BlockSlot>
@@ -207,4 +207,4 @@ as |sort filters parent items|}}
 {{/let}}
     </BlockSlot>
   </DataLoader>
-</Route>
+</Route>

ui/packages/consul-ui/app/templates/dc/services/instance.hbs

@@ -129,7 +129,9 @@ as |item|}}
           <BlockSlot @name="breadcrumbs">
               <ol>
                   <li><a href={{href-to 'dc.services' params=(hash peer=undefined)}}>All Services</a></li>
-                  <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service.Service}})</a></li>
+                  <li><a {{tooltip (concat "Service (" item.Service.Service ")")}} data-test-back href={{href-to 'dc.services.show'}}>
+                    Service ({{item.Service.Service}})
+                  </a></li>
               </ol>
           </BlockSlot>
           <BlockSlot @name="header">
@@ -192,4 +194,4 @@ as |item|}}
 {{/let}}
     </BlockSlot>
   </DataLoader>
-</Route>
+</Route>