mirror of https://github.com/status-im/consul.git
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:
parent
f3adeec093
commit
c4c06c2dab
|
@ -37,11 +37,11 @@
|
|||
{{item.Node.Address}}:{{item.Service.Port}}
|
||||
{{/if}}
|
||||
</li>
|
||||
{{#if (gt item.Service.Tags.length 0)}}
|
||||
<TagList @item={{item.Service}} as |Tags|>
|
||||
<li>
|
||||
<TagList @items={{item.Service.Tags}}/>
|
||||
<Tags />
|
||||
</li>
|
||||
{{/if}}
|
||||
</TagList>
|
||||
</ul>
|
||||
</ListCollection>
|
||||
{{/if}}
|
|
@ -25,11 +25,11 @@
|
|||
connected with proxy
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if (gt items.Tags.length 0)}}
|
||||
<TagList @item={{item}} as |Tags|>
|
||||
<li>
|
||||
<TagList @items={{item.Tags}}/>
|
||||
<Tags />
|
||||
</li>
|
||||
{{/if}}
|
||||
</TagList>
|
||||
</ul>
|
||||
</ListCollection>
|
||||
{{/if}}
|
|
@ -1,8 +1,16 @@
|
|||
{{#if (gt items.length 0)}}
|
||||
<dt class="tags">Tags</dt>
|
||||
<dd data-test-tags class="tags">
|
||||
{{#each items as |item|}}
|
||||
{{#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}}
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
tagName: 'dl',
|
||||
classNames: ['tag-list'],
|
||||
tagName: '',
|
||||
});
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
{{item.Port}}
|
||||
</td>
|
||||
<td data-test-service-tags>
|
||||
<TagList @items={{item.Tags}} />
|
||||
<TagList @item={{item}} />
|
||||
</td>
|
||||
</BlockSlot>
|
||||
</TabularCollection>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue