Add initial version control sidebar with commit function

editor/js/keymap.json

@@ -17,7 +17,7 @@
 
         "ctrl-alt-n": "core:new-project",
         "ctrl-alt-o": "core:open-project",
-        "ctrl-g p": "core:show-projects-tab"
+        "ctrl-g v": "core:show-version-control-tab"
     },
     "workspace": {
         "backspace": "core:delete-selection",

editor/js/ui/projects.js

@@ -482,7 +482,7 @@ RED.projects = (function() {
         RED.actions.add("core:open-project",RED.projects.selectProject);
 
         RED.projects.settings.init({sendRequest:sendRequest});
-
+        RED.sidebar.versionControl.init({sendRequest:sendRequest});
         initScreens();
         // initSidebar();
     }

editor/js/ui/tab-versionControl.js

@@ -0,0 +1,436 @@
+/**
+ * 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.sidebar.versionControl = (function() {
+
+    var content;
+    var sections;
+
+    var allChanges = {};
+
+    var unstagedChangesList;
+    var stageAllButton;
+    var stagedChangesList;
+    var unstageAllButton;
+    var unstagedChanges;
+    var stagedChanges;
+    var bulkChangeSpinner;
+    var commitButton;
+
+    // TODO: DRY projectSummary.js
+    function addSpinnerOverlay(container) {
+        var spinner = $('<div class="projects-dialog-spinner"><img src="red/images/spin.svg"/></div>').appendTo(container);
+        return spinner;
+    }
+    function createChangeEntry(row, entry, status, unstaged) {
+        row.addClass("sidebar-version-control-change-entry");
+        var container = $('<div>').appendTo(row);
+        var icon = $('<i class=""></i>').appendTo(container);
+        var label = $('<span>').appendTo(container);
+
+        var bg = $('<div class="button-group"></div>').appendTo(row);
+        $('<button class="editor-button editor-button-small"><i class="fa fa-eye"></i></button>').appendTo(bg);
+        $('<button class="editor-button editor-button-small"><i class="fa fa-'+(unstaged?"plus":"minus")+'"></i></button>')
+            .appendTo(bg)
+            .click(function(evt) {
+                evt.preventDefault();
+                var activeProject = RED.projects.getActiveProject();
+                entry.spinner = addSpinnerOverlay(row).addClass('projects-version-control-spinner-sidebar');
+                utils.sendRequest({
+                    url: "projects/"+activeProject.name+"/stage/"+encodeURIComponent(entry.file),
+                    type: unstaged?"POST":"DELETE",
+                    responses: {
+                        0: function(error) {
+                            console.log(error);
+                            // done(error,null);
+                        },
+                        200: function(data) {
+                            refreshFiles(data);
+                        },
+                        400: {
+                            'unexpected_error': function(error) {
+                                console.log(error);
+                                // done(error,null);
+                            }
+                        },
+                    }
+                },{});
+            });
+        entry["update"+(unstaged?"Unstaged":"Staged")] = function(entry,status) {
+            container.removeClass();
+            var iconClass = "";
+            if (status === 'A') {
+                container.addClass("node-diff-added");
+                iconClass = "fa-plus-square";
+            } else if (status === '?') {
+                container.addClass("node-diff-unchanged");
+                iconClass = "fa-question-circle-o";
+            } else if (status === 'D') {
+                container.addClass("node-diff-deleted");
+                iconClass = "fa-minus-square";
+            } else if (status === 'M') {
+                container.addClass("node-diff-changed");
+                iconClass = "fa-square";
+            } else if (status === 'R') {
+                container.addClass("node-diff-changed");
+                iconClass = "fa-toggle-right";
+            } else {
+                iconClass = "fa-exclamation-triangle"
+            }
+            label.empty();
+            $('<span>').text(entry.file.replace(/\\(.)/g,"$1")).appendTo(label);
+
+            if (entry.oldName) {
+                $('<i class="fa fa-long-arrow-right"></i>').prependTo(label);
+                $('<span>').text(entry.oldName.replace(/\\(.)/g,"$1")).prependTo(label);
+                // label.text(entry.oldName+" -> "+entry.file);
+            }
+            // console.log(entry.file,status,iconClass);
+
+            icon.removeClass();
+            icon.addClass("fa "+iconClass);
+            if (entry.spinner) {
+                entry.spinner.remove();
+                delete entry.spinner;
+            }
+        }
+        entry["update"+(unstaged?"Unstaged":"Staged")](entry, status);
+    }
+    var utils;
+    function init(_utils) {
+        utils = _utils;
+
+        RED.actions.add("core:show-version-control-tab",show);
+
+        content = $('<div>', {class:"sidebar-version-control"});
+        var stackContainer = $("<div>",{class:"sidebar-version-control-stack"}).appendTo(content);
+        sections = RED.stack.create({
+            container: stackContainer,
+            fill: true,
+            singleExpanded: true
+        });
+
+        var localChanges = sections.add({
+            title: "Local Changes",
+            collapsible: true
+        });
+        localChanges.expand();
+        localChanges.content.css({height:"100%"});
+
+        var bg = $('<div style="float: right"></div>').appendTo(localChanges.header);
+        $('<button class="sidebar-header-button"><i class="fa fa-refresh"></i></button>')
+            .appendTo(bg)
+            .click(function(evt) {
+                evt.preventDefault();
+                refresh(true);
+            })
+
+
+        var unstagedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
+        var header = $('<div class="sidebar-version-control-change-header">Unstaged Changes</div>').appendTo(unstagedContent);
+        stageAllButton = $('<button class="editor-button editor-button-small" style="float: right"><i class="fa fa-plus"></i> all</button>')
+            .appendTo(header)
+            .click(function(evt) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                var toStage = Object.keys(allChanges).filter(function(fn) {
+                    return allChanges[fn].treeStatus !== ' ';
+                });
+                updateBulk(toStage,true);
+            });
+        unstagedChangesList = $("<ol>",{style:"position: absolute; top: 30px; bottom: 0; right:0; left:0;"}).appendTo(unstagedContent);
+        unstagedChangesList.editableList({
+            addButton: false,
+            scrollOnAdd: false,
+            addItem: function(row,index,entry) {
+                createChangeEntry(row,entry,entry.treeStatus,true);
+            },
+            sort: function(A,B) {
+                if (A.treeStatus === '?' && B.treeStatus !== '?') {
+                    return 1;
+                } else if (A.treeStatus !== '?' && B.treeStatus === '?') {
+                    return -1;
+                }
+                return A.file.localeCompare(B.file);
+            }
+
+        })
+
+        var stagedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
+
+        var header = $('<div class="sidebar-version-control-change-header">Staged Changes</div>').appendTo(stagedContent);
+
+        bg = $('<div style="float: right"></div>').appendTo(header);
+        commitButton = $('<button class="editor-button editor-button-small" style="margin-right: 5px;">commit</button>')
+            .appendTo(bg)
+            .click(function(evt) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                commitMessage.val("");
+                submitCommitButton.attr("disabled",true);
+                unstagedContent.css("height","30px");
+                stagedContent.css("height","calc(100% - 30px - 175px)");
+                commitBox.css("height","175px");
+                stageAllButton.attr("disabled",true);
+                unstageAllButton.attr("disabled",true);
+                commitButton.attr("disabled",true);
+                commitMessage.focus();
+            });
+        unstageAllButton = $('<button class="editor-button editor-button-small"><i class="fa fa-minus"></i> all</button>')
+            .appendTo(bg)
+            .click(function(evt) {
+                evt.preventDefault();
+                evt.stopPropagation();
+                var toUnstage = Object.keys(allChanges).filter(function(fn) {
+                    return allChanges[fn].indexStatus !== ' ' && allChanges[fn].indexStatus !== '?';
+                });
+                updateBulk(toUnstage,false);
+
+            });
+
+
+        stagedChangesList = $("<ol>",{style:"position: absolute; top: 30px; bottom: 0; right:0; left:0;"}).appendTo(stagedContent);
+        stagedChangesList.editableList({
+            addButton: false,
+            scrollOnAdd: false,
+            addItem: function(row,index,entry) {
+                createChangeEntry(row,entry,entry.indexStatus,false);
+            },
+            sort: function(A,B) {
+                return A.file.localeCompare(B.file);
+            }
+        })
+
+        commitBox = $('<div class="sidebar-version-control-change-commit-box"></div>').appendTo(localChanges.content);
+
+        var commitMessage = $('<textarea>')
+            .appendTo(commitBox)
+            .on("change keyup paste",function() {
+                submitCommitButton.attr('disabled',$(this).val().trim()==="");
+            });
+        var commitToolbar = $('<div class="sidebar-version-control-change-commit-toolbar button-group">').appendTo(commitBox);
+
+        var cancelCommitButton = $('<button class="editor-button">Cancel</button>')
+            .appendTo(commitToolbar)
+            .click(function(evt) {
+                evt.preventDefault();
+                commitMessage.val("");
+                unstagedContent.css("height","");
+                stagedContent.css("height","");
+                commitBox.css("height","");
+                stageAllButton.attr("disabled",false);
+                unstageAllButton.attr("disabled",false);
+                commitButton.attr("disabled",false);
+            })
+        var submitCommitButton = $('<button class="editor-button">Commit</button>')
+            .appendTo(commitToolbar)
+            .click(function(evt) {
+                evt.preventDefault();
+                var spinner = addSpinnerOverlay(submitCommitButton).addClass('projects-dialog-spinner-sidebar');
+                var activeProject = RED.projects.getActiveProject();
+                utils.sendRequest({
+                    url: "projects/"+activeProject.name+"/commit",
+                    type: "POST",
+                    responses: {
+                        0: function(error) {
+                            console.log(error);
+                        },
+                        200: function(data) {
+                            spinner.remove();
+                            cancelCommitButton.click();
+                            refreshFiles(data);
+                        },
+                        400: {
+                            'unexpected_error': function(error) {
+                                console.log(error);
+                            }
+                        },
+                    }
+                },{
+                    message:commitMessage.val()
+                });
+
+
+
+            })
+
+
+        var localHistory = sections.add({
+            title: "Commit History",
+            collapsible: true
+        });
+
+        var remoteHistory = sections.add({
+            title: "Remote History",
+            collapsible: true
+        });
+
+        RED.sidebar.addTab({
+            id: "version-control",
+            label: "version control",
+            name: "Version Control",
+            content: content,
+            enableOnEdit: false,
+            onchange: function() {
+                setTimeout(function() {
+                    sections.resize();
+                },10);
+            }
+        });
+
+    }
+
+    function updateBulk(files,unstaged) {
+        var activeProject = RED.projects.getActiveProject();
+        if (unstaged) {
+            bulkChangeSpinner = addSpinnerOverlay(unstagedChangesList.parent());
+        } else {
+            bulkChangeSpinner = addSpinnerOverlay(stagedChangesList.parent());
+        }
+        bulkChangeSpinner.addClass('projects-dialog-spinner-sidebar');
+        var body = unstaged?{files:files}:undefined;
+        utils.sendRequest({
+            url: "projects/"+activeProject.name+"/stage",
+            type: unstaged?"POST":"DELETE",
+            responses: {
+                0: function(error) {
+                    console.log(error);
+                    // done(error,null);
+                },
+                200: function(data) {
+                    refreshFiles(data);
+                },
+                400: {
+                    'unexpected_error': function(error) {
+                        console.log(error);
+                        // done(error,null);
+                    }
+                },
+            }
+        },body);
+    }
+
+    var refreshInProgress = false;
+
+    function refreshFiles(result) {
+        if (bulkChangeSpinner) {
+            bulkChangeSpinner.remove();
+            bulkChangeSpinner = null;
+        }
+        // unstagedChangesList.editableList('empty');
+        // stagedChangesList.editableList('empty');
+        var fileNames = Object.keys(result).filter(function(f) { return result[f].type === 'f'})
+        fileNames.sort();
+        var updateIndex = Date.now()+Math.floor(Math.random()*100);
+        fileNames.forEach(function(fn) {
+            var entry = result[fn];
+            var addEntry = false;
+            if (entry.status) {
+                entry.file = fn;
+                entry.indexStatus = entry.status[0];
+                entry.treeStatus = entry.status[1];
+                if (allChanges[fn]) {
+                    // Known file
+                    if (allChanges[fn].status !== entry.status) {
+                        // Status changed.
+                        if (allChanges[fn].treeStatus !== ' ') {
+                            // Already in the unstaged list
+                            if (entry.treeStatus === ' ') {
+                                unstagedChangesList.editableList('removeItem', allChanges[fn])
+                            } else if (entry.treeStatus !== allChanges[fn].treeStatus) {
+                                allChanges[fn].updateUnstaged(entry,entry.treeStatus);
+                            }
+                        } else {
+                            addEntry = true;
+                        }
+                        if (allChanges[fn].indexStatus !== ' ' && allChanges[fn].indexStatus !== '?') {
+                            // Already in the staged list
+                            if (entry.indexStatus === ' '||entry.indexStatus === '?') {
+                                stagedChangesList.editableList('removeItem', allChanges[fn])
+                            } else if (entry.indexStatus !== allChanges[fn].indexStatus) {
+                                allChanges[fn].updateStaged(entry,entry.indexStatus);
+                            }
+                        } else {
+                            addEntry = true;
+                        }
+                    }
+                    allChanges[fn].status = entry.status;
+                    allChanges[fn].indexStatus = entry.indexStatus;
+                    allChanges[fn].treeStatus = entry.treeStatus;
+                    allChanges[fn].oldName = entry.oldName;
+                } else {
+                    addEntry = true;
+                    allChanges[fn] = entry;
+                }
+                allChanges[fn].updateIndex = updateIndex;
+                if (addEntry) {
+                    if (entry.treeStatus !== ' ') {
+                        unstagedChangesList.editableList('addItem', allChanges[fn])
+                    }
+                    if (entry.indexStatus !== ' ' && entry.indexStatus !== '?') {
+                        stagedChangesList.editableList('addItem', allChanges[fn])
+                    }
+                }
+            }
+        });
+        Object.keys(allChanges).forEach(function(fn) {
+            if (allChanges[fn].updateIndex !== updateIndex) {
+                unstagedChangesList.editableList('removeItem', allChanges[fn]);
+                stagedChangesList.editableList('removeItem', allChanges[fn]);
+                delete allChanges[fn];
+            }
+        });
+
+        var stagedCount = stagedChangesList.editableList('length');
+        var unstagedCount = unstagedChangesList.editableList('length');
+        commitButton.attr('disabled',stagedCount === 0);
+        stageAllButton.attr('disabled',unstagedCount === 0);
+        unstageAllButton.attr('disabled',stagedCount === 0);
+
+    }
+
+    function refresh(full) {
+        if (refreshInProgress) {
+            return;
+        }
+        if (full) {
+            allChanges = {};
+            unstagedChangesList.editableList('empty');
+            stagedChangesList.editableList('empty');
+        }
+        refreshInProgress = true;
+
+        var activeProject = RED.projects.getActiveProject();
+        if (activeProject) {
+            $.getJSON("/projects/"+activeProject.name+"/files",function(result) {
+                refreshFiles(result);
+                refreshInProgress = false;
+            });
+        } else {
+            unstagedChangesList.editableList('empty');
+            stagedChangesList.editableList('empty');
+        }
+    }
+
+    function show() {
+        refresh();
+        RED.sidebar.show("version-control");
+    }
+    return {
+        init: init,
+        show: show,
+        refresh: refresh
+    }
+})();

editor/sass/diff.scss

@@ -357,6 +357,7 @@
 .node-diff-added { color: #009900}
 .node-diff-deleted { color: #f80000}
 .node-diff-changed { color: #f89406}
+.node-diff-unchanged { color: #bbb}
 .node-diff-conflicted { color: purple}
 
 

editor/sass/editor.scss

@@ -213,7 +213,7 @@
     height: 34px;
     line-height: 32px;
     font-size: 13px;
-    border-radius: 4px;
+    border-radius: 2px;
     padding: 0 10px;
     &.toggle {
         @include workspace-button-toggle;

editor/sass/mixins.scss

@@ -97,6 +97,23 @@
     &:focus {
         outline: 1px solid $workspace-button-color-focus-outline;
     }
+
+    &.primary {
+        border-color: $editor-button-background-primary;
+        color: $editor-button-color-primary !important;
+        background: $editor-button-background-primary;
+        &.disabled, &.ui-state-disabled {
+            background: none;
+            color: $editor-button-color !important;
+            border-color: $form-input-border-color;
+        }
+        &:not(.disabled):not(.ui-button-disabled):hover {
+            border-color: $editor-button-background-primary-hover;
+            background: $editor-button-background-primary-hover;
+            color: $editor-button-color-primary !important;
+        }
+    }
+
 }
 .button-group-vertical {
     display: inline-block;
@@ -132,21 +149,21 @@
     color: $editor-button-color !important;
     background: $editor-button-background;
 
-    &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
-        &.disabled, &.ui-state-disabled {
-            background: none;
-            color: $editor-button-color !important;
-            border-color: $form-input-border-color;
-        }
-        &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
-        }
-    }
+    // &.primary {
+    //     border-color: $editor-button-background-primary;
+    //     color: $editor-button-color-primary !important;
+    //     background: $editor-button-background-primary;
+    //     &.disabled, &.ui-state-disabled {
+    //         background: none;
+    //         color: $editor-button-color !important;
+    //         border-color: $form-input-border-color;
+    //     }
+    //     &:not(.disabled):not(.ui-button-disabled):hover {
+    //         border-color: $editor-button-background-primary-hover;
+    //         background: $editor-button-background-primary-hover;
+    //         color: $editor-button-color-primary !important;
+    //     }
+    // }
     &:not(.disabled):hover {
         //color: $editor-button-color;
     }

editor/sass/palette.scss

@@ -95,7 +95,7 @@
     text-overflow: ellipsis;
 
 }
-.palette-header i {
+.palette-header > i {
     margin: 3px 10px 3px 3px;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;

editor/sass/projects.scss

@@ -65,6 +65,13 @@
             width: 40px;
         }
     }
+    &.projects-version-control-spinner-sidebar {
+        background: white;
+        padding:0;
+        img {
+            width: 20px;
+        }
+    }
 
 
 }
@@ -72,7 +79,7 @@
     button.editor-button {
         width: calc(50% - 40px);
         margin: 20px;
-        height: 200px;
+        height: 175px;
         line-height: 2em;
         font-size: 1.5em !important;
         i {
@@ -173,10 +180,10 @@
 }
 
 
-.sidebar-projects {
+.sidebar-version-control {
     height: 100%;
 }
-.sidebar-projects-stack-info {
+.sidebar-version-control-stack-info {
     height: 100px;
     box-sizing: border-box;
     border-bottom: 1px solid $secondary-border-color;
@@ -185,13 +192,13 @@
         color: #999;
     }
 }
-.sidebar-projects-stack {
+.sidebar-version-control-stack {
     position: absolute;
-    top: 100px;
+    top: 0px;
     bottom: 0;
     left: 0;
     right: 0;
-    overflow-y: scroll;
+    overflow: hidden;
 
     .palette-category {
         &:not(.palette-category-expanded) button {
@@ -240,3 +247,86 @@
     overflow-y: auto;
     padding: 8px 20px 20px;
 }
+
+.sidebar-version-control-change-container {
+    position: relative;
+    height: 50%;
+    box-sizing: border-box;
+    border-top: 1px solid $secondary-border-color;
+    transition: height 0.2s ease-in-out;
+    &:first-child {
+        // border-bottom: 1px solid $primary-border-color;
+    }
+    .red-ui-editableList-container {
+        background: #f9f9f9;
+        padding: 0;
+        li {
+            padding:0;
+            background: #fff;
+        }
+    }
+    .red-ui-editableList-border {
+        border: none;
+        border-radius: 0;
+    }
+}
+.sidebar-version-control-change-commit-box {
+    position:absolute;
+    bottom: 0;
+    left:0;
+    right:0;
+    height:0;
+    transition: height 0.2s ease-in-out;
+    background: #f6f6f6;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-top: 1px solid $secondary-border-color;
+    textarea {
+        height: 110px;
+        margin: 10px;
+        width: calc(100% - 20px);
+        box-sizing: border-box;
+        border-radius: 1px;
+        resize: none;
+    }
+}
+.sidebar-version-control-change-commit-toolbar {
+    padding: 0 20px;
+    text-align: right;
+
+}
+.sidebar-version-control-change-entry {
+    height: 20px;
+    padding: 5px 10px;
+    position: relative;
+    white-space: nowrap;
+    span {
+        margin: 0 6px;
+    }
+    .button-group {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        display: none;
+    }
+    button {
+        width: 24px;
+    }
+
+    &:hover {
+        .button-group {
+            display: block;
+        }
+    }
+}
+.sidebar-version-control-change-header {
+    color: #666;
+    background: #f6f6f6;
+    padding: 4px 10px;
+    height: 30px;
+    box-sizing: border-box;
+    border-bottom: 1px solid $secondary-border-color;
+    i {
+        transition: all 0.2s ease-in-out;
+    }
+}

editor/sass/ui/common/stack.scss

@@ -18,5 +18,9 @@
     background: white;
     .palette-category {
         background: white;
+
+        &:last-child {
+            border-bottom: none;
+        }
     }
 }