ui: refactor out the taglist component to use a recursive pattern (#7837)

* ui: refactor out the taglist component to use a recursive pattern

* Make sure simple rendering tests pass

ui-v2/app/components/consul-service-instance-list/index.hbs

@@ -37,11 +37,11 @@
           {{item.Node.Address}}:{{item.Service.Port}}
         {{/if}}
       </li>
-    {{#if (gt item.Service.Tags.length 0)}}
-      <li>
-        <TagList @items={{item.Service.Tags}}/>
-      </li>
-    {{/if}}
+      <TagList @item={{item.Service}} as |Tags|>
+        <li>
+          <Tags />
+        </li>
+      </TagList>
     </ul>
   </ListCollection>
 {{/if}}

ui-v2/app/components/consul-service-list/index.hbs

@@ -25,11 +25,11 @@
       connected with proxy
     </li>
   {{/if}}
-  {{#if (gt items.Tags.length 0)}}
-    <li>
-      <TagList @items={{item.Tags}}/>
-    </li>
-  {{/if}}
+    <TagList @item={{item}} as |Tags|>
+      <li>
+        <Tags />
+      </li>
+    </TagList>
   </ul>
 </ListCollection>
 {{/if}}

ui-v2/app/components/tag-list/index.hbs

@@ -1,8 +1,16 @@
-{{#if (gt items.length 0)}}
-    <dt class="tags">Tags</dt>
-    <dd data-test-tags class="tags">
-      {{#each items as |item|}}
-        <span>{{item}}</span>
-      {{/each}}
-    </dd>
+{{#if (gt item.Tags.length 0)}}
+  {{#if (has-block)}}
+    {{yield
+      (component 'tag-list' item=item)
+    }}
+  {{else}}
+    <dl class="tag-list">
+      <dt>Tags</dt>
+      <dd data-test-tags>
+        {{#each item.Tags as |item|}}
+          <span>{{item}}</span>
+        {{/each}}
+      </dd>
+    </dl>
+  {{/if}}
 {{/if}}

ui-v2/app/components/tag-list/index.js

@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  tagName: 'dl',
-  classNames: ['tag-list'],
+  tagName: '',
 });

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

@@ -34,7 +34,7 @@
                       {{item.Port}}
                   </td>
                   <td data-test-service-tags>
-                    <TagList @items={{item.Tags}} />
+                    <TagList @item={{item}} />
                   </td>
               </BlockSlot>
           </TabularCollection>

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

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

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

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

ui-v2/tests/integration/components/tag-list-test.js

@@ -10,16 +10,17 @@ module('Integration | Component | tag list', function(hooks) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.on('myAction', function(val) { ... });
 
-    await render(hbs`{{tag-list}}`);
+    await render(hbs`<TagList @item={{hash Tags=(array 'tag')}} />`);
 
-    assert.dom('*').hasText('');
+    assert.dom('dd').hasText('tag');
 
     // Template block usage:
     await render(hbs`
-      {{#tag-list}}
-      {{/tag-list}}
+      <TagList @item={{hash Tags=(array 'tag')}} as |Tags|>
+        <Tags />
+      </TagList>
     `);
 
-    assert.dom('*').hasText('');
+    assert.dom('dd').hasText('tag');
   });
 });