ui: Use empty-state for our small empty states (#8262)

ui-v2/app/components/empty-state/index.hbs

@@ -1,5 +1,6 @@
 {{yield}}
 <div class="empty-state" ...attributes>
+{{#if hasHeader}}
   <header>
     {{#yield-slot name="header"}}
       {{yield}}
@@ -8,6 +9,7 @@
       {{yield}}
     {{/yield-slot}}
   </header>
+{{/if}}
   {{#yield-slot name="body"}}
     <div>
       {{yield}}

ui-v2/app/components/empty-state/index.js

@@ -1,6 +1,11 @@
 import Component from '@ember/component';
+import { set } from '@ember/object';
 import Slotted from 'block-slots';
 
 export default Component.extend(Slotted, {
   tagName: '',
+  willRender: function() {
+    this._super(...arguments);
+    set(this, 'hasHeader', this._isRegistered('header') || this._isRegistered('subheader'));
+  },
 });

ui-v2/app/styles/components/empty-state/layout.scss

@@ -40,3 +40,7 @@
 %empty-state-anchor::before {
   margin-top: -1px;
 }
+%empty-state > div:only-child {
+  padding: 50px 0 10px 0;
+  text-align: center;
+}

ui-v2/app/styles/core/typography.scss

@@ -42,7 +42,7 @@ pre code,
 %flash-message p,
 %filter-bar input,
 %phrase-editor input,
-%tab-section section p {
+%tab-section p {
   @extend %p1;
 }
 %menu-panel dl,
@@ -60,6 +60,7 @@ pre code,
 }
 .template-error > div,
 %empty-state-subheader,
+%empty-state p,
 %button,
 %main-content p,
 %form-element-note,

ui-v2/app/templates/dc/nodes/show/healthchecks.hbs

@@ -3,9 +3,13 @@
     {{#if (gt item.Checks.length 0) }}
       <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
     {{else}}
+      <EmptyState>
+        <BlockSlot @name="body">
           <p>
             This node has no health checks.
           </p>
+        </BlockSlot>
+      </EmptyState>
     {{/if}}
   </div>
 </div>

ui-v2/app/templates/dc/nodes/show/metadata.hbs

@@ -3,9 +3,13 @@
 {{#if item.Meta}}
   <ConsulMetadataList @items={{object-entries item.Meta}} />
 {{else}}
+  <EmptyState>
+    <BlockSlot @name="body">
       <p>
         This node has no metadata.
       </p>
+    </BlockSlot>
+  </EmptyState>
 {{/if}}
   </div>
 </div>

ui-v2/app/templates/dc/nodes/show/services.hbs

@@ -13,10 +13,14 @@
         <ConsulServiceInstanceList @routeName="dc.services.show" @items={{filtered}} @checks={{checks}}/>
       </BlockSlot>
       <BlockSlot @name="empty">
+        <EmptyState>
+          <BlockSlot @name="body">
             <p>
               There are no services.
             </p>
           </BlockSlot>
+        </EmptyState>
+      </BlockSlot>
     </ChangeableSet>
   </div>
 </div>

ui-v2/app/templates/dc/nodes/show/sessions.hbs

@@ -53,9 +53,13 @@
         </BlockSlot>
     </TabularCollection>
 {{else}}
+      <EmptyState>
+        <BlockSlot @name="body">
           <p>
-        There are no Lock Sessions for this Node. For more information, view <a href="{{ env 'CONSUL_DOCS_URL'}}/internals/sessions.html" rel="help noopener noreferrer" target="_blank">our documentation</a>
+            There are no Lock Sessions for this Node. For more information, view <a href="{{ env 'CONSUL_DOCS_URL'}}/internals/sessions.html" rel="noopener noreferrer" target="_blank">our documentation</a>
           </p>
+        </BlockSlot>
+      </EmptyState>
 {{/if}}
   </div>
 </div>

ui-v2/app/templates/dc/services/instance/metadata.hbs

@@ -5,9 +5,13 @@
     {{#if (gt item.Tags.length 0) }}
       <TagList @item={{item}} />
     {{else}}
+      <EmptyState>
+        <BlockSlot @name="body">
           <p>
             There are no tags.
           </p>
+        </BlockSlot>
+      </EmptyState>
     {{/if}}
     </section>
     <section class="metadata">
@@ -15,9 +19,13 @@
     {{#if item.Meta}}
       <ConsulMetadataList @items={{object-entries item.Meta}} />
     {{else}}
+      <EmptyState>
+        <BlockSlot @name="body">
           <p>
             This instance has no metadata.
           </p>
+        </BlockSlot>
+      </EmptyState>
     {{/if}}
     </section>
   </div>

ui-v2/app/templates/dc/services/instance/tags.hbs

@@ -1,11 +0,0 @@
-<div id="tags" class="tab-section">
-  <div role="tabpanel">
-    {{#if (gt item.Tags.length 0) }}
-    <TagList @item={{item}} />
-    {{else}}
-      <p>
-        There are no tags.
-      </p>
-    {{/if}}
-  </div>
-</div>

ui-v2/app/templates/dc/services/show/instances.hbs

@@ -12,10 +12,14 @@
         <ConsulServiceInstanceList @routeName="dc.services.instance" @items={{filtered}} @proxies={{keyedProxies}}/>
       </BlockSlot>
       <BlockSlot @name="empty">
+        <EmptyState>
+          <BlockSlot @name="body">
             <p>
               There are no services.
             </p>
           </BlockSlot>
+        </EmptyState>
+      </BlockSlot>
     </ChangeableSet>
   </div>
 </div>

ui-v2/app/templates/dc/services/show/intentions.hbs

@@ -34,10 +34,14 @@
       />
     </BlockSlot>
     <BlockSlot @name="empty">
+      <EmptyState>
+        <BlockSlot @name="body">
           <p>
             There are no intentions for this service.
           </p>
         </BlockSlot>
+      </EmptyState>
+    </BlockSlot>
   </ChangeableSet>
   </div>
 </div>

ui-v2/app/templates/dc/services/show/services.hbs

@@ -1,17 +1,19 @@
 <div id="services" class="tab-section">
   <div role="tabpanel">
   {{#if (gt gatewayServices.length 0)}}
-    <section>
       <p>
         The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our
         <a href="{{env 'CONSUL_DOCS_URL'}}/connect/terminating-gateway" target="_blank" rel="noopener noreferrer">step-by-step guide</a>.
       </p>
       <ConsulServiceList @items={{gatewayServices}} @nspace={{nspace}} />
-    </section>
   {{else}}
+    <EmptyState>
+      <BlockSlot @name="body">
         <p>
           There are no linked services.
         </p>
+      </BlockSlot>
+    </EmptyState>
   {{/if}}
   </div>
 </div>

ui-v2/app/templates/dc/services/show/tags.hbs

@@ -3,9 +3,13 @@
     {{#if (gt item.Tags.length 0) }}
       <TagList @item={{item}} />
     {{else}}
+      <EmptyState>
+        <BlockSlot @name="body">
           <p>
             There are no tags.
           </p>
+        </BlockSlot>
+      </EmptyState>
     {{/if}}
   </div>
 </div>

ui-v2/app/templates/dc/services/show/upstreams.hbs

@@ -1,16 +1,18 @@
 <div id="upstreams" class="tab-section">
   <div role="tabpanel">
   {{#if (gt gatewayServices.length 0)}}
-    <section>
       <p>
         Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our <a href="{{env 'CONSUL_DOCS_URL'}}/connect/ingress-gateway" target="_blank" rel="noopener noreferrer">documentation</a>.
       </p>
       <ConsulUpstreamList @items={{gatewayServices}} @dc={{dc}} @nspace={{nspace}} />
-    </section>
   {{else}}
+    <EmptyState>
+      <BlockSlot @name="body">
         <p>
           There are no upstreams.
         </p>
+      </BlockSlot>
+    </EmptyState>
   {{/if}}
   </div>
 </div>