tabbed DNC card, machine-numbered downloads, themed backup history

frontend/src/components/pluginAssetPanels.js

@@ -98,7 +98,24 @@ export function badges(panel) {
   return list.map((b) => ({ label: b.label, color: b.color }))
 }
 
+// tabs: [{ label, fields: [{label, value, mono}] }]. One section is shown at a
+// time, so a panel with 30 values stays the height of its largest section
+// instead of dragging one multicol column far past the other.
+export function tabSections(panel) {
+  const data = panel._data
+  const sections = (data && Array.isArray(data.sections)) ? data.sections : []
+  return sections
+    .map((s) => ({
+      label: s.label,
+      fields: (s.fields || []).map((f) => ({
+        label: f.label, value: formatValue(f.value, f), mono: !!f.mono,
+      })),
+    }))
+    .filter((s) => s.fields.length > 0)
+}
+
 export function panelVisible(panel) {
+  if (panel.render === 'tabs') return tabSections(panel).length > 0
   if (panel.render === 'list') return rows(panel).length > 0 || !!panel.empty
   if (panel.render === 'keyvalue') return keyvalueFields(panel).length > 0
   if (panel.render === 'table') return rows(panel).length > 0