Add initial core:layout-flow action

This reverts commit be49e1d383.

.github/ISSUE_TEMPLATE.md

@@ -28,7 +28,7 @@ To help us understand the issue, please fill-in as much of the following informa
 ### Please tell us about your environment:
 
 - [ ] Node-RED version:
-- [ ] node.js version:
+- [ ] Node.js version:
 - [ ] npm version:
 - [ ] Platform/OS:
 - [ ] Browser:

.github/ISSUE_TEMPLATE/--bug_report.md

@@ -33,7 +33,7 @@ To help us understand the issue, please fill-in as much of the following informa
 ### Please tell us about your environment:
 
 - [ ] Node-RED version:
-- [ ] node.js version:
+- [ ] Node.js version:
 - [ ] npm version:
 - [ ] Platform/OS:
 - [ ] Browser:

.travis.yml

@@ -9,5 +9,3 @@ matrix:
       before_script:
         - npm install -g istanbul coveralls
     - node_js: "8"
-  allow_failures:
-    - node_js: "12"

CHANGELOG.md

@@ -725,7 +725,7 @@ Nodes
  - Initial support of sequence rules for SWITCH node (#1545)
  - initial support of SORT node (#1500)
  - Inject node - let once delay be editable (#1541)
- - Introduce `nodeMaxMessageBufferLength` setting for msg sequence nodes
+ - Introduce `nodeMessageBufferMaxLength` setting for msg sequence nodes
  - Let CSV correct parts if we remove header row.
  - let default apply if msg.delay not set in override mode. (#1397)
  - let trigger node be reset by boolean message (#1554)

CONTRIBUTING.md

@@ -26,7 +26,7 @@ relevant nodes, press Ctrl-E and copy the flow data from the Export dialog.
 At a minimum, please include:
 
  - Version of Node-RED - either release number if you downloaded a zip, or the first few lines of `git log` if you are cloning the repository directly.
- - Version of node.js - what does `node -v` say?
+ - Version of Node.js - what does `node -v` say?
 
 ## Feature requests
 

Gruntfile.js

@@ -496,7 +496,9 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-chmod');
     grunt.loadNpmTasks('grunt-jsonlint');
     grunt.loadNpmTasks('grunt-mocha-istanbul');
-    grunt.loadNpmTasks('grunt-webdriver');
+    if (fs.existsSync(path.join("node_modules", "grunt-webdriver"))) {
+        grunt.loadNpmTasks('grunt-webdriver');
+    }
     grunt.loadNpmTasks('grunt-jsdoc');
     grunt.loadNpmTasks('grunt-jsdoc-to-markdown');
     grunt.loadNpmTasks('grunt-npm-command');
@@ -555,8 +557,8 @@ module.exports = function(grunt) {
     });
 
     grunt.registerTask('verifyUiTestDependencies', function() {
-        if (!fs.existsSync(path.join("node_modules", "chromedriver"))) {
-            grunt.fail.fatal('You need to run "npm install chromedriver@2" before running UI test.');
+        if (!fs.existsSync(path.join("node_modules", "grunt-webdriver"))) {
+            grunt.fail.fatal('You need to install the UI test dependencies first.\nUse the script in "scripts/install-ui-test-dependencies.sh"');
             return false;
         }
     });
@@ -579,9 +581,15 @@ module.exports = function(grunt) {
         'Runs code style check on editor code',
         ['jshint:editor']);
 
-    grunt.registerTask('test-ui',
-        'Builds editor content then runs unit tests on editor ui',
-        ['verifyUiTestDependencies','build','jshint:editor','webdriver:all']);
+    if (!fs.existsSync(path.join("node_modules", "grunt-webdriver"))) {
+        grunt.registerTask('test-ui',
+            'Builds editor content then runs unit tests on editor ui',
+            ['verifyUiTestDependencies']);
+    } else {
+        grunt.registerTask('test-ui',
+            'Builds editor content then runs unit tests on editor ui',
+            ['verifyUiTestDependencies','build','jshint:editor','webdriver:all']);
+    }
 
     grunt.registerTask('test-nodes',
         'Runs unit tests on core nodes',

package.json

@@ -95,7 +95,6 @@
         "grunt-npm-command": "~0.1.2",
         "grunt-sass": "~2.0.0",
         "grunt-simple-mocha": "~0.4.1",
-        "grunt-webdriver": "^2.0.3",
         "http-proxy": "^1.16.2",
         "istanbul": "0.4.5",
         "minami": "1.2.3",
@@ -105,10 +104,6 @@
         "sinon": "1.17.7",
         "stoppable": "^1.1.0",
         "supertest": "3.4.2",
-        "wdio-chromedriver-service": "^0.1.5",
-        "wdio-mocha-framework": "^0.6.4",
-        "wdio-spec-reporter": "^0.1.5",
-        "webdriverio": "^4.14.1",
         "node-red-node-test-helper": "^0.2.3",
         "jsdoc-nr-template": "node-red/jsdoc-nr-template"
     },

packages/node_modules/@node-red/editor-api/lib/admin/context.js

@@ -30,7 +30,8 @@ module.exports = {
             scope: req.params.scope,
             id: req.params.id,
             key: req.params[0],
-            store: req.query['store']
+            store: req.query['store'],
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.context.getValue(opts).then(function(result) {
             res.json(result);
@@ -45,7 +46,8 @@ module.exports = {
             scope: req.params.scope,
             id: req.params.id,
             key: req.params[0],
-            store: req.query['store']
+            store: req.query['store'],
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.context.delete(opts).then(function(result) {
             res.status(204).end();

packages/node_modules/@node-red/editor-api/lib/admin/flow.js

@@ -24,7 +24,8 @@ module.exports = {
     get: function(req,res) {
         var opts = {
             user: req.user,
-            id: req.params.id
+            id: req.params.id,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.flows.getFlow(opts).then(function(result) {
             return res.json(result);
@@ -35,7 +36,8 @@ module.exports = {
     post: function(req,res) {
         var opts = {
             user: req.user,
-            flow: req.body
+            flow: req.body,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.flows.addFlow(opts).then(function(id) {
             return res.json({id:id});
@@ -47,7 +49,8 @@ module.exports = {
         var opts = {
             user: req.user,
             id: req.params.id,
-            flow: req.body
+            flow: req.body,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.flows.updateFlow(opts).then(function(id) {
             return res.json({id:id});
@@ -58,7 +61,8 @@ module.exports = {
     delete: function(req,res) {
         var opts = {
             user: req.user,
-            id: req.params.id
+            id: req.params.id,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.flows.deleteFlow(opts).then(function() {
             res.status(204).end();

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

@@ -27,7 +27,8 @@ module.exports = {
             return res.status(400).json({code:"invalid_api_version", message:"Invalid API Version requested"});
         }
         var opts = {
-            user: req.user
+            user: req.user,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.flows.getFlows(opts).then(function(result) {
             if (version === "v1") {
@@ -46,7 +47,8 @@ module.exports = {
         }
         var opts = {
             user: req.user,
-            deploymentType: req.get("Node-RED-Deployment-Type")||"full"
+            deploymentType: req.get("Node-RED-Deployment-Type")||"full",
+            req: apiUtils.getRequestLogObject(req)
         }
 
         if (opts.deploymentType !== 'reload') {

packages/node_modules/@node-red/editor-api/lib/admin/index.js

@@ -48,13 +48,13 @@ module.exports = {
         // Nodes
         adminApp.get("/nodes",needsPermission("nodes.read"),nodes.getAll,apiUtil.errorHandler);
         adminApp.post("/nodes",needsPermission("nodes.write"),nodes.post,apiUtil.errorHandler);
-        adminApp.get(/\/nodes\/messages/,needsPermission("nodes.read"),nodes.getModuleCatalogs,apiUtil.errorHandler);
-        adminApp.get(/\/nodes\/((@[^\/]+\/)?[^\/]+\/[^\/]+)\/messages/,needsPermission("nodes.read"),nodes.getModuleCatalog,apiUtil.errorHandler);
-        adminApp.get(/\/nodes\/((@[^\/]+\/)?[^\/]+)$/,needsPermission("nodes.read"),nodes.getModule,apiUtil.errorHandler);
-        adminApp.put(/\/nodes\/((@[^\/]+\/)?[^\/]+)$/,needsPermission("nodes.write"),nodes.putModule,apiUtil.errorHandler);
-        adminApp.delete(/\/nodes\/((@[^\/]+\/)?[^\/]+)$/,needsPermission("nodes.write"),nodes.delete,apiUtil.errorHandler);
-        adminApp.get(/\/nodes\/((@[^\/]+\/)?[^\/]+)\/([^\/]+)$/,needsPermission("nodes.read"),nodes.getSet,apiUtil.errorHandler);
-        adminApp.put(/\/nodes\/((@[^\/]+\/)?[^\/]+)\/([^\/]+)$/,needsPermission("nodes.write"),nodes.putSet,apiUtil.errorHandler);
+        adminApp.get(/^\/nodes\/messages/,needsPermission("nodes.read"),nodes.getModuleCatalogs,apiUtil.errorHandler);
+        adminApp.get(/^\/nodes\/((@[^\/]+\/)?[^\/]+\/[^\/]+)\/messages/,needsPermission("nodes.read"),nodes.getModuleCatalog,apiUtil.errorHandler);
+        adminApp.get(/^\/nodes\/((@[^\/]+\/)?[^\/]+)$/,needsPermission("nodes.read"),nodes.getModule,apiUtil.errorHandler);
+        adminApp.put(/^\/nodes\/((@[^\/]+\/)?[^\/]+)$/,needsPermission("nodes.write"),nodes.putModule,apiUtil.errorHandler);
+        adminApp.delete(/^\/nodes\/((@[^\/]+\/)?[^\/]+)$/,needsPermission("nodes.write"),nodes.delete,apiUtil.errorHandler);
+        adminApp.get(/^\/nodes\/((@[^\/]+\/)?[^\/]+)\/([^\/]+)$/,needsPermission("nodes.read"),nodes.getSet,apiUtil.errorHandler);
+        adminApp.put(/^\/nodes\/((@[^\/]+\/)?[^\/]+)\/([^\/]+)$/,needsPermission("nodes.write"),nodes.putSet,apiUtil.errorHandler);
 
         // Context
         adminApp.get("/context/:scope(global)",needsPermission("context.read"),context.get,apiUtil.errorHandler);

packages/node_modules/@node-red/editor-api/lib/admin/nodes.js

@@ -24,7 +24,8 @@ module.exports = {
     },
     getAll: function(req,res) {
         var opts = {
-            user: req.user
+            user: req.user,
+            req: apiUtils.getRequestLogObject(req)
         }
         if (req.get("accept") == "application/json") {
             runtimeAPI.nodes.getNodeList(opts).then(function(list) {
@@ -42,7 +43,8 @@ module.exports = {
         var opts = {
             user: req.user,
             module: req.body.module,
-            version: req.body.version
+            version: req.body.version,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.addModule(opts).then(function(info) {
             res.json(info);
@@ -54,7 +56,8 @@ module.exports = {
     delete: function(req,res) {
         var opts = {
             user: req.user,
-            module: req.params[0]
+            module: req.params[0],
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.removeModule(opts).then(function() {
             res.status(204).end();
@@ -66,7 +69,8 @@ module.exports = {
     getSet: function(req,res) {
         var opts = {
             user: req.user,
-            id: req.params[0] + "/" + req.params[2]
+            id: req.params[0] + "/" + req.params[2],
+            req: apiUtils.getRequestLogObject(req)
         }
         if (req.get("accept") === "application/json") {
             runtimeAPI.nodes.getNodeInfo(opts).then(function(result) {
@@ -87,7 +91,8 @@ module.exports = {
     getModule: function(req,res) {
         var opts = {
             user: req.user,
-            module: req.params[0]
+            module: req.params[0],
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.getModuleInfo(opts).then(function(result) {
             res.send(result);
@@ -106,7 +111,8 @@ module.exports = {
         var opts = {
             user: req.user,
             id: req.params[0] + "/" + req.params[2],
-            enabled: body.enabled
+            enabled: body.enabled,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.setNodeSetState(opts).then(function(result) {
             res.send(result);
@@ -125,7 +131,8 @@ module.exports = {
         var opts = {
             user: req.user,
             module: req.params[0],
-            enabled: body.enabled
+            enabled: body.enabled,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.setModuleState(opts).then(function(result) {
             res.send(result);
@@ -139,7 +146,8 @@ module.exports = {
         var opts = {
             user: req.user,
             module: req.params[0],
-            lang: req.query.lng
+            lang: req.query.lng,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.getModuleCatalog(opts).then(function(result) {
             res.json(result);
@@ -152,7 +160,8 @@ module.exports = {
     getModuleCatalogs: function(req,res) {
         var opts = {
             user: req.user,
-            lang: req.query.lng
+            lang: req.query.lng,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.getModuleCatalogs(opts).then(function(result) {
             res.json(result);
@@ -164,7 +173,8 @@ module.exports = {
 
     getIcons: function(req,res) {
         var opts = {
-            user: req.user
+            user: req.user,
+            req: apiUtils.getRequestLogObject(req)
         }
         runtimeAPI.nodes.getIconList(opts).then(function(list) {
             res.json(list);

packages/node_modules/@node-red/editor-api/lib/editor/projects.js

@@ -22,7 +22,8 @@ var needsPermission = require("../auth").needsPermission;
 
 function listProjects(req,res) {
     var opts = {
-        user: req.user
+        user: req.user,
+        req: apiUtils.getRequestLogObject(req)
     }
     runtimeAPI.projects.listProjects(opts).then(function(result) {
         res.json(result);
@@ -33,7 +34,8 @@ function listProjects(req,res) {
 function getProject(req,res) {
     var opts = {
         user: req.user,
-        id: req.params.id
+        id: req.params.id,
+        req: apiUtils.getRequestLogObject(req)
     }
     runtimeAPI.projects.getProject(opts).then(function(data) {
         if (data) {
@@ -49,7 +51,8 @@ function getProjectStatus(req,res) {
     var opts = {
         user: req.user,
         id: req.params.id,
-        remote: req.query.remote
+        remote: req.query.remote,
+        req: apiUtils.getRequestLogObject(req)
     }
     runtimeAPI.projects.getStatus(opts).then(function(data){
         if (data) {
@@ -64,7 +67,8 @@ function getProjectStatus(req,res) {
 function getProjectRemotes(req,res) {
     var opts = {
         user: req.user,
-        id: req.params.id
+        id: req.params.id,
+        req: apiUtils.getRequestLogObject(req)
     }
     runtimeAPI.projects.getRemotes(opts).then(function(data) {
         res.json(data);
@@ -98,7 +102,8 @@ module.exports = {
         app.post("/", needsPermission("projects.write"), function(req,res) {
             var opts = {
                 user: req.user,
-                project: req.body
+                project: req.body,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.createProject(opts).then(function(result) {
                 res.json(result);
@@ -112,7 +117,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                project: req.body
+                project: req.body,
+                req: apiUtils.getRequestLogObject(req)
             }
 
             if (req.body.active) {
@@ -150,7 +156,8 @@ module.exports = {
         app.delete("/:id", needsPermission("projects.write"), function(req,res) {
             var opts = {
                 user: req.user,
-                id: req.params.id
+                id: req.params.id,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.deleteProject(opts).then(function() {
                 res.status(204).end();
@@ -168,7 +175,8 @@ module.exports = {
         app.get("/:id/files", needsPermission("projects.read"), function(req,res) {
             var opts = {
                 user: req.user,
-                id: req.params.id
+                id: req.params.id,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getFiles(opts).then(function(data) {
                 res.json(data);
@@ -185,7 +193,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 path: req.params[0],
-                tree: req.params.treeish
+                tree: req.params.treeish,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getFile(opts).then(function(data) {
                 res.json({content:data});
@@ -199,7 +208,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                path: req.params[0]
+                path: req.params[0],
+                req: apiUtils.getRequestLogObject(req)
             }
 
             runtimeAPI.projects.revertFile(opts).then(function() {
@@ -214,7 +224,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                path: req.params[0]
+                path: req.params[0],
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.stageFile(opts).then(function() {
                 getProjectStatus(req,res);
@@ -228,7 +239,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                path: req.body.files
+                path: req.body.files,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.stageFile(opts).then(function() {
                 getProjectStatus(req,res);
@@ -242,7 +254,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                message: req.body.message
+                message: req.body.message,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.commit(opts).then(function() {
                 getProjectStatus(req,res);
@@ -256,7 +269,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                path: req.params[0]
+                path: req.params[0],
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.unstageFile(opts).then(function() {
                 getProjectStatus(req,res);
@@ -269,7 +283,8 @@ module.exports = {
         app.delete("/:id/stage", needsPermission("projects.write"), function(req, res) {
             var opts = {
                 user: req.user,
-                id: req.params.id
+                id: req.params.id,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.unstageFile(opts).then(function() {
                 getProjectStatus(req,res);
@@ -284,7 +299,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 path: req.params[0],
-                type: req.params.type
+                type: req.params.type,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getFileDiff(opts).then(function(data) {
                 res.json({
@@ -301,7 +317,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 limit: req.query.limit || 20,
-                before: req.query.before
+                before: req.query.before,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getCommits(opts).then(function(data) {
                 res.json(data);
@@ -315,7 +332,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                sha: req.params.sha
+                sha: req.params.sha,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getCommit(opts).then(function(data) {
                 res.json({commit:data});
@@ -330,7 +348,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 remote: req.params[0],
-                track: req.query.u
+                track: req.query.u,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.push(opts).then(function(data) {
                 res.status(204).end();
@@ -346,7 +365,8 @@ module.exports = {
                 id: req.params.id,
                 remote: req.params[0],
                 track: req.query.setUpstream,
-                allowUnrelatedHistories: req.query.allowUnrelatedHistories
+                allowUnrelatedHistories: req.query.allowUnrelatedHistories,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.pull(opts).then(function(data) {
                 res.status(204).end();
@@ -359,7 +379,8 @@ module.exports = {
         app.delete("/:id/merge", needsPermission("projects.write"), function(req, res) {
             var opts = {
                 user: req.user,
-                id: req.params.id
+                id: req.params.id,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.abortMerge(opts).then(function() {
                 res.status(204).end();
@@ -374,7 +395,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 path: req.params[0],
-                resolution: req.body.resolutions
+                resolution: req.body.resolutions,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.resolveMerge(opts).then(function() {
                 res.status(204).end();
@@ -388,7 +410,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                remote: false
+                remote: false,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getBranches(opts).then(function(data) {
                 res.json(data);
@@ -403,7 +426,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 branch: req.params.branchName,
-                force: !!req.query.force
+                force: !!req.query.force,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.deleteBranch(opts).then(function(data) {
                 res.status(204).end();
@@ -417,7 +441,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                remote: true
+                remote: true,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getBranches(opts).then(function(data) {
                 res.json(data);
@@ -431,7 +456,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                branch: req.params[0]
+                branch: req.params[0],
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.getBranchStatus(opts).then(function(data) {
                 res.json(data);
@@ -446,7 +472,8 @@ module.exports = {
                 user: req.user,
                 id: req.params.id,
                 branch: req.body.name,
-                create: req.body.create
+                create: req.body.create,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.setBranch(opts).then(function(data) {
                 res.json(data);
@@ -463,7 +490,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                remote: req.body
+                remote: req.body,
+                req: apiUtils.getRequestLogObject(req)
             }
             if (/^https?:\/\/[^/]+@/i.test(req.body.url)) {
                 res.status(400).json({error:"unexpected_error", message:"Git http url must not include username/password"});
@@ -481,7 +509,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                remote: req.params.remoteName
+                remote: req.params.remoteName,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.removeRemote(opts).then(function(data) {
                 getProjectRemotes(req,res);
@@ -497,7 +526,8 @@ module.exports = {
             var opts = {
                 user: req.user,
                 id: req.params.id,
-                remote: remote
+                remote: remote,
+                req: apiUtils.getRequestLogObject(req)
             }
             runtimeAPI.projects.updateRemote(opts).then(function() {
                 res.status(204).end();

packages/node_modules/@node-red/editor-api/lib/util.js

@@ -47,5 +47,12 @@ module.exports = {
             code: err.code||"unexpected_error",
             message: err.message||err.toString()
         });
+    },
+    getRequestLogObject: function(req) {
+        return {
+            user: req.user,
+            path: req.path,
+            ip: (req.headers && req.headers['x-forwarded-for']) || (req.connection && req.connection.remoteAddress) || undefined
+        }
     }
 }

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

@@ -310,6 +310,7 @@
         "addNewType": "Add new __type__...",
         "nodeProperties": "node properties",
         "label": "Label",
+        "color": "Color",
         "portLabels": "Port labels",
         "labelInputs": "Inputs",
         "labelOutputs": "Outputs",
@@ -321,6 +322,31 @@
         "description": "Description",
         "show": "Show",
         "hide": "Hide",
+        "locale": "Select UI Language",
+        "icon": "Icon",
+        "inputType": "Input type",
+        "previewUI": "Preview UI",
+        "previewOK": "Preview OK",
+        "types": {
+            "str": "string",
+            "num": "number",
+            "bool": "bool",
+            "json": "json",
+            "bin": "buffer",
+            "env": "env var",
+            "no-value": "no value"
+        },
+        "menu": {
+            "input": "input",
+            "select": "select",
+            "checkbox": "checkbox",
+            "spinner": "spinner",
+            "hidden": "label only"
+        },
+        "spinner": {
+            "min": "min",
+            "max": "max"
+        },
         "errors": {
             "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it",
             "invalidProperties": "Invalid properties:"
@@ -939,9 +965,11 @@
     },
     "editor-tab": {
         "properties": "Properties",
+        "envProperties": "Environment Variables",
         "description": "Description",
         "appearance": "Appearance",
-        "env": "Environment Variables"
+        "preview": "UI Preview",
+        "defaultValue": "Default value"
     },
     "languages" : {
         "de": "German",

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

@@ -80,7 +80,7 @@
             "projects-new": "新規",
             "projects-open": "開く",
             "projects-settings": "設定",
-            "showNodeLabelDefault": "追加したノードのラベルを表示する"
+            "showNodeLabelDefault": "追加したノードのラベルを表示"
         }
     },
     "actions": {
@@ -310,6 +310,7 @@
         "addNewType": "新規に __type__ を追加...",
         "nodeProperties": "プロパティ",
         "label": "ラベル",
+        "color": "色",
         "portLabels": "ポートラベル",
         "labelInputs": "入力",
         "labelOutputs": "出力",
@@ -321,6 +322,31 @@
         "description": "詳細",
         "show": "表示",
         "hide": "非表示",
+        "locale": "UI言語の選択",
+        "icon": "記号",
+        "inputType": "入力形式",
+        "previewUI": "UI確認",
+        "previewOK": "確認OK",
+        "types": {
+            "str": "文字列",
+            "num": "数値",
+            "bool": "真偽",
+            "json": "JSON",
+            "bin": "バッファ",
+            "env": "環境変数",
+            "no-value": "値無し"
+        },
+        "menu": {
+            "input": "入力",
+            "select": "選択",
+            "checkbox": "チェックボックス",
+            "spinner": "数値",
+            "hidden": "ラベルのみ"
+        },
+        "spinner": {
+            "min": "最小",
+            "max": "最大"
+        },
         "errors": {
             "scopeChange": "スコープの変更は、他のフローで使われているノードを無効にします",
             "invalidProperties": "プロパティが不正です:"
@@ -351,7 +377,8 @@
         "pasteNode": "ノードを貼り付け",
         "undoChange": "変更操作を戻す",
         "searchBox": "ノードを検索",
-        "managePalette": "パレットの管理"
+        "managePalette": "パレットの管理",
+        "actionList": "動作一覧"
     },
     "library": {
         "library": "ライブラリ",
@@ -527,11 +554,13 @@
             "none": "選択されていません",
             "refresh": "読み込みのため更新してください",
             "empty": "データが存在しません",
-            "node": "Node",
-            "flow": "Flow",
-            "global": "Global",
+            "node": "ノード",
+            "flow": "フロー",
+            "global": "グローバル",
             "deleteConfirm": "データを削除しても良いですか?",
-            "autoRefresh": "自動更新"
+            "autoRefresh": "自動更新",
+            "refrsh": "更新",
+            "delete": "削除"
         },
         "palette": {
             "name": "パレットの管理",
@@ -736,7 +765,16 @@
     },
     "jsonEditor": {
         "title": "JSONエディタ",
-        "format": "JSONフォーマット"
+        "format": "JSONフォーマット",
+        "rawMode": "JSONを編集",
+        "uiMode": "ビジュアルエディタ",
+        "insertAbove": "上に挿入",
+        "insertBelow": "下に挿入",
+        "addItem": "要素を追加",
+        "copyPath": "要素のパスをコピー",
+        "expandItems": "要素を展開",
+        "collapseItems": "要素を折り畳む",
+        "duplicate": "複製"
     },
     "markdownEditor": {
         "title": "マークダウンエディタ",
@@ -928,9 +966,9 @@
         "properties": "プロパティ",
         "description": "説明",
         "appearance": "外観",
-        "env": "環境変数"
+        "env": "サブフロープロパティ"
     },
-    "languages" : {
+    "languages": {
         "de": "ドイツ語",
         "en-US": "英語",
         "ja": "日本語",

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

@@ -14,7 +14,8 @@
  * limitations under the License.
  **/
 RED.history = (function() {
-    var undo_history = [];
+    var undoHistory = [];
+    var redoHistory = [];
 
     function undoEvent(ev) {
         var i;
@@ -22,52 +23,81 @@ RED.history = (function() {
         var node;
         var subflow;
         var modifiedTabs = {};
+        var inverseEv;
         if (ev) {
             if (ev.t == 'multi') {
+                inverseEv = {
+                    t: 'multi',
+                    events: []
+                };
                 len = ev.events.length;
                 for (i=len-1;i>=0;i--) {
-                    undoEvent(ev.events[i]);
+                    var r = undoEvent(ev.events[i]);
+                    inverseEv.events.push(r);
                 }
             } else if (ev.t == 'replace') {
+                inverseEv = {
+                    t: 'replace',
+                    config: RED.nodes.createCompleteNodeSet(),
+                    changed: [],
+                    rev: RED.nodes.version()
+                };
                 RED.nodes.clear();
                 var imported = RED.nodes.import(ev.config);
                 imported[0].forEach(function(n) {
                     if (ev.changed[n.id]) {
                         n.changed = true;
+                        inverseEv.changed[n.id] = true;
                     }
                 })
 
                 RED.nodes.version(ev.rev);
             } else if (ev.t == 'add') {
+                inverseEv = {
+                    t: "delete",
+                };
                 if (ev.nodes) {
+                    inverseEv.nodes = [];
                     for (i=0;i<ev.nodes.length;i++) {
                         node = RED.nodes.node(ev.nodes[i]);
                         if (node.z) {
                             modifiedTabs[node.z] = true;
                         }
+                        inverseEv.nodes.push(node);
                         RED.nodes.remove(ev.nodes[i]);
                     }
                 }
                 if (ev.links) {
+                    inverseEv.links = [];
                     for (i=0;i<ev.links.length;i++) {
+                        inverseEv.links.push(ev.links[i]);
                         RED.nodes.removeLink(ev.links[i]);
                     }
                 }
                 if (ev.workspaces) {
+                    inverseEv.workspaces = [];
                     for (i=0;i<ev.workspaces.length;i++) {
+                        var workspaceOrder = RED.nodes.getWorkspaceOrder();
+                        ev.workspaces[i]._index = workspaceOrder.indexOf(ev.workspaces[i].id);
+                        inverseEv.workspaces.push(ev.workspaces[i]);
                         RED.nodes.removeWorkspace(ev.workspaces[i].id);
                         RED.workspaces.remove(ev.workspaces[i]);
                     }
                 }
                 if (ev.subflows) {
+                    inverseEv.subflows = [];
                     for (i=0;i<ev.subflows.length;i++) {
+                        inverseEv.subflows.push(ev.subflows[i]);
                         RED.nodes.removeSubflow(ev.subflows[i]);
                         RED.workspaces.remove(ev.subflows[i]);
                     }
                 }
                 if (ev.subflow) {
+                    inverseEv.subflow = {};
                     if (ev.subflow.instances) {
+                        inverseEv.subflow.instances = [];
                         ev.subflow.instances.forEach(function(n) {
+                            inverseEv.subflow.instances.push(n);
                             var node = RED.nodes.node(n.id);
                             if (node) {
                                 node.changed = n.changed;
@@ -83,21 +113,30 @@ RED.history = (function() {
                     }
                 }
                 if (ev.removedLinks) {
+                    inverseEv.createdLinks = [];
                     for (i=0;i<ev.removedLinks.length;i++) {
+                        inverseEv.createdLinks.push(ev.removedLinks[i]);
                         RED.nodes.addLink(ev.removedLinks[i]);
                     }
                 }
 
             } else if (ev.t == "delete") {
+                inverseEv = {
+                    t: "add"
+                };
                 if (ev.workspaces) {
+                    inverseEv.workspaces = [];
                     for (i=0;i<ev.workspaces.length;i++) {
+                        inverseEv.workspaces.push(ev.workspaces[i]);
                         RED.nodes.addWorkspace(ev.workspaces[i],ev.workspaces[i]._index);
                         RED.workspaces.add(ev.workspaces[i],undefined,ev.workspaces[i]._index);
                         delete ev.workspaces[i]._index;
                     }
                 }
                 if (ev.subflows) {
+                    inverseEv.subflows = [];
                     for (i=0;i<ev.subflows.length;i++) {
+                        inverseEv.subflows.push(ev.subflows[i]);
                         RED.nodes.addSubflow(ev.subflows[i]);
                     }
                 }
@@ -126,8 +165,11 @@ RED.history = (function() {
                     }
                 }
                 if (ev.subflow) {
+                    inverseEv.subflow = {};
                     if (ev.subflow.hasOwnProperty('instances')) {
+                        inverseEv.subflow.instances = [];
                         ev.subflow.instances.forEach(function(n) {
+                            inverseEv.subflow.instances.push(n);
                             var node = RED.nodes.node(n.id);
                             if (node) {
                                 node.changed = n.changed;
@@ -152,14 +194,25 @@ RED.history = (function() {
                     });
                 }
                 if (ev.nodes) {
+                    inverseEv.nodes = [];
                     for (i=0;i<ev.nodes.length;i++) {
                         RED.nodes.add(ev.nodes[i]);
                         modifiedTabs[ev.nodes[i].z] = true;
+                        inverseEv.nodes.push(ev.nodes[i].id);
                     }
                 }
                 if (ev.links) {
+                    inverseEv.links = [];
                     for (i=0;i<ev.links.length;i++) {
                         RED.nodes.addLink(ev.links[i]);
+                        inverseEv.links.push(ev.links[i]);
+                    }
+                }
+                if (ev.createdLinks) {
+                    inverseEv.removedLinks = [];
+                    for (i=0;i<ev.createdLinks.length;i++) {
+                        inverseEv.removedLinks.push(ev.createdLinks[i]);
+                        RED.nodes.removeLink(ev.createdLinks[i]);
                     }
                 }
                 if (ev.changes) {
@@ -179,8 +232,14 @@ RED.history = (function() {
 
                 }
             } else if (ev.t == "move") {
+                inverseEv = {
+                    t: 'move',
+                    nodes: []
+                };
                 for (i=0;i<ev.nodes.length;i++) {
                     var n = ev.nodes[i];
+                    var rn = {n: n.n, ox: n.n.x, oy: n.n.y, dirty: true, moved: n.moved};
+                    inverseEv.nodes.push(rn);
                     n.n.x = n.ox;
                     n.n.y = n.oy;
                     n.n.dirty = true;
@@ -188,18 +247,28 @@ RED.history = (function() {
                 }
                 // A move could have caused a link splice
                 if (ev.links) {
+                    inverseEv.removedLinks = [];
                     for (i=0;i<ev.links.length;i++) {
+                        inverseEv.removedLinks.push(ev.links[i]);
                         RED.nodes.removeLink(ev.links[i]);
                     }
                 }
                 if (ev.removedLinks) {
+                    inverseEv.links = [];
                     for (i=0;i<ev.removedLinks.length;i++) {
+                        inverseEv.links.push(ev.removedLinks[i]);
                         RED.nodes.addLink(ev.removedLinks[i]);
                     }
                 }
             } else if (ev.t == "edit") {
+                inverseEv = {
+                    t: "edit",
+                    changes: {}
+                };
+                inverseEv.node = ev.node;
                 for (i in ev.changes) {
                     if (ev.changes.hasOwnProperty(i)) {
+                        inverseEv.changes[i] = ev.node[i];
                         if (ev.node._def.defaults && ev.node._def.defaults[i] && ev.node._def.defaults[i].type) {
                             // This is a config node property
                             var currentConfigNode = RED.nodes.node(ev.node[i]);
@@ -219,22 +288,29 @@ RED.history = (function() {
                     $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!ev.node.disabled);
                 }
                 if (ev.subflow) {
+                    inverseEv.subflow = {};
                     if (ev.subflow.hasOwnProperty('inputCount')) {
+                        inverseEv.subflow.inputCount = ev.node.in.length;
                         if (ev.node.in.length > ev.subflow.inputCount) {
+                            inverseEv.subflow.inputs = ev.node.in.slice(ev.subflow.inputCount);
                             ev.node.in.splice(ev.subflow.inputCount);
                         } else if (ev.subflow.inputs.length > 0) {
                             ev.node.in = ev.node.in.concat(ev.subflow.inputs);
                         }
                     }
                     if (ev.subflow.hasOwnProperty('outputCount')) {
+                        inverseEv.subflow.outputCount = ev.node.out.length;
                         if (ev.node.out.length > ev.subflow.outputCount) {
+                            inverseEv.subflow.outputs = ev.node.out.slice(ev.subflow.outputCount);
                             ev.node.out.splice(ev.subflow.outputCount);
                         } else if (ev.subflow.outputs.length > 0) {
                             ev.node.out = ev.node.out.concat(ev.subflow.outputs);
                         }
                     }
                     if (ev.subflow.hasOwnProperty('instances')) {
+                        inverseEv.subflow.instances = [];
                         ev.subflow.instances.forEach(function(n) {
+                            inverseEv.subflow.instances.push(n);
                             var node = RED.nodes.node(n.id);
                             if (node) {
                                 node.changed = n.changed;
@@ -258,9 +334,11 @@ RED.history = (function() {
                     var outputMap;
                     if (ev.outputMap) {
                         outputMap = {};
+                        inverseEv.outputMap = {};
                         for (var port in ev.outputMap) {
                             if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== "-1") {
                                 outputMap[ev.outputMap[port]] = port;
+                                inverseEv.outputMap[ev.outputMap[port]] = port;
                             }
                         }
                     }
@@ -268,41 +346,107 @@ RED.history = (function() {
                     RED.editor.validateNode(ev.node);
                 }
                 if (ev.links) {
+                    inverseEv.createdLinks = [];
                     for (i=0;i<ev.links.length;i++) {
                         RED.nodes.addLink(ev.links[i]);
+                        inverseEv.createdLinks.push(ev.links[i]);
+                    }
+                }
+                if (ev.createdLinks) {
+                    inverseEv.links = [];
+                    for (i=0;i<ev.createdLinks.length;i++) {
+                        RED.nodes.removeLink(ev.createdLinks[i]);
+                        inverseEv.links.push(ev.createdLinks[i]);
                     }
                 }
                 ev.node.dirty = true;
                 ev.node.changed = ev.changed;
             } else if (ev.t == "createSubflow") {
+                inverseEv = {
+                    t: "deleteSubflow",
+                    activeWorkspace: ev.activeWorkspace,
+                    dirty: RED.nodes.dirty()
+                };
                 if (ev.nodes) {
+                    inverseEv.movedNodes = [];
                     var z = ev.activeWorkspace;
                     RED.nodes.filterNodes({z:ev.subflow.subflow.id}).forEach(function(n) {
                         n.x += ev.subflow.offsetX;
                         n.y += ev.subflow.offsetY;
-                        n.z = ev.activeWorkspace;
                         n.dirty = true;
+                        inverseEv.movedNodes.push(n.id);
                         RED.nodes.moveNodeToTab(n, z);
                     });
+                    inverseEv.subflows = [];
                     for (i=0;i<ev.nodes.length;i++) {
+                        inverseEv.subflows.push(RED.nodes.node(ev.nodes[i]));
                         RED.nodes.remove(ev.nodes[i]);
                     }
                 }
                 if (ev.links) {
+                    inverseEv.links = [];
                     for (i=0;i<ev.links.length;i++) {
+                        inverseEv.links.push(ev.links[i]);
                         RED.nodes.removeLink(ev.links[i]);
                     }
                 }
 
+                inverseEv.subflow = ev.subflow;
                 RED.nodes.removeSubflow(ev.subflow.subflow);
                 RED.workspaces.remove(ev.subflow.subflow);
 
                 if (ev.removedLinks) {
+                    inverseEv.createdLinks = [];
                     for (i=0;i<ev.removedLinks.length;i++) {
+                        inverseEv.createdLinks.push(ev.removedLinks[i]);
                         RED.nodes.addLink(ev.removedLinks[i]);
                     }
                 }
+            } else if (ev.t == "deleteSubflow") {
+                inverseEv = {
+                    t: "createSubflow",
+                    activeWorkspace: ev.activeWorkspace,
+                    dirty: RED.nodes.dirty(),
+                };
+                if (ev.subflow) {
+                    RED.nodes.addSubflow(ev.subflow.subflow);
+                    inverseEv.subflow = ev.subflow;
+                }
+                if (ev.subflows) {
+                    inverseEv.nodes = [];
+                    for (i=0;i<ev.subflows.length;i++) {
+                        RED.nodes.add(ev.subflows[i]);
+                        inverseEv.nodes.push(ev.subflows[i].id);
+                    }
+                }
+                if (ev.movedNodes) {
+                    ev.movedNodes.forEach(function(nid) {
+                        nn = RED.nodes.node(nid);
+                        nn.x -= ev.subflow.offsetX;
+                        nn.y -= ev.subflow.offsetY;
+                        nn.dirty = true;
+                        RED.nodes.moveNodeToTab(nn, ev.subflow.subflow.id);
+                    });
+                }
+                if (ev.links) {
+                    inverseEv.links = [];
+                    for (i=0;i<ev.links.length;i++) {
+                        inverseEv.links.push(ev.links[i]);
+                        RED.nodes.addLink(ev.links[i]);
+                    }
+                }
+                if  (ev.createdLinks) {
+                    inverseEv.removedLinks = [];
+                    for (i=0;i<ev.createdLinks.length;i++) {
+                        inverseEv.removedLinks.push(ev.createdLinks[i]);
+                        RED.nodes.removeLink(ev.createdLinks[i]);
+                    }
+                }
             } else if (ev.t == "reorder") {
+                inverseEv = {
+                    t: 'reorder',
+                    order: RED.nodes.getWorkspaceOrder()
+                };
                 if (ev.order) {
                     RED.workspaces.order(ev.order);
                 }
@@ -322,6 +466,8 @@ RED.history = (function() {
             RED.workspaces.refresh();
             RED.sidebar.config.refresh();
             RED.subflow.refresh();
+
+            return inverseEv;
         }
 
     }
@@ -329,28 +475,42 @@ RED.history = (function() {
     return {
         //TODO: this function is a placeholder until there is a 'save' event that can be listened to
         markAllDirty: function() {
-            for (var i=0;i<undo_history.length;i++) {
-                undo_history[i].dirty = true;
+            for (var i=0;i<undoHistory.length;i++) {
+                undoHistory[i].dirty = true;
             }
         },
         list: function() {
-            return undo_history
+            return undoHistory;
         },
         depth: function() {
-            return undo_history.length;
+            return undoHistory.length;
         },
         push: function(ev) {
-            undo_history.push(ev);
+            undoHistory.push(ev);
+            redoHistory = [];
         },
         pop: function() {
-            var ev = undo_history.pop();
-            undoEvent(ev);
+            var ev = undoHistory.pop();
+            var rev = undoEvent(ev);
+            if (rev) {
+                redoHistory.push(rev);
+            }
         },
         peek: function() {
-            return undo_history[undo_history.length-1];
+            return undoHistory[undoHistory.length-1];
         },
         clear: function() {
-            undo_history = [];
+            undoHistory = [];
+            redoHistory = [];
+        },
+        redo: function() {
+            var ev = redoHistory.pop();
+            if (ev) {
+                var uev = undoEvent(ev);
+                if (uev) {
+                    undoHistory.push(uev);
+                }
+            }
         }
     }
 

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

@@ -50,6 +50,19 @@ RED.i18n = (function() {
             }
 
         },
+        lang: function() {
+            // Gets the active message catalog language. This is based on what
+            // locale the editor is using and what languages are available.
+            //
+            var preferredLangs = i18n.functions.toLanguages(localStorage.getItem("editor-language")||i18n.detectLanguage());
+            var knownLangs = RED.settings.theme("languages")||["en-US"];
+            for (var i=0;i<preferredLangs.length;i++) {
+                if (knownLangs.indexOf(preferredLangs[i]) > -1) {
+                    return preferredLangs[i]
+                }
+            }
+            return 'end-US'
+        },
         loadNodeCatalog: function(namespace,done) {
             var languageList = i18n.functions.toLanguages(localStorage.getItem("editor-language")||i18n.detectLanguage());
             var toLoad = languageList.length;

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

@@ -30,7 +30,8 @@
         "backspace": "core:delete-config-selection",
         "delete": "core:delete-config-selection",
         "ctrl-a": "core:select-all-config-nodes",
-        "ctrl-z": "core:undo"
+        "ctrl-z": "core:undo",
+        "ctrl-y": "core:redo"
     },
     "red-ui-workspace": {
         "backspace": "core:delete-selection",
@@ -40,6 +41,7 @@
         "ctrl-x": "core:cut-selection-to-internal-clipboard",
         "ctrl-v": "core:paste-from-internal-clipboard",
         "ctrl-z": "core:undo",
+        "ctrl-y": "core:redo",
         "ctrl-a": "core:select-all-nodes",
         "shift-?": "core:show-help",
         "up": "core:move-selection-up",

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

@@ -392,21 +392,21 @@ RED.nodes = (function() {
             category: sf.category || "subflows",
             inputs: sf.in.length,
             outputs: sf.out.length,
-            color: "#da9",
+            color: sf.color || "#da9",
             label: function() { return this.name||RED.nodes.subflow(sf.id).name },
             labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; },
             paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
             inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
             oneditresize: function(size) {
-                var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
+                // var rows = $(".dialog-form>div:not(.node-input-env-container-row)");
                 var height = size.height;
-                for (var i=0; i<rows.size(); i++) {
-                    height -= $(rows[i]).outerHeight(true);
-                }
-                var editorRow = $("#dialog-form>div.node-input-env-container-row");
-                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("#node-input-env-container").editableList('height',height-80);
+                // for (var i=0; i<rows.size(); i++) {
+                //     height -= $(rows[i]).outerHeight(true);
+                // }
+                // var editorRow = $("#dialog-form>div.node-input-env-container-row");
+                // height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $("ol.red-ui-editor-subflow-env-list").editableList('height',height);
             },
             set:{
                 module: "node-red"
@@ -578,6 +578,7 @@ RED.nodes = (function() {
         node.in = [];
         node.out = [];
         node.env = n.env;
+        node.color = n.color;
 
         n.in.forEach(function(p) {
             var nIn = {x:p.x,y:p.y,wires:[]};

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

@@ -34,6 +34,8 @@
  *   - addItem(itemData)
  *   - insertItemAt : function(data,index) - add an item at the specified index
  *   - removeItem(itemData)
+ *   - getItemAt(index)
+ *   - indexOf(itemData)
  *   - width(width)
  *   - height(height)
  *   - items()
@@ -186,7 +188,11 @@
             }
         },
         _destroy: function() {
-            this.topContainer.remove();
+            if (this.topContainer) {
+                var tc = this.topContainer;
+                delete this.topContainer;
+                tc.remove();
+            }
         },
         _refreshFilter: function() {
             var that = this;
@@ -232,6 +238,23 @@
             this.uiHeight = desiredHeight;
             this._resize();
         },
+        getItemAt: function(index) {
+            var items = this.items();
+            if (index >= 0 && index < items.length) {
+                return $(items[index]).data('data');
+            } else {
+                return;
+            }
+        },
+        indexOf: function(data) {
+            var items = this.items();
+            for (var i=0;i<items.length;i++) {
+                if ($(items[i]).data('data') === data) {
+                    return i
+                }
+            }
+            return -1
+        },
         insertItemAt: function(data,index) {
             var that = this;
             data = data || {};

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

@@ -225,7 +225,7 @@ RED.menu = (function() {
                 triggerAction(opt.id,state);
             }
         }
-        if (!alreadySet) {
+        if (!opt.local && !alreadySet) {
             RED.settings.set(opt.setting||("menu-"+opt.id), state);
         }
     }

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

@@ -253,6 +253,71 @@ RED.popover = (function() {
                 content: label,
                 delay: { show: 750, hide: 50 }
             });
+        },
+        panel: function(content) {
+            var panel = $('<div class="red-ui-editor-dialog red-ui-popover-panel"></div>');
+            panel.css({ display: "none" });
+            panel.appendTo(document.body);
+            content.appendTo(panel);
+            var closeCallback;
+
+            function hide() {
+                $(document).off("mousedown.red-ui-popover-panel-close");
+                panel.hide();
+                panel.css({
+                    height: "auto"
+                });
+                panel.remove();
+            }
+            function show(options) {
+                var closeCallback = options.onclose;
+                var target = options.target;
+                var align = options.align || "left";
+
+                var pos = target.offset();
+                var targetWidth = target.width();
+                var targetHeight = target.height();
+                var panelHeight = panel.height();
+                var panelWidth = panel.width();
+
+                var top = (targetHeight+pos.top);
+                if (top+panelHeight > $(window).height()) {
+                    top -= (top+panelHeight)-$(window).height() + 5;
+                }
+                if (top < 0) {
+                    panelHeight.height(panelHeight+top)
+                    top = 0;
+                }
+                if (align === "left") {
+                    panel.css({
+                        top: top+"px",
+                        left: (pos.left)+"px",
+                    });
+                } else if(align === "right") {
+                    panel.css({
+                        top: top+"px",
+                        left: (pos.left-panelWidth)+"px",
+                    });
+                }
+                panel.slideDown(100);
+
+                $(document).on("mousedown.red-ui-popover-panel-close", function(event) {
+                    if(!$(event.target).closest(panel).length && !$(event.target).closest(".red-ui-editor-dialog").length) {
+                        if (closeCallback) {
+                            closeCallback();
+                        }
+                        hide();
+                    }
+                    // if ($(event.target).closest(target).length) {
+                    //     event.preventDefault();
+                    // }
+                })
+            }
+            return  {
+                container: panel,
+                show:show,
+                hide:hide
+            }
         }
     }
 

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

@@ -81,7 +81,7 @@
             }
         },
         re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.svg"},
-        date: {value:"date",label:"timestamp",hasValue:false},
+        date: {value:"date",label:"timestamp",icon:"fa fa-clock-o",hasValue:false},
         jsonata: {
             value: "jsonata",
             label: "expression",
@@ -298,7 +298,8 @@
                 that.uiSelect.addClass('red-ui-typedInput-focus');
             });
 
-            this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"><i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i></button>').appendTo(this.uiSelect);
+            this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
+            this.optionExpandButtonIcon = $('<i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i>').appendTo(this.optionExpandButton);
             this.type(this.options.default||this.typeList[0].value);
         }catch(err) {
             console.log(err.stack);
@@ -336,6 +337,17 @@
             menu.css({
                 height: "auto"
             });
+
+            if (menu.opts.multiple) {
+                var selected = [];
+                menu.find('input[type="checkbox"]').each(function() {
+                    if ($(this).prop("checked")) {
+                        selected.push($(this).data('value'))
+                    }
+                })
+                menu.callback(selected);
+            }
+
             if (this.elementDiv.is(":visible")) {
                 this.input.trigger("focus");
             } else if (this.optionSelectTrigger.is(":visible")){
@@ -344,10 +356,12 @@
                 this.selectTrigger.trigger("focus");
             }
         },
-        _createMenu: function(opts,callback) {
+        _createMenu: function(menuOptions,opts,callback) {
             var that = this;
-            var menu = $("<div>").addClass("red-ui-typedInput-options");
-            opts.forEach(function(opt) {
+            var menu = $("<div>").addClass("red-ui-typedInput-options red-ui-editor-dialog");
+            menu.opts = opts;
+            menu.callback = callback;
+            menuOptions.forEach(function(opt) {
                 if (typeof opt === 'string') {
                     opt = {value:opt,label:opt};
                 }
@@ -369,12 +383,20 @@
                 if (!opt.icon && !opt.label) {
                     op.text(opt.value);
                 }
+                var cb;
+                if (opts.multiple) {
+                    cb = $('<input type="checkbox">').css("pointer-events","none").data('value',opt.value).prependTo(op).on("mousedown", function(evt) { evt.preventDefault() });
+                }
 
                 op.on("click", function(event) {
                     event.preventDefault();
                     event.stopPropagation();
-                    callback(opt.value);
-                    that._hideMenu(menu);
+                    if (!opts.multiple) {
+                        callback(opt.value);
+                        that._hideMenu(menu);
+                    } else {
+                        cb.prop("checked",!cb.prop("checked"));
+                    }
                 });
             });
             menu.css({
@@ -398,9 +420,6 @@
                 }
                 evt.stopPropagation();
             })
-
-
-
             return menu;
 
         },
@@ -409,11 +428,22 @@
                 this.disarmClick = false;
                 return
             }
+            if (menu.opts.multiple) {
+                var selected = {};
+                 this.value().split(",").forEach(function(f) {
+                     selected[f] = true;
+                 })
+                menu.find('input[type="checkbox"]').each(function() {
+                    $(this).prop("checked",selected[$(this).data('value')])
+                })
+            }
+
+
             var that = this;
             var pos = relativeTo.offset();
             var height = relativeTo.height();
             var menuHeight = menu.height();
-            var top = (height+pos.top-3);
+            var top = (height+pos.top);
             if (top+menuHeight > $(window).height()) {
                 top -= (top+menuHeight)-$(window).height()+5;
             }
@@ -423,7 +453,7 @@
             }
             menu.css({
                 top: top+"px",
-                left: (2+pos.left)+"px",
+                left: (pos.left)+"px",
             });
             menu.slideDown(100);
             this._delay(function() {
@@ -471,7 +501,7 @@
                 this._getLabelWidth(this.selectTrigger, function(labelWidth) {
                     that.elementDiv.css('left',labelWidth+"px");
                     that.valueLabelContainer.css('left',labelWidth+"px");
-                    if (that.optionExpandButton.is(":visible")) {
+                    if (that.optionExpandButton.shown) {
                         that.elementDiv.css('right',"22px");
                         that.valueLabelContainer.css('right',"22px");
                     } else {
@@ -496,7 +526,7 @@
                         } else {
                             that.optionSelectLabel.css({'left':'0'})
                             that.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'});
-                            if (!that.optionExpandButton.is(":visible")) {
+                            if (!that.optionExpandButton.shown) {
                                 that.elementDiv.css({'right':0});
                                 that.input.css({
                                     'border-top-right-radius': '4px',
@@ -511,25 +541,35 @@
         _updateOptionSelectLabel: function(o) {
             var opt = this.typeMap[this.propertyType];
             this.optionSelectLabel.empty();
-            if (o.icon) {
-                if (o.icon.indexOf("<") === 0) {
-                    $(o.icon).prependTo(this.optionSelectLabel);
-                } else if (o.icon.indexOf("/") !== -1) {
-                    // url
-                    $('<img>',{src:mapDeprecatedIcon(o.icon),style:"height: 18px;"}).prependTo(this.optionSelectLabel);
+            if (this.typeMap[this.propertyType].valueLabel) {
+                if (opt.multiple) {
+                    this.typeMap[this.propertyType].valueLabel.call(this,this.optionSelectLabel,o);
                 } else {
-                    // icon class
-                    $('<i>',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel);
+                    this.typeMap[this.propertyType].valueLabel.call(this,this.optionSelectLabel,o.value);
+                }
+            } else if (!opt.multiple) {
+                if (o.icon) {
+                    if (o.icon.indexOf("<") === 0) {
+                        $(o.icon).prependTo(this.optionSelectLabel);
+                    } else if (o.icon.indexOf("/") !== -1) {
+                        // url
+                        $('<img>',{src:mapDeprecatedIcon(o.icon),style:"height: 18px;"}).prependTo(this.optionSelectLabel);
+                    } else {
+                        // icon class
+                        $('<i>',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel);
+                    }
+                } else if (o.label) {
+                    this.optionSelectLabel.text(o.label);
+                } else {
+                    this.optionSelectLabel.text(o.value);
+                }
+                if (opt.hasValue) {
+                    this.optionValue = o.value;
+                    this._resize();
+                    this.input.trigger('change',this.propertyType,this.value());
                 }
-            } else if (o.label) {
-                this.optionSelectLabel.text(o.label);
             } else {
-                this.optionSelectLabel.text(o.value);
-            }
-            if (opt.hasValue) {
-                this.optionValue = o.value;
-                this._resize();
-                this.input.trigger('change',this.propertyType,this.value());
+                this.optionSelectLabel.text(o.length+" selected");
             }
         },
         _destroy: function() {
@@ -558,7 +598,7 @@
             if (this.menu) {
                 this.menu.remove();
             }
-            this.menu = this._createMenu(this.typeList, function(v) { that.type(v) });
+            this.menu = this._createMenu(this.typeList,{},function(v) { that.type(v) });
             if (currentType && !this.typeMap.hasOwnProperty(currentType)) {
                 this.type(this.typeList[0].value);
             } else {
@@ -572,38 +612,51 @@
             this._resize();
         },
         value: function(value) {
+            var that = this;
+            var opt = this.typeMap[this.propertyType];
             if (!arguments.length) {
                 var v = this.input.val();
-                if (this.typeMap[this.propertyType].export) {
-                    v = this.typeMap[this.propertyType].export(v,this.optionValue)
+                if (opt.export) {
+                    v = opt.export(v,this.optionValue)
                 }
                 return v;
             } else {
-                var selectedOption;
-                if (this.typeMap[this.propertyType].options) {
-                    for (var i=0;i<this.typeMap[this.propertyType].options.length;i++) {
-                        var op = this.typeMap[this.propertyType].options[i];
-                        if (typeof op === "string") {
-                            if (op === value) {
-                                selectedOption = this.activeOptions[op];
+                var selectedOption = [];
+                if (opt.options) {
+                    var checkValues = [value];
+                    if (opt.multiple) {
+                        selectedOption = [];
+                        checkValues = value.split(",");
+                    }
+                    checkValues.forEach(function(value) {
+                        for (var i=0;i<opt.options.length;i++) {
+                            var op = opt.options[i];
+                            if (typeof op === "string") {
+                                if (op === value) {
+                                    selectedOption.push(that.activeOptions[op]);
+                                    break;
+                                }
+                            } else if (op.value === value) {
+                                selectedOption.push(op);
                                 break;
                             }
-                        } else if (op.value === value) {
-                            selectedOption = op;
-                            break;
                         }
-                    }
-                    if (!selectedOption) {
-                        selectedOption = {value:""}
-                    }
+                    })
                     this.input.val(value);
-                    this._updateOptionSelectLabel(selectedOption)
+                    if (!opt.multiple) {
+                        if (!selectedOption.length === 0) {
+                            selectedOption = [{value:""}];
+                        }
+                        this._updateOptionSelectLabel(selectedOption[0])
+                    } else {
+                        this._updateOptionSelectLabel(selectedOption)
+                    }
                 } else {
                     this.input.val(value);
-                }
-                if (this.typeMap[this.propertyType].valueLabel) {
-                    this.valueLabelContainer.empty();
-                    this.typeMap[this.propertyType].valueLabel.call(this,this.valueLabelContainer,value);
+                    if (opt.valueLabel) {
+                        this.valueLabelContainer.empty();
+                        opt.valueLabel.call(this,this.valueLabelContainer,value);
+                    }
                 }
                 this.input.trigger('change',this.type(),value);
             }
@@ -621,7 +674,7 @@
                     }
                     this.selectLabel.empty();
                     var image;
-                    if (opt.icon) {
+                    if (opt.icon && opt.showLabel !== false) {
                         if (opt.icon.indexOf("<") === 0) {
                             $(opt.icon).prependTo(this.selectLabel);
                         }
@@ -636,7 +689,8 @@
                         else {
                             $('<i>',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(this.selectLabel);
                         }
-                    } else {
+                    }
+                    if (opt.hasValue === false || (opt.showLabel !== false && !opt.icon)) {
                         this.selectLabel.text(opt.label);
                     }
                     if (this.optionMenu) {
@@ -646,6 +700,7 @@
                     if (opt.options) {
                         if (this.optionExpandButton) {
                             this.optionExpandButton.hide();
+                            this.optionExpandButton.shown = false;
                         }
                         if (this.optionSelectTrigger) {
                             this.optionSelectTrigger.show();
@@ -668,36 +723,50 @@
                             if (!that.activeOptions.hasOwnProperty(that.optionValue)) {
                                 that.optionValue = null;
                             }
-                            this.optionMenu = this._createMenu(opt.options,function(v){
-                                that._updateOptionSelectLabel(that.activeOptions[v]);
-                                if (!opt.hasValue) {
-                                    that.value(that.activeOptions[v].value)
-                                }
-                            });
+
                             var op;
                             if (!opt.hasValue) {
-                                var currentVal = this.input.val();
                                 var validValue = false;
-                                for (var i=0;i<opt.options.length;i++) {
-                                    op = opt.options[i];
-                                    if (typeof op === "string" && op === currentVal) {
-                                        that._updateOptionSelectLabel({value:currentVal});
-                                        validValue = true;
-                                        break;
-                                    } else if (op.value === currentVal) {
-                                        that._updateOptionSelectLabel(op);
-                                        validValue = true;
-                                        break;
+                                var currentVal = this.input.val();
+                                if (!opt.multiple) {
+                                    for (var i=0;i<opt.options.length;i++) {
+                                        op = opt.options[i];
+                                        if (typeof op === "string" && op === currentVal) {
+                                            that._updateOptionSelectLabel({value:currentVal});
+                                            validValue = true;
+                                            break;
+                                        } else if (op.value === currentVal) {
+                                            that._updateOptionSelectLabel(op);
+                                            validValue = true;
+                                            break;
+                                        }
                                     }
-                                }
-                                if (!validValue) {
-                                    op = opt.options[0];
-                                    if (typeof op === "string") {
-                                        this.value(op);
-                                        that._updateOptionSelectLabel({value:op});
-                                    } else {
-                                        this.value(op.value);
-                                        that._updateOptionSelectLabel(op);
+                                    if (!validValue) {
+                                        op = opt.options[0];
+                                        if (typeof op === "string") {
+                                            this.value(op);
+                                            that._updateOptionSelectLabel({value:op});
+                                        } else {
+                                            this.value(op.value);
+                                            that._updateOptionSelectLabel(op);
+                                        }
+                                    }
+                                } else {
+                                    // Check to see if value is a valid csv of
+                                    // options.
+                                    var currentValues = {};
+                                    currentVal.split(",").forEach(function(v) {
+                                        if (v) {
+                                            currentValues[v] = true;
+                                        }
+                                    });
+                                    for (var i=0;i<opt.options.length;i++) {
+                                        op = opt.options[i];
+                                        delete currentValues[op.value||op];
+                                    }
+                                    if (!$.isEmptyObject(currentValues)) {
+                                        // Invalid, set to default/empty
+                                        this.value((opt.default||[]).join(","));
                                     }
                                 }
                             } else {
@@ -733,7 +802,21 @@
                                     this.optionSelectTrigger.hide();
                                 }
                             }
+                            this.optionMenu = this._createMenu(opt.options,opt,function(v){
+                                if (!opt.multiple) {
+                                    that._updateOptionSelectLabel(that.activeOptions[v]);
+                                    if (!opt.hasValue) {
+                                        that.value(that.activeOptions[v].value)
+                                    }
+                                } else {
+                                    that._updateOptionSelectLabel(v);
+                                    if (!opt.hasValue) {
+                                        that.value(v.join(","))
+                                    }
+                                }
+                            });
                         }
+                        this._trigger("typechange",null,this.propertyType);
                         this.input.trigger('change',this.propertyType,this.value());
                     } else {
                         if (this.optionSelectTrigger) {
@@ -758,17 +841,44 @@
                             this.elementDiv.show();
                         }
                         if (this.optionExpandButton) {
-                            if (opt.expand && typeof opt.expand === 'function') {
+                            if (opt.expand) {
+                                if (opt.expand.icon) {
+                                    this.optionExpandButtonIcon.removeClass().addClass("red-ui-typedInput-icon fa "+opt.expand.icon)
+                                } else {
+                                    this.optionExpandButtonIcon.removeClass().addClass("red-ui-typedInput-icon fa fa-ellipsis-h")
+                                }
+                                this.optionExpandButton.shown = true;
                                 this.optionExpandButton.show();
                                 this.optionExpandButton.off('click');
                                 this.optionExpandButton.on('click',function(evt) {
                                     evt.preventDefault();
-                                    opt.expand.call(that);
+                                    if (typeof opt.expand === 'function') {
+                                        opt.expand.call(that);
+                                    } else {
+                                        var container = $('<div>');
+                                        var content = opt.expand.content.call(that,container);
+                                        var panel = RED.popover.panel(container);
+                                        panel.container.css({
+                                            width:that.valueLabelContainer.width()
+                                        });
+                                        if (opt.expand.minWidth) {
+                                            panel.container.css({
+                                                minWidth: opt.expand.minWidth+"px"
+                                            });
+                                        }
+                                        panel.show({
+                                            target:that.optionExpandButton,
+                                            onclose:content.onclose,
+                                            align: "right"
+                                        });
+                                    }
                                 })
                             } else {
+                                this.optionExpandButton.shown = false;
                                 this.optionExpandButton.hide();
                             }
                         }
+                        this._trigger("typechange",null,this.propertyType);
                         this.input.trigger('change',this.propertyType,this.value());
                     }
                     if (!image) {

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

@@ -19,7 +19,6 @@
  */
 RED.editor = (function() {
 
-
     var editStack = [];
     var editing_node = null;
     var editing_config_node = null;
@@ -526,7 +525,7 @@ RED.editor = (function() {
             } else if (node.type.indexOf("subflow:")===0) {
                 var subflow = RED.nodes.subflow(node.type.substring(8));
                 label = RED._("subflow.editSubflowInstance",{name:RED.utils.sanitize(subflow.name)})
-            } else {
+            } else if (node._def !== undefined) {
                 if (typeof node._def.paletteLabel !== "undefined") {
                     try {
                         label = RED.utils.sanitize((typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"");
@@ -546,148 +545,7 @@ RED.editor = (function() {
         return label;
     }
 
-    function buildEnvForm(container, node) {
-        var env_container = $('#node-input-env-container');
-        env_container
-            .css({
-                'min-height':'150px',
-                'min-width':'450px'
-            })
-            .editableList({
-                addItem: function(container, i, opt) {
-                    var row = $('<div/>').appendTo(container);
-                    if (opt.parent) {
-                        $('<div/>', {
-                            class:"uneditable-input",
-                            style: "margin-left: 5px; width: calc(40% - 8px)",
-                        }).appendTo(row).text(opt.name);
-                    } else {
-                        $('<input/>', {
-                            class: "node-input-env-name",
-                            type: "text",
-                            style: "margin-left: 5px; width: calc(40% - 8px)",
-                            placeholder: RED._("common.label.name")
-                        }).attr("autocomplete","disable").appendTo(row).val(opt.name);
-                    }
-                    var valueField = $('<input/>',{
-                        class: "node-input-env-value",
-                        type: "text",
-                        style: "margin-left: 5px; width: calc(60% - 8px)"
-                    }).attr("autocomplete","disable").appendTo(row)
-
-                    valueField.typedInput({default:'str',
-                                           types:['str','num','bool','json','bin','env']
-                                          });
-
-                    valueField.typedInput('type', opt.parent?(opt.type||opt.parent.type):opt.type);
-                    valueField.typedInput('value', opt.parent?((opt.value !== undefined)?opt.value:opt.parent.value):opt.value);
-
-                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(container);
-                    $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
-                    container.parent().addClass("red-ui-editableList-item-removable");
-                    if (opt.parent) {
-                        if ((opt.value !== undefined) && (opt.value !== opt.parent.value || opt.type !== opt.parent.type)) {
-                            actionButton.show();
-                        } else {
-                            actionButton.hide();
-                        }
-                        var restoreTip = RED.popover.tooltip(actionButton,RED._("subflow.env.restore"));
-                        valueField.on("change", function(evt) {
-                            var newType = valueField.typedInput('type');
-                            var newValue = valueField.typedInput('value');
-                            if (newType === opt.parent.type && newValue === opt.parent.value) {
-                                actionButton.hide();
-                            } else {
-                                actionButton.show();
-                            }
-                        })
-                        actionButton.on("click", function(evt) {
-                            evt.preventDefault();
-                            restoreTip.close();
-                            valueField.typedInput('type', opt.parent.type);
-                            valueField.typedInput('value', opt.parent.value);
-                        })
-                    } else {
-                        var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
-                        actionButton.on("click", function(evt) {
-                            evt.preventDefault();
-                            removeTip.close();
-                            container.parent().addClass("red-ui-editableList-item-deleting")
-                            container.fadeOut(300, function() {
-                                env_container.editableList('removeItem',opt);
-                            });
-                        });
-                    }
-                },
-                sortable: false,
-                removable: false
-            });
-        var parentEnv = {};
-        var envList = [];
-        if (/^subflow:/.test(node.type)) {
-            var subflowDef = RED.nodes.subflow(node.type.substring(8));
-            if (subflowDef.env) {
-                subflowDef.env.forEach(function(env) {
-                    var item = {
-                        name:env.name,
-                        parent: {
-                            type: env.type,
-                            value: env.value
-                        }
-                    }
-                    envList.push(item);
-                    parentEnv[env.name] = item;
-                })
-            }
-        }
-
-        if (node.env) {
-            for (var i = 0; i < node.env.length; i++) {
-                var env = node.env[i];
-                if (parentEnv.hasOwnProperty(env.name)) {
-                    parentEnv[env.name].type = env.type;
-                    parentEnv[env.name].value = env.value;
-                } else {
-                    envList.push({
-                        name: env.name,
-                        type: env.type,
-                        value: env.value
-                    });
-                }
-            }
-        }
-        envList.forEach(function(env) {
-            env_container.editableList('addItem', env);
-        })
-    }
-
-    function exportEnvList(list) {
-        if (list) {
-            var env = [];
-            list.each(function(i) {
-                var entry = $(this);
-                var item = entry.data('data');
-                var name = (item.parent?item.name:entry.find(".node-input-env-name").val()).trim();
-                if (name !== "") {
-                    var valueInput = entry.find(".node-input-env-value");
-                    var value = valueInput.typedInput("value");
-                    var type = valueInput.typedInput("type");
-                    if (!item.parent || (item.parent.value !== value || item.parent.type !== type)) {
-                        var item = {
-                            name: name,
-                            type: type,
-                            value: value
-                        };
-                        env.push(item);
-                    }
-                }
-            });
-            return env;
-        }
-        return null;
-    }
-
-    function isSameEnv(env0, env1) {
+    function isSameObj(env0, env1) {
         return (JSON.stringify(env0) === JSON.stringify(env1));
     }
 
@@ -713,8 +571,8 @@ RED.editor = (function() {
             $(this).attr("data-i18n",keys.join(";"));
         });
 
-        if ((type === "subflow") || (type === "subflow-template")) {
-            buildEnvForm(dialogForm, node);
+        if (type === "subflow-template" || type === "subflow") {
+            RED.subflow.buildEditForm(dialogForm,type,node);
         }
 
         // Add dummy fields to prevent 'Enter' submitting the form in some
@@ -857,30 +715,8 @@ RED.editor = (function() {
         }
         return result;
     }
-    function showIconPicker(container, node, iconPath, done) {
-        var containerPos = container.offset();
-        var pickerBackground = $('<div>').css({
-            position: "absolute",top:0,bottom:0,left:0,right:0,zIndex:20
-        }).appendTo("body");
-
-        var top = containerPos.top - 30;
-
-        if (top+280 > $( window ).height()) {
-            top = $( window ).height() - 280;
-        }
-        var picker = $('<div class="red-ui-icon-picker">').css({
-            top: top+"px",
-            left: containerPos.left+"px",
-        }).appendTo("#red-ui-editor");
-
-        var hide = function() {
-            pickerBackground.remove();
-            picker.remove();
-            RED.keyboard.remove("escape");
-        }
-        RED.keyboard.add("*","escape",function(){hide()});
-        pickerBackground.on("mousedown", hide);
-
+    function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
+        var picker = $('<div class="red-ui-icon-picker">');
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
         searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
             delay: 50,
@@ -908,46 +744,159 @@ RED.editor = (function() {
         var summary = $('<span>').appendTo(metaRow);
         var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
             e.preventDefault();
-            hide();
+            iconPanel.hide();
             done(null);
         });
-        var iconSets = RED.nodes.getIconSets();
-        Object.keys(iconSets).forEach(function(moduleName) {
-            var icons = iconSets[moduleName];
-            if (icons.length > 0) {
-                // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
-                var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
-                $('<i class="fa fa-cube"></i>').prependTo(header);
-                icons.forEach(function(icon) {
-                    var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
-                    var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
-                    var colour = RED.utils.getNodeColor(node.type, node._def);
-                    var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
-                    iconDiv.data('icon',icon_url);
-                    nodeDiv.css('backgroundColor',colour);
-                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
-                    RED.utils.createIconElement(icon_url, iconContainer, true);
+        if (!backgroundColor && faOnly) {
+            iconList.addClass("red-ui-icon-list-dark");
+        }
+        setTimeout(function() {
+            var iconSets = RED.nodes.getIconSets();
+            Object.keys(iconSets).forEach(function(moduleName) {
+                if (faOnly && (moduleName !== "font-awesome")) {
+                    return;
+                }
+                var icons = iconSets[moduleName];
+                if (icons.length > 0) {
+                    // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
+                    var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
+                    $('<i class="fa fa-cube"></i>').prependTo(header);
+                    icons.forEach(function(icon) {
+                        var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
+                        var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
+                        var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
+                        iconDiv.data('icon',icon_url);
+                        if (backgroundColor) {
+                            nodeDiv.css({
+                                'backgroundColor': backgroundColor
+                            });
+                        }
+                        var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                        RED.utils.createIconElement(icon_url, iconContainer, true);
 
-                    if (iconPath.module === moduleName && iconPath.file === icon) {
-                        iconDiv.addClass("selected");
-                    }
-                    iconDiv.on("mouseover", function() {
-                        summary.text(icon);
+                        if (iconPath.module === moduleName && iconPath.file === icon) {
+                            iconDiv.addClass("selected");
+                        }
+                        iconDiv.on("mouseover", function() {
+                            summary.text(icon);
+                        })
+                        iconDiv.on("mouseout", function() {
+                            summary.html("&nbsp;");
+                        })
+                        iconDiv.on("click", function() {
+                            iconPanel.hide();
+                            done(moduleName+"/"+icon);
+                        })
                     })
-                    iconDiv.on("mouseout", function() {
-                        summary.html("&nbsp;");
-                    })
-                    iconDiv.on("click", function() {
-                        hide();
-                        done(moduleName+"/"+icon);
-                    })
-                })
-            }
-        });
+                }
+            });
+            setTimeout(function() {
+                spinner.remove();
+            },50);
+        },300);
+        var spinner = RED.utils.addSpinnerOverlay(iconList,true);
+        var iconPanel = RED.popover.panel(picker);
+        iconPanel.show({
+            target: container
+        })
+
+
         picker.slideDown(100);
         searchInput.trigger("focus");
     }
 
+    function createColorPicker(colorRow, color) {
+
+        var colorButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(colorRow);
+        $('<i class="fa fa-caret-down"></i>').appendTo(colorButton);
+
+        var colorDisp = $('<div>',{class:"red-ui-search-result-node"}).appendTo(colorButton);
+
+        var selector = $("<input/>", {
+            id: "red-ui-editor-node-color",
+            type: "text",
+            value: color
+        }).css({
+            marginLeft: "10px",
+            width: "150px",
+        }).appendTo(colorRow);
+
+        selector.on("change", function (e) {
+            var color = selector.val();
+            $(".red-ui-editor-node-appearance-button .red-ui-search-result-node").css({
+                "background-color": color
+            });
+        });
+        selector.trigger("change");
+        colorButton.on("click", function (e) {
+            var recommendedColors = [
+                "#3FADB5", "#87A980", "#A6BBCF",
+                "#AAAA66", "#C0C0C0", "#C0DEED",
+                "#C7E9C0", "#D7D7A0", "#D8BFD8",
+                "#DAC4B4", "#DEB887", "#DEBD5C",
+                "#E2D96E", "#E6E0F8", "#E7E7AE",
+                "#E9967A", "#F3B567", "#FDD0A2",
+                "#FDF0C2", "#FFAAAA", "#FFCC66",
+                "#FFF0F0", "#FFFFFF"
+            ].map(function(c) {
+                var r = parseInt(c.substring(1, 3), 16) / 255;
+                var g = parseInt(c.substring(3, 5), 16) / 255;
+                var b = parseInt(c.substring(5, 7), 16) / 255;
+                return {
+                    hex: c,
+                    r: r,
+                    g: g,
+                    b: b,
+                    l: 0.3 * r + 0.59 * g + 0.11 * b
+                }
+            });
+            // Sort by luminosity.
+            recommendedColors.sort(function (a, b) {
+                return a.l - b.l;
+            });
+
+            var numColors = recommendedColors.length;
+            var width = 30;
+            var height = 30;
+            var margin = 2;
+            var perRow = 6;
+            var picker = $("<div/>", {
+                class: "red-ui-color-picker"
+            }).css({
+                width: ((width+margin+margin)*perRow)+"px",
+                height: Math.ceil(numColors/perRow)*(height+margin+margin)+"+px"
+            });
+            var count = 0;
+            var row = null;
+            recommendedColors.forEach(function (col) {
+                if ((count % perRow) == 0) {
+                    row = $("<div/>").appendTo(picker);
+                }
+                var button = $("<button/>", {
+                }).css({
+                    width: width+"px",
+                    height: height+"px",
+                    margin: margin+"px",
+                    backgroundColor: col.hex,
+                    "border-style": "solid",
+                    "border-width": "1px",
+                    "border-color": col.luma<0.92?col.hex:'#ccc'
+                }).appendTo(row);
+                button.on("click",  function (e) {
+                    e.preventDefault();
+                    colorPanel.hide();
+                    selector.val(col.hex);
+                    selector.trigger("change");
+                });
+                count++;
+            });
+            var colorPanel = RED.popover.panel(picker);
+            colorPanel.show({
+                target: colorButton
+            })
+        });
+    }
+
     function buildAppearanceForm(container,node) {
         var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
 
@@ -1026,13 +975,24 @@ RED.editor = (function() {
         }
         $("#node-input-show-label").prop("checked",node.l).trigger("change");
 
+        if (node.type === "subflow") {
+            // subflow template can select its color
+            var color = node.color ? node.color : "#da9";
+            var colorRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
+            createColorPicker(colorRow, color);
+        }
+
+
         // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
         if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
             var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
             $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
 
-            var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
-
+            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
+            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
             var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
             var colour = RED.utils.getNodeColor(node.type, node._def);
             var icon_url = RED.utils.getNodeIcon(node._def,node);
@@ -1043,21 +1003,30 @@ RED.editor = (function() {
             iconButton.on("click", function(e) {
                 e.preventDefault();
                 var iconPath;
-                var icon = $("#red-ui-editor-node-icon").text()||"";
+                var icon = $("#red-ui-editor-node-icon").val()||"";
                 if (icon) {
                     iconPath = RED.utils.separateIconPath(icon);
                 } else {
                     iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
                 }
-                showIconPicker(iconRow,node,iconPath,function(newIcon) {
-                    $("#red-ui-editor-node-icon").text(newIcon||"");
+                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
+                if (node.type === "subflow") {
+                    backgroundColor = $("#red-ui-editor-node-color").val();
+                }
+                showIconPicker(iconButton,backgroundColor,iconPath,false,function(newIcon) {
+                    $("#red-ui-editor-node-icon").val(newIcon||"");
                     var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
                     RED.utils.createIconElement(icon_url, iconContainer, true);
                 });
             });
-            $('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton);
+
+            RED.popover.tooltip(iconButton, function() {
+                return $("#red-ui-editor-node-icon").val()||"default";
+            })
+            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
         }
 
+
         $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
 
         var inputCount = node.inputs || node._def.inputs || 0;
@@ -1093,6 +1062,7 @@ RED.editor = (function() {
         }
     }
 
+
     function updateLabels(editing_node, changes, outputMap) {
         var inputLabels = $("#red-ui-editor-node-label-form-inputs").children().find("input");
         var outputLabels = $("#red-ui-editor-node-label-form-outputs").children().find("input");
@@ -1380,7 +1350,7 @@ RED.editor = (function() {
                         }
 
                         if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
-                            var icon = $("#red-ui-editor-node-icon").text()||""
+                            var icon = $("#red-ui-editor-node-icon").val()||""
                             if (!isDefaultIcon) {
                                 if (icon !== editing_node.icon) {
                                     changes.icon = editing_node.icon;
@@ -1483,13 +1453,13 @@ RED.editor = (function() {
 
                         if (type === "subflow") {
                             var old_env = editing_node.env;
-                            var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
-                            if (!isSameEnv(old_env, new_env)) {
+                            var new_env = RED.subflow.exportSubflowInstanceEnv(editing_node);
+                            if (!isSameObj(old_env, new_env)) {
                                 editing_node.env = new_env;
                                 changes.env = editing_node.env;
                                 changed = true;
                             }
-                        }
+                         }
 
                         if (changed) {
                             var wasChanged = editing_node.changed;
@@ -1607,6 +1577,19 @@ RED.editor = (function() {
                 buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
                 editorTabs.addTab(nodePropertiesTab);
 
+                if (/^subflow:/.test(node.type)) {
+                    var subflowPropertiesTab = {
+                        id: "editor-subflow-envProperties",
+                        label: RED._("editor-tab.envProperties"),
+                        name: RED._("editor-tab.envProperties"),
+                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
+                        iconClass: "fa fa-list"
+                    };
+
+                    RED.subflow.buildPropertiesForm(subflowPropertiesTab.content,node);
+                    editorTabs.addTab(subflowPropertiesTab);
+                }
+
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info'))  {
                     var descriptionTab = {
                         id: "editor-tab-description",
@@ -1875,7 +1858,6 @@ RED.editor = (function() {
                     var configId = editing_config_node.id;
                     var configAdding = adding;
                     var configTypeDef = RED.nodes.getType(configType);
-
                     if (configTypeDef.oneditcancel) {
                         // TODO: what to pass as this to call
                         if (configTypeDef.oneditcancel) {
@@ -2212,7 +2194,7 @@ RED.editor = (function() {
                         if (updateLabels(editing_node, changes, null)) {
                             changed = true;
                         }
-                        var icon = $("#red-ui-editor-node-icon").text()||"";
+                        var icon = $("#red-ui-editor-node-icon").val()||"";
                         if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
                             (editing_node.icon !== undefined && editing_node.icon !== icon)) {
                             changes.icon = editing_node.icon;
@@ -2234,6 +2216,23 @@ RED.editor = (function() {
                             editing_node.category = newCategory;
                             changed = true;
                         }
+
+                        var oldColor = editing_node.color;
+                        var newColor =  $("#red-ui-editor-node-color").val();
+                        if (oldColor !== newColor) {
+                            editing_node.color = newColor;
+                            changes.color = newColor;
+                            changed = true;
+                            RED.utils.clearNodeColorCache();
+                        }
+
+                        var old_env = editing_node.env;
+                        var new_env = RED.subflow.exportSubflowTemplateEnv($("#node-input-env-container").editableList("items"));
+                        if (!isSameObj(old_env, new_env)) {
+                            editing_node.env = new_env;
+                            changes.env = editing_node.env;
+                            changed = true;
+                        }
                         RED.palette.refresh();
 
                         if (changed) {
@@ -2247,6 +2246,7 @@ RED.editor = (function() {
                                         id:n.id,
                                         changed:n.changed
                                     })
+                                    n._def.color = editing_node.color;
                                     n.changed = true;
                                     n.dirty = true;
                                     updateNodeProperties(n);
@@ -2274,15 +2274,18 @@ RED.editor = (function() {
             ],
             resize: function(size) {
                 $(".red-ui-tray-content").height(size.height - 50);
-                // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
-                var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
-                var height = size.height;
-                for (var i=0; i<rows.size(); i++) {
-                    height -= $(rows[i]).outerHeight(true);
+                var envContainer = $("#node-input-env-container");
+                if (envContainer.length) {
+                    // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
+                    var rows = $("#dialog-form>div:not(#subflow-env-tabs-content)");
+                    var height = size.height;
+                    for (var i=0; i<rows.size(); i++) {
+                        height -= $(rows[i]).outerHeight(true);
+                    }
+                    // var editorRow = $("#dialog-form>div.node-input-env-container-row");
+                    // height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                    $("#node-input-env-container").editableList('height',height-95);
                 }
-                var editorRow = $("#dialog-form>div.node-input-env-container-row");
-                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("#node-input-env-container").editableList('height',height-60);
             },
             open: function(tray) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
@@ -2518,6 +2521,8 @@ RED.editor = (function() {
         validateNode: validateNode,
         updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
 
+        showIconPicker:showIconPicker,
+
         /**
          * Show a type editor.
          * @param {string} type - the type to display

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

@@ -152,7 +152,7 @@ RED.palette = (function() {
     function getPaletteNode(type) {
         return $(".red-ui-palette-node[data-palette-type='"+type+"']");
     }
-    
+
     function addNodeType(nt,def) {
         if (getPaletteNode(nt).length) {
             return;
@@ -241,7 +241,6 @@ RED.palette = (function() {
                 RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp"));
             });
             var chart = $("#red-ui-workspace-chart");
-            var chartOffset = chart.offset();
             var chartSVG = $("#red-ui-workspace-chart>svg").get(0);
             var activeSpliceLink;
             var mouseX;
@@ -265,8 +264,8 @@ RED.palette = (function() {
                     ui.originalPosition.left = $('#' + e.target.id).offset().left;
 
                     if (def.inputs > 0 && def.outputs > 0) {
-                        mouseX = ui.position.left-paletteWidth+(ui.helper.width()/2) - chartOffset.left + chart.scrollLeft();
-                        mouseY = ui.position.top-paletteTop+(ui.helper.height()/2) - chartOffset.top + chart.scrollTop();
+                        mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
+                        mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop();
                         if (!spliceTimer) {
                             spliceTimer = setTimeout(function() {
                                 var nodes = [];
@@ -416,7 +415,7 @@ RED.palette = (function() {
                 createCategory(newCategory,category,category,"node-red");
 
                 var currentCategoryNode = paletteNode.closest(".red-ui-palette-category");
-                var newCategoryNode = $("#palette-"+category);
+                var newCategoryNode = $("#red-ui-palette-"+category);
                 newCategoryNode.append(paletteNode);
                 if (newCategoryNode.find(".red-ui-palette-node").length === 1) {
                     categoryContainers[category].open();
@@ -429,10 +428,9 @@ RED.palette = (function() {
                         currentCategoryNode.find("i").toggleClass("expanded");
                     }
                 }
-
-
-
             }
+
+            paletteNode.css("backgroundColor", sf.color);
         });
     }
 
@@ -593,7 +591,6 @@ RED.palette = (function() {
         setTimeout(function() { $(window).trigger("resize"); } ,200);
     }
 
-
     function getCategories() {
         var categories = [];
         $("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) {

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

@@ -16,16 +16,29 @@
 
 RED.subflow = (function() {
 
+    var currentLocale = "en-US";
+
     var _subflowEditTemplate = '<script type="text/x-red" data-template-name="subflow">'+
         '<div class="form-row"><label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label><input type="text" id="node-input-name"></div>'+
-        '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
-        '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
+        '<div id="subflow-input-ui"></div>'+
         '</script>';
 
     var _subflowTemplateEditTemplate = '<script type="text/x-red" data-template-name="subflow-template">'+
-        '<div class="form-row"><i class="fa fa-tag"></i> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"></div>'+
-        '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
-        '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
+        '<div class="form-row"><label for="subflow-input-name" data-i18n="[append]common.label.name"><i class="fa fa-tag"></i>  </label><input type="text" id="subflow-input-name"></div>'+
+        '<div class="form-row">'+
+            '<ul style="margin-bottom: 20px;" id="subflow-env-tabs"></ul>'+
+        '</div>'+
+        '<div id="subflow-env-tabs-content">'+
+            '<div id="subflow-env-tab-edit">'+
+                '<div class="form-row node-input-env-container-row" id="subflow-input-edit-ui">'+
+                    '<ol class="red-ui-editor-subflow-env-list" id="node-input-env-container"></ol>'+
+                    '<div class="node-input-env-locales-row"><i class="fa fa-language"></i> <select id="subflow-input-env-locale"></select></div>'+
+                '</div>'+
+            '</div>'+
+            '<div id="subflow-env-tab-preview">'+
+                '<div id="subflow-input-ui"/>'+
+            '</div>'+
+        '</div>'+
         '</script>';
 
     function findAvailableSubflowIOPosition(subflow,isInput) {
@@ -747,6 +760,946 @@ RED.subflow = (function() {
         RED.view.redraw(true);
     }
 
+
+    /**
+     * Create interface for controlling env var UI definition
+     */
+    function buildEnvControl(envList) {
+
+        var tabs = RED.tabs.create({
+            id: "subflow-env-tabs",
+            onchange: function(tab) {
+                if (tab.id === "subflow-env-tab-preview") {
+                    var inputContainer = $("#subflow-input-ui");
+                    var list = envList.editableList("items");
+                    var exportedEnv = exportEnvList(list, true);
+                    buildEnvUI(inputContainer, exportedEnv);
+                }
+                $("#subflow-env-tabs-content").children().hide();
+                $("#" + tab.id).show();
+            }
+        });
+        tabs.addTab({
+            id: "subflow-env-tab-edit",
+            label: RED._("editor-tab.envProperties")
+        });
+        tabs.addTab({
+            id: "subflow-env-tab-preview",
+            label:  RED._("editor-tab.preview")
+        });
+
+        var localesList = RED.settings.theme("languages")
+            .map(function(lc) { var name = RED._("languages."+lc); return {text: (name ? name : lc), val: lc}; })
+            .sort(function(a, b) { return a.text.localeCompare(b.text) });
+        RED.popover.tooltip($(".node-input-env-locales-row i"),RED._("editor.locale"))
+        var locales = $("#subflow-input-env-locale")
+        localesList.forEach(function(item) {
+            var opt = {
+                value: item.val
+            };
+            if (item.val === "en-US") { // make en-US default selected
+                opt.selected = "";
+            }
+            $("<option/>", opt).text(item.text).appendTo(locales);
+        });
+        currentLocale = RED.i18n.lang();
+        locales.val(currentLocale);
+
+        locales.on("change", function() {
+            currentLocale = $(this).val();
+            var items = $("#node-input-env-container").editableList("items");
+            items.each(function (i, item) {
+                var entry = $(this).data('data');
+                var labelField = entry.ui.labelField;
+                labelField.val(lookupLabel(entry.ui.label, "", currentLocale));
+                if (labelField.timeout) {
+                    clearTimeout(labelField.timeout);
+                    delete labelField.timeout;
+                }
+                labelField.addClass("input-updated");
+                labelField.timeout = setTimeout(function() {
+                    delete labelField.timeout
+                    labelField.removeClass("input-updated");
+                },3000);
+            });
+        });
+    }
+
+    /**
+     * Create env var edit interface
+     * @param container - container
+     * @param node - subflow node
+     */
+    function buildPropertiesList(envContainer, node) {
+
+        var isTemplateNode = (node.type === "subflow");
+
+        if (isTemplateNode) {
+            buildEnvControl(envContainer);
+        }
+        envContainer
+            .css({
+                'min-height':'150px',
+                'min-width':'450px'
+            })
+            .editableList({
+                header: isTemplateNode?$('<div><div><div></div><div data-i18n="common.label.name"></div><div data-i18n="editor-tab.defaultValue"></div><div></div></div></div>'):undefined,
+                addItem: function(container, i, opt) {
+                    if (isTemplateNode) {
+                        container.addClass("red-ui-editor-subflow-env-editable")
+                    }
+
+                    var envRow = $('<div/>').appendTo(container);
+                    var nameField = null;
+                    var valueField = null;
+
+                    // if (opt.parent) {
+                    //     buildEnvUIRow(envRow,opt,opt.parent.ui||{})
+                    // } else {
+                        nameField = $('<input/>', {
+                            class: "node-input-env-name",
+                            type: "text",
+                            placeholder: RED._("common.label.name")
+                        }).attr("autocomplete","disable").appendTo(envRow).val(opt.name);
+                        valueField = $('<input/>',{
+                            style: "width:100%",
+                            class: "node-input-env-value",
+                            type: "text",
+                        }).attr("autocomplete","disable").appendTo(envRow)
+                        valueField.typedInput({default:'str',types:['str','num','bool','json','bin','env']});
+                        valueField.typedInput('type', opt.parent?(opt.type||opt.parent.type):opt.type);
+                        valueField.typedInput('value', opt.parent?((opt.value !== undefined)?opt.value:opt.parent.value):opt.value);
+                    // }
+
+
+                    opt.nameField = nameField;
+                    opt.valueField = valueField;
+
+                    if (!opt.parent) {
+                        var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(envRow);
+                        $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
+                        var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
+                        actionButton.on("click", function(evt) {
+                            evt.preventDefault();
+                            removeTip.close();
+                            container.parent().addClass("red-ui-editableList-item-deleting")
+                            container.fadeOut(300, function() {
+                                envContainer.editableList('removeItem',opt);
+                            });
+                        });
+                    }
+
+                    if (isTemplateNode) {
+                        // Add the UI customisation row
+                        // if `opt.ui` does not exist, then apply defaults. If these
+                        // defaults do not change then they will get stripped off
+                        // before saving.
+                        opt.ui = opt.ui || {
+                            icon: "",
+                            label: {},
+                            type: "input",
+                            opts: {types:['str','num','bool','json','bin','env']}
+                        }
+                        opt.ui.label = opt.ui.label || {};
+                        opt.ui.type = opt.ui.type || "input";
+
+                        var uiRow = $('<div/>').appendTo(container).hide();
+                        // save current info for reverting on cancel
+                        // var copy = $.extend(true, {}, ui);
+
+                         $('<a href="#"><i class="fa fa-angle-right"></a>').prependTo(envRow).on("click", function (evt) {
+                            evt.preventDefault();
+                            if ($(this).hasClass('expanded')) {
+                                uiRow.slideUp();
+                                $(this).removeClass('expanded');
+                            } else {
+                                uiRow.slideDown();
+                                $(this).addClass('expanded');
+                            }
+                        });
+
+                        buildEnvEditRow(uiRow, opt.ui, nameField, valueField);
+                        nameField.trigger('change');
+                    }
+                },
+                sortable: ".red-ui-editableList-item-handle",
+                removable: false
+            });
+        var parentEnv = {};
+        var envList = [];
+        if (/^subflow:/.test(node.type)) {
+            var subflowDef = RED.nodes.subflow(node.type.substring(8));
+            if (subflowDef.env) {
+                subflowDef.env.forEach(function(env) {
+                    var item = {
+                        name:env.name,
+                        parent: {
+                            type: env.type,
+                            value: env.value,
+                            ui: env.ui
+                        }
+                    }
+                    envList.push(item);
+                    parentEnv[env.name] = item;
+                })
+            }
+        }
+
+        if (node.env) {
+            for (var i = 0; i < node.env.length; i++) {
+                var env = node.env[i];
+                if (parentEnv.hasOwnProperty(env.name)) {
+                    parentEnv[env.name].type = env.type;
+                    parentEnv[env.name].value = env.value;
+                } else {
+                    envList.push({
+                        name: env.name,
+                        type: env.type,
+                        value: env.value,
+                        ui: env.ui
+                    });
+                }
+            }
+        }
+        envList.forEach(function(env) {
+            if (env.parent && env.parent.ui && env.parent.ui.type === 'hide') {
+                return;
+            }
+            if (!isTemplateNode && env.parent) {
+                return;
+            }
+            envContainer.editableList('addItem', JSON.parse(JSON.stringify(env)));
+        });
+    }
+
+    /**
+     * Create UI edit interface for environment variable
+     * @param container - container
+     * @param env - env var definition
+     * @param nameField - name field of env var
+     * @param valueField - value field of env var
+     */
+     function buildEnvEditRow(container, ui, nameField, valueField) {
+         container.addClass("red-ui-editor-subflow-env-ui-row")
+         var topRow = $('<div></div>').appendTo(container);
+         $('<div></div>').appendTo(topRow);
+         $('<div>').text(RED._("editor.icon")).appendTo(topRow);
+         $('<div>').text(RED._("editor.label")).appendTo(topRow);
+         $('<div>').text(RED._("editor.inputType")).appendTo(topRow);
+
+         var row = $('<div></div>').appendTo(container);
+         $('<div><i class="red-ui-editableList-item-handle fa fa-bars"></i></div>').appendTo(row);
+
+         var typeOptions = {
+             'input': {types:['str','num','bool','json','bin','env']},
+             'select': {opts:[]},
+             'spinner': {}
+         };
+         if (ui.opts) {
+             typeOptions[ui.type] = ui.opts;
+         } else {
+             // Pick up the default values if not otherwise provided
+             ui.opts = typeOptions[ui.type];
+         }
+         var iconCell = $('<div></div>').appendTo(row);
+
+         var iconButton = $('<a href="#"></a>').appendTo(iconCell);
+         iconButton.on("click", function(evt) {
+             evt.preventDefault();
+             var icon = ui.icon || "";
+             var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
+             RED.editor.showIconPicker(iconButton, null, iconPath, true, function (newIcon) {
+                 iconButton.empty();
+                 var path = newIcon || "";
+                 var newPath = RED.utils.separateIconPath(path);
+                 if (newPath) {
+                     $('<i class="fa"></i>').addClass(newPath.file).appendTo(iconButton);
+                 }
+                 ui.icon = path;
+             });
+         })
+
+         if (ui.icon) {
+             var newPath = RED.utils.separateIconPath(ui.icon);
+             $('<i class="fa '+newPath.file+'"></i>').appendTo(iconButton);
+         }
+
+         var labelCell = $('<div></div>').appendTo(row);
+
+         var label = ui.label && ui.label[currentLocale] || "";
+         var labelInput = $('<input type="text">').val(label).appendTo(labelCell);
+         ui.labelField = labelInput;
+         labelInput.on('change', function(evt) {
+             ui.label = ui.label || {};
+             var val = $(this).val().trim();
+             if (val === "") {
+                 delete ui.label[currentLocale];
+             } else {
+                 ui.label[currentLocale] = val;
+             }
+         })
+         var labelIcon = $('<span class="red-ui-editor-subflow-env-lang-icon"><i class="fa fa-language"></i></span>').appendTo(labelCell);
+         RED.popover.tooltip(labelIcon,function() {
+             var langs = Object.keys(ui.label);
+             var content = $("<div>");
+             if (langs.indexOf(currentLocale) === -1) {
+                 langs.push(currentLocale);
+                 langs.sort();
+             }
+             langs.forEach(function(l) {
+                 var row = $('<div>').appendTo(content);
+                 $('<span>').css({display:"inline-block",width:"50px"}).text(l+(l===currentLocale?"*":"")).appendTo(row);
+                 $('<span>').text(ui.label[l]||"").appendTo(row);
+             });
+             return content;
+         })
+
+         nameField.on('change',function(evt) {
+            labelInput.attr("placeholder",$(this).val())
+         });
+
+         var inputCell = $('<div></div>').appendTo(row);
+         var inputCellInput = $('<input type="text">').css("width","100%").appendTo(inputCell);
+         if (ui.type === "input") {
+             inputCellInput.val(ui.opts.types.join(","));
+         }
+         var checkbox;
+         var selectBox;
+
+         inputCellInput.typedInput({
+             types: [
+                 {value:"input",
+                    label:"input", icon:"fa fa-i-cursor",showLabel:false,multiple:true,options:[
+                         {value:"str",label:"string",icon:"red/images/typedInput/az.svg"},
+                         {value:"num",label:"number",icon:"red/images/typedInput/09.svg"},
+                         {value:"bool",label:"boolean",icon:"red/images/typedInput/bool.svg"},
+                         {value:"json",label:"JSON",icon:"red/images/typedInput/json.svg"},
+                         {value: "bin",label: "buffer",icon: "red/images/typedInput/bin.svg"},
+                         {value: "env",label: "env variable",icon: "red/images/typedInput/env.svg"}
+                     ],
+                     default: ['str','num','bool','json','bin','env'],
+                     valueLabel: function(container,value) {
+                         container.css("padding",0);
+                         var innerContainer = $('<div>').css({
+                             "background":"white",
+                             "height":"100%",
+                             "box-sizing": "border-box"
+                         }).appendTo(container);
+
+                         var input = $('<div class="placeholder-input">').appendTo(innerContainer);
+                         $('<span><i class="fa fa-i-cursor"></i></span>').appendTo(input);
+                         if (value.length) {
+                             value.forEach(function(v) {
+                                 $('<img>',{src:v.icon,style:"max-width:14px; padding: 0 3px; margin-top:-4px; margin-left: 3px"}).appendTo(input);
+                             })
+                         } else {
+                             $("<span>").css({
+                                 "color":"#aaa",
+                                 "padding-left": "4px"
+                             }).text("select types...").appendTo(input);
+                         }
+                     }
+                 },
+                 {value:"select",
+                    label:"select", icon:"fa fa-tasks",showLabel:false,
+                     valueLabel: function(container,value) {
+                         container.css("padding","0");
+
+                         selectBox = $('<select></select>').appendTo(container);
+                         if (ui.opts && Array.isArray(ui.opts.opts)) {
+                             ui.opts.opts.forEach(function(o) {
+                                 var label = lookupLabel(o.l, o.l["en-US"]||o.v, currentLocale);
+                                 // $('<option>').val((o.t||'str')+":"+o.v).text(label).appendTo(selectBox);
+                                 $('<option>').val(o.v).text(label).appendTo(selectBox);
+                             })
+                         }
+                         selectBox.on('change', function(evt) {
+                             var v = selectBox.val();
+                             // var parts = v.split(":");
+                             // var t = parts.shift();
+                             // v = parts.join(":");
+                             //
+                             // valueField.typedInput("type",'str')
+                             valueField.typedInput("value",v)
+                         });
+                         selectBox.val(valueField.typedInput("value"));
+                         // selectBox.val(valueField.typedInput('type')+":"+valueField.typedInput("value"));
+                     },
+                     expand: {
+                         icon: "fa-caret-down",
+                         minWidth: 400,
+                         content: function(container) {
+                             var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
+                             var optList = $('<ol>').appendTo(content).editableList({
+                                 header:$("<div><div>Label</div><div>Value</div></div>"),
+                                 addItem: function(row,index,itemData) {
+                                     var labelDiv = $('<div>').appendTo(row);
+                                     var label = lookupLabel(itemData.l, "", currentLocale);
+                                     itemData.label = $('<input type="text">').val(label).appendTo(labelDiv);
+                                     itemData.label.on('keydown', function(evt) {
+                                         if (evt.keyCode === 13) {
+                                             itemData.input.focus();
+                                             evt.preventDefault();
+                                         }
+                                     });
+                                     var labelIcon = $('<span class="red-ui-editor-subflow-env-lang-icon"><i class="fa fa-language"></i></span>').appendTo(labelDiv);
+                                     RED.popover.tooltip(labelIcon,function() {
+                                         return currentLocale;
+                                     })
+                                     itemData.input = $('<input type="text">').val(itemData.v).appendTo(row);
+
+                                     // Problem using a TI here:
+                                     //  - this is in a popout panel
+                                     //  - clicking the expand button in the TI will close the parent edit tray
+                                     //    and open the type editor.
+                                     //  - but it leaves the popout panel over the top.
+                                     //  - there is no way to get back to the popout panel after closing the type editor
+                                     //.typedInput({default:itemData.t||'str', types:['str','num','bool','json','bin','env']});
+                                     itemData.input.on('keydown', function(evt) {
+                                         if (evt.keyCode === 13) {
+                                             // Enter or Tab
+                                             var index = optList.editableList('indexOf',itemData);
+                                             var length = optList.editableList('length');
+                                             if (index + 1 === length) {
+                                                 var newItem = {};
+                                                 optList.editableList('addItem',newItem);
+                                                 setTimeout(function() {
+                                                     if (newItem.label) {
+                                                         newItem.label.focus();
+                                                     }
+                                                 },100)
+                                             } else {
+                                                 var nextItem = optList.editableList('getItemAt',index+1);
+                                                 if (nextItem.label) {
+                                                     nextItem.label.focus()
+                                                 }
+                                             }
+                                             evt.preventDefault();
+                                         }
+                                     });
+                                 },
+                                 sortable: true,
+                                 removable: true,
+                                 height: 160
+                             })
+                             if (ui.opts.opts.length > 0) {
+                                 ui.opts.opts.forEach(function(o) {
+                                     optList.editableList('addItem',$.extend(true,{},o))
+                                 })
+                             } else {
+                                 optList.editableList('addItem',{})
+                             }
+                             return {
+                                 onclose: function() {
+                                     var items = optList.editableList('items');
+                                     var vals = [];
+                                     items.each(function (i,el) {
+                                         var data = el.data('data');
+                                         var l = data.label.val().trim();
+                                         var v = data.input.val();
+                                         // var t = data.input.typedInput('type');
+                                         // var v = data.input.typedInput('value');
+                                         if (l.length > 0) {
+                                             data.l = data.l || {};
+                                             data.l[currentLocale] = l;
+                                         }
+                                         data.v = v;
+
+                                         if (l.length > 0 || v.length > 0) {
+                                             var val = {l:data.l,v:data.v};
+                                             // if (t !== 'str') {
+                                             //     val.t = t;
+                                             // }
+                                             vals.push(val);
+                                         }
+                                     });
+                                     ui.opts.opts = vals;
+                                     inputCellInput.typedInput('value',Date.now())
+                                 }
+                             }
+                         }
+                     }
+                 },
+                 {value:"checkbox",
+                    label:"checkbox", icon:"fa fa-check-square-o",showLabel:false,
+                     valueLabel: function(container,value) {
+                         container.css("padding",0);
+                         checkbox = $('<input type="checkbox">').appendTo(container);
+                         checkbox.on('change', function(evt) {
+                             valueField.typedInput('value',$(this).prop('checked')?"true":"false");
+                         })
+                         checkbox.prop('checked',valueField.typedInput('value')==="true");
+                     }
+                 },
+                 {value:"spinner",
+                    label:"spinner", icon:"fa fa-sort-numeric-asc", showLabel:false,
+                     valueLabel: function(container,value) {
+                         container.css("padding",0);
+                         var innerContainer = $('<div>').css({
+                             "background":"white",
+                             "height":"100%",
+                             "box-sizing": "border-box"
+                         }).appendTo(container);
+
+                         var input = $('<div class="placeholder-input">').appendTo(innerContainer);
+                         $('<span><i class="fa fa-sort-numeric-asc"></i></span>').appendTo(input);
+
+                         var min = ui.opts && ui.opts.min;
+                         var max = ui.opts && ui.opts.max;
+                         var label = "";
+                         if (min !== undefined && max !== undefined) {
+                             label = Math.min(min,max)+" - "+Math.max(min,max);
+                         } else if (min !== undefined) {
+                             label = "> "+min;
+                         } else if (max !== undefined) {
+                             label = "< "+max;
+                         }
+                         $('<span>').css("margin-left","15px").text(label).appendTo(input);
+                     },
+                     expand: {
+                         icon: "fa-caret-down",
+                         content: function(container) {
+                             var content = $('<div class="red-ui-editor-subflow-ui-edit-panel">').appendTo(container);
+                             content.css("padding","8px 5px")
+                             var min = ui.opts.min;
+                             var max = ui.opts.max;
+                             var minInput = $('<input type="number" style="margin-bottom:0; width:60px">');
+                             minInput.val(min);
+                             var maxInput = $('<input type="number" style="margin-bottom:0; width:60px">');
+                             maxInput.val(max);
+                             $('<div class="form-row" style="margin-bottom:3px"><label>Minimum</label></div>').append(minInput).appendTo(content);
+                             $('<div class="form-row" style="margin-bottom:0"><label>Maximum</label></div>').append(maxInput).appendTo(content);
+                             return {
+                                 onclose: function() {
+                                     var min = minInput.val().trim();
+                                     var max = maxInput.val().trim();
+                                     if (min !== "") {
+                                         ui.opts.min = parseInt(min);
+                                     } else {
+                                         delete ui.opts.min;
+                                     }
+                                     if (max !== "") {
+                                         ui.opts.max = parseInt(max);
+                                     } else {
+                                         delete ui.opts.max;
+                                     }
+                                     inputCellInput.typedInput('value',Date.now())
+                                 }
+                             }
+                         }
+                     }
+                 },
+                 {value:"none",
+                 label:"none", icon:"fa fa-times",hasValue:false},
+                 {value:"hide",
+                 label:"hide property", icon:"fa fa-ban",hasValue:false}
+
+             ],
+             default: 'none'
+         }).on("typedinputtypechange", function(evt,type) {
+             ui.type = $(this).typedInput("type");
+             ui.opts = typeOptions[ui.type];
+             if (ui.type === 'input') {
+                 // In the case of 'input' type, the typedInput uses the multiple-option
+                 // mode. Its value needs to be set to a comma-separately list of the
+                 // selected options.
+                 inputCellInput.typedInput('value',ui.opts.types.join(","))
+             } else {
+                 // No other type cares about `value`, but doing this will
+                 // force a refresh of the label now that `ui.opts` has
+                 // been updated.
+                 inputCellInput.typedInput('value',Date.now())
+             }
+
+             switch (ui.type) {
+                 case 'input':
+                    valueField.typedInput('types',ui.opts.types);
+                    break;
+                case 'select':
+                   valueField.typedInput('types',['str']);
+                   break;
+                 case 'checkbox':
+                    valueField.typedInput('types',['bool']);
+                    break;
+                case 'spinner':
+                    valueField.typedInput('types',['num'])
+                    break;
+                default:
+                    valueField.typedInput('types',['str','num','bool','json','bin','env'])
+             }
+             if (ui.type === 'checkbox') {
+                 valueField.typedInput('type','bool');
+             } else if (ui.type === 'spinner') {
+                 valueField.typedInput('type','num');
+             }
+             if (ui.type !== 'checkbox') {
+                 checkbox = null;
+             }
+
+         }).on("change", function(evt,type) {
+             if (ui.type === 'input') {
+                 ui.opts.types = inputCellInput.typedInput('value').split(",");
+                 valueField.typedInput('types',ui.opts.types);
+             }
+         });
+         valueField.on("change", function(evt) {
+             if (checkbox) {
+                 checkbox.prop('checked',$(this).typedInput('value')==="true")
+             }
+         })
+         // Set the input to the right type. This will trigger the 'typedinputtypechange'
+         // event handler (just above ^^) to update the value if needed
+         inputCellInput.typedInput('type',ui.type)
+    }
+
+    function buildEnvUIRow(row, tenv, ui) {
+
+        ui.label = ui.label||{};
+        ui.opts = ui.opts||{};
+        if (!ui.type) {
+            ui.type = "input";
+            ui.opts = {types:['str','num','bool','json','bin','env']}
+        } else {
+            ui.opts = ui.opts || {};
+        }
+
+        var labels = ui.label || {};
+        var labelText = lookupLabel(labels, labels["en-US"]||tenv.name, currentLocale);
+        var label = $('<label>').appendTo(row);
+        var labelContainer = $('<span></span>').appendTo(label);
+        if (ui.icon) {
+            var newPath = RED.utils.separateIconPath(ui.icon);
+            if (newPath) {
+                $("<i class='fa "+newPath.file +"'/>").appendTo(labelContainer);
+            }
+        }
+        if (ui.type !== "checkbox") {
+            $('<span>').css({"padding-left":"5px"}).text(labelText).appendTo(label);
+            if (ui.type === 'none') {
+                label.width('100%');
+            }
+        }
+        var input;
+        var val = {
+            value: "",
+            type: "str"
+        };
+        if (tenv.parent) {
+            val.value = tenv.parent.value;
+            val.type = tenv.parent.type;
+        }
+        if (tenv.hasOwnProperty('value')) {
+            val.value = tenv.value;
+        }
+        if (tenv.hasOwnProperty('type')) {
+            val.type = tenv.type;
+        }
+        switch(ui.type) {
+            case "input":
+                input = $('<input type="text">').css('width','70%').appendTo(row);
+                if (ui.opts.types && ui.opts.types.length > 0) {
+                    var inputType = val.type;
+                    if (ui.opts.types.indexOf(inputType) === -1) {
+                        inputType = ui.opts.types[0]
+                    }
+                    input.typedInput({
+                        types: ui.opts.types,
+                        default: inputType
+                    })
+                    input.typedInput('value',val.value)
+                } else {
+                    input.val(val.value)
+                }
+                break;
+            case "select":
+                input = $('<select>').css('width','70%').appendTo(row);
+                if (ui.opts.opts) {
+                    ui.opts.opts.forEach(function(o) {
+                        $('<option>').val(o.v).text(lookupLabel(o.l, o.l['en-US']||o.v, currentLocale)).appendTo(input);
+                    })
+                }
+                input.val(val.value);
+                break;
+            case "checkbox":
+                label.css("cursor","default");
+                var cblabel = $('<label>').css('width','70%').appendTo(row);
+                input = $('<input type="checkbox">').css({
+                    marginTop: 0,
+                    width: 'auto',
+                    height: '34px'
+                }).appendTo(cblabel);
+                labelContainer.css({"padding-left":"5px"}).appendTo(cblabel);
+                $('<span>').css({"padding-left":"5px"}).text(labelText).appendTo(cblabel);
+                var boolVal = false;
+                if (val.type === 'bool') {
+                    boolVal = val.value === 'true'
+                } else if (val.type === 'num') {
+                    boolVal = val.value !== "0"
+                } else {
+                    boolVal = val.value !== ""
+                }
+                input.prop("checked",boolVal);
+                break;
+            case "spinner":
+                input = $('<input>').css('width','70%').appendTo(row);
+                var spinnerOpts = {};
+                if (ui.opts.hasOwnProperty('min')) {
+                    spinnerOpts.min = ui.opts.min;
+                }
+                if (ui.opts.hasOwnProperty('max')) {
+                    spinnerOpts.max = ui.opts.max;
+                }
+                input.spinner(spinnerOpts).parent().width('70%');
+                input.val(val.value);
+                break;
+        }
+        if (input) {
+            input.attr('id',getSubflowEnvPropertyName(tenv.name))
+        }
+    }
+
+    /**
+     * Create environment variable input UI
+     * @param uiContainer - container for UI
+     * @param envList - env var definitions of template
+     */
+    function buildEnvUI(uiContainer, envList) {
+        uiContainer.empty();
+        var elementID = 0;
+        for (var i = 0; i < envList.length; i++) {
+            var tenv = envList[i];
+            if (tenv.ui && tenv.ui.type === 'hide') {
+                continue;
+            }
+            var row = $("<div/>", { class: "form-row" }).appendTo(uiContainer);
+            buildEnvUIRow(row,tenv, tenv.ui || {});
+
+            // console.log(ui);
+        }
+    }
+    // buildEnvUI
+
+    function exportEnvList(list, all) {
+        if (list) {
+            var env = [];
+            list.each(function(i) {
+                var entry = $(this);
+                var item = entry.data('data');
+                var name = (item.parent?item.name:item.nameField.val()).trim();
+                if (name !== "") {
+                    var valueInput = item.valueField;
+                    var value = valueInput.typedInput("value");
+                    var type = valueInput.typedInput("type");
+                    if (all || !item.parent || (item.parent.value !== value || item.parent.type !== type)) {
+                        var envItem = {
+                            name: name,
+                            type: type,
+                            value: value,
+                        };
+                        if (item.ui) {
+                            var ui = {
+                                icon: item.ui.icon,
+                                label: $.extend(true,{},item.ui.label),
+                                type: item.ui.type,
+                                opts: $.extend(true,{},item.ui.opts)
+                            }
+                            // Check to see if this is the default ui definition.
+                            // Delete any defaults to keep it compact
+                            // {
+                            //     icon: "",
+                            //     label: {},
+                            //     type: "input",
+                            //     opts: {types:['str','num','bool','json','bin','env']}
+                            // }
+                            if (!ui.icon) {
+                                delete ui.icon;
+                            }
+                            if ($.isEmptyObject(ui.label)) {
+                                delete ui.label;
+                            }
+                            switch (ui.type) {
+                                case "input":
+                                    if (JSON.stringify(ui.opts) === JSON.stringify({types:['str','num','bool','json','bin','env']})) {
+                                        // This is the default input config. Delete it as it will
+                                        // be applied automatically
+                                        delete ui.type;
+                                        delete ui.opts;
+                                    }
+                                    break;
+                                case "select":
+                                    if (ui.opts && $.isEmptyObject(ui.opts.opts)) {
+                                        // This is the default select config.
+                                        // Delete it as it will be applied automatically
+                                        delete ui.opts;
+                                    }
+                                    break;
+                                case "spinner":
+                                    if ($.isEmptyObject(ui.opts)) {
+                                        // This is the default spinner config.
+                                        // Delete as it will be applied automatically
+                                        delete ui.opts
+                                    }
+                                    break;
+                                default:
+                                    delete ui.opts;
+                            }
+                            if (!$.isEmptyObject(ui)) {
+                                envItem.ui = ui;
+                            }
+                        }
+                        env.push(envItem);
+                    }
+                }
+            });
+            return env;
+        }
+        return null;
+    }
+
+    function getSubflowInstanceParentEnv(node) {
+        var parentEnv = {};
+        var envList = [];
+        if (/^subflow:/.test(node.type)) {
+            var subflowDef = RED.nodes.subflow(node.type.substring(8));
+            if (subflowDef.env) {
+                subflowDef.env.forEach(function(env) {
+                    var item = {
+                        name:env.name,
+                        parent: {
+                            type: env.type,
+                            value: env.value
+                        },
+                        ui: env.ui
+                    }
+                    envList.push(item);
+                    parentEnv[env.name] = item;
+                })
+            }
+        }
+
+        if (node.env) {
+            for (var i = 0; i < node.env.length; i++) {
+                var env = node.env[i];
+                if (parentEnv.hasOwnProperty(env.name)) {
+                    parentEnv[env.name].type = env.type;
+                    parentEnv[env.name].value = env.value;
+                } else {
+                    // envList.push({
+                    //     name: env.name,
+                    //     type: env.type,
+                    //     value: env.value,
+                    // });
+                }
+            }
+        }
+        return envList;
+    }
+
+    function exportSubflowInstanceEnv(node) {
+        var env = [];
+
+        // First, get the values for the SubflowTemplate defined properties
+        //  - these are the ones with custom UI elements
+        var parentEnv = getSubflowInstanceParentEnv(node);
+        parentEnv.forEach(function(data) {
+            var item;
+            var ui = data.ui || {};
+            if (!ui.type) {
+                ui.type = "input";
+                ui.opts = {types:['str','num','bool','json','bin','env']}
+            } else {
+                ui.opts = ui.opts || {};
+            }
+            var input = $("#"+getSubflowEnvPropertyName(data.name));
+            if (input.length) {
+                item = { name: data.name };
+                switch(ui.type) {
+                    case "input":
+                        if (ui.opts.types && ui.opts.types.length > 0) {
+                            item.value = input.typedInput('value');
+                            item.type = input.typedInput('type');
+                        } else {
+                            item.value = input.val();
+                            item.type = 'str';
+                        }
+                        break;
+                    case "spinner":
+                        item.value = input.val();
+                        item.type = 'num';
+                        break;
+                    case "select":
+                        item.value = input.val();
+                        item.type = 'str';
+                        break;
+                    case "checkbox":
+                        item.type = 'bool';
+                        item.value = ""+input.prop("checked");
+                        break;
+                }
+                if (item.type !== data.parent.type || item.value !== data.parent.value) {
+                    env.push(item);
+                }
+            }
+        })
+        // Second, get the values from the Properties table tab
+        var items = $('#red-ui-editor-subflow-env-list').editableList('items');
+        items.each(function (i,el) {
+            var data = el.data('data');
+            var item;
+            if (data.nameField && data.valueField) {
+                item = {
+                    name: data.nameField.val(),
+                    value: data.valueField.typedInput("value"),
+                    type: data.valueField.typedInput("type")
+                }
+                if (item.name.trim() !== "") {
+                    env.push(item);
+                }
+            }
+        });
+        return env;
+    }
+
+    function getSubflowEnvPropertyName(name) {
+        return 'node-input-subflow-env-'+name.replace(/\s/g,"_");
+    }
+
+    /**
+     * Lookup text for specific locale
+     * @param labels - dict of labels
+     * @param defaultLabel - fallback label if not found
+     * @param locale - target locale
+     * @returns {string} text for specified locale
+     */
+    function lookupLabel(labels, defaultLabel, locale) {
+        if (labels) {
+            if (labels[locale]) {
+                return labels[locale];
+            }
+            if (locale) {
+                var lang = locale.substring(0, 2);
+                if (labels[lang]) {
+                    return labels[lang];
+                }
+            }
+        }
+        return defaultLabel;
+    }
+
+    function buildEditForm(container,type,node) {
+        if (type === "subflow-template") {
+            buildPropertiesList($('#node-input-env-container'), node);
+        } else  if (type === "subflow") {
+            buildEnvUI($("#subflow-input-ui"), getSubflowInstanceParentEnv(node));
+        }
+    }
+    function buildPropertiesForm(container, node) {
+        var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
+        var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
+        var list = $('<ol id="red-ui-editor-subflow-env-list" class="red-ui-editor-subflow-env-list"></ol>').appendTo(listContainer);
+        buildPropertiesList(list, node);
+    }
+
     return {
         init: init,
         createSubflow: createSubflow,
@@ -755,6 +1708,14 @@ RED.subflow = (function() {
         refresh: refresh,
         removeInput: removeSubflowInput,
         removeOutput: removeSubflowOutput,
-        removeStatus: removeSubflowStatus
+        removeStatus: removeSubflowStatus,
+
+
+        buildEditForm: buildEditForm,
+        buildPropertiesForm: buildPropertiesForm,
+
+        exportSubflowTemplateEnv: exportEnvList,
+        exportSubflowInstanceEnv: exportSubflowInstanceEnv
+
     }
 })();

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

@@ -912,6 +912,10 @@ RED.utils = (function() {
     }
 
     var nodeColorCache = {};
+    function clearNodeColorCache() {
+        nodeColorCache = {};
+    }
+
     function getNodeColor(type, def) {
         var result = def.color;
         var paletteTheme = RED.settings.theme('palette.theme') || [];
@@ -1044,6 +1048,7 @@ RED.utils = (function() {
         getNodeIcon: getNodeIcon,
         getNodeLabel: getNodeLabel,
         getNodeColor: getNodeColor,
+        clearNodeColorCache: clearNodeColorCache,
         addSpinnerOverlay: addSpinnerOverlay,
         decodeObject: decodeObject,
         parseContextKey: parseContextKey,

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

@@ -108,6 +108,168 @@ RED.view.tools = (function() {
         }
     }
 
+    function layoutFlow() {
+
+        var selection = RED.view.selection();
+        if (!selection.nodes || selection.nodes.length !== 1) {
+            RED.notify("Select exactly one node");
+            return;
+        }
+        var ns = RED.nodes.getAllFlowNodes(selection.nodes[0]);
+
+        // Find Input node
+
+        var nodes = {};
+        var minRank = 0;
+        var stack = [];
+        var candidateInputs = {};
+        var candidateOutputs = {};
+        ns.forEach(function(n) {
+            candidateInputs[n.id] = n;
+            candidateOutputs[n.id] = n;
+            nodes[n.id] = {
+                n:n,
+                i:[],
+                o:[],
+                d:-1, // depth from start
+                r:-1, // rank order at that depth
+                downstream: 0
+            }
+        });
+        RED.nodes.eachLink(function(link) {
+            if (nodes[link.source.id] || nodes[link.target.id]) {
+                nodes[link.source.id].o.push(link.target.id);
+                nodes[link.target.id].i.push(link.source.id);
+                delete candidateInputs[link.target.id]
+                delete candidateOutputs[link.source.id]
+            }
+        })
+
+        var inputs = Object.keys(candidateInputs);
+        var outputs = Object.keys(candidateOutputs);
+
+        if (inputs.length > 1) {
+            RED.notify("Multiple start points - bailing")
+            return;
+        }
+
+       if (outputs.length === 0) {
+           RED.notify("No outputs - is this a big loop? Bailing");
+           return;
+       }
+
+        function applyDepth(id,d) {
+            if (nodes[id].d < d) {
+                nodes[id].d = d;
+                nodes[id].o.forEach(function(nid) {
+                    applyDepth(nid,d+1);
+                })
+            }
+        }
+        applyDepth(inputs[0],0)
+
+        function calculateDownstream(id,downstream) {
+            nodes[id].downstream += downstream;
+            nodes[id].i.forEach(function(nid) {
+                calculateDownstream(nid, nodes[id].downstream+1);
+            })
+        }
+        outputs.forEach(function(id) {
+            calculateDownstream(id, 0)
+        })
+
+        var ranks = {};
+        function rankNodes(node) {
+            if (node.r === -1) {
+                ranks[node.d] = ranks[node.d] || [];
+                node.r = ranks[node.d].length;
+                ranks[node.d].push(node);
+                node.o.sort(function(a,b) {
+                    return nodes[b].downstream - nodes[a].downstream
+                })
+                node.o.forEach(function(nid) {
+                    rankNodes(nodes[nid])
+                })
+            }
+        }
+        rankNodes(nodes[inputs[0]]);
+        function shuffleRanks(node) {
+            var pushed = false;
+            if (node.o.length > 1) {
+                var outputs = node.o.slice(0);
+                outputs.sort(function(a,b) {
+                    if (nodes[a].d === nodes[b].d) {
+                        return nodes[a].r - nodes[b].r;
+                    } else {
+                        return nodes[b].d - nodes[a].d;
+                    }
+                })
+                // outputs.forEach(function(o,i) { console.log(" ",i," + "+nodes[o].n.type," d:",nodes[o].d," r:",nodes[o].r)});
+                var rank = nodes[outputs[0]].r;
+                var depth = nodes[outputs[0]].d;
+                for (var i=1;i<outputs.length;i++) {
+                    // console.log(outputs[i]);
+                    var n = nodes[outputs[i]];
+                    if (n.d !== depth && n.r === rank) {
+                        // need to move n down one.
+                        var r = n.r;
+                        ns.forEach(function(_n) {
+                            var nn = nodes[_n.id];
+                            if (nn.d >= n.d && nn.d < depth && nn.r >= r) {
+                                pushed = true;
+                                nn.r++;
+                            }
+                        })
+                    }
+                    depth = n.d;
+                    rank = n.r;
+                }
+            }
+            node.o.forEach(function(n) {
+                pushed = pushed || shuffleRanks(nodes[n])
+            })
+            return pushed;
+        }
+        var shuffle = function() {
+            if (shuffleRanks(nodes[inputs[0]])) {
+                shuffle();
+            }
+        }
+        shuffle();
+
+
+        var x = nodes[inputs[0]].n.x;
+        var y = nodes[inputs[0]].n.y;
+        var changedNodes = [];
+        ns.forEach(function(n) {
+            var d = nodes[n.id].d;
+            var r = nodes[n.id].r;
+
+            changedNodes.push({
+                n:n,
+                ox: n.x,
+                oy: n.y,
+                moved: n.moved
+            });
+
+            n.x = x + d*200;
+            n.y = y + r*50;
+            n.dirty = true;
+            // n.dirtyStatus = true;
+            // n.status = {
+            //     text:"d"+d+" : r"+r+" : ds"+nodes[n.id].downstream
+            // }
+        });
+
+        if (changedNodes.length > 0) {
+            RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()});
+            RED.nodes.dirty(true);
+            RED.view.redraw(true);
+        }
+
+    }
+
+
     return {
         init: function() {
             RED.actions.add("core:align-selection-to-grid", alignToGrid);
@@ -121,6 +283,8 @@ RED.view.tools = (function() {
             RED.actions.add("core:step-selection-right", function() { moveSelection(RED.view.gridSize(),0);});
             RED.actions.add("core:step-selection-down", function() { moveSelection(0,RED.view.gridSize());});
             RED.actions.add("core:step-selection-left", function() { moveSelection(-RED.view.gridSize(),0);});
+
+            RED.actions.add("core:layout-flow", function() { layoutFlow() })
         },
         /**
          * Aligns all selected nodes to the current grid

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

@@ -358,7 +358,7 @@ RED.view = (function() {
 
                 var spliceLink = $(ui.helper).data("splice");
                 if (spliceLink) {
-                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp
+                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
                     RED.nodes.removeLink(spliceLink);
                     var link1 = {
                         source:spliceLink.source,
@@ -406,6 +406,7 @@ RED.view = (function() {
         RED.actions.add("core:delete-selection",deleteSelection);
         RED.actions.add("core:edit-selected-node",editSelection);
         RED.actions.add("core:undo",RED.history.pop);
+        RED.actions.add("core:redo",RED.history.redo);
         RED.actions.add("core:select-all-nodes",selectAll);
         RED.actions.add("core:zoom-in",zoomIn);
         RED.actions.add("core:zoom-out",zoomOut);
@@ -694,280 +695,8 @@ RED.view = (function() {
         }
         if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) {
             if (d3.event.metaKey || d3.event.ctrlKey) {
-                point = d3.mouse(this);
-                var ox = point[0];
-                var oy = point[1];
-
-                if (RED.settings.get("editor").view['view-snap-grid']) {
-                    // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red')
-                    point[0] = Math.round(point[0] / gridSize) * gridSize;
-                    point[1] = Math.round(point[1] / gridSize) * gridSize;
-                    // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','blue')
-                }
-
                 d3.event.stopPropagation();
-                var mainPos = $("#red-ui-main-container").position();
-
-                if (mouse_mode !== RED.state.QUICK_JOINING) {
-                    mouse_mode = RED.state.QUICK_JOINING;
-                    $(window).on('keyup',disableQuickJoinEventHandler);
-                }
-                quickAddActive = true;
-
-                if (ghostNode) {
-                    ghostNode.remove();
-                }
-                ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
-                ghostNode.append("rect")
-                    .attr("class","red-ui-flow-node-placeholder")
-                    .attr("rx", 5)
-                    .attr("ry", 5)
-                    .attr("width",node_width)
-                    .attr("height",node_height)
-                    .attr("fill","none")
-                // var ghostLink = ghostNode.append("svg:path")
-                //     .attr("class","red-ui-flow-link-link")
-                //     .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2))
-                //     .attr("opacity",0);
-
-                var filter = undefined;
-                if (drag_lines.length > 0) {
-                    if (drag_lines[0].virtualLink) {
-                        filter = {type:drag_lines[0].node.type === 'link in'?'link out':'link in'}
-                    } else if (drag_lines[0].portType === PORT_TYPE_OUTPUT) {
-                        filter = {input:true}
-                    } else {
-                        filter = {output:true}
-                    }
-
-                    quickAddLink = {
-                        node: drag_lines[0].node,
-                        port: drag_lines[0].port,
-                        portType: drag_lines[0].portType,
-                    }
-                    if (drag_lines[0].virtualLink) {
-                        quickAddLink.virtualLink = true;
-                    }
-                    hideDragLines();
-                }
-                var rebuildQuickAddLink = function() {
-                    if (!quickAddLink) {
-                        return;
-                    }
-                    if (!quickAddLink.el) {
-                        quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
-                    }
-                    var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
-                    var sourcePort = quickAddLink.port;
-                    var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
-                    var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1;
-                    quickAddLink.el.attr("d",generateLinkPath(quickAddLink.node.x+sc*quickAddLink.node.w/2,quickAddLink.node.y+portY,point[0]-sc*node_width/2,point[1],sc));
-                }
-                if (quickAddLink) {
-                    rebuildQuickAddLink();
-                }
-
-
-                var lastAddedX;
-                var lastAddedWidth;
-
-                RED.typeSearch.show({
-                    x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
-                    y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
-                    filter: filter,
-                    move: function(dx,dy) {
-                        if (ghostNode) {
-                            var pos = d3.transform(ghostNode.attr("transform")).translate;
-                            ghostNode.attr("transform","translate("+(pos[0]+dx)+","+(pos[1]+dy)+")")
-                            point[0] += dx;
-                            point[1] += dy;
-                            rebuildQuickAddLink();
-                        }
-                    },
-                    cancel: function() {
-                        if (quickAddLink) {
-                            if (quickAddLink.el) {
-                                quickAddLink.el.remove();
-                            }
-                            quickAddLink = null;
-                        }
-                        quickAddActive = false;
-                        if (ghostNode) {
-                            ghostNode.remove();
-                        }
-                        resetMouseVars();
-                        updateSelection();
-                        hideDragLines();
-                        redraw();
-                    },
-                    add: function(type,keepAdding) {
-                        var result = addNode(type);
-                        if (!result) {
-                            return;
-                        }
-                        if (keepAdding) {
-                            mouse_mode = RED.state.QUICK_JOINING;
-                        }
-
-                        var nn = result.node;
-                        var historyEvent = result.historyEvent;
-                        nn.x = point[0];
-                        nn.y = point[1];
-                        var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
-                        if (showLabel !== undefined && !/^link (in|out)$/.test(nn._def.type) && !nn._def.defaults.hasOwnProperty("l")) {
-                            nn.l = showLabel;
-                        }
-                        if (quickAddLink) {
-                            var drag_line = quickAddLink;
-                            var src = null,dst,src_port;
-                            if (drag_line.portType === PORT_TYPE_OUTPUT && (nn.inputs > 0 || drag_line.virtualLink) ) {
-                                src = drag_line.node;
-                                src_port = drag_line.port;
-                                dst = nn;
-                            } else if (drag_line.portType === PORT_TYPE_INPUT && (nn.outputs > 0 || drag_line.virtualLink)) {
-                                src = nn;
-                                dst = drag_line.node;
-                                src_port = 0;
-                            }
-
-                            if (src !== null) {
-                                // Joining link nodes via virual wires. Need to update
-                                // the src and dst links property
-                                if (drag_line.virtualLink) {
-                                    historyEvent = {
-                                        t:'multi',
-                                        events: [historyEvent]
-                                    }
-                                    var oldSrcLinks = $.extend(true,{},{v:src.links}).v
-                                    var oldDstLinks = $.extend(true,{},{v:dst.links}).v
-                                    src.links.push(dst.id);
-                                    dst.links.push(src.id);
-                                    src.dirty = true;
-                                    dst.dirty = true;
-
-                                    historyEvent.events.push({
-                                        t:'edit',
-                                        node: src,
-                                        dirty: RED.nodes.dirty(),
-                                        changed: src.changed,
-                                        changes: {
-                                            links:oldSrcLinks
-                                        }
-                                    });
-                                    historyEvent.events.push({
-                                        t:'edit',
-                                        node: dst,
-                                        dirty: RED.nodes.dirty(),
-                                        changed: dst.changed,
-                                        changes: {
-                                            links:oldDstLinks
-                                        }
-                                    });
-                                    src.changed = true;
-                                    dst.changed = true;
-                                } else {
-                                    var link = {source: src, sourcePort:src_port, target: dst};
-                                    RED.nodes.addLink(link);
-                                    historyEvent.links = [link];
-                                }
-                                if (!keepAdding) {
-                                    quickAddLink.el.remove();
-                                    quickAddLink = null;
-                                    if (mouse_mode === RED.state.QUICK_JOINING) {
-                                        if (drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
-                                            showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
-                                        } else if (!quickAddLink && drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
-                                            showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
-                                        } else {
-                                            resetMouseVars();
-                                        }
-                                    }
-                                } else {
-                                    quickAddLink.node = nn;
-                                    quickAddLink.port = 0;
-                                }
-                            } else {
-                                hideDragLines();
-                                resetMouseVars();
-                            }
-                        } else {
-                            if (!keepAdding) {
-                                if (mouse_mode === RED.state.QUICK_JOINING) {
-                                    if (nn.outputs > 0) {
-                                        showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
-                                    } else if (nn.inputs > 0) {
-                                        showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
-                                    } else {
-                                        resetMouseVars();
-                                    }
-                                }
-                            } else {
-                                if (nn.outputs > 0) {
-                                    quickAddLink = {
-                                        node: nn,
-                                        port: 0,
-                                        portType: PORT_TYPE_OUTPUT
-                                    }
-                                } else if (nn.inputs > 0) {
-                                    quickAddLink = {
-                                        node: nn,
-                                        port: 0,
-                                        portType: PORT_TYPE_INPUT
-                                    }
-                                } else {
-                                    resetMouseVars();
-                                }
-                            }
-                        }
-
-                        RED.history.push(historyEvent);
-                        RED.nodes.add(nn);
-                        RED.editor.validateNode(nn);
-                        RED.nodes.dirty(true);
-                        // auto select dropped node - so info shows (if visible)
-                        clearSelection();
-                        nn.selected = true;
-                        moving_set.push({n:nn});
-                        updateActiveNodes();
-                        updateSelection();
-                        redraw();
-                        // At this point the newly added node will have a real width,
-                        // so check if the position needs nudging
-                        if (lastAddedX !== undefined) {
-                            var lastNodeRHEdge = lastAddedX + lastAddedWidth/2;
-                            var thisNodeLHEdge = nn.x - nn.w/2;
-                            var gap = thisNodeLHEdge - lastNodeRHEdge;
-                            if (gap != gridSize *2) {
-                                nn.x = nn.x + gridSize * 2 - gap;
-                                nn.dirty = true;
-                                nn.x = Math.ceil(nn.x / gridSize) * gridSize;
-                                redraw();
-                            }
-                        }
-                        if (keepAdding) {
-                            if (lastAddedX === undefined) {
-                                // ghostLink.attr("opacity",1);
-                                setTimeout(function() {
-                                    RED.typeSearch.refresh({filter:{input:true}});
-                                },100);
-                            }
-
-                            lastAddedX = nn.x;
-                            lastAddedWidth = nn.w;
-
-                            point[0] = nn.x + nn.w/2 + node_width/2 + gridSize * 2;
-                            ghostNode.attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
-                            rebuildQuickAddLink();
-                        } else {
-                            quickAddActive = false;
-                            ghostNode.remove();
-                        }
-                    }
-                });
-
-                updateActiveNodes();
-                updateSelection();
-                redraw();
+                showQuickAddDialog(d3.mouse(this));
             }
         }
         if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
@@ -988,6 +717,302 @@ RED.view = (function() {
         }
     }
 
+    function showQuickAddDialog(point,spliceLink) {
+        var ox = point[0];
+        var oy = point[1];
+
+        if (RED.settings.get("editor").view['view-snap-grid']) {
+            // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red')
+            point[0] = Math.round(point[0] / gridSize) * gridSize;
+            point[1] = Math.round(point[1] / gridSize) * gridSize;
+            // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','blue')
+        }
+
+        var mainPos = $("#red-ui-main-container").position();
+
+        if (mouse_mode !== RED.state.QUICK_JOINING) {
+            mouse_mode = RED.state.QUICK_JOINING;
+            $(window).on('keyup',disableQuickJoinEventHandler);
+        }
+        quickAddActive = true;
+
+        if (ghostNode) {
+            ghostNode.remove();
+        }
+        ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
+        ghostNode.append("rect")
+            .attr("class","red-ui-flow-node-placeholder")
+            .attr("rx", 5)
+            .attr("ry", 5)
+            .attr("width",node_width)
+            .attr("height",node_height)
+            .attr("fill","none")
+        // var ghostLink = ghostNode.append("svg:path")
+        //     .attr("class","red-ui-flow-link-link")
+        //     .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2))
+        //     .attr("opacity",0);
+
+        var filter = undefined;
+        if (drag_lines.length > 0) {
+            if (drag_lines[0].virtualLink) {
+                filter = {type:drag_lines[0].node.type === 'link in'?'link out':'link in'}
+            } else if (drag_lines[0].portType === PORT_TYPE_OUTPUT) {
+                filter = {input:true}
+            } else {
+                filter = {output:true}
+            }
+
+            quickAddLink = {
+                node: drag_lines[0].node,
+                port: drag_lines[0].port,
+                portType: drag_lines[0].portType,
+            }
+            if (drag_lines[0].virtualLink) {
+                quickAddLink.virtualLink = true;
+            }
+            hideDragLines();
+        } else if (spliceLink) {
+            filter = {input:true, output:true}
+        }
+        var rebuildQuickAddLink = function() {
+            if (!quickAddLink) {
+                return;
+            }
+            if (!quickAddLink.el) {
+                quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
+            }
+            var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
+            var sourcePort = quickAddLink.port;
+            var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
+            var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1;
+            quickAddLink.el.attr("d",generateLinkPath(quickAddLink.node.x+sc*quickAddLink.node.w/2,quickAddLink.node.y+portY,point[0]-sc*node_width/2,point[1],sc));
+        }
+        if (quickAddLink) {
+            rebuildQuickAddLink();
+        }
+
+
+        var lastAddedX;
+        var lastAddedWidth;
+
+        RED.typeSearch.show({
+            x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
+            y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
+            filter: filter,
+            move: function(dx,dy) {
+                if (ghostNode) {
+                    var pos = d3.transform(ghostNode.attr("transform")).translate;
+                    ghostNode.attr("transform","translate("+(pos[0]+dx)+","+(pos[1]+dy)+")")
+                    point[0] += dx;
+                    point[1] += dy;
+                    rebuildQuickAddLink();
+                }
+            },
+            cancel: function() {
+                if (quickAddLink) {
+                    if (quickAddLink.el) {
+                        quickAddLink.el.remove();
+                    }
+                    quickAddLink = null;
+                }
+                quickAddActive = false;
+                if (ghostNode) {
+                    ghostNode.remove();
+                }
+                resetMouseVars();
+                updateSelection();
+                hideDragLines();
+                redraw();
+            },
+            add: function(type,keepAdding) {
+                var result = addNode(type);
+                if (!result) {
+                    return;
+                }
+                if (keepAdding) {
+                    mouse_mode = RED.state.QUICK_JOINING;
+                }
+
+                var nn = result.node;
+                var historyEvent = result.historyEvent;
+                nn.x = point[0];
+                nn.y = point[1];
+                var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
+                if (showLabel !== undefined && !/^link (in|out)$/.test(nn._def.type) && !nn._def.defaults.hasOwnProperty("l")) {
+                    nn.l = showLabel;
+                }
+                if (!spliceLink) {
+                    if (quickAddLink) {
+                        var drag_line = quickAddLink;
+                        var src = null,dst,src_port;
+                        if (drag_line.portType === PORT_TYPE_OUTPUT && (nn.inputs > 0 || drag_line.virtualLink) ) {
+                            src = drag_line.node;
+                            src_port = drag_line.port;
+                            dst = nn;
+                        } else if (drag_line.portType === PORT_TYPE_INPUT && (nn.outputs > 0 || drag_line.virtualLink)) {
+                            src = nn;
+                            dst = drag_line.node;
+                            src_port = 0;
+                        }
+
+                        if (src !== null) {
+                            // Joining link nodes via virual wires. Need to update
+                            // the src and dst links property
+                            if (drag_line.virtualLink) {
+                                historyEvent = {
+                                    t:'multi',
+                                    events: [historyEvent]
+                                }
+                                var oldSrcLinks = $.extend(true,{},{v:src.links}).v
+                                var oldDstLinks = $.extend(true,{},{v:dst.links}).v
+                                src.links.push(dst.id);
+                                dst.links.push(src.id);
+                                src.dirty = true;
+                                dst.dirty = true;
+
+                                historyEvent.events.push({
+                                    t:'edit',
+                                    node: src,
+                                    dirty: RED.nodes.dirty(),
+                                    changed: src.changed,
+                                    changes: {
+                                        links:oldSrcLinks
+                                    }
+                                });
+                                historyEvent.events.push({
+                                    t:'edit',
+                                    node: dst,
+                                    dirty: RED.nodes.dirty(),
+                                    changed: dst.changed,
+                                    changes: {
+                                        links:oldDstLinks
+                                    }
+                                });
+                                src.changed = true;
+                                dst.changed = true;
+                            } else {
+                                var link = {source: src, sourcePort:src_port, target: dst};
+                                RED.nodes.addLink(link);
+                                historyEvent.links = [link];
+                            }
+                            if (!keepAdding) {
+                                quickAddLink.el.remove();
+                                quickAddLink = null;
+                                if (mouse_mode === RED.state.QUICK_JOINING) {
+                                    if (drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
+                                        showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
+                                    } else if (!quickAddLink && drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
+                                        showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
+                                    } else {
+                                        resetMouseVars();
+                                    }
+                                }
+                            } else {
+                                quickAddLink.node = nn;
+                                quickAddLink.port = 0;
+                            }
+                        } else {
+                            hideDragLines();
+                            resetMouseVars();
+                        }
+                    } else {
+                        if (!keepAdding) {
+                            if (mouse_mode === RED.state.QUICK_JOINING) {
+                                if (nn.outputs > 0) {
+                                    showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
+                                } else if (nn.inputs > 0) {
+                                    showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
+                                } else {
+                                    resetMouseVars();
+                                }
+                            }
+                        } else {
+                            if (nn.outputs > 0) {
+                                quickAddLink = {
+                                    node: nn,
+                                    port: 0,
+                                    portType: PORT_TYPE_OUTPUT
+                                }
+                            } else if (nn.inputs > 0) {
+                                quickAddLink = {
+                                    node: nn,
+                                    port: 0,
+                                    portType: PORT_TYPE_INPUT
+                                }
+                            } else {
+                                resetMouseVars();
+                            }
+                        }
+                    }
+                } else {
+                    resetMouseVars();
+                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
+                    RED.nodes.removeLink(spliceLink);
+                    var link1 = {
+                        source:spliceLink.source,
+                        sourcePort:spliceLink.sourcePort,
+                        target: nn
+                    };
+                    var link2 = {
+                        source:nn,
+                        sourcePort:0,
+                        target: spliceLink.target
+                    };
+                    RED.nodes.addLink(link1);
+                    RED.nodes.addLink(link2);
+                    historyEvent.links = [link1,link2];
+                    historyEvent.removedLinks = [spliceLink];
+                }
+                RED.history.push(historyEvent);
+                RED.nodes.add(nn);
+                RED.editor.validateNode(nn);
+                RED.nodes.dirty(true);
+                // auto select dropped node - so info shows (if visible)
+                clearSelection();
+                nn.selected = true;
+                moving_set.push({n:nn});
+                updateActiveNodes();
+                updateSelection();
+                redraw();
+                // At this point the newly added node will have a real width,
+                // so check if the position needs nudging
+                if (lastAddedX !== undefined) {
+                    var lastNodeRHEdge = lastAddedX + lastAddedWidth/2;
+                    var thisNodeLHEdge = nn.x - nn.w/2;
+                    var gap = thisNodeLHEdge - lastNodeRHEdge;
+                    if (gap != gridSize *2) {
+                        nn.x = nn.x + gridSize * 2 - gap;
+                        nn.dirty = true;
+                        nn.x = Math.ceil(nn.x / gridSize) * gridSize;
+                        redraw();
+                    }
+                }
+                if (keepAdding) {
+                    if (lastAddedX === undefined) {
+                        // ghostLink.attr("opacity",1);
+                        setTimeout(function() {
+                            RED.typeSearch.refresh({filter:{input:true}});
+                        },100);
+                    }
+
+                    lastAddedX = nn.x;
+                    lastAddedWidth = nn.w;
+
+                    point[0] = nn.x + nn.w/2 + node_width/2 + gridSize * 2;
+                    ghostNode.attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
+                    rebuildQuickAddLink();
+                } else {
+                    quickAddActive = false;
+                    ghostNode.remove();
+                }
+            }
+        });
+
+        updateActiveNodes();
+        updateSelection();
+        redraw();
+    }
+
     function canvasMouseMove() {
         var i;
         var node;
@@ -3166,7 +3191,7 @@ RED.view = (function() {
                                     var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
                                     thisNode.selectAll(".red-ui-flow-node-status").style("display","inline").attr("class","red-ui-flow-node-status "+statusClass);
                                 }
-                                if (d.status.text) {
+                                if (d.status.hasOwnProperty('text')) {
                                     thisNode.selectAll(".red-ui-flow-node-status-label").text(d.status.text);
                                 } else {
                                     thisNode.selectAll(".red-ui-flow-node-status-label").text("");
@@ -3204,6 +3229,10 @@ RED.view = (function() {
                         redraw();
                         focusView();
                         d3.event.stopPropagation();
+                        if (d3.event.metaKey || d3.event.ctrlKey) {
+                            l.classed("red-ui-flow-link-splice",true);
+                            showQuickAddDialog(d3.mouse(this), selected_link);
+                        }
                     })
                     .on("touchstart",function(d) {
                         if (mouse_mode === RED.state.SELECTING_NODE) {

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

@@ -60,10 +60,12 @@
 .red-ui-icon-picker {
     a {
         text-decoration: none;
+        color: $primary-text-color;
     }
     a:hover,
     a:focus {
         text-decoration: none;
+        color: $primary-text-color;
     }
 
     p {

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

@@ -79,6 +79,9 @@
     }
 
     a {
+        img {
+            max-width: 14px;
+        }
         .fa {
             width: 20px;
             margin-left: -25px;

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

@@ -190,6 +190,10 @@ button.red-ui-tray-resize-button {
         border-color: $form-input-border-error-color !important;
     }
 
+    .input-updated {
+        border-color: $node-selected-color !important;
+    }
+
     .form-row {
         clear: both;
         color: $form-text-color;
@@ -388,28 +392,26 @@ button.red-ui-button-small
     }
 }
 
-
-#red-ui-editor-node-icon-button {
+button.red-ui-button.red-ui-editor-node-appearance-button {
     position: relative;
-    padding-left: 30px;
-    width: calc(100% - 150px);
+    height: 35px !important;
+    text-align: left;
+    padding: 0 6px  0 3px;
+    >i {
+        width: 15px;
+        vertical-align: middle;
+        padding-left: 2px;
+    }
     .red-ui-search-result-node {
-        position: absolute;
-        top: 2px;
-        left: 2px;
+        vertical-align: middle;
+        float: none;
+        position: relative;
+        top: -1px;
+
     }
 }
-#red-ui-editor-node-icon {
-    margin-left: 10px;
-    width: calc(100% - 163px);
-}
+
 .red-ui-icon-picker {
-    position: absolute;
-    border: 1px solid $primary-border-color;
-    box-shadow: 0 1px 6px -3px black;
-    background: $secondary-background;
-    z-Index: 21;
-    display: none;
     select {
         box-sizing: border-box;
         margin: 3px;
@@ -421,6 +423,16 @@ button.red-ui-button-small
     height: 200px;
     overflow-y: scroll;
     line-height: 0px;
+    position: relative;
+    &.red-ui-icon-list-dark {
+        .red-ui-palette-icon-fa {
+            color: $secondary-text-color;
+        }
+        .red-ui-palette-icon-container {
+            background: $secondary-background;
+            border-radius: 4px;
+        }
+    }
 }
 .red-ui-icon-list-icon {
     display: inline-block;
@@ -428,6 +440,7 @@ button.red-ui-button-small
     padding: 4px;
     cursor: pointer;
     border-radius: 4px;
+
     &:hover {
         background: $list-item-background-hover;
     }
@@ -579,3 +592,406 @@ button.red-ui-button-small
 button.red-ui-toggleButton.toggle {
     text-align: left;
 }
+
+
+.red-ui-editor-subflow-env-ui-row {
+    margin-right: 3px;
+    >div {
+        display: grid;
+        grid-template-columns: 16px 40px 35% auto;
+    }
+    >div:first-child {
+        font-size: 0.9em;
+        color: $tertiary-text-color;
+        margin: 3px 0 -4px;
+        >div {
+            padding-left: 3px;
+        }
+    }
+    >div:last-child {
+        >div {
+            height: 40px;
+            line-height: 30px;
+            display: inline-block;
+            box-sizing: border-box;
+            // border-left: 2px dashed $secondary-border-color;
+            // border-bottom: 2px dashed $secondary-border-color;
+            // border: 1px dashed $secondary-border-color;
+            border-right: none;
+            &:not(:first-child) {
+                padding: 3px;
+            }
+            // &:last-child {
+            //     border-right: 1px dashed $secondary-border-color;
+            // }
+            .placeholder-input {
+                position: relative;
+                padding: 0 3px;
+                line-height: 24px;
+                opacity: 0.8
+            }
+            .red-ui-typedInput-value-label,.red-ui-typedInput-option-label {
+                select,.placeholder-input  {
+                    margin: 3px;
+                    height: 26px;
+                    width: calc(100% - 10px);
+                    padding-left: 3px;
+                }
+                .placeholder-input {
+                    span:first-child {
+                        display:inline-block;
+                        height: 100%;
+                        width: 20px;
+                        text-align:center;
+                        border-right: 1px solid $secondary-border-color;
+                        background: $tertiary-background;
+                    }
+                }
+                input[type="checkbox"] {
+                    margin-left: 8px;
+                    margin-top: 0;
+                    height: 100%;
+                }
+            }
+        }
+        >div:nth-child(1) {
+            border: none;
+            padding: 2px;
+            .red-ui-editableList-item-handle {
+                position:relative;
+                top: 0px;
+                color: $tertiary-text-color;
+            }
+        }
+        >div:nth-child(2) {
+            margin: 4px;
+            height: 32px;
+            border: 1px dashed $secondary-border-color;
+            text-align: center;
+            a {
+                display: block;
+                width: 100%;
+                height: 100%;
+                line-height: 32px;
+                &:hover {
+                    background: $secondary-background-hover;
+                }
+                i {
+                    height: 100%;
+                    vertical-align: middle;
+                }
+            }
+        }
+        >div:nth-child(3) {
+            position: relative;
+            input {
+                width: 100%;
+            }
+        }
+    }
+}
+
+span.red-ui-editor-subflow-env-lang-icon {
+    position: absolute;
+    display: inline-block;
+    background: $secondary-background;
+    opacity: 0.8;
+    width: 20px;
+    line-height: 32px;
+    height: 32px;
+    text-align: center;
+    top: 4px;
+    right: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+}
+// .red-ui-editor-subflow-ui-grid {
+//     width: 100%;
+//     .red-ui-editableList-container {
+//         border: none;
+//         border-radius: 0;
+//     }
+//     .red-ui-editableList-container li {
+//         border: none;
+//         padding: 0;
+//         &:not(:first-child) .red-ui-editableList-item-content >div:first-child >div {
+//             border-top: none;
+//         }
+//         &.ui-sortable-helper {
+//             border: 2px dashed $secondary-border-color;
+//             .red-ui-editableList-item-content {
+//                 >div {
+//                     border: none;
+//                     opacity: 0.7
+//                 }
+//
+//             }
+//         }
+//     }
+//
+//     .red-ui-editableList-item-content {
+//         >div>div {
+//             display: inline-block;
+//             box-sizing: border-box;
+//             border-left: 1px dashed $secondary-border-color;
+//             border-bottom: 1px dashed $secondary-border-color;
+//         }
+//         >div:first-child {
+//             font-size: 0.9em;
+//             display: grid;
+//             grid-template-columns: 25px auto 20px;
+//             >div {
+//                 border-top: 1px dashed $secondary-border-color;
+//                 padding: 1px;
+//             }
+//             >div:nth-child(3) {
+//                 border-top: none;
+//                 border-bottom: none;
+//                 // width: 20px;
+//             }
+//         }
+//         >div:last-child {
+//             display: grid;
+//             grid-template-columns: 25px 140px auto 20px;
+//             >div {
+//                 height: 48px;
+//                 line-height: 30px;
+//                 // display: inline-block;
+//                 // height: 48px;
+//                 // line-height: 30px;
+//                 // box-sizing: border-box;
+//                 //
+//                 // border-left: 2px dashed $secondary-border-color;
+//                 border-top: none;
+//                 // border-bottom: 2px dashed $secondary-border-color;
+//                 &:not(:first-child) {
+//                     padding: 6px 3px;
+//                 }
+//                 .placeholder-input {
+//                     position: relative;
+//                     padding: 0 3px;
+//                     line-height: 24px;
+//                     opacity: 0.8
+//                 }
+//                 .red-ui-typedInput-value-label,.red-ui-typedInput-option-label {
+//                     select,.placeholder-input  {
+//                         margin: 3px;
+//                         height: 26px;
+//                         width: calc(100% - 10px);
+//                         padding-left: 3px;
+//                     }
+//                     input[type="checkbox"] {
+//                         margin-left: 8px;
+//                         margin-top: 0;
+//                         height: 100%;
+//                     }
+//                 }
+//             }
+//             >div:nth-child(1) {
+//                 text-align: center;
+//                 a {
+//                     display: block;
+//                     width: 100%;
+//                     height: 100%;
+//                     line-height: 45px;
+//                     &:hover {
+//                         background: $secondary-background-hover;
+//                     }
+//                 }
+//             }
+//             >div:nth-child(2) {
+//                 input {
+//                     width: 100%;
+//                 }
+//                 // width: 140px;
+//             }
+//             >div:nth-child(3) {
+//                 position: relative;
+//                 .options-button {
+//                     position: absolute;
+//                     top: calc(50% - 10px);
+//                     margin-right: 2px;
+//                     right: 2px;
+//                 }
+//             }
+//             >div:nth-child(4) {
+//                 border-top: none;
+//                 border-bottom: none;
+//                 // width: 20px;
+//             }
+//
+//         }
+//     }
+// }
+.red-ui-editor-subflow-ui-edit-panel {
+    padding-bottom: 3px;
+    background: $primary-background;
+    .red-ui-editableList-border {
+        border: none;
+        border-radius: 0;
+        border-bottom: 1px solid $secondary-border-color;
+    }
+    .red-ui-editableList-container {
+    }
+    .red-ui-editableList-addButton {
+        margin-left: 2px;
+    }
+    .red-ui-editableList-header {
+        background: $primary-background;
+        display: grid;
+        grid-template-columns: 50% 50%;
+        color: $secondary-text-color;
+        div:first-child {
+            padding-left: 23px;
+        }
+        div:last-child {
+            padding-left: 3px;
+        }
+    }
+    .red-ui-editableList-container {
+        padding: 0 1px;
+        li {
+            background: $secondary-background;
+            // border-bottom: none;
+            padding: 0;
+            .red-ui-editableList-item-content {
+                display: grid;
+                grid-template-columns: 50% 50%;
+                >div {
+                    position:relative;
+
+                }
+            }
+            input {
+                margin-bottom: 0;
+                border:none;
+                width: 100%;
+                border-right: 1px solid $secondary-border-color;
+
+                border-radius: 0;
+                &:focus {
+                    box-shadow: 0 0 0 1px inset $form-input-focus-color;
+                }
+                &:first-child {
+                    border-left: 1px solid $secondary-border-color;
+                }
+            }
+            button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
+                border-radius: 0;
+                height: 34px;
+            }
+            .red-ui-typedInput-container {
+                border-radius: 0;
+                border: none;
+                input.red-ui-typedInput-input  {
+                    height: 34px;
+                    border-right: none;
+                }
+            }
+
+            .red-ui-editor-subflow-env-lang-icon {
+                top: 1px;
+                right: 1px;
+                border-top-right-radius:0;
+                border-bottom-right-radius:0;
+            }
+            .red-ui-editableList-item-remove {
+                right: 3px;
+            }
+        }
+    }
+}
+
+.node-input-env-locales-row {
+    position: relative;
+    top: -20px;
+    float: right;
+    select {
+        width: 160px;
+        height: 20px;
+        min-width: 20px;
+        line-height: 18px;
+        font-size: 10px;
+    }
+}
+.node-input-env-container-row {
+    min-width: 470px;
+    position: relative;
+    .red-ui-editableList-item-content {
+        label {
+            margin-bottom: 0;
+            line-height: 32px;
+            span {
+                display: inline-block;
+                width: 20px;
+                text-align: center;
+            }
+        }
+        >div:first-child {
+            display: grid;
+            padding-left: 5px;
+            grid-template-columns: 40% auto 37px;
+            > :first-child {
+                width: calc(100% - 5px);
+            }
+            input {
+                width: calc(100% - 5px);
+            }
+        }
+        &.red-ui-editor-subflow-env-editable {
+            >div:first-child {
+                padding-left: 0;
+                grid-template-columns: 24px 40% auto 37px;
+                > a:first-child {
+                    text-align: center;
+                    line-height: 32px;
+                    i.fa-angle-right {
+                        transition: all 0.2s linear;
+                    }
+                    &.expanded {
+                        i.fa-angle-right {
+                            transform: rotate(90deg);
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+    .red-ui-editableList-border .red-ui-editableList-header {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+
+        background: $tertiary-background;
+        padding: 0;
+        >div {
+            display: grid;
+            grid-template-columns: 24px 40% auto 37px;
+            >div {
+                display: inline-block;
+            }
+        }
+    }
+    .red-ui-editableList-container {
+        padding: 0;
+        .red-ui-editableList-item-handle {
+            top: 25px;
+        }
+        .red-ui-editableList-item-remove {
+            top: 25px;
+            right: 5px;
+        }
+    }
+}
+#subflow-input-ui {
+    // .form-row {
+    //     display: grid;
+    //     grid-template-columns: 120px auto;
+    //     label span {
+    //         display: inline-block;
+    //         width: 20px;
+    //         text-align: center;
+    //     }
+    // }
+}

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

@@ -150,7 +150,8 @@
     input[type="tel"],
     input[type="color"],
     div[contenteditable="true"],
-    .uneditable-input {
+    .uneditable-input,
+    .placeholder-input {
         box-sizing: border-box;
         display: inline-block;
         height: 34px;
@@ -190,7 +191,8 @@
     input[type="tel"],
     input[type="color"],
     div[contenteditable="true"],
-    .uneditable-input {
+    .uneditable-input,
+    .placeholder-input {
         background-color: $form-input-background;
         border: 1px solid $form-input-border-color;
     }

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

@@ -192,6 +192,7 @@
             color: $header-menu-color;
             padding: 3px 40px;
             img {
+                max-width: 100%;
                 margin-right: 10px;
                 padding: 4px;
                 border: 3px solid transparent;

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

@@ -162,3 +162,15 @@
     background: none;
     color: $tertiary-text-color;
 }
+
+
+.red-ui-popover-panel {
+    @include component-shadow;
+    font-family: $primary-font;
+    font-size: $primary-font-size;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid $primary-border-color;
+    background: $secondary-background;
+    z-index: 2000;
+}

packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss

@@ -58,118 +58,6 @@
         text-overflow: ellipsis;
 
     }
-    button.red-ui-typedInput-type-select,
-    button.red-ui-typedInput-option-expand,
-    button.red-ui-typedInput-option-trigger
-     {
-        text-align: left;
-        border: none;
-        position: absolute;
-        box-sizing: border-box;
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
-        padding: 0 1px 0 5px;
-        display:inline-block;
-        background: $form-button-background;
-        height: 32px;
-        line-height: 32px;
-        vertical-align: middle;
-        color: $form-text-color;
-        i.red-ui-typedInput-icon {
-            margin-left: 1px;
-            margin-right: 2px;
-            vertical-align: middle;
-        }
-        &.disabled {
-            cursor: default;
-            i.red-ui-typedInput-icon {
-                color: $secondary-text-color-disabled;
-            }
-        }
-        .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
-            display: inline-block;
-            height: 100%;
-            padding: 0 1px 0 5px;
-            img {
-                max-width: none;
-            }
-        }
-
-        &:not(.disabled):hover {
-            text-decoration: none;
-            background: $workspace-button-background-hover;
-        }
-        &:focus {
-            text-decoration: none;
-            outline: none;
-            box-shadow: inset 0 0 0 1px $form-input-focus-color;
-        }
-        &:not(.disabled):active {
-            background: $workspace-button-background-active;
-            text-decoration: none;
-        }
-        &.red-ui-typedInput-full-width {
-            width: 100%;
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
-        }
-        &:before {
-            content:'';
-            display: inline-block;
-            height: 100%;
-            vertical-align: middle;
-        }
-    }
-
-    button.red-ui-typedInput-option-expand {
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        right: 0;
-    }
-
-    button.red-ui-typedInput-option-trigger {
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-        padding: 0 0 0 0;
-        position:absolute;
-        right: 0;
-        .red-ui-typedInput-option-label {
-            background:$form-button-background;
-            color: $form-text-color;
-            position:absolute;
-            left:0;
-            right:23px;
-            top: 0;
-            padding: 0 5px 0 8px;
-            i.red-ui-typedInput-icon {
-                margin-right: 4px;
-            }
-        }
-        .red-ui-typedInput-option-caret {
-            top: 0;
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            width: 17px;
-            padding-left: 6px;
-            &:before {
-                content:'';
-                display: inline-block;
-                height: 100%;
-                vertical-align: middle;
-            }
-        }
-        &:focus {
-            box-shadow: none;
-        }
-        &:focus .red-ui-typedInput-option-caret {
-            box-shadow: inset 0 0 0 1px $form-input-focus-color;
-        }
-    }
 }
 .red-ui-typedInput-options {
     @include component-shadow;
@@ -180,6 +68,7 @@
     max-height: 350px;
     overflow-y: auto;
     border: 1px solid $primary-border-color;
+    box-sizing: border-box;
     background: $secondary-background;
     z-index: 2000;
     a {
@@ -200,8 +89,124 @@
             text-decoration: none;
             background: $workspace-button-background-active;
         }
+        input[type="checkbox"] {
+            margin-right: 6px;
+        }
     }
     .red-ui-typedInput-icon {
-        margin-right: 4px;
+        margin-right: 6px;
+    }
+}
+button.red-ui-typedInput-type-select,
+button.red-ui-typedInput-option-expand,
+button.red-ui-typedInput-option-trigger
+ {
+    text-align: left;
+    border: none;
+    position: absolute;
+    box-sizing: border-box;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    padding: 0 1px 0 5px;
+    display:inline-block;
+    background: $form-button-background;
+    height: 32px;
+    line-height: 30px;
+    min-width: 23px;
+    vertical-align: middle;
+    color: $form-text-color;
+    i.red-ui-typedInput-icon {
+        margin-left: 1px;
+        margin-right: 2px;
+        vertical-align: middle;
+    }
+    &.disabled {
+        cursor: default;
+        i.red-ui-typedInput-icon {
+            color: $secondary-text-color-disabled;
+        }
+    }
+    .red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+        padding: 0 1px 0 5px;
+        img {
+            max-width: none;
+        }
+    }
+
+    &:not(.disabled):hover {
+        text-decoration: none;
+        background: $workspace-button-background-hover;
+    }
+    &:focus {
+        text-decoration: none;
+        outline: none;
+        box-shadow: inset 0 0 0 1px $form-input-focus-color;
+    }
+    &:not(.disabled):active {
+        background: $workspace-button-background-active;
+        text-decoration: none;
+    }
+    &.red-ui-typedInput-full-width {
+        width: 100%;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+    &:before {
+        content:'';
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+    }
+}
+button.red-ui-typedInput-option-expand {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    right: 0;
+}
+
+button.red-ui-typedInput-option-trigger {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 0 0 0 0;
+    position:absolute;
+    right: 0;
+    .red-ui-typedInput-option-label {
+        background:$form-button-background;
+        color: $form-text-color;
+        position:absolute;
+        left:0;
+        right:23px;
+        top: 0;
+        padding: 0 5px 0 8px;
+        i.red-ui-typedInput-icon {
+            margin-right: 4px;
+        }
+    }
+    .red-ui-typedInput-option-caret {
+        top: 0;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 17px;
+        padding-left: 5px;
+        &:before {
+            content:'';
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+    &:focus {
+        box-shadow: none;
+    }
+    &:focus .red-ui-typedInput-option-caret {
+        box-shadow: inset 0 0 0 1px $form-input-focus-color;
     }
 }

packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js

@@ -42,14 +42,14 @@ RED.debug = (function() {
         var content = $("<div>").css({"position":"relative","height":"100%"});
         var toolbar = $('<div class="red-ui-sidebar-header">'+
             '<span class="button-group"><a id="red-ui-sidebar-debug-filter" class="red-ui-sidebar-header-button" href="#"><i class="fa fa-filter"></i> <span></span></a></span>'+
-            '<span class="button-group"><a id="red-ui-sidebar-debug-clear" class="red-ui-sidebar-header-button" href="#" data-i18n="[title]node-red:debug.sidebar.clearLog"><i class="fa fa-trash"></i></a></span></div>').appendTo(content);
+            '<span class="button-group"><a id="red-ui-sidebar-debug-clear" class="red-ui-sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>').appendTo(content);
 
         var footerToolbar = $('<div>'+
             // '<span class="button-group">'+
             //     '<a class="red-ui-footer-button-toggle text-button selected" id="red-ui-sidebar-debug-view-list" href="#"><span data-i18n="">list</span></a>'+
             //     '<a class="red-ui-footer-button-toggle text-button" id="red-ui-sidebar-debug-view-table" href="#"><span data-i18n="">table</span></a> '+
             // '</span>'+
-            '<span class="button-group"><a id="red-ui-sidebar-debug-open" class="red-ui-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' +
+            '<span class="button-group"><a id="red-ui-sidebar-debug-open" class="red-ui-footer-button" href="#"><i class="fa fa-desktop"></i></a></span> ' +
             '</div>');
 
         messageList = $('<div class="red-ui-debug-content red-ui-debug-content-list"/>').appendTo(content);

packages/node_modules/@node-red/nodes/core/logic/10-switch.html

@@ -372,7 +372,6 @@
         },
         oneditsave: function() {
             var rules = $("#node-input-rule-container").editableList('items');
-            var ruleset;
             var node = this;
             node.rules = [];
             rules.each(function(i) {

packages/node_modules/@node-red/nodes/core/logic/15-change.html

@@ -226,7 +226,6 @@
         },
         oneditsave: function() {
             var rules = $("#node-input-rule-container").editableList('items');
-            var ruleset;
             var node = this;
             node.rules= [];
             rules.each(function(i) {

packages/node_modules/@node-red/nodes/core/logic/17-split.js

@@ -42,7 +42,7 @@ module.exports = function(RED) {
         node.addname = n.addname || "";
         try {
             if (node.spltType === "str") {
-                this.splt = (n.splt || "\\n").replace(/\\n/,"\n").replace(/\\r/,"\r").replace(/\\t/,"\t").replace(/\\e/,"\e").replace(/\\f/,"\f").replace(/\\0/,"\0");
+                this.splt = (n.splt || "\\n").replace(/\\n/g,"\n").replace(/\\r/g,"\r").replace(/\\t/g,"\t").replace(/\\e/g,"\e").replace(/\\f/g,"\f").replace(/\\0/g,"\0");
             } else if (node.spltType === "bin") {
                 var spltArray = JSON.parse(n.splt);
                 if (Array.isArray(spltArray)) {

packages/node_modules/@node-red/nodes/locales/en-US/core/89-delay.html

@@ -22,12 +22,12 @@
         <dd>Sets the delay, in milliseconds, to be applied to the message. This
             option only applies if the node is configured to allow the message to
             override the configured default delay interval.</dd>
-            <dt class="optional">reset</dt>
-            <dd>If the received message has this property set to any value, all
-                outstanding messages held by the node are cleared without being sent.</dd>
-            <dt class="optional">flush</dt>
-            <dd>If the received message has this property set to any value, all
-                outstanding messages held by the node are sent immediately.</dd>
+        <dt class="optional">reset</dt>
+        <dd>If the received message has this property set to any value, all
+            outstanding messages held by the node are cleared without being sent.</dd>
+        <dt class="optional">flush</dt>
+        <dd>If the received message has this property set to any value, all
+            outstanding messages held by the node are sent immediately.</dd>
     </dl>
     <h3>Details</h3>
     <p>When configured to delay messages, the delay interval can be a fixed value,

packages/node_modules/@node-red/nodes/locales/ja/core/89-delay.html

@@ -22,6 +22,8 @@
         <dd>メッセージの遅延時間をミリ秒単位で設定します。これはノードの設定でデフォルトの遅延時間を上書きできるようノードを設定した場合にのみ適用します。</dd>
         <dt class="optional">reset</dt>
         <dd>受信メッセージでこのプロパティを任意の値に設定すると、ノードが保持する全ての未送信メッセージをクリアします。</dd>
+        <dt class="optional">flush</dt>
+        <dd>受信メッセージでこのプロパティを任意の値に設定すると、ノードが保持する全ての未送信メッセージを直ちに送信します。</dd>
     </dl>
     <h3>詳細</h3>
     <p>メッセージを遅延させるように設定する場合、遅延時間は固定値、範囲内の乱数値、メッセージ毎の動的な指定値のいずれかを指定できます。</p>

packages/node_modules/@node-red/nodes/locales/ja/messages.json

@@ -7,7 +7,8 @@
             "username": "ユーザ名",
             "password": "パスワード",
             "property": "プロパティ",
-            "selectNodes": "ノードを選択..."
+            "selectNodes": "ノードを選択...",
+            "expand": "展開"
         },
         "status": {
             "connected": "接続済",
@@ -137,7 +138,10 @@
             "debugNodes": "debugノード",
             "clearLog": "ログを削除",
             "filterLog": "ログのフィルタリング",
-            "openWindow": "新しいウィンドウで開く"
+            "openWindow": "新しいウィンドウで開く",
+            "copyPath": "パスをコピー",
+            "copyPayload": "値をコピー",
+            "pinPath": "展開を固定"
         },
         "messageMenu": {
             "collapseAll": "全パスを折りたたむ",
@@ -615,7 +619,8 @@
             "tail": "tail",
             "index": "index between",
             "exp": "JSONata式",
-            "else": "その他"
+            "else": "その他",
+            "hask": "has key"
         },
         "errors": {
             "invalid-expr": "不正な表現: __error__",

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

@@ -67,7 +67,7 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the context
     * @param {String} opts.store - the context store
     * @param {String} opts.key - the context key
-
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise} - the node information
     * @memberof @node-red/runtime_context
     */
@@ -81,7 +81,7 @@ var api = module.exports = {
             var availableStores = runtime.nodes.listContextStores();
             //{ default: 'default', stores: [ 'default', 'file' ] }
             if (store && availableStores.stores.indexOf(store) === -1) {
-                runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"not_found"});
+                runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"not_found"}, opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -106,7 +106,7 @@ var api = module.exports = {
                         if (store !== availableStores.default) {
                             encoded.store = store;
                         }
-                        runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key});
+                        runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key}, opts.req);
                         resolve(encoded);
                     });
                     return;
@@ -127,7 +127,7 @@ var api = module.exports = {
                                 // TODO: proper error reporting
                                 if (!errorReported) {
                                     errorReported = true;
-                                    runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"unexpected_error"});
+                                    runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"unexpected_error"}, opts.req);
                                     var err = new Error();
                                     err.code = "unexpected_error";
                                     err.status = 400;
@@ -139,7 +139,7 @@ var api = module.exports = {
                             c--;
                             if (c === 0) {
                                 if (!errorReported) {
-                                    runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key});
+                                    runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key},opts.req);
                                     resolve(result);
                                 }
                             }
@@ -147,7 +147,7 @@ var api = module.exports = {
                     })
                 }
             } else {
-                runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key});
+                runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key},opts.req);
                 resolve({});
             }
         })
@@ -161,7 +161,7 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the context
     * @param {String} opts.store - the context store
     * @param {String} opts.key - the context key
-
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise} - the node information
     * @memberof @node-red/runtime_context
     */
@@ -175,7 +175,7 @@ var api = module.exports = {
             var availableStores = runtime.nodes.listContextStores();
             //{ default: 'default', stores: [ 'default', 'file' ] }
             if (store && availableStores.stores.indexOf(store) === -1) {
-                runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"not_found"});
+                runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"not_found"},opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -196,13 +196,13 @@ var api = module.exports = {
                 if (key) {
                     store = store || availableStores.default;
                     ctx.set(key,undefined,store,function(err) {
-                        runtime.log.audit({event: "context.delete",scope:scope,id:id,store:store,key:key});
+                        runtime.log.audit({event: "context.delete",scope:scope,id:id,store:store,key:key},opts.req);
                         resolve();
                     });
                     return;
                 } else {
                     // TODO: support deleting whole context
-                    runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"not_found"});
+                    runtime.log.audit({event: "context.get",scope:scope,id:id,store:store,key:key,error:"not_found"},opts.req);
                     var err = new Error();
                     err.code = "not_found";
                     err.status = 404;
@@ -243,7 +243,7 @@ var api = module.exports = {
                     // })
                 }
             } else {
-                runtime.log.audit({event: "context.delete",scope:scope,id:id,store:store,key:key});
+                runtime.log.audit({event: "context.delete",scope:scope,id:id,store:store,key:key},opts.req);
                 resolve();
             }
 

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

@@ -43,12 +43,13 @@ var api = module.exports = {
     * Gets the current flow configuration
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Flows>} - the active flow configuration
     * @memberof @node-red/runtime_flows
     */
     getFlows: function(opts) {
         return new Promise(function(resolve,reject) {
-            runtime.log.audit({event: "flows.get"}/*,req*/);
+            runtime.log.audit({event: "flows.get"}, opts.req);
             return resolve(runtime.nodes.getFlows());
         });
     },
@@ -56,6 +57,7 @@ var api = module.exports = {
     * Sets the current flow configuration
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Flows>} - the active flow configuration
     * @memberof @node-red/runtime_flows
     */
@@ -64,7 +66,7 @@ var api = module.exports = {
 
             var flows = opts.flows;
             var deploymentType = opts.deploymentType||"full";
-            runtime.log.audit({event: "flows.set",type:deploymentType}/*,req*/);
+            runtime.log.audit({event: "flows.set",type:deploymentType}, opts.req);
 
             var apiPromise;
             if (deploymentType === 'reload') {
@@ -98,6 +100,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {Object} opts.flow - the flow to add
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the id of the added flow
     * @memberof @node-red/runtime_flows
     */
@@ -105,10 +108,10 @@ var api = module.exports = {
         return new Promise(function(resolve,reject) {
             var flow = opts.flow;
             runtime.nodes.addFlow(flow).then(function(id) {
-                runtime.log.audit({event: "flow.add",id:id});
+                runtime.log.audit({event: "flow.add",id:id}, opts.req);
                 return resolve(id);
             }).catch(function(err) {
-                runtime.log.audit({event: "flow.add",error:err.code||"unexpected_error",message:err.toString()});
+                runtime.log.audit({event: "flow.add",error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                 err.status = 400;
                 return reject(err);
             })
@@ -122,6 +125,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {Object} opts.id - the id of the flow to retrieve
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Flow>} - the active flow configuration
     * @memberof @node-red/runtime_flows
     */
@@ -129,10 +133,10 @@ var api = module.exports = {
         return new Promise(function (resolve,reject) {
             var flow = runtime.nodes.getFlow(opts.id);
             if (flow) {
-                runtime.log.audit({event: "flow.get",id:opts.id});
+                runtime.log.audit({event: "flow.get",id:opts.id}, opts.req);
                 return resolve(flow);
             } else {
-                runtime.log.audit({event: "flow.get",id:opts.id,error:"not_found"});
+                runtime.log.audit({event: "flow.get",id:opts.id,error:"not_found"}, opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -147,6 +151,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {Object} opts.id - the id of the flow to update
     * @param {Object} opts.flow - the flow configuration
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the id of the updated flow
     * @memberof @node-red/runtime_flows
     */
@@ -156,22 +161,22 @@ var api = module.exports = {
             var id = opts.id;
             try {
                 runtime.nodes.updateFlow(id,flow).then(function() {
-                    runtime.log.audit({event: "flow.update",id:id});
+                    runtime.log.audit({event: "flow.update",id:id}, opts.req);
                     return resolve(id);
                 }).catch(function(err) {
-                    runtime.log.audit({event: "flow.update",error:err.code||"unexpected_error",message:err.toString()});
+                    runtime.log.audit({event: "flow.update",error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     err.status = 400;
                     return reject(err);
                 })
             } catch(err) {
                 if (err.code === 404) {
-                    runtime.log.audit({event: "flow.update",id:id,error:"not_found"});
+                    runtime.log.audit({event: "flow.update",id:id,error:"not_found"}, opts.req);
                     // TODO: this swap around of .code and .status isn't ideal
                     err.status = 404;
                     err.code = "not_found";
                     return reject(err);
                 } else {
-                    runtime.log.audit({event: "flow.update",error:err.code||"unexpected_error",message:err.toString()});
+                    runtime.log.audit({event: "flow.update",error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     err.status = 400;
                     return reject(err);
                 }
@@ -184,6 +189,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {Object} opts.id - the id of the flow to delete
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise} - resolves if successful
     * @memberof @node-red/runtime_flows
     */
@@ -192,22 +198,22 @@ var api = module.exports = {
             var id = opts.id;
             try {
                 runtime.nodes.removeFlow(id).then(function() {
-                    runtime.log.audit({event: "flow.remove",id:id});
+                    runtime.log.audit({event: "flow.remove",id:id}, opts.req);
                     return resolve();
                 }).catch(function(err) {
-                    runtime.log.audit({event: "flow.remove",id:id,error:err.code||"unexpected_error",message:err.toString()});
+                    runtime.log.audit({event: "flow.remove",id:id,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     err.status = 400;
                     return reject(err);
                 });
             } catch(err) {
                 if (err.code === 404) {
-                    runtime.log.audit({event: "flow.remove",id:id,error:"not_found"});
+                    runtime.log.audit({event: "flow.remove",id:id,error:"not_found"}, opts.req);
                     // TODO: this swap around of .code and .status isn't ideal
                     err.status = 404;
                     err.code = "not_found";
                     return reject(err);
                 } else {
-                    runtime.log.audit({event: "flow.remove",id:id,error:err.code||"unexpected_error",message:err.toString()});
+                    runtime.log.audit({event: "flow.remove",id:id,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     err.status = 400;
                     return reject(err);
                 }
@@ -221,12 +227,13 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.type - the node type to return the credential information for
     * @param {String} opts.id - the node id
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the safe credentials
     * @memberof @node-red/runtime_flows
     */
     getNodeCredentials: function(opts) {
         return new Promise(function(resolve,reject) {
-            runtime.log.audit({event: "credentials.get",type:opts.type,id:opts.id});
+            runtime.log.audit({event: "credentials.get",type:opts.type,id:opts.id}, opts.req);
             var credentials = runtime.nodes.getCredentials(opts.id);
             if (!credentials) {
                 return resolve({});

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

@@ -32,13 +32,14 @@ var api = module.exports = {
     * @param {String} opts.library - the library
     * @param {String} opts.type - the type of entry
     * @param {String} opts.path - the path of the entry
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String|Object>} - resolves when complete
     * @memberof @node-red/runtime_library
     */
     getEntry: function(opts) {
         return new Promise(function(resolve,reject) {
             runtime.library.getEntry(opts.library,opts.type,opts.path).then(function(result) {
-                runtime.log.audit({event: "library.get",library:opts.library,type:opts.type,path:opts.path});
+                runtime.log.audit({event: "library.get",library:opts.library,type:opts.type,path:opts.path}, opts.req);
                 return resolve(result);
             }).catch(function(err) {
                 if (err) {
@@ -51,10 +52,10 @@ var api = module.exports = {
                     } else {
                         err.status = 400;
                     }
-                    runtime.log.audit({event: "library.get",library:opts.library,type:opts.type,path:opts.path,error:err.code});
+                    runtime.log.audit({event: "library.get",library:opts.library,type:opts.type,path:opts.path,error:err.code}, opts.req);
                     return reject(err);
                 }
-                runtime.log.audit({event: "library.get",library:opts.library,type:opts.type,error:"not_found"});
+                runtime.log.audit({event: "library.get",library:opts.library,type:opts.type,error:"not_found"}, opts.req);
                 var error = new Error();
                 error.code = "not_found";
                 error.status = 404;
@@ -72,22 +73,23 @@ var api = module.exports = {
     * @param {String} opts.path - the path of the entry
     * @param {Object} opts.meta - any meta data associated with the entry
     * @param {String} opts.body - the body of the entry
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise} - resolves when complete
     * @memberof @node-red/runtime_library
     */
     saveEntry: function(opts) {
         return new Promise(function(resolve,reject) {
             runtime.library.saveEntry(opts.library,opts.type,opts.path,opts.meta,opts.body).then(function() {
-                runtime.log.audit({event: "library.set",type:opts.type,path:opts.path});
+                runtime.log.audit({event: "library.set",type:opts.type,path:opts.path}, opts.req);
                 return resolve();
             }).catch(function(err) {
                 runtime.log.warn(runtime.log._("api.library.error-save-entry",{path:opts.path,message:err.toString()}));
                 if (err.code === 'forbidden') {
-                    runtime.log.audit({event: "library.set",type:opts.type,path:opts.path,error:"forbidden"});
+                    runtime.log.audit({event: "library.set",type:opts.type,path:opts.path,error:"forbidden"}, opts.req);
                     err.status = 403;
                     return reject(err);
                 }
-                runtime.log.audit({event: "library.set",type:opts.type,path:opts.path,error:"unexpected_error",message:err.toString()});
+                runtime.log.audit({event: "library.set",type:opts.type,path:opts.path,error:"unexpected_error",message:err.toString()}, opts.req);
                 var error = new Error();
                 error.status = 400;
                 return reject(error);

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

@@ -48,6 +48,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the node set to return
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<NodeInfo>} - the node information
     * @memberof @node-red/runtime_nodes
     */
@@ -56,11 +57,11 @@ var api = module.exports = {
             var id = opts.id;
             var result = runtime.nodes.getNodeInfo(id);
             if (result) {
-                runtime.log.audit({event: "nodes.info.get",id:id});
+                runtime.log.audit({event: "nodes.info.get",id:id}, opts.req);
                 delete result.loaded;
                 return resolve(result);
             } else {
-                runtime.log.audit({event: "nodes.info.get",id:id,error:"not_found"});
+                runtime.log.audit({event: "nodes.info.get",id:id,error:"not_found"}, opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -73,12 +74,13 @@ var api = module.exports = {
     * Gets the list of node modules installed in the runtime
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<NodeList>} - the list of node modules
     * @memberof @node-red/runtime_nodes
     */
     getNodeList: function(opts) {
         return new Promise(function(resolve,reject) {
-            runtime.log.audit({event: "nodes.list.get"});
+            runtime.log.audit({event: "nodes.list.get"}, opts.req);
             return resolve(runtime.nodes.getNodeList());
         })
     },
@@ -89,6 +91,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the node set to return
     * @param {String} opts.lang - the locale language to return
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the node html content
     * @memberof @node-red/runtime_nodes
     */
@@ -98,10 +101,10 @@ var api = module.exports = {
             var lang = opts.lang;
             var result = runtime.nodes.getNodeConfig(id,lang);
             if (result) {
-                runtime.log.audit({event: "nodes.config.get",id:id});
+                runtime.log.audit({event: "nodes.config.get",id:id}, opts.req);
                 return resolve(result);
             } else {
-                runtime.log.audit({event: "nodes.config.get",id:id,error:"not_found"});
+                runtime.log.audit({event: "nodes.config.get",id:id,error:"not_found"}, opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -114,12 +117,13 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.lang - the locale language to return
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the node html content
     * @memberof @node-red/runtime_nodes
     */
     getNodeConfigs: function(opts) {
         return new Promise(function(resolve,reject) {
-            runtime.log.audit({event: "nodes.configs.get"});
+            runtime.log.audit({event: "nodes.configs.get"}, opts.req);
             return resolve(runtime.nodes.getNodeConfigs(opts.lang));
         });
     },
@@ -129,6 +133,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.module - the id of the module to return
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<ModuleInfo>} - the node module info
     * @memberof @node-red/runtime_nodes
     */
@@ -136,10 +141,10 @@ var api = module.exports = {
         return new Promise(function(resolve,reject) {
             var result = runtime.nodes.getModuleInfo(opts.module);
             if (result) {
-                runtime.log.audit({event: "nodes.module.get",id:opts.module});
+                runtime.log.audit({event: "nodes.module.get",id:opts.module}, opts.req);
                 return resolve(result);
             } else {
-                runtime.log.audit({event: "nodes.module.get",id:opts.module,error:"not_found"});
+                runtime.log.audit({event: "nodes.module.get",id:opts.module,error:"not_found"}, opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -154,13 +159,14 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.module - the id of the module to install
     * @param {String} opts.version - (optional) the version of the module to install
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<ModuleInfo>} - the node module info
     * @memberof @node-red/runtime_nodes
     */
     addModule: function(opts) {
         return new Promise(function(resolve,reject) {
             if (!runtime.settings.available()) {
-                runtime.log.audit({event: "nodes.install",error:"settings_unavailable"});
+                runtime.log.audit({event: "nodes.install",error:"settings_unavailable"}, opts.req);
                 var err = new Error("Settings unavailable");
                 err.code = "settings_unavailable";
                 err.status = 400;
@@ -170,7 +176,7 @@ var api = module.exports = {
                 var existingModule = runtime.nodes.getModuleInfo(opts.module);
                 if (existingModule) {
                     if (!opts.version || existingModule.version === opts.version) {
-                        runtime.log.audit({event: "nodes.install",module:opts.module, version:opts.version, error:"module_already_loaded"});
+                        runtime.log.audit({event: "nodes.install",module:opts.module, version:opts.version, error:"module_already_loaded"}, opts.req);
                         var err = new Error("Module already loaded");
                         err.code = "module_already_loaded";
                         err.status = 400;
@@ -178,24 +184,24 @@ var api = module.exports = {
                     }
                 }
                 runtime.nodes.installModule(opts.module,opts.version).then(function(info) {
-                    runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version});
+                    runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version}, opts.req);
                     return resolve(info);
                 }).catch(function(err) {
                     if (err.code === 404) {
-                        runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version,error:"not_found"});
+                        runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version,error:"not_found"}, opts.req);
                         // TODO: code/status
                         err.status = 404;
                     } else if (err.code) {
                         err.status = 400;
-                        runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version,error:err.code});
+                        runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version,error:err.code}, opts.req);
                     } else {
                         err.status = 400;
-                        runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version,error:err.code||"unexpected_error",message:err.toString()});
+                        runtime.log.audit({event: "nodes.install",module:opts.module,version:opts.version,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     }
                     return reject(err);
                 })
             } else {
-                runtime.log.audit({event: "nodes.install",module:opts.module,error:"invalid_request"});
+                runtime.log.audit({event: "nodes.install",module:opts.module,error:"invalid_request"}, opts.req);
                 var err = new Error("Invalid request");
                 err.code = "invalid_request";
                 err.status = 400;
@@ -209,13 +215,14 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.module - the id of the module to remove
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise} - resolves when complete
     * @memberof @node-red/runtime_nodes
     */
     removeModule: function(opts) {
         return new Promise(function(resolve,reject) {
             if (!runtime.settings.available()) {
-                runtime.log.audit({event: "nodes.install",error:"settings_unavailable"});
+                runtime.log.audit({event: "nodes.install",error:"settings_unavailable"}, opts.req);
                 var err = new Error("Settings unavailable");
                 err.code = "settings_unavailable";
                 err.status = 400;
@@ -223,7 +230,7 @@ var api = module.exports = {
             }
             var module = runtime.nodes.getModuleInfo(opts.module);
             if (!module) {
-                runtime.log.audit({event: "nodes.remove",module:opts.module,error:"not_found"});
+                runtime.log.audit({event: "nodes.remove",module:opts.module,error:"not_found"}, opts.req);
                 var err = new Error();
                 err.code = "not_found";
                 err.status = 404;
@@ -231,15 +238,15 @@ var api = module.exports = {
             }
             try {
                 runtime.nodes.uninstallModule(opts.module).then(function() {
-                    runtime.log.audit({event: "nodes.remove",module:opts.module});
+                    runtime.log.audit({event: "nodes.remove",module:opts.module}, opts.req);
                     resolve();
                 }).catch(function(err) {
                     err.status = 400;
-                    runtime.log.audit({event: "nodes.remove",module:opts.module,error:err.code||"unexpected_error",message:err.toString()});
+                    runtime.log.audit({event: "nodes.remove",module:opts.module,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     return reject(err);
                 })
             } catch(error) {
-                runtime.log.audit({event: "nodes.remove",module:opts.module,error:error.code||"unexpected_error",message:error.toString()});
+                runtime.log.audit({event: "nodes.remove",module:opts.module,error:error.code||"unexpected_error",message:error.toString()}, opts.req);
                 error.status = 400;
                 return reject(error);
             }
@@ -252,6 +259,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.module - the id of the module to enable or disable
     * @param {String} opts.enabled - whether the module should be enabled or disabled
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<ModuleInfo>} - the module info object
     * @memberof @node-red/runtime_nodes
     */
@@ -259,7 +267,7 @@ var api = module.exports = {
         var mod = opts.module;
         return new Promise(function(resolve,reject) {
             if (!runtime.settings.available()) {
-                runtime.log.audit({event: "nodes.module.set",error:"settings_unavailable"});
+                runtime.log.audit({event: "nodes.module.set",error:"settings_unavailable"}, opts.req);
                 var err = new Error("Settings unavailable");
                 err.code = "settings_unavailable";
                 err.status = 400;
@@ -268,7 +276,7 @@ var api = module.exports = {
             try {
                 var module = runtime.nodes.getModuleInfo(mod);
                 if (!module) {
-                    runtime.log.audit({event: "nodes.module.set",module:mod,error:"not_found"});
+                    runtime.log.audit({event: "nodes.module.set",module:mod,error:"not_found"}, opts.req);
                     var err = new Error();
                     err.code = "not_found";
                     err.status = 404;
@@ -287,7 +295,7 @@ var api = module.exports = {
                     return reject(err);
                 });
             } catch(error) {
-                runtime.log.audit({event: "nodes.module.set",module:mod,enabled:opts.enabled,error:error.code||"unexpected_error",message:error.toString()});
+                runtime.log.audit({event: "nodes.module.set",module:mod,enabled:opts.enabled,error:error.code||"unexpected_error",message:error.toString()}, opts.req);
                 error.status = 400;
                 return reject(error);
             }
@@ -300,13 +308,14 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the node-set to enable or disable
     * @param {String} opts.enabled - whether the module should be enabled or disabled
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<ModuleInfo>} - the module info object
     * @memberof @node-red/runtime_nodes
     */
     setNodeSetState: function(opts) {
         return new Promise(function(resolve,reject) {
             if (!runtime.settings.available()) {
-                runtime.log.audit({event: "nodes.info.set",error:"settings_unavailable"});
+                runtime.log.audit({event: "nodes.info.set",error:"settings_unavailable"}, opts.req);
                 var err = new Error("Settings unavailable");
                 err.code = "settings_unavailable";
                 err.status = 400;
@@ -318,7 +327,7 @@ var api = module.exports = {
             try {
                 var node = runtime.nodes.getNodeInfo(id);
                 if (!node) {
-                    runtime.log.audit({event: "nodes.info.set",id:id,error:"not_found"});
+                    runtime.log.audit({event: "nodes.info.set",id:id,error:"not_found"}, opts.req);
                     var err = new Error();
                     err.code = "not_found";
                     err.status = 404;
@@ -326,16 +335,16 @@ var api = module.exports = {
                 } else {
                     delete node.loaded;
                     putNode(node,enabled).then(function(result) {
-                        runtime.log.audit({event: "nodes.info.set",id:id,enabled:enabled});
+                        runtime.log.audit({event: "nodes.info.set",id:id,enabled:enabled}, opts.req);
                         return resolve(result);
                     }).catch(function(err) {
-                        runtime.log.audit({event: "nodes.info.set",id:id,enabled:enabled,error:err.code||"unexpected_error",message:err.toString()});
+                        runtime.log.audit({event: "nodes.info.set",id:id,enabled:enabled,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                         err.status = 400;
                         return reject(err);
                     });
                 }
             } catch(error) {
-                runtime.log.audit({event: "nodes.info.set",id:id,enabled:enabled,error:error.code||"unexpected_error",message:error.toString()});
+                runtime.log.audit({event: "nodes.info.set",id:id,enabled:enabled,error:error.code||"unexpected_error",message:error.toString()}, opts.req);
                 error.status = 400;
                 return reject(error);
             }
@@ -347,6 +356,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {User} opts.lang - the i18n language to return. If not set, uses runtime default (en-US)
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the message catalogs
     * @memberof @node-red/runtime_nodes
     */
@@ -376,6 +386,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {User} opts.module - the module
     * @param {User} opts.lang - the i18n language to return. If not set, uses runtime default (en-US)
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the message catalog
     * @memberof @node-red/runtime_nodes
     */
@@ -397,12 +408,13 @@ var api = module.exports = {
     * Gets the list of all icons available in the modules installed within the runtime
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<IconList>} - the list of all icons
     * @memberof @node-red/runtime_nodes
     */
     getIconList: function(opts) {
         return new Promise(function(resolve,reject) {
-            runtime.log.audit({event: "nodes.icons.get"});
+            runtime.log.audit({event: "nodes.icons.get"}, opts.req);
             return resolve(runtime.nodes.getNodeIcons());
         });
 
@@ -413,6 +425,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.module - the id of the module requesting the icon
     * @param {String} opts.icon - the name of the icon
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Buffer>} - the icon file as a Buffer or null if no icon available
     * @memberof @node-red/runtime_nodes
     */

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

@@ -27,11 +27,12 @@ var api = module.exports = {
     available: function(opts) {
         return Promise.resolve(!!runtime.storage.projects);
     },
-
     /**
     * List projects known to the runtime
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
@@ -56,10 +57,12 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {Object} opts.project - the project information
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     createProject: function(opts) {
+        runtime.log.audit({event: "projects.create",name:opts.project?opts.project.name:"missing-name"}, opts.req);
         return runtime.storage.projects.createProject(opts.user, opts.project)
     },
 
@@ -69,11 +72,13 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project to initialise
     * @param {Object} opts.project - the project information
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     initialiseProject: function(opts) {
         // Initialised set when creating default files for an empty repo
+        runtime.log.audit({event: "projects.initialise",id:opts.id}, opts.req);
         return runtime.storage.projects.initialiseProject(opts.user, opts.id, opts.project)
     },
 
@@ -81,6 +86,7 @@ var api = module.exports = {
     * Gets the active project
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the active project
     * @memberof @node-red/runtime_projects
     */
@@ -93,11 +99,13 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project to activate
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     setActiveProject: function(opts) {
         var currentProject = runtime.storage.projects.getActiveProject(opts.user);
+        runtime.log.audit({event: "projects.set",id:opts.id}, opts.req);
         if (!currentProject || opts.id !== currentProject.name) {
             return runtime.storage.projects.setActiveProject(opts.user, opts.id);
         } else {
@@ -110,6 +118,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project to get
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the project metadata
     * @memberof @node-red/runtime_projects
     */
@@ -123,10 +132,12 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project to update
     * @param {Object} opts.project - the project information
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     updateProject: function(opts) {
+        runtime.log.audit({event: "projects.update",id:opts.id}, opts.req);
         return runtime.storage.projects.updateProject(opts.user, opts.id, opts.project);
     },
 
@@ -135,10 +146,12 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project to update
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     deleteProject: function(opts) {
+        runtime.log.audit({event: "projects.delete",id:opts.id}, opts.req);
         return runtime.storage.projects.deleteProject(opts.user, opts.id);
     },
 
@@ -148,6 +161,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {Boolean} opts.remote - whether to include status of remote repos
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the project status
     * @memberof @node-red/runtime_projects
     */
@@ -161,6 +175,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {Boolean} opts.remote - whether to return remote branches (true) or local (false)
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - a list of the local branches
     * @memberof @node-red/runtime_projects
     */
@@ -174,6 +189,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String} opts.branch - the name of the branch
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the status of the branch
     * @memberof @node-red/runtime_projects
     */
@@ -188,10 +204,12 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.branch - the name of the branch
     * @param {Boolean} opts.create - whether to create the branch if it doesn't exist
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     setBranch: function(opts) {
+        runtime.log.audit({event: "projects.branch.set",id:opts.id, branch: opts.branch, create:opts.create}, opts.req);
         return runtime.storage.projects.setBranch(opts.user, opts.id, opts.branch, opts.create)
     },
 
@@ -202,10 +220,12 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.branch - the name of the branch
     * @param {Boolean} opts.force - whether to force delete
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     deleteBranch: function(opts) {
+        runtime.log.audit({event: "projects.branch.delete",id:opts.id, branch: opts.branch, force:opts.force}, opts.req);
         return runtime.storage.projects.deleteBranch(opts.user, opts.id, opts.branch, false, opts.force);
     },
 
@@ -215,10 +235,12 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String} opts.message - the message to associate with the commit
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     commit: function(opts) {
+        runtime.log.audit({event: "projects.commit",id:opts.id}, opts.req);
         return runtime.storage.projects.commit(opts.user, opts.id,{message: opts.message});
     },
 
@@ -228,6 +250,7 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String} opts.sha - the sha of the commit to return
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the commit details
     * @memberof @node-red/runtime_projects
     */
@@ -242,6 +265,7 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.limit - limit how many to return
     * @param {String} opts.before - id of the commit to work back from
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Array>} - an array of commits
     * @memberof @node-red/runtime_projects
     */
@@ -257,10 +281,12 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     abortMerge: function(opts) {
+        runtime.log.audit({event: "projects.merge.abort",id:opts.id}, opts.req);
         return runtime.storage.projects.abortMerge(opts.user, opts.id);
     },
 
@@ -271,10 +297,12 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.path - the path of the file being merged
     * @param {String} opts.resolutions - how to resolve the merge conflict
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     resolveMerge: function(opts) {
+        runtime.log.audit({event: "projects.merge.resolve",id:opts.id, file:opts.path}, opts.req);
         return runtime.storage.projects.resolveMerge(opts.user, opts.id, opts.path, opts.resolution);
     },
 
@@ -283,6 +311,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the file listing
     * @memberof @node-red/runtime_projects
     */
@@ -297,6 +326,7 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.path - the path of the file
     * @param {String} opts.tree - the version control tree to use
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the content of the file
     * @memberof @node-red/runtime_projects
     */
@@ -310,10 +340,12 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String|Array} opts.path - the path of the file, or an array of paths
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     stageFile: function(opts) {
+        runtime.log.audit({event: "projects.file.stage",id:opts.id, file:opts.path}, opts.req);
         return runtime.storage.projects.stageFile(opts.user, opts.id, opts.path);
     },
 
@@ -323,10 +355,12 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String} opts.path - the path of the file. If not set, all staged files are unstaged
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     unstageFile: function(opts) {
+        runtime.log.audit({event: "projects.file.unstage",id:opts.id, file:opts.path}, opts.req);
         return runtime.storage.projects.unstageFile(opts.user, opts.id, opts.path);
     },
 
@@ -336,10 +370,12 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String} opts.path - the path of the file
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     revertFile: function(opts) {
+        runtime.log.audit({event: "projects.file.revert",id:opts.id, file:opts.path}, opts.req);
         return runtime.storage.projects.revertFile(opts.user, opts.id,opts.path)
     },
 
@@ -350,6 +386,7 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.path - the path of the file
     * @param {String} opts.type - the type of diff
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the requested diff
     * @memberof @node-red/runtime_projects
     */
@@ -362,6 +399,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - a list of project remotes
     * @memberof @node-red/runtime_projects
     */
@@ -378,10 +416,12 @@ var api = module.exports = {
     * @param {Object} opts.remote - the remote metadata
     * @param {String} opts.remote.name - the name of the remote
     * @param {String} opts.remote.url - the url of the remote
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     addRemote: function(opts) {
+        runtime.log.audit({event: "projects.remote.add",id:opts.id, remote:opts.remote.name}, opts.req);
         return runtime.storage.projects.addRemote(opts.user, opts.id, opts.remote)
     },
 
@@ -391,10 +431,12 @@ var api = module.exports = {
     * @param {User} opts.user - the user calling the api
     * @param {String} opts.id - the id of the project
     * @param {String} opts.remote - the name of the remote
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     removeRemote: function(opts) {
+        runtime.log.audit({event: "projects.remote.delete",id:opts.id, remote:opts.remote}, opts.req);
         return runtime.storage.projects.removeRemote(opts.user, opts.id, opts.remote);
     },
 
@@ -405,10 +447,12 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {Object} opts.remote - the remote metadata
     * @param {String} opts.remote.name - the name of the remote
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     updateRemote: function(opts) {
+        runtime.log.audit({event: "projects.remote.update",id:opts.id, remote:opts.remote.name}, opts.req);
         return runtime.storage.projects.updateRemote(opts.user, opts.id, opts.remote.name, opts.remote)
     },
 
@@ -416,10 +460,15 @@ var api = module.exports = {
     * Pull changes from the remote
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {String} opts.remote - the remote to pull
+    * @param {Boolean} opts.track - whether to track this remote
+    * @param {Boolean} opts.allowUnrelatedHistories -
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     pull: function(opts) {
+        runtime.log.audit({event: "projects.pull",id:opts.id, remote: opts.remote, track:opts.track}, opts.req);
         return runtime.storage.projects.pull(opts.user, opts.id, opts.remote, opts.track, opts.allowUnrelatedHistories);
     },
 
@@ -430,10 +479,12 @@ var api = module.exports = {
     * @param {String} opts.id - the id of the project
     * @param {String} opts.remote - the name of the remote
     * @param {String} opts.track - whether to set the remote as the upstream
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - resolves when complete
     * @memberof @node-red/runtime_projects
     */
     push: function(opts) {
+        runtime.log.audit({event: "projects.push",id:opts.id, remote: opts.remote, track:opts.track}, opts.req);
         return runtime.storage.projects.push(opts.user, opts.id, opts.remote, opts.track);
     }
 

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

@@ -60,6 +60,7 @@ var api = module.exports = {
     * Gets the runtime settings object
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the runtime settings
     * @memberof @node-red/runtime_settings
     */
@@ -125,6 +126,7 @@ var api = module.exports = {
     * Gets an individual user's settings object
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the user settings
     * @memberof @node-red/runtime_settings
     */
@@ -143,6 +145,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {Object} opts.settings - the updates to the user settings
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the user settings
     * @memberof @node-red/runtime_settings
     */
@@ -158,16 +161,16 @@ var api = module.exports = {
             currentSettings = extend(currentSettings, opts.settings);
             try {
                 runtime.settings.setUserSettings(username, currentSettings).then(function() {
-                    runtime.log.audit({event: "settings.update",username:username});
+                    runtime.log.audit({event: "settings.update",username:username}, opts.req);
                     return resolve();
                 }).catch(function(err) {
-                    runtime.log.audit({event: "settings.update",username:username,error:err.code||"unexpected_error",message:err.toString()});
+                    runtime.log.audit({event: "settings.update",username:username,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                     err.status = 400;
                     return reject(err);
                 });
             } catch(err) {
                 runtime.log.warn(runtime.log._("settings.user-not-available",{message:runtime.log._("settings.not-available")}));
-                runtime.log.audit({event: "settings.update",username:username,error:err.code||"unexpected_error",message:err.toString()});
+                runtime.log.audit({event: "settings.update",username:username,error:err.code||"unexpected_error",message:err.toString()}, opts.req);
                 err.status = 400;
                 return reject(err);
             }
@@ -178,6 +181,7 @@ var api = module.exports = {
     * Gets a list of a user's ssh keys
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<Object>} - the user's ssh keys
     * @memberof @node-red/runtime_settings
     */
@@ -198,6 +202,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {User} opts.id - the id of the key to return
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the user's ssh public key
     * @memberof @node-red/runtime_settings
     */
@@ -229,6 +234,7 @@ var api = module.exports = {
     * @param {User} opts.password - (optional) the password for the key pair
     * @param {User} opts.comment - (option) a comment to associate with the key pair
     * @param {User} opts.size - (optional) the size of the key. Default: 2048
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise<String>} - the id of the generated key
     * @memberof @node-red/runtime_settings
     */
@@ -249,6 +255,7 @@ var api = module.exports = {
     * @param {Object} opts
     * @param {User} opts.user - the user calling the api
     * @param {User} opts.id - the id of the key to delete
+    * @param {Object} opts.req - the request to log (optional)
     * @return {Promise} - resolves when deleted
     * @memberof @node-red/runtime_settings
     */

packages/node_modules/@node-red/runtime/lib/index.js

@@ -129,7 +129,7 @@ function start() {
             log.info(log._("runtime.version",{component:"Node.js ",version:process.version}));
             if (settings.UNSUPPORTED_VERSION) {
                 log.error("*****************************************************************");
-                log.error("* "+log._("runtime.unsupported_version",{component:"Node.js",version:process.version,requires: ">=4"})+" *");
+                log.error("* "+log._("runtime.unsupported_version",{component:"Node.js",version:process.version,requires: ">=8.9.0"})+" *");
                 log.error("*****************************************************************");
                 events.emit("runtime-event",{id:"runtime-unsupported-version",payload:{type:"error",text:"notification.errors.unsupportedVersion"},retain:true});
             }

packages/node_modules/@node-red/runtime/lib/nodes/Node.js

@@ -272,7 +272,7 @@ Node.prototype.error = function(logMessage,msg) {
         logMessage = logMessage || "";
     }
     var handled = false;
-    if (msg) {
+    if (msg && typeof msg === 'object') {
         handled = this._flow.handleError(this,logMessage,msg);
     }
     if (!handled) {

packages/node_modules/@node-red/runtime/lib/nodes/context/index.js

@@ -234,7 +234,7 @@ function createContext(id,seed,parent) {
                         if (err.code === "INVALID_EXPR") {
                             throw err;
                         }
-                        value[0] = undefined;
+                        values[0] = undefined;
                     }
                 }
             } else {
@@ -246,7 +246,7 @@ function createContext(id,seed,parent) {
                             if (err.code === "INVALID_EXPR") {
                                 throw err;
                             }
-                            value[i] = undefined;
+                            values[i] = undefined;
                         }
                     }
                 }

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

@@ -24,6 +24,54 @@ const flowUtil = require("./util");
 
 var Log;
 
+/**
+ * Create deep copy of object
+ */
+function deepCopy(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Evaluate Input Value
+ */
+function evaluateInputValue(value, type, node) {
+    if (type === "bool") {
+        return (value === "true") || (value === true);
+    }
+    return redUtil.evaluateNodeProperty(value, type, node, null, null);
+}
+
+/**
+ * Compose information object for env var
+ */
+function composeInfo(info, val) {
+    var result = {
+        name: info.name,
+        type: info.type,
+        value: val,
+    };
+    if (info.ui) {
+        var ui = info.ui;
+        result.ui = {
+            hasUI: ui.hasUI,
+            icon: ui.icon,
+            labels: ui.labels,
+            type: ui.type
+        };
+        var retUI = result.ui;
+        if (ui.type === "input") {
+            retUI.inputTypes = ui.inputTypes;
+        }
+        if (ui.type === "select") {
+            retUI.menu = ui.menu;
+        }
+        if (ui.type === "spinner") {
+            retUI.spinner = ui.spinner;
+        }
+    }
+    return result;
+}
+
 
 /**
  * This class represents a subflow - which is handled as a special type of Flow
@@ -95,10 +143,19 @@ class Subflow extends Flow {
 
         var env = [];
         if (this.subflowDef.env) {
-            this.subflowDef.env.forEach(e => { env[e.name] = e; });
+            this.subflowDef.env.forEach(e => {
+                env[e.name] = e;
+            });
         }
         if (this.subflowInstance.env) {
-            this.subflowInstance.env.forEach(e => { env[e.name] = e; });
+            this.subflowInstance.env.forEach(e => {
+                var old = env[e.name];
+                var ui = old ? old.ui : null;
+                env[e.name] = e;
+                if (ui) {
+                    env[e.name].ui = ui; 
+                }
+            });
         }
         this.env = env;
     }
@@ -257,6 +314,7 @@ class Subflow extends Flow {
         super.start(diff);
     }
 
+
     /**
      * Get environment variable of subflow
      * @param {String}   name   name of env var
@@ -266,8 +324,16 @@ class Subflow extends Flow {
         this.trace("getSetting:"+name);
         if (!/^\$parent\./.test(name)) {
             var env = this.env;
-            if (env && env.hasOwnProperty(name)) {
-                var val = env[name];
+            var is_info = name.endsWith("_info");
+            var is_type = name.endsWith("_type");
+            var ename = (is_info || is_type) ? name.substring(0, name.length -5) : name; // 5 = length of "_info"/"_type"
+
+            if (env && env.hasOwnProperty(ename)) {
+                var val = env[ename];
+
+                if (is_type) {
+                    return val ? val.type : undefined;
+                }
                 // If this is an env type property we need to be careful not
                 // to get into lookup loops.
                 // 1. if the value to lookup is the same as this one, go straight to parent
@@ -276,11 +342,15 @@ class Subflow extends Flow {
                 // See https://github.com/node-red/node-red/issues/2099
                 if (val.type !== 'env' || val.value !== name) {
                     let value = val.value;
-                    if (val.type === 'env') {
+                    var type = val.type;
+                    if (type === 'env') {
                         value = value.replace(new RegExp("\\${"+name+"}","g"),"${$parent."+name+"}");
                     }
                     try {
-                        var ret = redUtil.evaluateNodeProperty(value, val.type, this.node, null, null);
+                        var ret = evaluateInputValue(value, type, this.node);
+                        if (is_info) {
+                            return composeInfo(val, ret);
+                        }
                         return ret;
                     }
                     catch (e) {

packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/ssh/keygen.js

@@ -51,6 +51,12 @@ function runSshKeygenCommand(args,cwd,env) {
                 resolve(stdout);
             }
         });
+        child.on('error', function(err) {
+            if (/ENOENT/.test(err.toString())) {
+                err.code = "command_not_found";
+            }
+            reject(err);
+        });
     });
 }
 

packages/node_modules/@node-red/util/lib/log.js

@@ -214,7 +214,7 @@ var log = module.exports = {
         if (req) {
             msg.user = req.user;
             msg.path = req.path;
-            msg.ip = (req.headers && req.headers['x-forwarded-for']) || (req.connection && req.connection.remoteAddress) || undefined;
+            msg.ip = req.ip || (req.headers && req.headers['x-forwarded-for']) || (req.connection && req.connection.remoteAddress) || undefined;
         }
         log.log(msg);
     }

packages/node_modules/node-red/lib/red.js

@@ -27,9 +27,9 @@ var apiEnabled = false;
 
 function checkVersion(userSettings) {
     var semver = require('semver');
-    if (!semver.satisfies(process.version,">=4.8.0")) {
+    if (!semver.satisfies(process.version,">=8.9.0")) {
         // TODO: in the future, make this a hard error.
-        // var e = new Error("Unsupported version of node.js");
+        // var e = new Error("Unsupported version of Node.js");
         // e.code = "unsupported_version";
         // throw e;
         userSettings.UNSUPPORTED_VERSION = process.version;
@@ -39,7 +39,7 @@ function checkVersion(userSettings) {
  * This module provides the full Node-RED application, with both the runtime
  * and editor components built in.
  *
- * The API this module exposes allows it to be embedded within another node.js
+ * The API this module exposes allows it to be embedded within another Node.js
  * application.
  *
  * @namespace node-red

packages/node_modules/node-red/red.js

@@ -197,10 +197,8 @@ try {
     RED.init(server,settings);
 } catch(err) {
     if (err.code == "unsupported_version") {
-        console.log("Unsupported version of node.js:",process.version);
-        console.log("Node-RED requires node.js v4 or later");
-    } else if (err.code == "not_built") {
-        console.log("Node-RED has not been built. See README.md for details");
+        console.log("Unsupported version of Node.js:",process.version);
+        console.log("Node-RED requires Node.js v8.9.0 or later");
     } else {
         console.log("Failed to start server:");
         if (err.stack) {

packages/node_modules/node-red/settings.js

@@ -55,7 +55,7 @@ module.exports = {
     // The maximum number of messages nodes will buffer internally as part of their
     // operation. This applies across a range of nodes that operate on message sequences.
     //  defaults to no limit. A value of 0 also means no limit is applied.
-    //nodeMaxMessageBufferLength: 0,
+    //nodeMessageBufferMaxLength: 0,
 
     // To disable the option for using local files for storing keys and certificates in the TLS configuration
     //  node, set this to true

scripts/install-ui-test-dependencies.sh

@@ -0,0 +1,7 @@
+npm install --no-save \
+ grunt-webdriver@^2.0.3 \
+ wdio-chromedriver-service@^0.1.5 \
+ wdio-mocha-framework@^0.6.4 \
+ wdio-spec-reporter@^0.1.5 \
+ webdriverio@^4.14.1 \
+ chromedriver@2

test/nodes/subflow/subflow_spec.js

@@ -447,4 +447,117 @@ describe('subflow', function() {
         });
     });
 
+    it('should access env var type of subflow instance', function(done) {
+        var flow = [
+            {id:"t0", type:"tab", label:"", disabled:false, info:""},
+            {id:"n1", x:10, y:10, z:"t0", type:"subflow:s1",
+             env: [
+                 {name: "K", type: "str", value: "V"}
+             ],
+             wires:[["n2"]]},
+            {id:"n2", x:10, y:10, z:"t0", type:"helper", wires:[]},
+            // Subflow
+            {id:"s1", type:"subflow", name:"Subflow", info:"",
+             in:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1"} ]
+             }],
+             out:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1", port:0} ]
+             }]
+            },
+            {id:"s1-n1", x:10, y:10, z:"s1", type:"function",
+             func:"msg.V = env.get('K_type'); return msg;",
+             wires:[]}
+        ];
+        helper.load(functionNode, flow, function() {
+            var n1 = helper.getNode("n1");
+            var n2 = helper.getNode("n2");
+            n2.on("input", function(msg) {
+                try {
+                    msg.should.have.property("V", "str");
+                    done();
+                }
+                catch (e) {
+                    console.log(e);
+                    done(e);
+                }
+            });
+            n1.receive({payload:"foo"});
+        });
+    });
+
+    it('should access env var info of subflow instance', function(done) {
+        var flow = [
+            {id:"t0", type:"tab", label:"", disabled:false, info:""},
+            {id:"n1", x:10, y:10, z:"t0", type:"subflow:s1",
+             env: [
+                 {name: "K", type: "str", value: "V"}
+             ],
+             wires:[["n2"]]},
+            {id:"n2", x:10, y:10, z:"t0", type:"helper", wires:[]},
+            // Subflow
+            {id:"s1", type:"subflow", name:"Subflow", info:"",
+             in:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1"} ]
+             }],
+             out:[{
+                 x:10, y:10,
+                 wires:[ {id:"s1-n1", port:0} ]
+             }],
+             env:[
+                 {
+                     name: "K", type: "str", value: "",
+                     ui: {
+                         hasUI: true,
+                         icon: "icon",
+                         labels: {
+                             "en-US": "label"
+                         },
+                         type: "input",
+                         inputTypes: {
+                             str: true
+                         }
+                     }
+                 }
+             ]
+            },
+            {id:"s1-n1", x:10, y:10, z:"s1", type:"function",
+             func:"msg.V = env.get('K_info'); return msg;",
+             wires:[]}
+        ];
+        helper.load(functionNode, flow, function() {
+            var n1 = helper.getNode("n1");
+            var n2 = helper.getNode("n2");
+            n2.on("input", function(msg) {
+                try {
+                    msg.should.have.property("V");
+                    var v = msg.V;
+                    v.should.have.property("name", "K");
+                    v.should.have.property("value", "V");
+                    v.should.have.property("type", "str");
+                    v.should.have.property("ui");
+                    var ui = v.ui;
+                    ui.should.have.property("hasUI", true);
+                    ui.should.have.property("icon", "icon");
+                    ui.should.have.property("type", "input");
+                    ui.should.have.property("labels");
+                    var labels = ui.labels;
+                    labels.should.have.property("en-US", "label");
+                    ui.should.have.property("inputTypes");
+                    var types = ui.inputTypes;
+                    types.should.have.property("str", true);
+                    done();
+                }
+                catch (e) {
+                    console.log(e);
+                    done(e);
+                }
+            });
+            n1.receive({payload:"foo"});
+        });
+    });
+
 });

test/unit/@node-red/editor-api/lib/admin/nodes_spec.js

@@ -441,7 +441,7 @@ describe("api/admin/nodes", function() {
             nodes.init({
                 nodes:{
                     getModuleCatalog: function(opts) {
-                        return Promise.resolve(opts);
+                        return Promise.resolve({a:123});
                     }
                 }
             });
@@ -452,7 +452,7 @@ describe("api/admin/nodes", function() {
                     if (err) {
                         throw err;
                     }
-                    res.body.should.eql({ module: 'module/set' });
+                    res.body.should.eql({a:123});
                     done();
                 });
         });

test/unit/@node-red/runtime/lib/api/projects_spec.js

@@ -57,7 +57,9 @@ describe("runtime-api/settings", function() {
 
     });
     describe("listProjects", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+            log: mockLog(),
+            storage: {projects: {
             listProjects: sinon.spy(function(user) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -105,7 +107,9 @@ describe("runtime-api/settings", function() {
 
     });
     describe("createProject", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             createProject: sinon.spy(function(user,project) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -138,7 +142,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("initialiseProject", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             initialiseProject: sinon.spy(function(user,id,project) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -172,7 +178,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getActiveProject", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getActiveProject: sinon.spy(function(user) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -209,7 +217,9 @@ describe("runtime-api/settings", function() {
         var activeProject;
         var runtime;
         beforeEach(function() {
-            runtime = {storage: {projects: {
+            runtime = {
+        log: mockLog(),
+        storage: {projects: {
                 getActiveProject: sinon.spy(function() { return activeProject;}),
                 setActiveProject: sinon.spy(function(user,id) {
                     if (user === "error") {
@@ -258,7 +268,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getProject", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getProject: sinon.spy(function(user,id) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -291,7 +303,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("updateProject", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             updateProject: sinon.spy(function(user,id,project) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -325,7 +339,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("deleteProject", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             deleteProject: sinon.spy(function(user,id) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -359,7 +375,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getStatus", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getStatus: sinon.spy(function(user,id,remote) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -392,7 +410,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("getBranches", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getBranches: sinon.spy(function(user,id,remote) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -425,7 +445,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("getBranchStatus", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getBranchStatus: sinon.spy(function(user,id,branch) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -459,7 +481,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("setBranch", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             setBranch: sinon.spy(function(user,id,branch,create) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -493,7 +517,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("deleteBranch", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             deleteBranch: sinon.spy(function(user,id,branch,something,force) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -527,7 +553,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("commit", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             commit: sinon.spy(function(user,id,message) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -560,7 +588,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("getCommit", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getCommit: sinon.spy(function(user,id,sha) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -594,7 +624,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getCommits", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getCommits: sinon.spy(function(user,id,options) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -634,7 +666,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("abortMerge", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             abortMerge: sinon.spy(function(user,id) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -668,7 +702,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("resolveMerge", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             resolveMerge: sinon.spy(function(user,id,path,resolution) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -702,7 +738,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getFiles", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getFiles: sinon.spy(function(user,id) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -736,7 +774,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getFile", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getFile: sinon.spy(function(user,id,path,tree) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -770,7 +810,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("stageFile", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             stageFile: sinon.spy(function(user,id,path) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -803,7 +845,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("unstageFile", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             unstageFile: sinon.spy(function(user,id,path) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -837,7 +881,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("revertFile", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             revertFile: sinon.spy(function(user,id,path) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -871,7 +917,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getFileDiff", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getFileDiff: sinon.spy(function(user,id,path,type) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -905,7 +953,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("getRemotes", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             getRemotes: sinon.spy(function(user,id) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -939,7 +989,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("addRemote", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             addRemote: sinon.spy(function(user,id,remote) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -973,7 +1025,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("removeRemote", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             removeRemote: sinon.spy(function(user,id,remote) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -1007,7 +1061,9 @@ describe("runtime-api/settings", function() {
     });
 
     describe("updateRemote", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             updateRemote: sinon.spy(function(user,id,name,remote) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -1040,7 +1096,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("pull", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             pull: sinon.spy(function(user,id,remote,track,allowUnrelatedHistories) {
                 if (user === "error") {
                     var err = new Error("error");
@@ -1073,7 +1131,9 @@ describe("runtime-api/settings", function() {
         });
     });
     describe("push", function() {
-        var runtime = {storage: {projects: {
+        var runtime = {
+        log: mockLog(),
+        storage: {projects: {
             push: sinon.spy(function(user,id,remote,track) {
                 if (user === "error") {
                     var err = new Error("error");