From b40bcd76c9dd15d1f4256a31b65749ac1a670f79 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Tue, 26 May 2020 11:52:32 -0400
Subject: [PATCH] ui: Create Tags & Meta tab (#7954)

---
 ui-v2/app/router.js                           |  3 --
 ui-v2/app/routes/dc/services/instance/tags.js | 14 ---------
 .../styles/base/components/tabs/layout.scss   |  2 +-
 ui-v2/app/templates/dc/services/instance.hbs  |  3 +-
 .../dc/services/instance/metadata.hbs         | 29 ++++++++++++++-----
 .../dc/services/instances/show.feature        |  7 ++---
 ui-v2/tests/pages/dc/services/instance.js     |  4 +--
 7 files changed, 27 insertions(+), 35 deletions(-)
 delete mode 100644 ui-v2/app/routes/dc/services/instance/tags.js

diff --git a/ui-v2/app/router.js b/ui-v2/app/router.js
index 794b5f98a..5114afc21 100644
--- a/ui-v2/app/router.js
+++ b/ui-v2/app/router.js
@@ -49,9 +49,6 @@ export const routes = {
         addresses: {
           _options: { path: '/addresses' },
         },
-        tags: {
-          _options: { path: '/tags' },
-        },
         metadata: {
           _options: { path: '/metadata' },
         },
diff --git a/ui-v2/app/routes/dc/services/instance/tags.js b/ui-v2/app/routes/dc/services/instance/tags.js
deleted file mode 100644
index 9793d62c0..000000000
--- a/ui-v2/app/routes/dc/services/instance/tags.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Route from '@ember/routing/route';
-
-export default Route.extend({
-  model: function() {
-    const parent = this.routeName
-      .split('.')
-      .slice(0, -1)
-      .join('.');
-    return this.modelFor(parent);
-  },
-  setupController: function(controller, model) {
-    controller.setProperties(model);
-  },
-});
diff --git a/ui-v2/app/styles/base/components/tabs/layout.scss b/ui-v2/app/styles/base/components/tabs/layout.scss
index 92d6a8549..3578479fd 100644
--- a/ui-v2/app/styles/base/components/tabs/layout.scss
+++ b/ui-v2/app/styles/base/components/tabs/layout.scss
@@ -29,5 +29,5 @@
   border-bottom: 1px solid $gray-200;
 }
 %tab-section section > h3 {
-  margin: 24px 0;
+  margin: 24px 0 12px 0;
 }
diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
index 86269b8aa..81be4bd2a 100644
--- a/ui-v2/app/templates/dc/services/instance.hbs
+++ b/ui-v2/app/templates/dc/services/instance.hbs
@@ -39,8 +39,7 @@
                       (hash label="Proxy Info" href=(href-to "dc.services.instance.proxy") selected=(is-href "dc.services.instance.proxy"))
 
 )
-                      (hash label="Tags" href=(href-to "dc.services.instance.tags") selected=(is-href "dc.services.instance.tags"))
-                      (hash label="Metadata" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
+                      (hash label="Tags & Meta" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
               )
         }}/>
         {{outlet}}
diff --git a/ui-v2/app/templates/dc/services/instance/metadata.hbs b/ui-v2/app/templates/dc/services/instance/metadata.hbs
index b38931c70..8ec4c816d 100644
--- a/ui-v2/app/templates/dc/services/instance/metadata.hbs
+++ b/ui-v2/app/templates/dc/services/instance/metadata.hbs
@@ -1,11 +1,24 @@
-<div id="metadata" class="tab-section">
+<div id="meta" class="tab-section">
   <div role="tabpanel">
-{{#if item.Meta}}
-  <ConsulMetadataList @items={{object-entries item.Meta}} />
-{{else}}
-  <p>
-    This instance has no metadata.
-  </p>
-{{/if}}
+    <section class="tags">
+      <h3>Tags</h3>
+    {{#if (gt item.Tags.length 0) }}
+      <TagList @item={{item}} />
+    {{else}}
+      <p>
+        There are no tags.
+      </p>
+    {{/if}}
+    </section>
+    <section class="metadata">
+      <h3>Meta</h3>
+    {{#if item.Meta}}
+      <ConsulMetadataList @items={{object-entries item.Meta}} />
+    {{else}}
+      <p>
+        This instance has no metadata.
+      </p>
+    {{/if}}
+    </section>
   </div>
 </div>
diff --git a/ui-v2/tests/acceptance/dc/services/instances/show.feature b/ui-v2/tests/acceptance/dc/services/instances/show.feature
index 1c28d9f18..f66c010e3 100644
--- a/ui-v2/tests/acceptance/dc/services/instances/show.feature
+++ b/ui-v2/tests/acceptance/dc/services/instances/show.feature
@@ -68,14 +68,11 @@ Feature: dc / services / instances / show: Show Service Instance
     And I see 3 of the serviceChecks object
     And I see 3 of the nodeChecks object
 
-    When I click tags on the tabs
-    And I see tagsIsSelected on the tabs
+    When I click tags&Meta on the tabs
+    And I see tags&MetaIsSelected on the tabs
 
     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)"
-
-    When I click metadata on the tabs
-    And I see metadataIsSelected on the tabs
     And I see 3 of the metadata object
     And the title should be "service-1-with-id - Consul"
 
diff --git a/ui-v2/tests/pages/dc/services/instance.js b/ui-v2/tests/pages/dc/services/instance.js
index 309f9cde6..268142a05 100644
--- a/ui-v2/tests/pages/dc/services/instance.js
+++ b/ui-v2/tests/pages/dc/services/instance.js
@@ -4,7 +4,7 @@ export default function(visitable, attribute, collection, text, tabs) {
     externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
       scope: '.title',
     }),
-    tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags', 'metadata']),
+    tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags-&-meta']),
     serviceChecks: collection('[data-test-service-checks] li'),
     nodeChecks: collection('[data-test-node-checks] li'),
     upstreams: collection('[data-test-proxy-upstreams] > li', {
@@ -17,6 +17,6 @@ export default function(visitable, attribute, collection, text, tabs) {
     addresses: collection('#addresses [data-test-tabular-row]', {
       address: text('[data-test-address]'),
     }),
-    metadata: collection('#metadata [data-test-tabular-row]', {}),
+    metadata: collection('.metadata [data-test-tabular-row]', {}),
   };
 }