node-red/editor/js/ui/tab-versionControl.js

437 lines
17 KiB
JavaScript

/**
* 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
}
})();