Merge pull request #2841 from node-red/credential-timeout

Handle timeouts when trying to load node credentials in editor

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

@@ -397,6 +397,7 @@
         "icon": "Icon",
         "inputType": "Input type",
         "selectType": "select types...",
+        "loadCredentials": "Loading node credentials",
         "inputs" : {
             "input": "input",
             "select": "select",
@@ -431,7 +432,8 @@
         },
         "errors": {
             "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it",
-            "invalidProperties": "Invalid properties:"
+            "invalidProperties": "Invalid properties:",
+            "credentialLoadFailed": "Failed to load node credentials"
         }
     },
     "keyboard": {

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

@@ -496,11 +496,13 @@ RED.editor = (function() {
                 populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
                 completePrepare();
             } else {
-                $.getJSON(getCredentialsURL(node.type, node.id), function (data) {
+                getNodeCredentials(node.type, node.id, function(data) {
-                    node.credentials = data;
+                    if (data) {
-                    node.credentials._ = $.extend(true,{},data);
+                        node.credentials = data;
-                    if (!/^subflow:/.test(definition.type)) {
+                        node.credentials._ = $.extend(true,{},data);
-                        populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
+                        if (!/^subflow:/.test(definition.type)) {
+                            populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
+                        }
                     }
                     completePrepare();
                 });
@@ -1088,8 +1090,11 @@ RED.editor = (function() {
         node.infoEditor = nodeInfoEditor;
         return nodeInfoEditor;
     }
+var buildingEditDialog = false;
 
     function showEditDialog(node, defaultTab) {
+        if (buildingEditDialog) { return }
+        buildingEditDialog = true;
         var editing_node = node;
         var isDefaultIcon;
         var defaultIcon;
@@ -1614,6 +1619,7 @@ RED.editor = (function() {
                     if (defaultTab) {
                         editorTabs.activateTab(defaultTab);
                     }
+                    buildingEditDialog = false;
                     done();
                 });
             },
@@ -1665,6 +1671,8 @@ RED.editor = (function() {
      * prefix - the input prefix of the parent property
      */
     function showEditConfigNodeDialog(name,type,id,prefix) {
+        if (buildingEditDialog) { return }
+        buildingEditDialog = true;
         var adding = (id == "_ADD_");
         var node_def = RED.nodes.getType(type);
         var editing_config_node = RED.nodes.node(id);
@@ -1828,6 +1836,7 @@ RED.editor = (function() {
                     trayBody.i18n();
                     trayFooter.i18n();
                     finishedBuilding = true;
+                    buildingEditDialog = false;
                     done();
                 });
             },
@@ -2151,6 +2160,8 @@ RED.editor = (function() {
     }
 
     function showEditSubflowDialog(subflow) {
+        if (buildingEditDialog) { return }
+        buildingEditDialog = true;
         var editing_node = subflow;
         editStack.push(subflow);
         RED.view.state(RED.state.EDITING);
@@ -2407,15 +2418,17 @@ RED.editor = (function() {
 
                 buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
                 trayBody.i18n();
-
+                getNodeCredentials("subflow", subflow.id, function(data) {
-                $.getJSON(getCredentialsURL("subflow", subflow.id), function (data) {
+                    if (data) {
-                    subflow.credentials = data;
+                        subflow.credentials = data;
-                    subflow.credentials._ = $.extend(true,{},data);
+                        subflow.credentials._ = $.extend(true,{},data);
-
+                    }
                     $("#subflow-input-name").val(subflow.name);
                     RED.text.bidi.prepareInput($("#subflow-input-name"));
 
                     finishedBuilding = true;
+                    buildingEditDialog = false;
+
                     done();
                 });
             },
@@ -2436,7 +2449,39 @@ RED.editor = (function() {
         RED.tray.show(trayOptions);
     }
 
+    function getNodeCredentials(type, id, done) {
+        var timeoutNotification;
+        var intialTimeout = setTimeout(function() {
+            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
+        },800);
+
+        $.ajax({
+            url: getCredentialsURL(type,id),
+            dataType: 'json',
+            success: function(data) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                done(data);
+            },
+            error: function(jqXHR,status,error) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
+                done(null);
+            },
+            timeout: 30000,
+        });
+    }
+
     function showEditGroupDialog(group) {
+        if (buildingEditDialog) { return }
+        buildingEditDialog = true;
         var editing_node = group;
         editStack.push(group);
         RED.view.state(RED.state.EDITING);
@@ -2660,6 +2705,7 @@ RED.editor = (function() {
                 prepareEditDialog(group,group._def,"node-input", function() {
                     trayBody.i18n();
                     finishedBuilding = true;
+                    buildingEditDialog = false;
                     done();
                 });
             },