From 6f37d5ca5c7db24a4f15a7a569c46ab347454dbd Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 23 Apr 2019 15:46:15 +0100
Subject: [PATCH] Move type-library dialogs to new treeList style

---
 .../@node-red/editor-client/src/js/red.js     |   2 +-
 .../editor-client/src/js/ui/clipboard.js      |  25 ++-
 .../editor-client/src/js/ui/common/menu.js    |   1 -
 .../src/js/ui/common/treeList.js              |   7 +-
 .../editor-client/src/js/ui/library.js        | 212 +++++++-----------
 .../editor-client/src/sass/library.scss       |  22 +-
 .../editor-client/src/sass/panels.scss        |   4 +-
 7 files changed, 108 insertions(+), 165 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js
index 8fdb0de08..3cbaee458 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -464,7 +464,7 @@ var RED = (function() {
         menuOptions.push(null);
         menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
             {id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"},
-            {id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]}
+            {id:"menu-item-import-library",label:RED._("menu.label.library"),onselect:"core:library-import"}
         ]});
         menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),options:[
             {id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-export-dialog"},
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
index 09af09251..b84e98ed2 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
@@ -71,7 +71,10 @@ RED.clipboard = (function() {
                                 $( this ).dialog( "close" );
                             } else {
                                 var flowToExport = $("#clipboard-export").val();
-                                var selectedPath = libraryBrowser.getPath();
+                                var selectedPath = libraryBrowser.getSelected();
+                                if (!selectedPath.children) {
+                                    selectedPath = selectedPath.parent;
+                                }
                                 var filename = $("#clipboard-dialog-tab-library-name").val().trim();
                                 var saveFlow = function() {
                                     $.ajax({
@@ -80,7 +83,6 @@ RED.clipboard = (function() {
                                         data: flowToExport,
                                         contentType: "application/json; charset=utf-8"
                                     }).done(function() {
-                                        // RED.library.loadFlowLibrary();
                                         $(dialog).dialog( "close" );
                                         RED.notify(RED._("library.exportedToLibrary"),"success");
                                     }).fail(function(xhr,textStatus,err) {
@@ -409,7 +411,7 @@ RED.clipboard = (function() {
             container: $("#clipboard-dialog-export-tab-library-browser"),
             addFolderButton: true,
             onselect: function(file) {
-                if (file && file.label) {
+                if (file && file.label && !file.children) {
                     $("#clipboard-dialog-tab-library-name").val(file.label);
                 }
             }
@@ -421,17 +423,17 @@ RED.clipboard = (function() {
                 label: label,
                 path: root
             };
+            result.children = [];
 
             if (list.f) {
-                result.files = list.f.map(function(f) {
-                    return {
+                list.f.forEach(function(f) {
+                    result.children.push({
                         icon: 'fa fa-file-o',
                         label: f,
                         path: root+f
-                    }
+                    });
                 });
             }
-            result.children = [];
             if (list.d) {
                 for (var l in list.d) {
                     if (list.d.hasOwnProperty(l)) {
@@ -441,6 +443,15 @@ RED.clipboard = (function() {
                     }
                 }
             }
+            result.children.sort(function(A,B){
+                if (A.children && !B.children) {
+                    return -1;
+                } else if (!A.children && B.children) {
+                    return 1;
+                } else {
+                    return A.label.localeCompare(B.label);
+                }
+            });
             return result;
         }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
index 612bf4516..adac42463 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
@@ -263,6 +263,5 @@ RED.menu = (function() {
         addItem: addItem,
         removeItem: removeItem,
         setAction: setAction
-        //TODO: add an api for replacing a submenu - see library.js:loadFlowLibrary
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
index 79371fee6..70054c727 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
@@ -73,7 +73,7 @@
                 this.data(this.options.data);
             }
         },
-        _addChildren: function(container,children,depth) {
+        _addChildren: function(container,parent,children,depth) {
             var that = this;
             var subtree = $('<ol>').appendTo(container).editableList({
                 addButton: false,
@@ -84,6 +84,7 @@
                 }
             });
             for (var i=0;i<children.length;i++) {
+                children[i].parent = parent;
                 subtree.editableList('addItem',children[i])
             }
             return subtree;
@@ -122,7 +123,7 @@
                         var spinner;
                         item.children(item,function(children) {
                             childrenAdded = true;
-                            item.treeList.childList = that._addChildren(container,children,depth);
+                            item.treeList.childList = that._addChildren(container,parent,children,depth);
                             if (spinner) {
                                 spinner.remove();
                             }
@@ -180,7 +181,7 @@
             }
             if (item.children) {
                 if (Array.isArray(item.children)) {
-                    item.treeList.childList = that._addChildren(container,item.children,depth);
+                    item.treeList.childList = that._addChildren(container,item,item.children,depth);
                 }
                 if (item.expanded) {
                     item.treeList.expand();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
index 3bb2ea065..6b5af77fa 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
@@ -21,15 +21,20 @@ RED.library = (function() {
     var libraryEditor;
     var activeLibrary;
 
+
     var _libraryLookup = '<div id="node-dialog-library-load" class="hide">'+
         '<form class="form-horizontal">'+
             '<div style="height: 500px; position:relative; ">'+
-                '<div id="node-dialog-library-load-browser"></div>'+
-                '<div id="node-dialog-library-load-preview">'+
-                    '<div id="node-dialog-library-load-preview-details">'+
-                        '<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+
+                '<div id="node-dialog-library-load-panes">'+
+                    '<div class="red-ui-panel" id="node-dialog-library-load-browser"></div>'+
+                    '<div class="red-ui-panel">'+
+                        '<div id="node-dialog-library-load-preview">'+
+                            '<div class="red-ui-panel" id="node-dialog-library-load-preview-text"></div>'+
+                            '<div class="red-ui-panel" id="node-dialog-library-load-preview-details">'+
+                                '<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+
+                            '</div>'+
+                        '</div>'+
                     '</div>'+
-                    '<div id="node-dialog-library-load-preview-text"></div>'+
                 '</div>'+
             '</div>'+
         '</form>'+
@@ -54,7 +59,10 @@ RED.library = (function() {
             name = RED._("library.unnamedType",{type:activeLibrary.type});
         }
         var filename = $("#node-dialog-library-save-filename").val().trim()
-        var selectedPath = saveLibraryBrowser.getPath();
+        var selectedPath = saveLibraryBrowser.getSelected();
+        if (!selectedPath.children) {
+            selectedPath = selectedPath.parent;
+        }
         var queryArgs = [];
         var data = {};
         for (var i=0; i<activeLibrary.fields.length; i++) {
@@ -116,98 +124,40 @@ RED.library = (function() {
         }
     }
 
-    function loadFlowLibrary() {
-        $.getJSON("library/flows",function(data) {
-            //console.log(data);
-
-            var buildMenu = function(data,root) {
-                var i;
-                var li;
-                var a;
-                var ul = document.createElement("ul");
-                if (root === "") {
-                    ul.id = "menu-item-import-library-submenu";
-                }
-                ul.className = "dropdown-menu";
-                if (data.d) {
-                    for (i in data.d) {
-                        if (data.d.hasOwnProperty(i)) {
-                            li = document.createElement("li");
-                            li.className = "dropdown-submenu pull-left";
-                            a = document.createElement("a");
-                            a.href="#";
-                            var label = i.replace(/^@.*\//,"").replace(/^node-red-contrib-/,"").replace(/^node-red-node-/,"").replace(/-/g," ").replace(/_/g," ");
-                            a.innerText = label;
-                            li.appendChild(a);
-                            li.appendChild(buildMenu(data.d[i],root+(root!==""?"/":"")+i));
-                            ul.appendChild(li);
-                        }
-                    }
-                }
-                if (data.f) {
-                    for (i in data.f) {
-                        if (data.f.hasOwnProperty(i)) {
-                            li = document.createElement("li");
-                            a = document.createElement("a");
-                            a.href="#";
-                            a.innerText = data.f[i];
-                            a.flowName = root+(root!==""?"/":"")+data.f[i];
-                            a.onclick = function() {
-                                $.get('library/flows/'+this.flowName, function(data) {
-                                    RED.view.importNodes(data);
-                                });
-                            };
-                            li.appendChild(a);
-                            ul.appendChild(li);
-                        }
-                    }
-                }
-                return ul;
-            };
-            var examples;
-            if (data.d && data.d._examples_) {
-                examples = data.d._examples_;
-                delete data.d._examples_;
-            }
-            var menu = buildMenu(data,"");
-            $("#menu-item-import-examples").remove();
-            if (examples) {
-                RED.menu.addItem("menu-item-import",{id:"menu-item-import-examples",label:RED._("menu.label.examples"),options:[]})
-                $("#menu-item-import-examples-submenu").replaceWith(buildMenu(examples,"_examples_"));
-            }
-            //TODO: need an api in RED.menu for this
-            $("#menu-item-import-library-submenu").replaceWith(menu);
-        });
-    }
-
     function loadLibraryFolder(url,root,done) {
         $.getJSON("library/"+url+"/"+root,function(data) {
-            var files = [];
-            var items = data.reduce(function(acc,d) {
+            var items = data.map(function(d) {
                 if (typeof d === "string") {
-                    acc.push({
+                    return {
                         icon: 'fa fa-folder',
                         label: d,
                         path: root+d+"/",
                         children: function(item,done) {
-                            loadLibraryFolder(url,root+d+"/", function(files,children) {
-                                item.files = files;
+                            loadLibraryFolder(url,root+d+"/", function(children) {
                                 item.children = children; // TODO: should this be done by treeList for us
                                 done(children);
                             })
                         }
-                    });
+                    };
                 } else {
-                    files.push({
+                    return {
                         icon: 'fa fa-file-o',
                         label: d.fn,
                         path: root+d.fn,
                         props: d
-                    })
+                    };
                 }
-                return acc;
-            },[]);
-            done(files,items);
+            });
+            items.sort(function(A,B){
+                if (A.children && !B.children) {
+                    return -1;
+                } else if (!A.children && B.children) {
+                    return 1;
+                } else {
+                    return A.label.localeCompare(B.label);
+                }
+            });
+            done(items);
         });
     }
 
@@ -231,7 +181,6 @@ RED.library = (function() {
 
     function createUI(options) {
         var libraryData = {};
-        var selectedLibraryItem = null;
         var elementPrefix = options.elementPrefix || "node-input-";
 
         // Orion editor has set/getText
@@ -259,7 +208,7 @@ RED.library = (function() {
 
         $('#node-input-'+options.type+'-menu-open-library').click(function(e) {
             activeLibrary = options;
-            loadLibraryFolder(options.url, "", function(files,items) {
+            loadLibraryFolder(options.url, "", function(items) {
                 var listing = [{
                     icon: 'fa fa-archive',
                     label: "Local",
@@ -271,13 +220,14 @@ RED.library = (function() {
                         label: options.type,
                         path: options.type+"/",
                         expanded: true,
-                        children: items,
-                        files: files
+                        children: items
                     }]
                 }]
                 loadLibraryBrowser.data(listing);
             });
-            libraryEditor = ace.edit('node-dialog-library-load-preview-text');
+            libraryEditor = ace.edit('node-dialog-library-load-preview-text',{
+                useWorker: false
+            });
             libraryEditor.setTheme("ace/theme/tomorrow");
             if (options.mode) {
                 libraryEditor.getSession().setMode(options.mode);
@@ -290,7 +240,6 @@ RED.library = (function() {
             libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
             libraryEditor.$blockScrolling = Infinity;
 
-
             $( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
             e.preventDefault();
         });
@@ -305,7 +254,7 @@ RED.library = (function() {
             }
             $("#node-dialog-library-save-filename").attr("value",filename+".js");
 
-            loadLibraryFolder(options.url, "", function(files,items) {
+            loadLibraryFolder(options.url, "", function(items) {
                 var listing = [{
                     icon: 'fa fa-archive',
                     label: "Local",
@@ -317,8 +266,7 @@ RED.library = (function() {
                         label: options.type,
                         path: options.type+"/",
                         expanded: true,
-                        children: items,
-                        files: files
+                        children: items
                     }]
                 }]
                 saveLibraryBrowser.data(listing);
@@ -337,20 +285,15 @@ RED.library = (function() {
 
     function createBrowser(options) {
         var panes = $('<div class="red-ui-library-browser"></div>').appendTo(options.container);
-        var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
-        var filesPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
+        // var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
+        // var filesPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
         //
-        // '<div id="clipboard-dialog-export-tab-library-panes">'+
-        //     '<div class="red-ui-panel" id="clipboard-dialog-tab-library-sources-pane"></div>'+
-        //     '<div class="red-ui-panel" id="clipboard-dialog-tab-library-listing-pane"></div>'+
-        // '</div>'+
-        RED.panels.create({
-            container:panes,
-            dir: "horizontal"
-        });
-        var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(dirsPane)
+        // RED.panels.create({
+        //     container:panes,
+        //     dir: "horizontal"
+        // });
+        var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(panes)
             .treeList({}).on('treelistselect', function(event, item) {
-                fileList.treeList('data',item.files||[]);
                 if (addButton) {
                     if (item.writable === false) {
                         addButton.prop('disabled', true);
@@ -358,21 +301,21 @@ RED.library = (function() {
                         addButton.prop('disabled', false);
                     }
                 }
-                if (options.onpathselect) {
-                    options.onpathselect(item);
+                if (options.onselect) {
+                    options.onselect(item);
                 }
-            }).on('treelistchildrenloaded', function(event) {
-                var selected = dirList.treeList('selected');
-                fileList.treeList('data',selected.files||[]);
             });
         var addButton;
         if (options.addFolderButton) {
-            var tools = $("<div>").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(dirsPane)
+            var tools = $("<div>").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(panes)
             addButton= $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-plus"> <i class="fa fa-folder-o"></button>').appendTo(tools).click(function(e) {
-                var selected = dirList.treeList('selected');
-
                 var defaultFolderName = "new-folder";
                 var defaultFolderNameMatches = {};
+
+                var selected = dirList.treeList('selected');
+                if (!selected.children) {
+                    selected = selected.parent;
+                }
                 selected.children.forEach(function(c) {
                     if (/^new-folder/.test(c.label)) {
                         defaultFolderNameMatches[c.label] = true
@@ -435,17 +378,8 @@ RED.library = (function() {
             });
         }
 
-        var fileList = $("<div>").css({width: "100%", height: "100%"}).appendTo(filesPane)
-            .treeList({}).on('treelistselect', function(event, item) {
-                if (options.onselect) {
-                    options.onselect(item);
-                }
-            })
         return {
-            getFile: function() {
-                return fileList.treeList('selected');
-            },
-            getPath: function() {
+            getSelected: function() {
                 return dirList.treeList('selected');
             },
             data: function(content) {
@@ -494,17 +428,18 @@ RED.library = (function() {
             saveLibraryBrowser = RED.library.createBrowser({
                 container: $("#node-dialog-library-save-browser"),
                 addFolderButton: true,
-                onpathselect: function(item) {
-                    try {
+                onselect: function(item) {
+                    if (item.label) {
+                        if (!item.children) {
+                            $("#node-dialog-library-save-filename").val(item.label);
+                            item = item.parent;
+                        }
                         if (item.writable === false) {
                             $("#node-dialog-library-save-button").button("disable");
                         } else {
                             $("#node-dialog-library-save-button").button("enable");
                         }
-                    } catch(err) {}
-                },
-                onselect: function(file) {
-                    $("#node-dialog-library-save-filename").val(file.label);
+                    }
                 }
             });
             $("#node-dialog-library-save-filename").keyup(function() { validateExportFilename($(this))});
@@ -527,11 +462,12 @@ RED.library = (function() {
                         class: "primary",
                         click: function() {
                             if (selectedLibraryItem) {
-                                for (var i=0; i<options.fields.length; i++) {
-                                    var field = options.fields[i];
+                                var elementPrefix = activeLibrary.elementPrefix || "node-input-";
+                                for (var i=0; i<activeLibrary.fields.length; i++) {
+                                    var field = activeLibrary.fields[i];
                                     $("#"+elementPrefix+field).val(selectedLibraryItem[field]);
                                 }
-                                options.editor.setValue(libraryEditor.getValue(),-1);
+                                activeLibrary.editor.setValue(libraryEditor.getValue(),-1);
                             }
                             $( this ).dialog( "close" );
                         }
@@ -551,8 +487,8 @@ RED.library = (function() {
                 container: $("#node-dialog-library-load-browser"),
                 onselect: function(file) {
                     var table = $("#node-dialog-library-load-preview-details-table").empty();
-
-                    if (file && file.label) {
+                    selectedLibraryItem = file.props;
+                    if (file && file.label && !file.children) {
                         $.get("library/"+activeLibrary.url+"/"+file.path, function(data) {
                             //TODO: nls + sanitize
                             var propRow = $('<tr class="node-info-node-row"><td>Type</td><td></td></tr>').appendTo(table);
@@ -575,14 +511,16 @@ RED.library = (function() {
                     }
                 }
             });
-
-
-            if (RED.settings.theme("menu.menu-item-import-library") !== false) {
-                loadFlowLibrary();
-            }
+            RED.panels.create({
+                container:$("#node-dialog-library-load-panes"),
+                dir: "horizontal"
+            });
+            RED.panels.create({
+                container:$("#node-dialog-library-load-preview"),
+                dir: "vertical"
+            });
         },
         create: createUI,
-        loadFlowLibrary: loadFlowLibrary,
         createBrowser:createBrowser,
         export: exportFlow
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index 26ef9fe09..8fef4cadd 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -98,6 +98,7 @@
 
 
 .red-ui-library-browser {
+    position: relative;
     height: 100%;
 
     .red-ui-treeList-container {
@@ -130,29 +131,22 @@
     margin-bottom: 10px;
 }
 #node-dialog-library-load-browser {
-    height: 200px;
-    border: 1px solid $primary-border-color;
-    margin-bottom: 10px;
+    // border: 1px solid $primary-border-color;
 }
+#node-dialog-library-load-panes {
+    border: 1px solid $primary-border-color;
+}
+
+
 #node-dialog-library-load-preview {
-    height: 300px;
+    height: 100%;
 }
 
 #node-dialog-library-load-preview-text {
     box-sizing: border-box;
-    display: inline-block;
-    height: 100%;
-    width: calc(50% - 5px);
-    border: 1px solid $primary-border-color;
 }
 #node-dialog-library-load-preview-details {
     box-sizing: border-box;
-    display: inline-block;
-    height: 100%;
-    width: calc(50% - 5px);
-    margin-right: 10px;
-    border: 1px solid $primary-border-color;
-
     .node-info-node-row:first-child {
         border-top: none;
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index 00fc771eb..b6b98e6ac 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -41,13 +41,13 @@
 
 .red-ui-panels.red-ui-panels-horizontal {
     height: 100%;
-    .red-ui-panel {
+    &>.red-ui-panel {
         vertical-align: top;
         display: inline-block;
         height: 100%;
         width: calc(50% - 4px);
     }
-    .red-ui-panels-separator {
+    &>.red-ui-panels-separator {
         vertical-align: top;
         border-top: none;
         border-bottom: none;