Add timeout to user and group deletion notification

Added timeout in DeleteHandler to auto-delete after a delay.

Fixed issue where OC.Notification.hide() was called twice in a row when
deleting multiple entries, causing the second notification to disappear.
Fixed issue where "undo" click event handler was registered multiple
times when calling setNotifications() twice.
Added JS unit tests for the DeleteHandler class.

Refix undo users, groups feature

Timeout is now cleared in cancel().

Fixed click handler name for "undo" to be able to work with multiple
DeleteHandler instances (in our case one for users and one for groups)
so that there is no conflict.

1 files changed, 43 insertions, 4 deletions

diff --git a/settings/js/users/deleteHandler.js b/settings/js/users/deleteHandler.js
index d4736d88701..c89a844044e 100644
--- a/settings/js/users/deleteHandler.js
+++ b/settings/js/users/deleteHandler.js
@@ -35,6 +35,16 @@ function DeleteHandler(endpoint, paramID, markCallback, removeCallback) {
 }
 
 /**
+ * Number of milliseconds after which the operation is performed.
+ */
+DeleteHandler.TIMEOUT_MS = 7000;
+
+/**
+ * Timer after which the action will be performed anyway.
+ */
+DeleteHandler.prototype._timeout = null;
+
+/**
  * The function to be called after successfully marking the object for deletion
  * @callback markCallback
  * @param {string} oid the ID of the specific user or group
@@ -72,7 +82,9 @@ DeleteHandler.prototype.setNotification = function(notifier, dataID, message, un
 
 	var dh = this;
 
-	$('#notification').on('click', '.undo', function () {
+	$('#notification')
+		.off('click.deleteHandler_' + dataID)
+		.on('click.deleteHandler_' + dataID, '.undo', function () {
 		if ($('#notification').data(dh.notificationDataID)) {
 			var oid = dh.oidToDelete;
 			dh.cancel();
@@ -116,18 +128,36 @@ DeleteHandler.prototype.hideNotification = function() {
  */
 DeleteHandler.prototype.mark = function(oid) {
 	if(this.oidToDelete !== false) {
-		this.deleteEntry();
+		// passing true to avoid hiding the notification
+		// twice and causing the second notification
+		// to disappear immediately
+		this.deleteEntry(true);
 	}
 	this.oidToDelete = oid;
 	this.canceled = false;
 	this.markCallback(oid);
 	this.showNotification();
+	if (this._timeout) {
+		clearTimeout(this._timeout);
+		this._timeout = null;
+	}
+	if (DeleteHandler.TIMEOUT_MS > 0) {
+		this._timeout = window.setTimeout(
+				_.bind(this.deleteEntry, this),
+			   	DeleteHandler.TIMEOUT_MS
+		);
+	}
 };
 
 /**
  * cancels a delete operation
  */
 DeleteHandler.prototype.cancel = function() {
+	if (this._timeout) {
+		clearTimeout(this._timeout);
+		this._timeout = null;
+	}
+
 	this.canceled = true;
 	this.oidToDelete = false;
 };
@@ -137,22 +167,31 @@ DeleteHandler.prototype.cancel = function() {
  * initialized by mark(). On error, it will show a message via
  * OC.dialogs.alert. On success, a callback is fired so that the client can
  * update the web interface accordingly.
+ *
+ * @param {boolean} [keepNotification] true to keep the notification, false to hide
+ * it, defaults to false
  */
-DeleteHandler.prototype.deleteEntry = function() {
+DeleteHandler.prototype.deleteEntry = function(keepNotification) {
 	if(this.canceled || this.oidToDelete === false) {
 		return false;
 	}
 
 	var dh = this;
-	if($('#notification').data(this.notificationDataID) === true) {
+	if(!keepNotification && $('#notification').data(this.notificationDataID) === true) {
 		dh.hideNotification();
 	}
 
+	if (this._timeout) {
+		clearTimeout(this._timeout);
+		this._timeout = null;
+	}
+
 	var payload = {};
 	payload[dh.ajaxParamID] = dh.oidToDelete;
 	$.ajax({
 		type: 'POST',
 		url: OC.filePath('settings', 'ajax', dh.ajaxEndpoint),
+		// FIXME: do not use synchronous ajax calls as they block the browser !
 		async: false,
 		data: payload,
 		success: function (result) {