Add subflows to context sidebar

slight adjust spacing for context view

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -529,6 +529,7 @@
             "refresh": "refresh to load",
             "empty": "empty",
             "node": "Node",
+            "subflow": "Subflow",
             "flow": "Flow",
             "global": "Global",
             "deleteConfirm": "Are you sure you want to delete this item?",

packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js

@@ -14,28 +14,21 @@
  * limitations under the License.
  **/
 RED.sidebar.context = (function() {
-
     var content;
     var sections;
-
     var localCache = {};
-
     var flowAutoRefresh;
     var nodeSection;
-    // var subflowSection;
     var flowSection;
     var globalSection;
-
     var currentNode;
     var currentFlow;
 
     function init() {
-
         content = $("<div>").css({"position":"relative","height":"100%"});
         content.className = "red-ui-sidebar-context"
 
         var header = $('<div class="red-ui-sidebar-header"></div>').appendTo(content);
-
         var autoUpdate = RED.settings.get("editor.context.refresh",false);
         flowAutoRefresh = $('<input type="checkbox">').prop("checked",autoUpdate).appendTo(header).toggleButton({
             baseClass: "red-ui-sidebar-header-button",
@@ -47,7 +40,6 @@ RED.sidebar.context = (function() {
         });
 
         var footerToolbar = $('<div></div>');
-
         var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
         sections = RED.stack.create({
             container: stackContainer
@@ -55,10 +47,8 @@ RED.sidebar.context = (function() {
 
         nodeSection = sections.add({
             title: RED._("sidebar.context.node"),
-            collapsible: true,
-            // onexpand: function() {
-            //     updateNode(currentNode,true);
-            // }
+            collapsible: true
+            // onexpand: function() { updateNode(currentNode,true); }
         });
         nodeSection.expand();
         nodeSection.content.css({height:"100%"});
@@ -75,22 +65,6 @@ RED.sidebar.context = (function() {
             })
         RED.popover.tooltip(bg,RED._("sidebar.context.refrsh"));
 
-        // subflowSection  = sections.add({
-        //     title: "Subflow",
-        //     collapsible: true
-        // });
-        // subflowSection.expand();
-        // subflowSection.content.css({height:"100%"});
-        // bg = $('<div style="float: right"></div>').appendTo(subflowSection.header);
-        // $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
-        //     .appendTo(bg)
-        //     .on("click", function(evt) {
-        //         evt.stopPropagation();
-        //         evt.preventDefault();
-        //     })
-        // RED.popover.tooltip(bg,RED._("sidebar.context.refrsh"));
-        // subflowSection.container.hide();
-
         flowSection = sections.add({
             title: RED._("sidebar.context.flow"),
             collapsible: true
@@ -165,7 +139,6 @@ RED.sidebar.context = (function() {
         //     }
         // });
 
-
         RED.events.on("view:selection-changed", function(event) {
             var selectedNode = event.nodes && event.nodes.length === 1 && event.nodes[0];
             updateNode(selectedNode);
@@ -181,20 +154,31 @@ RED.sidebar.context = (function() {
             $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(globalSection.table).i18n();
             globalSection.timestamp.html("&nbsp;");
         }
-
     }
 
     function updateNode(node,force) {
         currentNode = node;
+        if (node && /^subflow:/.test(node.type)) {
+            if (currentNode && currentNode.hasOwnProperty("name") && currentNode.name.length > 0 ) {
+                $(nodeSection.title).text(RED._("sidebar.context.subflow") + ": " + currentNode.name);
+            } else {
+                $(nodeSection.title).text(RED._("sidebar.context.subflow"));
+            }
+        } else {
+            if (currentNode && currentNode.hasOwnProperty("name") && currentNode.name.length > 0 ) {
+                $(nodeSection.title).text(RED._("sidebar.context.node") + ": " + currentNode.name);
+            }
+            else { $(nodeSection.title).text(RED._("sidebar.context.node")); }
+        }
         if (force) {
             if (node) {
-                updateEntry(nodeSection,"context/node/"+node.id,node.id);
-                // if (/^subflow:/.test(node.type)) {
-                //     subflowSection.container.show();
-                //     updateEntry(subflowSection,"context/flow/"+node.id,node.id);
-                // } else {
-                //     subflowSection.container.hide();
-                // }
+                if (/^subflow:/.test(node.type)) {
+                    //subflowSection.container.show();
+                    updateEntry(nodeSection,"context/flow/"+node.id,node.id);
+                }
+                else {
+                    updateEntry(nodeSection,"context/node/"+node.id,node.id);
+                }
             } else {
                 // subflowSection.container.hide();
                 updateEntry(nodeSection)
@@ -209,8 +193,10 @@ RED.sidebar.context = (function() {
             nodeSection.timestamp.html("&nbsp;");
         }
     }
+
     function updateFlow(flow, force) {
         currentFlow = flow;
+        $(flowSection.title).text(RED._("sidebar.context.flow") + ": " + currentFlow.label);
         if (force || flowAutoRefresh.prop("checked")) {
             if (flow) {
                 updateEntry(flowSection,"context/flow/"+flow.id,flow.id);
@@ -225,7 +211,6 @@ RED.sidebar.context = (function() {
     }
 
     function refreshEntry(section,baseUrl,id) {
-
         var contextStores = RED.settings.context.stores;
         var container = section.table;
 
@@ -325,7 +310,6 @@ RED.sidebar.context = (function() {
                             }
                         });
                         popover.open();
-
                     });
                     RED.popover.tooltip(deleteItem,RED._("sidebar.context.delete"));
                     var payload = v.msg;
@@ -346,6 +330,7 @@ RED.sidebar.context = (function() {
             $(section.timestamp).text(new Date().toLocaleString());
         });
     }
+
     function updateEntry(section,baseUrl,id) {
         var container = section.table;
         if (id) {
@@ -356,11 +341,10 @@ RED.sidebar.context = (function() {
         }
     }
 
-
-
     function show() {
         RED.sidebar.show("context");
     }
+
     return {
         init: init
     }

packages/node_modules/@node-red/editor-client/src/sass/debug.scss

@@ -218,7 +218,7 @@
 
 .red-ui-debug-msg-row {
     display: block;
-    padding: 4px 2px 2px;
+    padding: 2px 2px 2px;
     position: relative;
     &.red-ui-debug-msg-row-pinned {
         background: $secondary-background-selected;

packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss

@@ -92,12 +92,12 @@ table.red-ui-info-table tr:not(.blank) td:first-child{
     color: $header-text-color;
     vertical-align: top;
     width: 90px;
-    padding: 3px 3px 3px 6px;
+    padding: 6px 3px 3px 6px;
     background:$tertiary-background;
     border-right: 1px solid $secondary-border-color;
 }
 table.red-ui-info-table tr:not(.blank) td:last-child{
-    padding: 3px 3px 3px 6px;
+    padding: 5px 3px 3px 6px;
     color: $primary-text-color;
     overflow-y: hidden;
 }