From 3e59208f6b210bbdc0cd755ad827c911ef96e084 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 5 May 2021 17:01:49 +0100 Subject: [PATCH 1/5] Add some tests for duplicated and non-duplicated tags --- .../acceptance/dc/services/show/tags.feature | 48 +++++++++++++++++++ .../steps/dc/services/show/tags-steps.js | 10 ++++ .../consul-ui/tests/pages/dc/services/show.js | 5 ++ 3 files changed, 63 insertions(+) create mode 100644 ui/packages/consul-ui/tests/acceptance/dc/services/show/tags.feature create mode 100644 ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/tags-steps.js diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/show/tags.feature b/ui/packages/consul-ui/tests/acceptance/dc/services/show/tags.feature new file mode 100644 index 000000000000..1632ba1807bb --- /dev/null +++ b/ui/packages/consul-ui/tests/acceptance/dc/services/show/tags.feature @@ -0,0 +1,48 @@ +@setupApplicationTest +Feature: dc / services / show / tags + Background: + Given 1 datacenter model with the value "dc1" + And 1 node models + Scenario: A service with multiple tags + Given 1 service model from yaml + --- + - Service: + Name: service + Kind: ~ + Tags: + - tag + - tag1 + - tag2 + --- + When I visit the service page for yaml + --- + dc: dc1 + service: service + --- + And I see tags on the tabs + When I click tags on the tabs + And I see tagsIsSelected on the tabs + And I see 3 tag models on the tabs.tagsTab component + Scenario: A service with multiple duplicated tags + Given 1 service model from yaml + --- + - Service: + Name: service + Kind: ~ + Tags: + - tag1 + - tag2 + - tag + - tag + - tag1 + - tag2 + --- + When I visit the service page for yaml + --- + dc: dc1 + service: service + --- + And I see tags on the tabs + When I click tags on the tabs + And I see tagsIsSelected on the tabs + And I see 3 tag models on the tabs.tagsTab component diff --git a/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/tags-steps.js b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/tags-steps.js new file mode 100644 index 000000000000..3231912b98b4 --- /dev/null +++ b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/tags-steps.js @@ -0,0 +1,10 @@ +import steps from '../../../steps'; + +// step definitions that are shared between features should be moved to the +// tests/acceptance/steps/steps.js file + +export default function(assert) { + return steps(assert).then('I should find a file', function() { + assert.ok(true, this.step); + }); +} diff --git a/ui/packages/consul-ui/tests/pages/dc/services/show.js b/ui/packages/consul-ui/tests/pages/dc/services/show.js index 7936ce8a4327..883502b67100 100644 --- a/ui/packages/consul-ui/tests/pages/dc/services/show.js +++ b/ui/packages/consul-ui/tests/pages/dc/services/show.js @@ -36,5 +36,10 @@ export default function(visitable, clickable, attribute, collection, text, inten name: text('[data-test-service-name]'), }), }; + page.tabs.tagsTab = { + tags: collection('.tag-list dd > span', { + name: text(), + }), + }; return page; } From ea757e6b9c6bbb64f7222a71c818c823b5afadca Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 5 May 2021 17:02:59 +0100 Subject: [PATCH 2/5] Ensure tags get de-duped and add docs --- .../app/components/tag-list/README.mdx | 26 +++++++++++ .../app/components/tag-list/index.hbs | 45 +++++++++++-------- .../app/components/tag-list/index.js | 5 --- 3 files changed, 53 insertions(+), 23 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/tag-list/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/tag-list/index.js diff --git a/ui/packages/consul-ui/app/components/tag-list/README.mdx b/ui/packages/consul-ui/app/components/tag-list/README.mdx new file mode 100644 index 000000000000..bf59f8c721db --- /dev/null +++ b/ui/packages/consul-ui/app/components/tag-list/README.mdx @@ -0,0 +1,26 @@ +# TagList + +Template only component for rendering a list of tags. You can pass either/or/and `@tags=tags` and/or `@item=item` (`item` must have a `Tags` property) for ease. If you pass both they are merged and de-duped. + +Tags are de-duplicated when rendered. + +```hbs preview-template + + +
+ + +``` + +## Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `item` | `Object` | | Object with a `Tags` property equalling an array of string tags | +| `tags` | `Array` | | An array of string tags | diff --git a/ui/packages/consul-ui/app/components/tag-list/index.hbs b/ui/packages/consul-ui/app/components/tag-list/index.hbs index da39146b2257..410e03536b0a 100644 --- a/ui/packages/consul-ui/app/components/tag-list/index.hbs +++ b/ui/packages/consul-ui/app/components/tag-list/index.hbs @@ -1,20 +1,29 @@ -{{#if (gt item.Tags.length 0)}} - {{#if (has-block)}} - {{yield - (component 'tag-list' item=item) +{{#let (union (or @item.Tags (array)) (or @tags (array))) as |tags|}} + {{#if (gt tags.length 0)}} + {{#if (has-block)}} + {{yield + (component 'tag-list' item=item) + }} + {{else}} +
+
+ {{t "components.tag-list.title" + default=(array + "common.consul.tags" + ) }} - {{else}} -
-
- - Tags - -
-
- {{#each item.Tags as |item|}} - {{item}} - {{/each}} -
-
+
+
+ {{#each tags as |item|}} + {{item}} + {{/each}} +
+
+ {{/if}} {{/if}} -{{/if}} +{{/let}} diff --git a/ui/packages/consul-ui/app/components/tag-list/index.js b/ui/packages/consul-ui/app/components/tag-list/index.js deleted file mode 100644 index 4798652642ba..000000000000 --- a/ui/packages/consul-ui/app/components/tag-list/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ - tagName: '', -}); From 152f295651be7321e4caff1ead992204924674e9 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 5 May 2021 17:38:44 +0100 Subject: [PATCH 3/5] Add @ --- ui/packages/consul-ui/app/components/tag-list/index.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/packages/consul-ui/app/components/tag-list/index.hbs b/ui/packages/consul-ui/app/components/tag-list/index.hbs index 410e03536b0a..9927c1317400 100644 --- a/ui/packages/consul-ui/app/components/tag-list/index.hbs +++ b/ui/packages/consul-ui/app/components/tag-list/index.hbs @@ -2,7 +2,7 @@ {{#if (gt tags.length 0)}} {{#if (has-block)}} {{yield - (component 'tag-list' item=item) + (component 'tag-list' item=@item) }} {{else}}
Date: Wed, 5 May 2021 17:50:49 +0100 Subject: [PATCH 4/5] Update docs to include info on the recursive-ness --- .../app/components/tag-list/README.mdx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/ui/packages/consul-ui/app/components/tag-list/README.mdx b/ui/packages/consul-ui/app/components/tag-list/README.mdx index bf59f8c721db..1421cef7fae5 100644 --- a/ui/packages/consul-ui/app/components/tag-list/README.mdx +++ b/ui/packages/consul-ui/app/components/tag-list/README.mdx @@ -18,9 +18,58 @@ Tags are de-duplicated when rendered. /> ``` +`TagList` is also a recursive component, which can currently be used for when you need to wrap the `TagList` component in more DOM, but you only want that DOM to appear if your array of tags is non-empty. + + +```hbs preview-template +
+
+ This list has tags therefore the red border div will also be rendered. +
+ + +
+ +
+ + +
+ +
+ +
+
+ This list has no tags therefore the tags _and_ red border div will **not** be rendered. +
+ + +
+ +
+ + +
+``` + ## Arguments | Argument | Type | Default | Description | | --- | --- | --- | --- | | `item` | `Object` | | Object with a `Tags` property equalling an array of string tags | | `tags` | `Array` | | An array of string tags | + +## Yields + +When used as a block level component the `TagList` yields itself, see above example for usage. + +| Property | Type | Description | +| --- | --- | --- | +| `Tags` | `Array` | The resulting collection of data after searching/sorting/filtering | From c5c26baafeaf4bfdd52af90a3f7cf6fbebe54fbc Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 7 May 2021 11:58:36 +0100 Subject: [PATCH 5/5] Changelog --- .changelog/10186.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/10186.txt diff --git a/.changelog/10186.txt b/.changelog/10186.txt new file mode 100644 index 000000000000..7922e332e702 --- /dev/null +++ b/.changelog/10186.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: De-duplicate tags in rendered tag listings +```