Improved remote share owner display

The parts of the remote share owner name is now split between user name,
domain name and root so they can be formatted / displayed differently.

The user name + domain name are displayed in the tooltip.

2 files changed, 129 insertions, 2 deletions

diff --git a/core/js/share.js b/core/js/share.js
index 62271a43ceb..eed4f32ca0b 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -1,8 +1,21 @@
+/* global escapeHTML */
+
+/**
+ * @namespace
+ */
 OC.Share={
 	SHARE_TYPE_USER:0,
 	SHARE_TYPE_GROUP:1,
 	SHARE_TYPE_LINK:3,
 	SHARE_TYPE_EMAIL:4,
+
+	/**
+	 * Regular expression for splitting parts of remote share owners:
+	 * "user@example.com/path/to/owncloud"
+	 * "user@anotherexample.com@example.com/path/to/owncloud
+	 */
+	_REMOTE_OWNER_REGEXP: new RegExp("^([^@]*)@(([^@]*)@)?([^/]*)(.*)?$"),
+
 	/**
 	 * @deprecated use OC.Share.currentShares instead
 	 */
@@ -169,6 +182,38 @@ OC.Share={
 		}
 	},
 	/**
+	 * Format remote share owner to make it more readable
+	 *
+	 * @param {String} owner full remote share owner name
+	 * @return {String} HTML code for the owner display
+	 */
+	_formatSharedByOwner: function(owner) {
+		var parts = this._REMOTE_OWNER_REGEXP.exec(owner);
+		if (!parts) {
+			// display as is, most likely to be a simple owner name
+			return t('files_sharing', 'Shared by {owner}', {owner: escapeHTML(owner)});
+		}
+
+		var userName = parts[1];
+		var userDomain = parts[3];
+		var server = parts[4];
+		var tooltip = userName;
+		if (userDomain) {
+			tooltip += '@' + userDomain;
+		}
+		if (server) {
+			tooltip += '@' + server;
+		}
+
+		var html = '<span class="remoteOwner" title="' + escapeHTML(tooltip) + '">';
+		html += '<span class="username">' + escapeHTML(userName) + '</span>';
+		if (userDomain) {
+			html += '<span class="userDomain">@' + escapeHTML(userDomain) + '</span>';
+		}
+		html += '</span>';
+		return t('files_sharing', 'Shared by {owner}', {owner: html});
+	},
+	/**
 	 * Marks/unmarks a given file as shared by changing its action icon
 	 * and folder icon.
 	 *
@@ -206,12 +251,15 @@ OC.Share={
 			message = t('core', 'Shared');
 			// even if reshared, only show "Shared by"
 			if (owner) {
-				message = t('files_sharing', 'Shared by {owner}', {owner: escapeHTML(owner)});
+				message = this._formatSharedByOwner(owner);
 			}
 			else if (recipients) {
 				message = t('core', 'Shared with {recipients}', {recipients: escapeHTML(recipients)});
 			}
-			action.html(' <span>'+ message + '</span>').prepend(img);
+			action.html(' <span>' + message + '</span>').prepend(img);
+			if (owner) {
+				action.find('.remoteOwner').tipsy({gravity: 's'});
+			}
 		}
 		else {
 			action.removeClass('permanent');
diff --git a/core/js/tests/specs/shareSpec.js b/core/js/tests/specs/shareSpec.js
index 588e51036e4..ed04df3fe6f 100644
--- a/core/js/tests/specs/shareSpec.js
+++ b/core/js/tests/specs/shareSpec.js
@@ -365,5 +365,84 @@ describe('OC.Share tests', function() {
 			});
 		});
 	});
+	describe('markFileAsShared', function() {
+		var $file;
+		var tipsyStub;
+
+		beforeEach(function() {
+			tipsyStub = sinon.stub($.fn, 'tipsy');
+			$file = $('<tr><td class="filename">File name</td></tr>');
+			$file.find('.filename').append(
+				'<span class="fileactions">' +
+				'<a href="#" class="action action-share" data-action="Share">' +
+				'<img></img><span> Share</span>' +
+				'</a>' +
+				'</span>'
+			);
+		});
+		afterEach(function() {
+			$file = null;
+			tipsyStub.restore();
+		});
+		describe('displaying the share owner', function() {
+			function checkOwner(input, output, title) {
+				var $action;
+
+				$file.attr('data-share-owner', input);
+				OC.Share.markFileAsShared($file);
+
+				$action = $file.find('.action-share>span');
+				expect($action.text()).toEqual(output);
+				if (_.isString(title)) {
+					expect($action.find('.remoteOwner').attr('title')).toEqual(title);
+				} else {
+					expect($action.find('.remoteOwner').attr('title')).not.toBeDefined();
+				}
+				expect(tipsyStub.calledOnce).toEqual(true);
+				tipsyStub.reset();
+			}
+
+			it('displays the local share owner as is', function() {
+				checkOwner('User One', 'Shared by User One', null);
+			});
+			it('displays the user name part of a remote share owner', function() {
+				checkOwner(
+					'User One@someserver.com',
+					'Shared by User One',
+					'User One@someserver.com'
+				);
+				checkOwner(
+					'User One@someserver.com/',
+					'Shared by User One',
+					'User One@someserver.com'
+				);
+				checkOwner(
+					'User One@someserver.com/root/of/owncloud',
+					'Shared by User One',
+					'User One@someserver.com'
+				);
+			});
+			it('displays the user name part with domain of a remote share owner', function() {
+				checkOwner(
+					'User One@example.com@someserver.com',
+					'Shared by User One@example.com',
+					'User One@example.com@someserver.com'
+				);
+				checkOwner(
+					'User One@example.com@someserver.com/',
+					'Shared by User One@example.com',
+					'User One@example.com@someserver.com'
+				);
+				checkOwner(
+					'User One@example.com@someserver.com/root/of/owncloud',
+					'Shared by User One@example.com',
+					'User One@example.com@someserver.com'
+				);
+			});
+		});
+
+		// TODO: add unit tests for folder icons
+		// TODO: add unit tests for share recipients
+	});
 });