Application Plan "Methods & Metrics" collapsible table

app/assets/stylesheets/provider/_metrics.scss

@@ -14,6 +14,30 @@ table#backend_api_metrics {
       width: 10%;
     }
   }
+
+  tbody {
+    tr {
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+}
+
+th.collapsible {
+  span {
+    cursor: pointer;
+
+    i {
+      margin-right: line-height-times(1/4);
+    }
+  }
+
+  &.collapsed {
+    i {
+      transform: rotate(-90deg);
+    }
+  }
 }
 
 table.contract_table {
@@ -29,6 +53,10 @@ table.contract_table {
   th {
     padding-top: line-height-times(1/4);
     padding-bottom: line-height-times(1/4);
+
+    &:first-child {
+      text-align: left;
+    }
   }
 
   td.selected strong {

app/javascript/packs/plans-metrics.js

@@ -0,0 +1,37 @@
+import { safeFromJsonString } from 'utilities/json-utils'
+
+document.addEventListener('DOMContentLoaded', () => {
+  function toggleMetricVisibility (id) {
+    document.getElementById(`metric_${id}`)
+      .classList
+      .toggle('hidden')
+  }
+
+  const ths = document.querySelectorAll('th.backend_api_metric_title')
+  // NodeList.foreEach not supported in IE11
+  for (const th of ths) {
+    const { collapsible, metrics } = th.dataset
+    const ids = safeFromJsonString(metrics)
+
+    if (collapsible) {
+      th.classList.add('collapsible')
+
+      const toggleBackendAPI = () => {
+        th.classList.toggle('collapsed')
+        ids.forEach(toggleMetricVisibility)
+      }
+
+      const caret = document.createElement('i')
+      // Multiple arguments for 'add' not supported in IE11
+      caret.classList.add('fa')
+      caret.classList.add('fa-caret-down')
+
+      const span = th.querySelector('span')
+      span.insertBefore(caret, span.firstChild)
+      span.addEventListener('click', toggleBackendAPI)
+
+      // First render with all metrics collapsed
+      toggleBackendAPI()
+    }
+  }
+})

app/views/api/metrics/_backend_api.erb

@@ -1,6 +1,8 @@
 <tr>
-  <th colspan="7" class="backend_api_metric_title">
-    <%= backend_api.name %>
+  <th colspan="7" class="backend_api_metric_title"
+                  data-collapsible="<%= backend_api.top_level_metrics.any? %>"
+                  data-metrics="<%= backend_api.metrics.map &:id %>">
+    <span><%= backend_api.name %></span>
     (<%= link_to 'Define method or metric', provider_admin_backend_api_metrics_path(backend_api), title: 'Define Methods & Metrics for this Backend API' %>)
   </th>
 </tr>

app/views/api/plans/_metrics.html.erb

@@ -6,6 +6,7 @@
       Metrics, Methods & Limits
     <% end %>
   </h2>
+
   <table id="metrics" class="contract_table">
     <thead>
       <tr>
@@ -101,5 +102,6 @@
       <% end -%>
     </tbody>
   </table>
+  <%= javascript_pack_tag 'plans-metrics' %>
   <% end -%>
 </div>