From e3a9ccf2863ce5d0d0d5d311ba000975390dc7bf Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Thu, 3 Aug 2023 17:40:40 +0100
Subject: [PATCH 1/2] Add side menu for Dashboard 2.0 and placeholder row

---
 nodes/config/ui_base.html | 43 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 84d51276..24db3fa2 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1,5 +1,18 @@
+<style>
+    #ff-node-red-dashboard .red-ui-sidebar-header {
+        display: flex;
+        justify-content: space-between;
+    }
+    #ff-node-red-dashboard .red-ui-sidebar-header label {
+        margin-bottom: 0;
+    }
+</style>
+
+
 <script type="text/javascript">
 (function () {
+    const sidebarContentTemplate = '<div id="ff-node-red-dashboard"></div>'
+
     function hasProperty (obj, prop) {
         return Object.prototype.hasOwnProperty.call(obj, prop)
     }
@@ -20,6 +33,36 @@
         }
     })
 
+    // Add Custom Dashboard Side Menu
+
+    const content = $(sidebarContentTemplate)
+
+    const uiRow = $('<div class="red-ui-sidebar-header"></div>')
+        .appendTo(content)
+
+    $('<label>Dashboard 2.0 UI</label><a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button">Open Dashboard<i style="margin-left: 3px;" class="fa fa-external-link"></i></a>')
+        .appendTo(uiRow)
+
+    RED.sidebar.addTab({
+        id: 'dashboard-2.0',
+        label: 'Dashboard 2.0',
+        name: 'Dashboard 2.0',
+        content,
+        closeable: true,
+        pinned: true,
+        disableOnEdit: true,
+        iconClass: 'fa fa-bar-chart',
+        action: '@flowforge/node-red-dashboard:show-dashboard-2.0-tab',
+        onchange: function () {
+            console.log('onload of sidebar')
+            // refresh();
+        }
+    })
+
+    RED.actions.add('@flowforge/node-red-dashboard:show-dashboard-2.0-tab', function () {
+        RED.sidebar.show('flowforge-nr-tools')
+    })
+
     /**
      * jQuery widget to provide a selector for the sizing of a widget & group
      */

From 64cf376c7fa8ec9c4d253a8dca44018439540089 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 4 Aug 2023 12:32:39 +0100
Subject: [PATCH 2/2] Add Dashboard 2.0 sidebar with link to the dashboard

---
 nodes/config/ui_base.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 24db3fa2..dab753e7 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -16,6 +16,7 @@
     function hasProperty (obj, prop) {
         return Object.prototype.hasOwnProperty.call(obj, prop)
     }
+
     RED.nodes.registerType('ui-base', {
         category: 'config',
         defaults: {
@@ -33,15 +34,15 @@
         }
     })
 
-    // Add Custom Dashboard Side Menu
+    /**
+     * Add Custom Dashboard Side Menu
+     * */
 
     const content = $(sidebarContentTemplate)
 
-    const uiRow = $('<div class="red-ui-sidebar-header"></div>')
-        .appendTo(content)
-
-    $('<label>Dashboard 2.0 UI</label><a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button">Open Dashboard<i style="margin-left: 3px;" class="fa fa-external-link"></i></a>')
-        .appendTo(uiRow)
+    function uiLink (name, path) {
+        return `<div class="red-ui-sidebar-header"><label>${name}</label><a id="open-dashboard" href="${path}" target="nr-dashboard" class="editor-button editor-button-small nr-db-sb-list-header-button">Open Dashboard<i style="margin-left: 3px;" class="fa fa-external-link"></i></a></div>`
+    }
 
     RED.sidebar.addTab({
         id: 'dashboard-2.0',
@@ -54,8 +55,14 @@
         iconClass: 'fa fa-bar-chart',
         action: '@flowforge/node-red-dashboard:show-dashboard-2.0-tab',
         onchange: function () {
-            console.log('onload of sidebar')
-            // refresh();
+            content.empty()
+            RED.nodes.eachConfig(function (n) {
+                if (n.type === 'ui-base') {
+                    content.append(uiLink(n.name, n.path))
+                }
+            })
+            // placeholder message
+            content.append('<span style="padding: 9px; font-style: italic; color: #a2a2a2; font-size: 8pt;">More content will be added here in future releases</span>')
         }
     })