Move project sidebar to project settings dialog

Gruntfile.js

@@ -154,6 +154,7 @@ module.exports = function(grunt) {
                     "editor/js/ui/subflow.js",
                     "editor/js/ui/userSettings.js",
                     "editor/js/ui/projects.js",
+                    "editor/js/ui/projectSettings.js",
                     "editor/js/ui/touch/radialMenu.js"
                 ],
                 dest: "public/red/red.js"

editor/js/main.js

@@ -43,7 +43,7 @@
                 $(".palette-scroll").removeClass("hide");
                 $("#palette-search").removeClass("hide");
                 loadFlows(function() {
-                    RED.projects.refreshSidebar();
+                    RED.projects.refresh();
 
                     var persistentNotifications = {};
                     RED.comms.subscribe("notification/#",function(topic,msg) {
@@ -60,10 +60,11 @@
                         if (notificationId === "project-change") {
                             RED.nodes.clear();
                             RED.history.clear();
-                            RED.projects.refreshSidebar();
+                            RED.view.redraw(true);
-                            RED.projects.showSidebar();
+                            RED.projects.refresh();
                             loadFlows(function() {
                                 RED.notify("NLS: Project changed to "+msg.project);
+                                RED.sidebar.info.refresh()
                             });
                             return;
                         }
@@ -74,8 +75,6 @@
                                     text += '<p><a href="#" onclick="RED.projects.showCredentialsPrompt(); return false;">'+'Setup credentials'+'</a></p>';
                                 }
                             }
-
-
                             if (!persistentNotifications.hasOwnProperty(notificationId)) {
                                 persistentNotifications[notificationId] = RED.notify(text,msg.type,msg.timeout === undefined,msg.timeout);
                             } else {

editor/js/ui/projectSettings.js

@@ -0,0 +1,262 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.projects.settings = (function() {
+
+    var trayWidth = 700;
+    var settingsVisible = false;
+
+    var panes = [];
+
+    function addPane(options) {
+        panes.push(options);
+    }
+
+    // TODO: DRY - tab-info.js
+    function addTargetToExternalLinks(el) {
+        $(el).find("a").each(function(el) {
+            var href = $(this).attr('href');
+            if (/^https?:/.test(href)) {
+                $(this).attr('target','_blank');
+            }
+        });
+        return el;
+    }
+
+    function show(initialTab) {
+        if (settingsVisible) {
+            return;
+        }
+        settingsVisible = true;
+        var tabContainer;
+
+        var trayOptions = {
+            title: "NLS: Project Information",// RED._("menu.label.userSettings"),
+            buttons: [
+                {
+                    id: "node-dialog-ok",
+                    text: RED._("common.label.close"),
+                    class: "primary",
+                    click: function() {
+                        RED.tray.close();
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                trayWidth = dimensions.width;
+            },
+            open: function(tray) {
+                var project = RED.projects.getActiveProject();
+                var trayBody = tray.find('.editor-tray-body');
+                var settingsContent = $('<div></div>').appendTo(trayBody);
+                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
+
+                $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
+                var settingsTabs = RED.tabs.create({
+                    id: "user-settings-tabs",
+                    vertical: true,
+                    onchange: function(tab) {
+                        setTimeout(function() {
+                            $("#user-settings-tabs-content").children().hide();
+                            $("#" + tab.id).show();
+                            if (tab.pane.focus) {
+                                tab.pane.focus();
+                            }
+                        },50);
+                    }
+                });
+                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
+
+                panes.forEach(function(pane) {
+                    settingsTabs.addTab({
+                        id: "project-settings-tab-"+pane.id,
+                        label: pane.title,
+                        pane: pane
+                    });
+                    pane.get(project).hide().appendTo(tabContents);
+                });
+                settingsContent.i18n();
+                settingsTabs.activateTab("project-settings-tab-"+(initialTab||'view'))
+                $("#sidebar-shade").show();
+            },
+            close: function() {
+                settingsVisible = false;
+                panes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close();
+                    }
+                });
+                $("#sidebar-shade").hide();
+
+            },
+            show: function() {}
+        }
+        if (trayWidth !== null) {
+            trayOptions.width = trayWidth;
+        }
+        RED.tray.show(trayOptions);
+    }
+
+    function addSpinnerOverlay(container) {
+        var spinner = $('<div class="projects-dialog-spinner projects-dialog-spinner-sidebar"><img src="red/images/spin.svg"/></div>').appendTo(container);
+        return spinner;
+    }
+    function editDescription(activeProject, container) {
+        RED.editor.editMarkdown({
+            title: RED._('sidebar.project.editDescription'),
+            value: activeProject.description,
+            complete: function(v) {
+                container.empty();
+                var spinner = addSpinnerOverlay(container);
+                var done = function(err,res) {
+                    if (err) {
+                        return editDescription(activeProject, container);
+                    }
+                    activeProject.description = v;
+                    updateProjectDescription(activeProject, container);
+                }
+                utils.sendRequest({
+                    url: "projects/"+activeProject.name,
+                    type: "PUT",
+                    responses: {
+                        0: function(error) {
+                            done(error,null);
+                        },
+                        200: function(data) {
+                            done(null,data);
+                        },
+                        400: {
+                            'unexpected_error': function(error) {
+                                done(error,null);
+                            }
+                        },
+                    }
+                },{description:v}).always(function() {
+                    spinner.remove();
+                });
+            }
+        });
+    }
+    function updateProjectDescription(activeProject, container) {
+        container.empty();
+        var desc = marked(activeProject.description||"");
+        var description = addTargetToExternalLinks($('<span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
+        description.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
+    }
+
+    function editSummary(activeProject, summary, container) {
+        var editButton = container.prev();
+        editButton.hide();
+        container.empty();
+        var bg = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>').appendTo(container);
+        var input = $('<input type="text" style="width: calc(100% - 150px); margin-right: 10px;">').val(summary||"").appendTo(container);
+        $('<button class="editor-button">Cancel</button>')
+            .appendTo(bg)
+            .click(function(evt) {
+                evt.preventDefault();
+                updateProjectSummary(activeProject.summary, container);
+                editButton.show();
+            });
+        $('<button class="editor-button">Done</button>')
+            .appendTo(bg)
+            .click(function(evt) {
+                evt.preventDefault();
+                var v = input.val();
+                updateProjectSummary(v, container);
+                var spinner = addSpinnerOverlay(container);
+                var done = function(err,res) {
+                    if (err) {
+                        spinner.remove();
+                        return editSummary(activeProject, summary, container);
+                    }
+                    activeProject.summary = v;
+                    spinner.remove();
+                    updateProjectSummary(activeProject.summary, container);
+                    editButton.show();
+                }
+                utils.sendRequest({
+                    url: "projects/"+activeProject.name,
+                    type: "PUT",
+                    responses: {
+                        0: function(error) {
+                            done(error,null);
+                        },
+                        200: function(data) {
+                            done(null,data);
+                        },
+                        400: {
+                            'unexpected_error': function(error) {
+                                done(error,null);
+                            }
+                        },
+                    }
+                },{summary:v});
+            });
+    }
+    function updateProjectSummary(summary, container) {
+        container.empty();
+        if (summary) {
+            container.text(summary).removeClass('node-info-node');
+        } else {
+            container.text("NLS: No summary available").addClass('node-info-none');
+        }
+    }
+
+    function createViewPane(activeProject) {
+
+        var pane = $('<div id="project-settings-tab-main" class="project-settings-tab-pane node-help"></div>');
+        $('<h1>').text(activeProject.name).appendTo(pane);
+        var summary = $('<div style="position: relative">').appendTo(pane);
+        var summaryContent = $('<div></div>',{style:"color: #999"}).appendTo(summary);
+        updateProjectSummary(activeProject.summary, summaryContent);
+        $('<button class="editor-button editor-button-small" style="float: right;">edit</button>')
+            .prependTo(summary)
+            .click(function(evt) {
+                evt.preventDefault();
+                editSummary(activeProject, activeProject.summary, summaryContent);
+            });
+        $('<hr>').appendTo(pane);
+
+        var description = $('<div class="node-help" style="position: relative"></div>').appendTo(pane);
+        var descriptionContent = $('<div>',{style:"min-height: 200px"}).appendTo(description);
+
+        updateProjectDescription(activeProject, descriptionContent);
+
+        $('<button class="editor-button editor-button-small" style="float: right;">edit</button>')
+            .prependTo(description)
+            .click(function(evt) {
+                evt.preventDefault();
+                editDescription(activeProject, descriptionContent);
+            });
+
+        return pane;
+    }
+
+    var utils;
+    function init(_utils) {
+        utils = _utils;
+        addPane({
+            id:'main',
+            title: "NLS: Project",
+            get: createViewPane,
+            close: function() { }
+        })
+    }
+    return {
+        init: init,
+        show: show
+    };
+})();

editor/js/ui/projects.js

@@ -464,6 +464,7 @@ RED.projects = (function() {
         // dialogBody.hide();
         console.log(options.url);
         var start = Date.now();
+        // TODO: this is specific to the dialog-based requests
         $(".projects-dialog-spinner").show();
         $("#projects-dialog").parent().find(".ui-dialog-buttonset").children().css("visibility","hidden")
         if (body) {
@@ -535,8 +536,10 @@ RED.projects = (function() {
         RED.actions.add("core:new-project",RED.projects.newProject);
         RED.actions.add("core:open-project",RED.projects.selectProject);
 
+        RED.projects.settings.init({sendRequest:sendRequest});
+
         initScreens();
-        initSidebar();
+        // initSidebar();
     }
 
     // function getRepoAuthDetails(req) {
@@ -598,6 +601,7 @@ RED.projects = (function() {
     //     ])
     // }
 
+/*
 
     var sidebarContent;
     var sidebarSections;
@@ -876,7 +880,6 @@ RED.projects = (function() {
     function addSpinnerOverlay(container) {
         var spinner = $('<div class="projects-dialog-spinner projects-dialog-spinner-sidebar"><img src="red/images/spin.svg"/></div>').appendTo(container);
         return spinner;
-
     }
     function updateProjectSummary() {
         sidebarSectionsInfo.empty();
@@ -928,18 +931,6 @@ RED.projects = (function() {
         }
     }
 
-    function refreshSidebar() {
-        $.getJSON("projects",function(data) {
-            if (data.active) {
-                $.getJSON("projects/"+data.active, function(project) {
-                    activeProject = project;
-                    updateProjectSummary();
-                    updateProjectDescription();
-                    updateProjectDependencies();
-                });
-            }
-        });
-    }
 
     // function getUsedModules() {
     //     var inuseModules = {};
@@ -966,6 +957,24 @@ RED.projects = (function() {
         });
         return el;
     }
+*/
+
+function refresh() {
+    $.getJSON("projects",function(data) {
+        if (data.active) {
+            $.getJSON("projects/"+data.active, function(project) {
+                activeProject = project;
+                // updateProjectSummary();
+                // updateProjectDescription();
+                // updateProjectDependencies();
+                console.log("project triggering a info refresh for ",activeProject)
+                RED.sidebar.info.refresh();
+            });
+        }
+    });
+}
+
+
 
     return {
         init: init,
@@ -981,15 +990,16 @@ RED.projects = (function() {
         showCredentialsPrompt: function() {
             show('credentialSecret');
         },
-        showSidebar: showSidebar,
+        // showSidebar: showSidebar,
-        refreshSidebar: refreshSidebar,
+        refresh: refresh,
-        showProjectEditor: function() {
+        editProject: function() {
-            RED.editor.editProject({
+            RED.projects.settings.show();
-                project: activeProject,
+            // RED.editor.editProject({
-                complete: function(result) {
+            //     project: activeProject,
-                    console.log(result);
+            //     complete: function(result) {
-                }
+            //         console.log(result);
-            });
+            //     }
+            // });
         },
         getActiveProject: function() {
             return activeProject;

editor/js/ui/tab-info.js

@@ -109,6 +109,11 @@ RED.sidebar.info = (function() {
         return el;
     }
     function refresh(node) {
+        console.log('sidebar.info.refresh');
+        if (node === undefined) {
+            refreshSelection();
+            return;
+        }
         sections.show();
         $(nodeSection.content).empty();
         $(infoSection.content).empty();
@@ -123,17 +128,22 @@ RED.sidebar.info = (function() {
         var activeProject = RED.projects.getActiveProject();
         if (activeProject) {
             propRow = $('<tr class="node-info-node-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
-            $(propRow.children()[1]).html('&nbsp;'+(activeProject.name||""))
+            $(propRow.children()[1]).text(activeProject.name||"");
             $('<tr class="node-info-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
+            $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
+                .appendTo(propRow.children()[1])
+                .click(function(evt) {
+                    evt.preventDefault();
+                    RED.projects.editProject();
+                });
         }
         infoSection.container.show();
-        if (node === undefined) {
+        if (node === null) {
             return;
         } else if (Array.isArray(node)) {
             infoSection.container.hide();
             propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
-            $(propRow.children()[1]).html('&nbsp;'+RED._("sidebar.info.nodes",{count:node.length}))
+            $(propRow.children()[1]).text(RED._("sidebar.info.nodes",{count:node.length}))
-
         } else {
             var m = /^subflow(:(.+))?$/.exec(node.type);
             if (m) {
@@ -155,7 +165,7 @@ RED.sidebar.info = (function() {
                 propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody);
                 RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
                 propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
-                $(propRow.children()[1]).html('&nbsp;'+(node.label||node.name||""))
+                $(propRow.children()[1]).text(node.label||node.name||"");
                 if (node.type === "tab") {
                     propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
                     $(propRow.children()[1]).html((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
@@ -166,10 +176,10 @@ RED.sidebar.info = (function() {
 
 
                 if (node.type !== "subflow" && node.name) {
-                    $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
+                    $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
                 }
                 if (!m) {
-                    $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
+                    $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>"+node.type+"</td></tr>").appendTo(tableBody);
                 }
 
                 if (!m && node.type != "subflow" && node.type != "comment") {
@@ -357,7 +367,7 @@ RED.sidebar.info = (function() {
 
     function clear() {
         // sections.hide();
-        refresh();
+        refresh(null);
     }
 
     function set(html,title) {
@@ -365,15 +375,16 @@ RED.sidebar.info = (function() {
         // sections.show();
         // nodeSection.container.hide();
         infoSection.title.text(title||"");
-        refresh();
+        refresh(null);
         $(infoSection.content).empty();
         setInfoText(html);
         $(".sidebar-node-info-stack").scrollTop(0);
     }
 
-
+    function refreshSelection(selection) {
-
+        if (selection === undefined) {
-    RED.events.on("view:selection-changed",function(selection) {
+            selection = RED.view.selection();
+        }
         if (selection.nodes) {
             if (selection.nodes.length == 1) {
                 var node = selection.nodes[0];
@@ -396,12 +407,15 @@ RED.sidebar.info = (function() {
                 if (workspace && workspace.info) {
                     refresh(workspace);
                 } else {
-                    refresh()
+                    refresh(null)
                     // clear();
                 }
             }
         }
-    });
+    }
+
+
+    RED.events.on("view:selection-changed",refreshSelection);
 
     return {
         init: init,

editor/js/ui/view.js

@@ -1141,7 +1141,6 @@ RED.view = (function() {
                 }
             }
         }
-
         var selectionJSON = activeWorkspace+":"+JSON.stringify(selection,function(key,value) {
             if (key === 'nodes') {
                 return value.map(function(n) { return n.id })

editor/js/ui/workspaces.js

@@ -312,6 +312,9 @@ RED.workspaces = (function() {
                 workspace_tabs.removeTab(ws.id);
             }
         }
+        if (ws.id === activeWorkspace) {
+            activeWorkspace = 0;
+        }
     }
 
     function setWorkspaceOrder(order) {

editor/sass/projects.scss

@@ -34,7 +34,8 @@
         input[type=checkbox], input[type=radio] {
             width: auto;
             vertical-align: top;
-        }    }
+        }
+    }
 }
 .projects-dialog-spinner {
     position: absolute;
@@ -58,10 +59,10 @@
         width: 80px;
     }
     &.projects-dialog-spinner-sidebar {
-        padding: 20px;
+        background: white;
-        background: $shade-color;
+        padding:0;
         img {
-            width: 50px;
+            width: 40px;
         }
     }
 
@@ -231,3 +232,14 @@
         }
     }
 }
+
+
+.project-settings-tab-pane {
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    overflow-y: scroll;
+    padding: 8px 20px 20px;
+}

editor/sass/tab-info.scss

@@ -102,6 +102,7 @@ table.node-info tr:not(.blank) td:first-child{
 table.node-info tr:not(.blank) td:last-child{
     padding: 3px 3px 3px 6px;
     color: #666;
+    overflow-y: hidden;
 }
 div.node-info {
     margin: 5px;

red/api/editor/projects/index.js

@@ -80,9 +80,14 @@ module.exports = {
                 } else {
                     res.redirect(303,req.baseUrl + '/');
                 }
-            } else if (req.body.credentialSecret || req.body.description || req.body.dependencies) {
+            } else if (req.body.hasOwnProperty('credentialSecret') ||
+                       req.body.hasOwnProperty('description') ||
+                       req.body.hasOwnProperty('dependencies')||
+                       req.body.hasOwnProperty('summary')) {
                 runtime.storage.projects.updateProject(req.params.id, req.body).then(function() {
+                    setTimeout(function() {
                         res.redirect(303,req.baseUrl + '/');
+                    },5000);
                 }).otherwise(function(err) {
                     if (err.code) {
                         res.status(400).json({error:err.code, message: err.message});

red/runtime/storage/localfilesystem/projects/index.js

@@ -143,6 +143,7 @@ function getProject(project) {
             if (missingFiles.indexOf('package.json') === -1) {
                 promises.push(nodeFn.call(fs.readFile,fspath.join(projectPath,"package.json"),"utf8").then(function(content) {
                     var package = util.parseJSON(content);
+                    projectData.summary = package.description||"";
                     projectData.dependencies = package.dependencies||{};
                 }));
             }
@@ -424,16 +425,22 @@ function updateProject(project,data) {
             return setCredentialSecret(project,data.credentialSecret).then(function() {
                 return reloadActiveProject(project);
             })
-        } else if (data.description) {
+        } else if (data.hasOwnProperty('description')) {
             var projectPath = fspath.join(projectsDir,project);
             var readmeFile = fspath.join(projectPath,"README.md");
             return util.writeFile(readmeFile, data.description);
-        } else if (data.dependencies) {
+        } else if (data.hasOwnProperty('dependencies') || data.hasOwnProperty('summary')) {
             var projectPath = fspath.join(projectsDir,project);
             var packageJSON = fspath.join(projectPath,"package.json");
             return nodeFn.call(fs.readFile,packageJSON,"utf8").then(function(content) {
                 var package = util.parseJSON(content);
+                if (data.dependencies) {
                     package.dependencies = data.dependencies;
+                }
+                if (data.summary) {
+                    package.description = data.summary;
+                }
+
                 return util.writeFile(packageJSON,JSON.stringify(package,"",4));
             });
         }