Add auto-refresh toggle to context sidebar

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

@@ -528,7 +528,8 @@
             "node": "Node",
             "flow": "Flow",
             "global": "Global",
-            "deleteConfirm": "Are you sure you want to delete this item?"
+            "deleteConfirm": "Are you sure you want to delete this item?",
+            "autoRefresh": "Auto-refresh"
         },
         "palette": {
             "name": "Palette management",

packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js

@@ -17,13 +17,14 @@
 
 /**
  * options:
- *   - invertState : boolean - if "true" the button will show "enabled" when the
+ *   - invertState   : boolean - if "true" the button will show "enabled" when the
  *                             checkbox is not selected and vice versa.
- *   - enabledIcon : string - the icon for "enabled" state, default "fa-check-square-o"
+ *   - enabledIcon   : string - the icon for "enabled" state, default "fa-check-square-o"
- *   - enabledLabel : string - the label for "enabled" state, default "Enabled" ("editor:workspace.enabled")
+ *   - enabledLabel  : string - the label for "enabled" state, default "Enabled" ("editor:workspace.enabled")
- *   - disabledIcon : string - the icon for "disabled" state, default "fa-square-o"
+ *   - disabledIcon  : string - the icon for "disabled" state, default "fa-square-o"
  *   - disabledLabel : string - the label for "disabled" state, default "Disabled" ("editor:workspace.disabled")
- *   - class: string - additional classes to apply to the button - eg "red-ui-button-small"
+ *   - baseClass     : string - the base css class to apply, default "red-ui-button" (alternative eg "red-ui-sidebar-header-button")
+ *   - class         : string - additional classes to apply to the button - eg "red-ui-button-small"
  * methods:
  *   -
  */
@@ -35,6 +36,7 @@
             if (this.options.hasOwnProperty("invertState")) {
                 invertState = this.options.invertState;
             }
+            var baseClass = this.options.baseClass || "red-ui-button";
             var enabledIcon = this.options.enabledIcon || "fa-check-square-o";
             var disabledIcon = this.options.disabledIcon || "fa-square-o";
             var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled");
@@ -45,7 +47,7 @@
             this.element.on("focus", function() {
                 that.button.focus();
             });
-            this.button = $('<button type="button" class="red-ui-button toggle single"><i class="fa"></i> <span></span></button>');
+            this.button = $('<button type="button" class="'+baseClass+' toggle single"><i class="fa"></i> <span></span></button>');
             if (this.options.class) {
                 this.button.addClass(this.options.class)
             }
@@ -71,19 +73,13 @@
             }
 
             this.button.on("click",function(e) {
+                e.stopPropagation();
                 if (that.buttonIcon.hasClass(disabledIcon)) {
-                    that.button.addClass("selected");
-                    that.buttonIcon.addClass(enabledIcon);
-                    that.buttonIcon.removeClass(disabledIcon);
                     that.element.prop("checked",!invertState);
-                    that.buttonLabel.text(enabledLabel);
                 } else {
-                    that.buttonIcon.addClass(disabledIcon);
-                    that.button.removeClass("selected");
-                    that.buttonIcon.removeClass(enabledIcon);
                     that.element.prop("checked",invertState);
-                    that.buttonLabel.text(disabledLabel);
                 }
+                that.element.trigger("change");
             })
 
             this.element.on("change", function(e) {

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

@@ -20,7 +20,7 @@ RED.sidebar.context = (function() {
 
     var localCache = {};
 
-
+    var flowAutoRefresh;
     var nodeSection;
     // var subflowSection;
     var flowSection;
@@ -34,10 +34,20 @@ RED.sidebar.context = (function() {
         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",
+            enabledLabel: RED._("sidebar.context.autoRefresh"),
+            disabledLabel: RED._("sidebar.context.autoRefresh")
+        }).on("change", function() {
+            var value = $(this).prop("checked");
+            RED.settings.set("editor.context.refresh",value);
+        });
+
         var footerToolbar = $('<div></div>');
 
-
-
         var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
         sections = RED.stack.create({
             container: stackContainer
@@ -95,7 +105,7 @@ RED.sidebar.context = (function() {
             .on("click", function(evt) {
                 evt.stopPropagation();
                 evt.preventDefault();
-                updateFlow(currentFlow);
+                updateFlow(currentFlow, true);
             })
 
         globalSection = sections.add({
@@ -162,8 +172,13 @@ RED.sidebar.context = (function() {
         RED.events.on("workspace:change", function(event) {
             updateFlow(RED.nodes.workspace(event.workspace));
         })
-
+        if (autoUpdate) {
-        updateEntry(globalSection,"context/global","global");
+            updateEntry(globalSection,"context/global","global");
+        } else {
+            $(globalSection.table).empty();
+            $('<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;");
+        }
 
     }
 
@@ -190,15 +205,20 @@ RED.sidebar.context = (function() {
                 $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(nodeSection.table).i18n();
             }
             nodeSection.timestamp.html("&nbsp;");
-
         }
     }
-    function updateFlow(flow) {
+    function updateFlow(flow, force) {
         currentFlow = flow;
-        if (flow) {
+        if (force || flowAutoRefresh.prop("checked")) {
-            updateEntry(flowSection,"context/flow/"+flow.id,flow.id);
+            if (flow) {
+                updateEntry(flowSection,"context/flow/"+flow.id,flow.id);
+            } else {
+                updateEntry(flowSection)
+            }
         } else {
-            updateEntry(flowSection)
+            $(flowSection.table).empty();
+            $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(flowSection.table).i18n();
+            flowSection.timestamp.html("&nbsp;");
         }
     }
 

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

@@ -91,6 +91,9 @@ button.red-ui-sidebar-header-button {
     font-size: 13px;
     line-height: 13px;
     padding: 5px 8px;
+    &.toggle {
+        @include workspace-button-toggle;
+    }
 }
 
 a.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */

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

@@ -16,7 +16,7 @@
 
 .red-ui-sidebar-context-stack {
     position: absolute;
-    top: 0;
+    top: 42px;
     bottom: 0;
     left: 0;
     right: 0;