From edc67aba44a23336f8e7ef83470ce2fc155eb5ba Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 20 Jun 2018 13:44:36 +0100
Subject: [PATCH 1/5] Make sure the colon doesn't wrap with lots of tags

---
 ui-v2/app/styles/routes/dc/service/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss
index 975da4ad7..214b12937 100644
--- a/ui-v2/app/styles/routes/dc/service/index.scss
+++ b/ui-v2/app/styles/routes/dc/service/index.scss
@@ -4,6 +4,5 @@ html.template-service.template-show main dl {
 }
 html.template-service.template-show main dt::after {
   content: ':';
-  display: inline-block;
   margin-right: 0.2em;
 }

From fb5c2f737b07d07e7a3ee2a66e9f07848ee523ba Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 20 Jun 2018 14:01:42 +0100
Subject: [PATCH 2/5] Add a reusable %tag and use it for the ACL 'tags' ready
 to use elsewhere

---
 ui-v2/app/styles/components/table.scss        | 11 +++++------
 ui-v2/app/styles/components/tag.scss          |  5 +++++
 ui-v2/app/styles/routes/dc/service/index.scss | 11 ++++++++---
 ui-v2/app/templates/dc/services/show.hbs      |  4 +++-
 4 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 ui-v2/app/styles/components/tag.scss

diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index 49578096e..c78786af2 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -1,4 +1,9 @@
 @import './icons';
+@import './tag';
+td strong {
+  @extend %tag;
+  background-color: $gray;
+}
 th {
   color: $text-light !important;
 }
@@ -53,12 +58,6 @@ table td a {
 tbody {
   overflow-x: visible !important;
 }
-td strong {
-  display: inline-block;
-  background-color: $gray;
-  padding: 1px 5px;
-  border-radius: $radius-small;
-}
 th,
 td:not(.actions),
 td:not(.actions) a {
diff --git a/ui-v2/app/styles/components/tag.scss b/ui-v2/app/styles/components/tag.scss
new file mode 100644
index 000000000..f31eb7be8
--- /dev/null
+++ b/ui-v2/app/styles/components/tag.scss
@@ -0,0 +1,5 @@
+%tag {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: $radius-small;
+}
diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss
index 214b12937..e8883041c 100644
--- a/ui-v2/app/styles/routes/dc/service/index.scss
+++ b/ui-v2/app/styles/routes/dc/service/index.scss
@@ -1,8 +1,13 @@
+@import '../../../components/tag';
 html.template-service.template-show main dl {
   display: flex;
   margin-bottom: 1.4em;
 }
-html.template-service.template-show main dt::after {
-  content: ':';
-  margin-right: 0.2em;
+html.template-service.template-show main dt {
+  display: none;
+}
+html.template-service.template-show main dd span {
+  @extend %tag;
+  background-color: $gray;
+  margin-bottom: 0.5em;
 }
diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs
index 23dc23af9..acccf3468 100644
--- a/ui-v2/app/templates/dc/services/show.hbs
+++ b/ui-v2/app/templates/dc/services/show.hbs
@@ -19,7 +19,9 @@
         <dl>
             <dt>Tags</dt>
             <dd data-test-tags>
-                {{join ', ' item.Tags}}
+              {{#each item.Tags as |item|}}
+                <span>{{item}}</span>
+              {{/each}}
             </dd>
         </dl>
 {{/if}}

From d64528665d1284a7e92b3c4af2a294dae907cebf Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 20 Jun 2018 15:14:16 +0100
Subject: [PATCH 3/5] Use the pill styling elsewhere...

TODO: Probably change the %tag to %pill now I've remembered the word I was
looking for!
---
 ui-v2/app/styles/app.scss                     | 1 +
 ui-v2/app/styles/routes/dc/service/index.scss | 2 ++
 ui-v2/app/templates/dc/nodes/-services.hbs    | 6 ++++--
 ui-v2/app/templates/dc/services/index.hbs     | 6 ++++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss
index cebc321f1..9fa550d5f 100644
--- a/ui-v2/app/styles/app.scss
+++ b/ui-v2/app/styles/app.scss
@@ -45,6 +45,7 @@
 @import 'components/notice';
 
 @import 'routes/dc/service/index';
+@import 'routes/dc/nodes/index';
 @import 'routes/dc/kv/index';
 
 main a {
diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss
index e8883041c..d60c5c77a 100644
--- a/ui-v2/app/styles/routes/dc/service/index.scss
+++ b/ui-v2/app/styles/routes/dc/service/index.scss
@@ -6,6 +6,8 @@ html.template-service.template-show main dl {
 html.template-service.template-show main dt {
   display: none;
 }
+// TODO: Generalize this, also see nodes/index
+html.template-service.template-list td.tags span,
 html.template-service.template-show main dd span {
   @extend %tag;
   background-color: $gray;
diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs
index 185875f3c..1aeaa01be 100644
--- a/ui-v2/app/templates/dc/nodes/-services.hbs
+++ b/ui-v2/app/templates/dc/nodes/-services.hbs
@@ -20,9 +20,11 @@
             <td data-test-service-port="{{item.Port}}" class="port">
                 {{item.Port}}
             </td>
-            <td>
+            <td data-test-service-tags class="tags">
                 {{#if (gt item.Tags.length 0)}}
-                    {{join ', ' item.Tags}}
+                  {{#each item.Tags as |item|}}
+                    <span>{{item}}</span>
+                  {{/each}}
                 {{/if}}
             </td>
         {{/block-slot}}
diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs
index 067c63107..5267078b6 100644
--- a/ui-v2/app/templates/dc/services/index.hbs
+++ b/ui-v2/app/templates/dc/services/index.hbs
@@ -35,9 +35,11 @@
                         <dd title="Critical" class={{if (lt item.ChecksCritical 1) 'zero'}} style={{criticalWidth}}>{{format_number item.ChecksCritical}}</dd>
                     </dl>
                 </td>
-                <td style={{remainingWidth}}>
+                <td class="tags" style={{remainingWidth}}>
                 {{#if (gt item.Tags.length 0)}}
-                    {{join ', ' item.Tags}}
+                  {{#each item.Tags as |item|}}
+                    <span>{{item}}</span>
+                  {{/each}}
                 {{/if}}
                 </td>
             {{/block-slot}}

From 5dd79165b8b98f9de1619dc6fc350dc01c630ca6 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 20 Jun 2018 15:26:22 +0100
Subject: [PATCH 4/5] Make sure the updated tag view doesn't break the tests

---
 ui-v2/tests/acceptance/dc/services/show.feature | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui-v2/tests/acceptance/dc/services/show.feature b/ui-v2/tests/acceptance/dc/services/show.feature
index 29daba7b6..78e2554a3 100644
--- a/ui-v2/tests/acceptance/dc/services/show.feature
+++ b/ui-v2/tests/acceptance/dc/services/show.feature
@@ -17,6 +17,8 @@ Feature: dc / services / show: Show Service
       dc: dc1
       service: service-0
     ---
-    Then I see the text "Tag1, Tag2, Tag3" in "[data-test-tags]"
-    Then ok
+    Then I see the text "Tag1" in "[data-test-tags] span:nth-child(1)"
+    Then I see the text "Tag2" in "[data-test-tags] span:nth-child(2)"
+    Then I see the text "Tag3" in "[data-test-tags] span:nth-child(3)"
+    Then pause for 5000
 

From 224aa2733d2feceeaf897ee99dfa8ba8f35a57ef Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 20 Jun 2018 15:26:55 +0100
Subject: [PATCH 5/5] Add missing scss file

---
 ui-v2/app/styles/routes/dc/nodes/index.scss     | 6 ++++++
 ui-v2/tests/acceptance/dc/services/show.feature | 1 -
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 ui-v2/app/styles/routes/dc/nodes/index.scss

diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss
new file mode 100644
index 000000000..f7c3003be
--- /dev/null
+++ b/ui-v2/app/styles/routes/dc/nodes/index.scss
@@ -0,0 +1,6 @@
+// TODO: Generalize this, also see services/index
+html.template-node.template-show td.tags span {
+  @extend %tag;
+  background-color: $gray;
+  margin-bottom: 0.5em;
+}
diff --git a/ui-v2/tests/acceptance/dc/services/show.feature b/ui-v2/tests/acceptance/dc/services/show.feature
index 78e2554a3..bf64a5d5b 100644
--- a/ui-v2/tests/acceptance/dc/services/show.feature
+++ b/ui-v2/tests/acceptance/dc/services/show.feature
@@ -20,5 +20,4 @@ Feature: dc / services / show: Show Service
     Then I see the text "Tag1" in "[data-test-tags] span:nth-child(1)"
     Then I see the text "Tag2" in "[data-test-tags] span:nth-child(2)"
     Then I see the text "Tag3" in "[data-test-tags] span:nth-child(3)"
-    Then pause for 5000