From 5dad95faf16a07c1a4033ee31fc371505f939329 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 2 Apr 2020 10:53:59 +0100
Subject: [PATCH] ui: Add `<ConsulMetadataList />` and use it in 2 places
 (#7568)

We previoulsy had some pretty straightforward duplicated code for
rendering our metadata list for both Service Metadata and Node Metadata.

This moves this code into a component.
---
 .../consul-metadata-list/README.mdx           | 27 +++++++++++++++++++
 .../components/consul-metadata-list/index.hbs | 19 +++++++++++++
 .../components/consul-metadata-list/index.js  |  5 ++++
 ui-v2/app/templates/dc/nodes/-metadata.hbs    | 22 +--------------
 ui-v2/app/templates/dc/services/-metadata.hbs | 22 +--------------
 5 files changed, 53 insertions(+), 42 deletions(-)
 create mode 100644 ui-v2/app/components/consul-metadata-list/README.mdx
 create mode 100644 ui-v2/app/components/consul-metadata-list/index.hbs
 create mode 100644 ui-v2/app/components/consul-metadata-list/index.js

diff --git a/ui-v2/app/components/consul-metadata-list/README.mdx b/ui-v2/app/components/consul-metadata-list/README.mdx
new file mode 100644
index 0000000000..cb5c04d79c
--- /dev/null
+++ b/ui-v2/app/components/consul-metadata-list/README.mdx
@@ -0,0 +1,27 @@
+## ConsulMetadataList
+
+`<ConsulMetadataList @items={{meta}} />`
+
+A presentational component for presenting Consul Metadata
+
+### Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `array` |  | A an array of entries or `[key, value]` pairs as returned by `Object.entries()` |
+
+### Example
+
+The following example shows how to construct the required structure from the
+Consul API using a `object-entries` helper.
+
+```handlebars
+  <ConsulMetadataList @items={{object-entries item.Meta}} />
+```
+
+### See
+
+- [Component Source Code](./index.js)
+- [TemplateSource Code](./index.hbs)
+
+---
diff --git a/ui-v2/app/components/consul-metadata-list/index.hbs b/ui-v2/app/components/consul-metadata-list/index.hbs
new file mode 100644
index 0000000000..3d1febfaae
--- /dev/null
+++ b/ui-v2/app/components/consul-metadata-list/index.hbs
@@ -0,0 +1,19 @@
+<TabularCollection
+  data-test-metadata
+  @items={{items}} as |item index|
+>
+    <BlockSlot @name="header">
+        <th>Key</th>
+        <th>Value</th>
+    </BlockSlot>
+    <BlockSlot @name="row">
+        <td>
+          <span>
+            {{object-at 0 item}}
+          </span>
+        </td>
+        <td>
+          <span>{{object-at 1 item}}</span>
+        </td>
+    </BlockSlot>
+</TabularCollection>
diff --git a/ui-v2/app/components/consul-metadata-list/index.js b/ui-v2/app/components/consul-metadata-list/index.js
new file mode 100644
index 0000000000..4798652642
--- /dev/null
+++ b/ui-v2/app/components/consul-metadata-list/index.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+});
diff --git a/ui-v2/app/templates/dc/nodes/-metadata.hbs b/ui-v2/app/templates/dc/nodes/-metadata.hbs
index bd1936d999..d19bae58ad 100644
--- a/ui-v2/app/templates/dc/nodes/-metadata.hbs
+++ b/ui-v2/app/templates/dc/nodes/-metadata.hbs
@@ -1,25 +1,5 @@
 {{#if item.Meta}}
-  {{#with (object-entries item.Meta) as |meta|}}
-    <TabularCollection
-      data-test-metadata
-      @items={{meta}} as |item index|
-    >
-        <BlockSlot @name="header">
-            <th>Key</th>
-            <th>Value</th>
-        </BlockSlot>
-        <BlockSlot @name="row">
-            <td>
-              <span>
-                {{object-at 0 item}}
-              </span>
-            </td>
-            <td>
-              <span>{{object-at 1 item}}</span>
-            </td>
-        </BlockSlot>
-    </TabularCollection>
-  {{/with}}
+  <ConsulMetadataList @items={{object-entries item.Meta}} />
 {{else}}
   <p>
     This node has no meta data.
diff --git a/ui-v2/app/templates/dc/services/-metadata.hbs b/ui-v2/app/templates/dc/services/-metadata.hbs
index e1061be4c3..8785b0341e 100644
--- a/ui-v2/app/templates/dc/services/-metadata.hbs
+++ b/ui-v2/app/templates/dc/services/-metadata.hbs
@@ -1,25 +1,5 @@
 {{#if item.Meta}}
-  {{#with (object-entries item.Meta) as |meta|}}
-    <TabularCollection
-      data-test-metadata
-      @items={{meta}} as |item index|
-    >
-        <BlockSlot @name="header">
-            <th>Key</th>
-            <th>Value</th>
-        </BlockSlot>
-        <BlockSlot @name="row">
-            <td>
-              <span>
-                {{object-at 0 item}}
-              </span>
-            </td>
-            <td>
-              <span>{{object-at 1 item}}</span>
-            </td>
-        </BlockSlot>
-    </TabularCollection>
-  {{/with}}
+  <ConsulMetadataList @items={{object-entries item.Meta}} />
 {{else}}
   <p>
     This instance has no meta data.