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
This commit is contained in:
John Cowen 2020-05-12 13:02:04 +01:00 committed by John Cowen
parent 4c46d2ed6f
commit 7d6f5ef92a
9 changed files with 36 additions and 28 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -30,7 +30,7 @@
<BlockSlot @name="content">
<ChangeableSet @dispatcher={{searchable}}>
<BlockSlot @name="set" as |filtered|>
<ConsulServiceList @routeName="dc.services.show" @items={{sort-by sort.selected.key filtered}} @proxies={{proxies}}/>
<ConsulServiceList @routeName="dc.services.show" @items={{sort-by sort.selected.key filtered}} @proxies={{proxies}}/>
</BlockSlot>
<BlockSlot @name="empty">
<p>

View file

@ -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.

View file

@ -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.

View file

@ -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');
});
});