Add description field to Subflows

editor/js/nodes.js

@@ -315,6 +315,7 @@ RED.nodes = (function() {
         subflows[sf.id] = sf;
         RED.nodes.registerType("subflow:"+sf.id, {
             defaults:{name:{value:""}},
+            info: sf.info,
             icon:"subflow.png",
             category: "subflows",
             inputs: sf.in.length,
@@ -446,6 +447,7 @@ RED.nodes = (function() {
         node.id = n.id;
         node.type = n.type;
         node.name = n.name;
+        node.info = n.info;
         node.in = [];
         node.out = [];
 

editor/js/ui/editor.js

@@ -15,6 +15,7 @@
  **/
 RED.editor = (function() {
     var editing_node = null;
+    var subflowEditor;
 
     function getCredentialsURL(nodeType, nodeID) {
         var dashedType = nodeType.replace(/\s+/g, '-');
@@ -1066,6 +1067,14 @@ RED.editor = (function() {
                                 $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName);
                             }
 
+                            var newDescription = subflowEditor.getValue();
+
+                            if (newDescription != editing_node.info) {
+                                changes['info'] = editing_node.info;
+                                editing_node.info = newDescription;
+                                changed = true;
+                            }
+
                             RED.palette.refresh();
 
                             if (changed) {
@@ -1112,6 +1121,14 @@ RED.editor = (function() {
                     }
                 }
             ],
+            create: function(e) {
+                $("#subflow-dialog form" ).submit(function(e) { e.preventDefault();});
+                subflowEditor = RED.editor.createEditor({
+                    id: 'subflow-input-info-editor',
+                    mode: 'ace/mode/markdown',
+                    value: ""
+                });
+            },
             open: function(e) {
                 RED.keyboard.disable();
                 var minWidth = $(this).dialog('option','minWidth');
@@ -1128,16 +1145,28 @@ RED.editor = (function() {
                 RED.sidebar.info.refresh(editing_node);
                 RED.workspaces.refresh();
                 editing_node = null;
+            },
+            resize: function(e) {
+                var rows = $("#subflow-dialog>form>div:not(.node-text-editor-row)");
+                var editorRow = $("#subflow-dialog>form>div.node-text-editor-row");
+                var height = $("#subflow-dialog").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                height -= (parseInt($("#subflow-dialog>form").css("marginTop"))+parseInt($("#subflow-dialog>form").css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
+                subflowEditor.resize();
             }
         });
-        $("#subflow-dialog form" ).submit(function(e) { e.preventDefault();});
     }
 
 
     function showEditSubflowDialog(subflow) {
         editing_node = subflow;
         RED.view.state(RED.state.EDITING);
+
         $("#subflow-input-name").val(subflow.name);
+        subflowEditor.getSession().setValue(subflow.info,-1);
         var userCount = 0;
         var subflowType = "subflow:"+editing_node.id;
 

editor/js/ui/palette.js

@@ -60,7 +60,7 @@ RED.palette = (function() {
         });
     }
 
-    function setLabel(type, el,label) {
+    function setLabel(type, el,label, info) {
         var nodeWidth = 82;
         var nodeHeight = 25;
         var lineHeight = 20;
@@ -101,10 +101,9 @@ RED.palette = (function() {
             if (label != type) {
                 l = "<p><b>"+label+"</b><br/><i>"+type+"</i></p>";
             }
-
-            popOverContent = $(l+($("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
+            popOverContent = $(l+(info?info:$("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
                                 .filter(function(n) {
-                                    return this.nodeType == 1 || (this.nodeType == 3 && this.textContent.trim().length > 0)
+                                    return (this.nodeType == 1 && this.nodeName == "P") || (this.nodeType == 3 && this.textContent.trim().length > 0)
                                 }).slice(0,2);
         } catch(err) {
             // Malformed HTML may cause errors. TODO: need to understand what can break
@@ -114,7 +113,6 @@ RED.palette = (function() {
             popOverContent = "<p><b>"+label+"</b></p><p>"+RED._("palette.noInfo")+"</p>";
         }
 
-
         el.data('popover').setContent(popOverContent);
     }
 
@@ -127,7 +125,6 @@ RED.palette = (function() {
         if ($("#palette_node_"+nodeTypeId).length) {
             return;
         }
-
         if (exclusion.indexOf(def.category)===-1) {
 
             var category = def.category.replace(" ","_");
@@ -204,7 +201,13 @@ RED.palette = (function() {
             // });
             $(d).click(function() {
                 RED.view.focus();
-                var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
+                var helpText;
+                if (nt.indexOf("subflow:") === 0) {
+                    helpText = marked(RED.nodes.subflow(nt.substring(8)).info) || "";
+                } else {
+                    helpText = $("script[data-help-name|='"+d.type+"']").html()||"";
+                }
+                var help = '<div class="node-help">'+helpText+"</div>";
                 RED.sidebar.info.set(help);
             });
             $(d).draggable({
@@ -215,14 +218,15 @@ RED.palette = (function() {
                 start: function() {RED.view.focus();}
             });
 
+            var nodeInfo = null;
             if (def.category == "subflows") {
                 $(d).dblclick(function(e) {
                     RED.workspaces.show(nt.substring(8));
                     e.preventDefault();
                 });
+                nodeInfo = marked(def.info);
             }
-
-            setLabel(nt,$(d),label);
+            setLabel(nt,$(d),label,nodeInfo);
 
             var categoryNode = $("#palette-container-"+category);
             if (categoryNode.find(".palette_node").length === 1) {
@@ -275,7 +279,7 @@ RED.palette = (function() {
             } else if (portOutput.length !== 0 && sf.out.length === 0) {
                 portOutput.remove();
             }
-            setLabel(sf.type+":"+sf.id,paletteNode,sf.name);
+            setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info));
         });
     }
 

editor/js/ui/subflow.js

@@ -224,7 +224,7 @@ RED.subflow = (function() {
         var toolbar = $("#workspace-toolbar");
         toolbar.empty();
 
-        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowName"><i class="fa fa-pencil"></i></a>').appendTo(toolbar);
+        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
         $('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
             '<div style="display: inline-block;" class="button-group">'+
             '<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
@@ -398,6 +398,7 @@ RED.subflow = (function() {
             type:"subflow",
             id:subflowId,
             name:name,
+            info:"",
             in: [],
             out: []
         };
@@ -410,6 +411,7 @@ RED.subflow = (function() {
             dirty:RED.nodes.dirty()
         });
         RED.workspaces.show(subflowId);
+        RED.nodes.dirty(true);
     }
 
     function convertToSubflow() {
@@ -497,6 +499,7 @@ RED.subflow = (function() {
             type:"subflow",
             id:subflowId,
             name:name,
+            info:"",
             in: Object.keys(candidateInputNodes).map(function(v,i) { var index = i; return {
                 type:"subflow",
                 direction:"in",

editor/js/ui/tab-info.js

@@ -75,8 +75,8 @@ RED.sidebar.info = (function() {
         table += "<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>";
 
         var m = /^subflow(:(.+))?$/.exec(node.type);
-        if (m) {
         var subflowNode;
+        if (m) {
             if (m[2]) {
                 subflowNode = RED.nodes.subflow(m[2]);
             } else {
@@ -135,12 +135,13 @@ RED.sidebar.info = (function() {
             }
         }
         table += "</tbody></table><hr/>";
-        if (node.type != "comment") {
+        if (!subflowNode && node.type != "comment") {
             var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
             table  += '<div class="node-help">'+helpText+"</div>";
         }
-
-        if (node._def && node._def.info) {
+        if (subflowNode) {
+            table += '<div class="node-help">'+marked(subflowNode.info)+'</div>';
+        } else if (node._def && node._def.info) {
             var info = node._def.info;
             table += '<div class="node-help">'+marked(typeof info === "function" ? info.call(node) : info)+'</div>';
             //table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';

editor/templates/index.mst

@@ -83,10 +83,17 @@
 <div id="subflow-dialog" class="hide">
     <form class="form-horizontal">
         <div class="form-row">
-            <label data-i18n="common.label.name"></label><input type="text" id="subflow-input-name">
+            <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 for="subflow-input-info" data-i18n="subflow.info"></label>
+            <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>
+        </div>
+        <div class="form-row node-text-editor-row">
+            <div style="height: 250px;" class="node-text-editor" id="subflow-input-info-editor"></div>
+        </div>
+        <div class="form-row form-tips" id="subflow-dialog-user-count"></div>
     </form>
-    <div class="form-tips" id="subflow-dialog-user-count"></div>
 </div>
 
 <div id="node-dialog-confirm-deploy" class="hide">

locales/en-US/editor.json

@@ -99,10 +99,12 @@
         "edit": "Edit flow",
         "subflowInstances": "There is __count__ instance of this subflow",
         "subflowInstances_plural": "There are __count__ instances of this subflow",
-        "editSubflowName": "edit name",
+        "editSubflowProperties": "edit properties",
         "input": "inputs:",
         "output": "outputs:",
         "deleteSubflow": "delete subflow",
+        "info": "Description",
+        "format":"markdown format",
         "errors": {
             "noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
             "multipleInputsToSelection": "<strong>Cannot create subflow</strong>: multiple inputs to selection"