ui: Moves healthcheck list to Glimmer template-only consul component (#9293)

ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs

@@ -1,7 +1,10 @@
-<div ...attributes>
+<div
+  class="consul-health-check-list"
+  ...attributes
+>
   <ul>
-{{#each items as |item| }}
+{{#each @items as |item|}}
-    <li class={{concat 'healthcheck-output ' item.Status}}>
+    <li class={{concat 'health-check-output ' item.Status}}>
       <div>
         <header>
           <h3>{{item.Name}}</h3>
@@ -23,7 +26,7 @@
           <dt>Type</dt>
           <dd>
             {{item.Type}}
-  {{#if (and exposed (contains item.Type (array 'http' 'grpc')))}}
+  {{#if (and @exposed (contains item.Type (array 'http' 'grpc')))}}
             <em
               data-test-exposed="true"
               {{tooltip "Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent."}}

ui/packages/consul-ui/app/components/consul/health-check/list/index.scss

@@ -0,0 +1,5 @@
+@import './skin';
+@import './layout';
+.consul-health-check-list .health-check-output {
+  @extend %healthcheck-output;
+}

ui/packages/consul-ui/app/components/healthcheck-list/index.js

@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui/packages/consul-ui/app/styles/components.scss

@@ -18,7 +18,6 @@
 @import './components/pill';
 @import './components/table';
 @import './components/tag-list';
-@import './components/healthcheck-output';
 @import './components/freetext-filter';
 @import './components/filter-bar';
 @import './components/flash-message';
@@ -57,6 +56,7 @@
 @import 'consul-ui/components/consul/tomography/graph';
 @import 'consul-ui/components/consul/discovery-chain';
 @import 'consul-ui/components/consul/upstream-instance/list';
+@import 'consul-ui/components/consul/health-check/list';
 @import 'consul-ui/components/consul/exposed-path/list';
 @import 'consul-ui/components/consul/external-source';
 @import 'consul-ui/components/consul/kind';

ui/packages/consul-ui/app/styles/components/healthcheck-output.scss

@@ -1,4 +0,0 @@
-@import './healthcheck-output/index';
-.healthcheck-output {
-  @extend %healthcheck-output;
-}

ui/packages/consul-ui/app/styles/components/healthcheck-output/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs

@@ -1,7 +1,7 @@
 <div id="health-checks" class="tab-section">
   <div role="tabpanel">
     {{#if (gt item.Checks.length 0) }}
-      <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
+      <Consul::HealthCheck::List @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
     {{else}}
       <EmptyState>
         <BlockSlot @name="body">

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

@@ -3,7 +3,7 @@
   {{#let (append item.Checks (or proxy.Checks (array))) as |checks|}}
     {{#if (gt checks.length 0) }}
       <section data-test-checks>
-        <HealthcheckList
+        <Consul::HealthCheck::List
           @items={{sort-by (comparator 'check' 'Status:asc') checks}}
           @exposed={{proxyMeta.ServiceProxy.Expose.Checks}}
         />

ui/packages/consul-ui/tests/integration/components/healthcheck-list-test.js

@@ -1,25 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | healthcheck list', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.on('myAction', function(val) { ... });
-
-    await render(hbs`{{healthcheck-list}}`);
-
-    assert.dom('ul').exists({ count: 1 });
-
-    // Template block usage:
-    await render(hbs`
-      {{#healthcheck-list}}
-      {{/healthcheck-list}}
-    `);
-
-    assert.dom('ul').exists({ count: 1 });
-  });
-});