Merge pull request #4253 from hashicorp/feature/ui-clearer-tags

UI - Clearer tags

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 {

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 {

ui-v2/app/styles/components/tag.scss

@@ -0,0 +1,5 @@
+%tag {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: $radius-small;
+}

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;
+}

ui-v2/app/styles/routes/dc/service/index.scss

@@ -1,9 +1,15 @@
+@import '../../../components/tag';
 html.template-service.template-show main dl {
   display: flex;
   margin-bottom: 1.4em;
 }
-html.template-service.template-show main dt::after {
+html.template-service.template-show main dt {
-  content: ':';
+  display: none;
-  display: inline-block;
+}
-  margin-right: 0.2em;
+// 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;
+  margin-bottom: 0.5em;
 }

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

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

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

ui-v2/tests/acceptance/dc/services/show.feature

@@ -17,6 +17,7 @@ Feature: dc / services / show: Show Service
       dc: dc1
       service: service-0
     ---
-    Then I see the text "Tag1, Tag2, Tag3" in "[data-test-tags]"
+    Then I see the text "Tag1" in "[data-test-tags] span:nth-child(1)"
-    Then ok
+    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)"