improve UI, i18n and layout of stop/start feature

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

@@ -288,6 +288,17 @@
         "copyMessageValue": "Value copied",
         "copyMessageValue_truncated": "Truncated value copied"
     },
+    "stopstart":{
+        "status": {
+            "state_changed": "Flows runtime has been changed to '__state__' state"
+        },
+        "errors": {
+            "notAllowed": "Method not allowed",
+            "notAuthorized": "Not authorized",
+            "notFound": "Not found",
+            "noResponse": "No response from server"
+        }
+    },
     "deploy": {
         "deploy": "Deploy",
         "full": "Full",

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

@@ -297,41 +297,51 @@ RED.deploy = (function() {
         $(".red-ui-deploy-button-spinner").hide();
     }
     function stopStartFlows(state) {
-        const startTime = Date.now();
+        const startTime = Date.now()
-        const deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
+        const deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled")
-        deployInflight = true;
+        deployInflight = true
-        deployButtonSetBusy();
+        deployButtonSetBusy()
-        shadeShow();
+        shadeShow()
-        RED.runtime.updateState(state);
+        RED.runtime.updateState(state)
         $.ajax({
             url:"flows/state",
             type: "POST",
             data: {state: state}
         }).done(function(data,textStatus,xhr) {
             if (deployWasEnabled) {
-                $("#red-ui-header-button-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled")
             }
-            RED.runtime.updateState((data && data.state) || "unknown" )
+            RED.runtime.updateState((data && data.state) || "unknown")
-            RED.notify('<p>Done</p>',"success");
+            RED.notify(RED._("stopstart.status.state_changed", data), "success")
         }).fail(function(xhr,textStatus,err) {
             if (deployWasEnabled) {
-                $("#red-ui-header-button-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled")
             }
             if (xhr.status === 401) {
-                RED.notify("Not authorized" ,"error");
+                RED.notify(RED._("notification.error", { message: RED._("stopstart.errors.notAuthorized") }), "error")
+            } else if (xhr.status === 404) {
+                RED.notify(RED._("notification.error", { message: RED._("stopstart.errors.notFound") }), "error")
+            } else if (xhr.status === 405) {
+                RED.notify(RED._("notification.error", { message: RED._("stopstart.errors.notAllowed") }), "error")
             } else if (xhr.responseText) {
-                RED.notify("Operation failed: " + xhr.responseText,"error");
+                const errorDetail = { message: err ? (err + "") : "" }
+                try {
+                    errorDetail.message = JSON.parse(xhr.responseText).message
+                } finally { 
+                    errorDetail.message = errorDetail.message || xhr.responseText
+                }
+                RED.notify(RED._("notification.error", errorDetail), "error")
             } else {
-                RED.notify("Operation failed: no response","error");
+                RED.notify(RED._("notification.error", { message: RED._("stopstart.errors.noResponse") }), "error")
             }
             RED.runtime.requestState()
         }).always(function() {
-            const delta = Math.max(0,300-(Date.now()-startTime));
+            const delta = Math.max(0, 300 - (Date.now() - startTime))
-            setTimeout(function() {
+            setTimeout(function () {
-                deployButtonClearBusy();
+                deployButtonClearBusy()
                 shadeHide()
-                deployInflight = false;
+                deployInflight = false
-            },delta);
+            }, delta);
         });
     }
     function restart() {

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

@@ -219,7 +219,7 @@
             span.red-ui-menu-sublabel {
                 color: $header-menu-sublabel-color;
                 font-size: 13px;
-                display: inline-block;
+                display: block;
                 text-indent: 0px;
             }
         }

packages/node_modules/@node-red/runtime/lib/api/flows.js

@@ -335,7 +335,7 @@ var api = module.exports = {
                     throw (makeError(err, err.code, 500))
                 }
             default:
-                throw (makeError("Cannot set runtime state. Invalid state", "invalid_run_state", 400))
+                throw (makeError(`Cannot change flows runtime state to '${opts.requestedState}'}`, "invalid_run_state", 400))
         }
     },
 }