From efb4341087e399d5b3311871dafdf8c68968f0cb Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 8 Apr 2019 11:17:30 +0100
Subject: [PATCH] ui: Adds uid to tabular-details for/id's used in toggling for
 uniqueness (#5584)

---
 ui-v2/app/components/tabular-details.js            | 11 ++++++++++-
 ui-v2/app/templates/components/tabular-details.hbs |  6 +++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui-v2/app/components/tabular-details.js b/ui-v2/app/components/tabular-details.js
index fd569b860..50d70b796 100644
--- a/ui-v2/app/components/tabular-details.js
+++ b/ui-v2/app/components/tabular-details.js
@@ -1,11 +1,20 @@
 import Component from '@ember/component';
 import SlotsMixin from 'block-slots';
 import { inject as service } from '@ember/service';
-import { get } from '@ember/object';
+import { get, set } from '@ember/object';
+import { subscribe } from 'consul-ui/utils/computed/purify';
 
+let uid = 0;
 export default Component.extend(SlotsMixin, {
   dom: service('dom'),
   onchange: function() {},
+  init: function() {
+    this._super(...arguments);
+    set(this, 'uid', uid++);
+  },
+  inputId: subscribe('name', 'uid', function(name = 'name') {
+    return `tabular-details-${name}-toggle-${uid}_`;
+  }),
   actions: {
     click: function(e) {
       get(this, 'dom').clickFirstAnchor(e);
diff --git a/ui-v2/app/templates/components/tabular-details.hbs b/ui-v2/app/templates/components/tabular-details.hbs
index 556e49705..5e9f928ab 100644
--- a/ui-v2/app/templates/components/tabular-details.hbs
+++ b/ui-v2/app/templates/components/tabular-details.hbs
@@ -11,14 +11,14 @@
       <tr data-test-tabular-row onclick={{action 'click'}}>
           {{#yield-slot 'row'}}{{yield item index}}{{/yield-slot}}
           <td class="actions">
-            <label for={{concat name '-summary-' index '-toggle'}}><span>Show details</span></label>
+            <label for={{concat inputId index}}><span>Show details</span></label>
           </td>
       </tr>
       <tr>
         <td colspan="3">
-          <input type="checkbox" value={{index}} name={{name}} id={{{ concat name '-summary-' index '-toggle'}}} onchange={{action 'change' item}} />
+          <input type="checkbox" value={{index}} name={{name}} id={{concat inputId index}} onchange={{action 'change' item}} />
           <div>
-            <label for={{concat name '-summary-' index '-toggle'}}><span>Hide details</span></label>
+            <label for={{concat inputId index}}><span>Hide details</span></label>
             <div>
               {{#yield-slot 'details'}}
                 {{yield item index}}