Merge pull request #7222 from nextcloud/fix-filerow-avatars

Fix filerow avatars

apps/files/js/filelist.js

@@ -553,9 +553,6 @@
 				actionsWidth += $(action).outerWidth();
 			});
 
-			// subtract app navigation toggle when visible
-			containerWidth -= $('#app-navigation-toggle').width();
-
 			this.breadcrumb._resize();
 
 			this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
@@ -1369,7 +1366,7 @@
 		 * @return new tr element (not appended to the table)
 		 */
 		add: function(fileData, options) {
-			var index = -1;
+			var index;
 			var $tr;
 			var $rows;
 			var $insertionPoint;

apps/files_sharing/js/share.js

@@ -46,13 +46,14 @@
 				tr.attr('data-share-permissions', sharePermissions);
 				if (fileData.shareOwner) {
 					tr.attr('data-share-owner', fileData.shareOwner);
+					tr.attr('data-share-owner-id', fileData.shareOwnerId);
 					// user should always be able to rename a mount point
 					if (fileData.mountType === 'shared-root') {
 						tr.attr('data-permissions', fileData.permissions | OC.PERMISSION_UPDATE);
 					}
 				}
-				if (fileData.recipientsDisplayName) {
+				if (fileData.recipientData && !_.isEmpty(fileData.recipientData)) {
-					tr.attr('data-share-recipients', fileData.recipientsDisplayName);
+					tr.attr('data-share-recipient-data', JSON.stringify(fileData.recipientData));
 				}
 				if (fileData.shareTypes) {
 					tr.attr('data-share-types', fileData.shareTypes.join(','));
@@ -67,8 +68,7 @@
 				fileInfo.shareOwner = $el.attr('data-share-owner') || undefined;
 
 				if( $el.attr('data-share-types')){
-					var shareTypes = $el.attr('data-share-types').split(',');
+					fileInfo.shareTypes = $el.attr('data-share-types').split(',');
-					fileInfo.shareTypes = shareTypes;
 				}
 
 				if( $el.attr('data-expiration')){
@@ -77,8 +77,6 @@
 					fileInfo.shares.push({expiration: expirationTimestamp});
 				}
 
-				fileInfo.recipientsDisplayName = $el.attr('data-share-recipients') || undefined;
-
 				return fileInfo;
 			};
 
@@ -218,10 +216,13 @@
 			var recipients = _.pluck(shareModel.get('shares'), 'share_with_displayname');
 			// note: we only update the data attribute because updateIcon()
 			if (recipients.length) {
-				$tr.attr('data-share-recipients', OCA.Sharing.Util.formatRecipients(recipients));
+				var recipientData = _.mapObject(shareModel.get('shares'), function (share) {
+					return {shareWith: share.share_with, shareWithDisplayName: share.share_with_displayname};
+				});
+				$tr.attr('data-share-recipient-data', JSON.stringify(recipientData));
 			}
 			else {
-				$tr.removeAttr('data-share-recipients');
+				$tr.removeAttr('data-share-recipient-data');
 			}
 		},
 
@@ -229,46 +230,21 @@
 		 * Update the file action share icon for the given file
 		 *
 		 * @param $tr file element of the file to update
-		 * @param {bool} hasUserShares true if a user share exists
+		 * @param {boolean} hasUserShares true if a user share exists
-		 * @param {bool} hasLinkShare true if a link share exists
+		 * @param {boolean} hasLinkShare true if a link share exists
 		 *
-		 * @return {bool} true if the icon was set, false otherwise
+		 * @return {boolean} true if the icon was set, false otherwise
 		 */
 		_updateFileActionIcon: function($tr, hasUserShares, hasLinkShare) {
 			// if the statuses are loaded already, use them for the icon
 			// (needed when scrolling to the next page)
-			if (hasUserShares || hasLinkShare || $tr.attr('data-share-recipients') || $tr.attr('data-share-owner')) {
+			if (hasUserShares || hasLinkShare || $tr.attr('data-share-recipient-data') || $tr.attr('data-share-owner')) {
 				OC.Share.markFileAsShared($tr, true, hasLinkShare);
 				return true;
 			}
 			return false;
 		},
 
-		/**
-		 * Formats a recipients array to be displayed.
-		 * The first four recipients will be shown and the
-		 * other ones will be shown as "+x" where "x" is the number of
-		 * remaining recipients.
-		 *
-		 * @param {Array.<String>} recipients recipients array
-		 * @param {int} count optional total recipients count (in case the array was shortened)
-		 * @return {String} formatted recipients display text
-		 */
-		formatRecipients: function(recipients, count) {
-			var maxRecipients = 4;
-			var text;
-			if (!_.isNumber(count)) {
-				count = recipients.length;
-			}
-			// TODO: use natural sort
-			recipients = _.first(recipients, maxRecipients).sort();
-			text = recipients.join(', ');
-			if (count > maxRecipients) {
-				text += ', +' + (count - maxRecipients);
-			}
-			return text;
-		},
-
 		/**
 		 * @param {Array} fileData
 		 * @returns {String}

apps/files_sharing/js/sharedfilelist.js

@@ -153,6 +153,27 @@
 			// storage info like free space / used space
 		},
 
+		updateRow: function($tr, fileInfo, options) {
+			if(!fileInfo instanceof OCA.Sharing.SharedFileInfo) {
+				// recycle SharedFileInfo values if something tries to overwrite it
+				var oldModel = this.getModelForFile($tr);
+
+				if(_.isUndefined(fileInfo.recipientData) && oldModel.recipientData) {
+					fileInfo.recipientData = oldModel.recipientData;
+				}
+				if(_.isUndefined(fileInfo.recipients) && oldModel.recipientData) {
+					fileInfo.recipientData = oldModel.recipientData;
+				}
+				if(_.isUndefined(fileInfo.shares) && oldModel.shares) {
+					fileInfo.shares = oldModel.shares;
+				}
+				if(_.isUndefined(fileInfo.shareOwner) && oldModel.shareOwner) {
+					fileInfo.shareOwner = oldModel.shareOwner;
+				}
+			}
+			OCA.Files.FileList.prototype._createRow.updateRow(this, arguments);
+		},
+
 		reload: function() {
 			this.showMask();
 			if (this._reloadCall) {
@@ -225,7 +246,6 @@
 		},
 
 		_makeFilesFromRemoteShares: function(data) {
-			var self = this;
 			var files = data;
 
 			files = _.chain(files)
@@ -297,6 +317,7 @@
 					};
 					if (self._sharedWithUser) {
 						file.shareOwner = share.displayname_owner;
+						file.shareOwnerId = share.uid_owner;
 						file.name = OC.basename(share.file_target);
 						file.path = OC.dirname(share.file_target);
 						file.permissions = share.permissions;
@@ -307,6 +328,7 @@
 					else {
 						if (share.share_type !== OC.Share.SHARE_TYPE_LINK) {
 							file.share.targetDisplayName = share.share_with_displayname;
+							file.share.targetShareWithId = share.share_with;
 						}
 						file.name = OC.basename(share.path);
 						file.path = OC.dirname(share.path);
@@ -325,12 +347,14 @@
 				.reduce(function(memo, file) {
 					var data = memo[file.id];
 					var recipient = file.share.targetDisplayName;
+					var recipientId = file.share.targetShareWithId;
 					if (!data) {
 						data = memo[file.id] = file;
 						data.shares = [file.share];
 						// using a hash to make them unique,
 						// this is only a list to be displayed
 						data.recipients = {};
+						data.recipientData = {};
 						// share types
 						data.shareTypes = {};
 						// counter is cheaper than calling _.keys().length
@@ -351,6 +375,10 @@
 							// only store the first ones, they will be the only ones
 							// displayed
 							data.recipients[recipient] = true;
+							data.recipientData[data.recipientsCount] = {
+								'shareWith': recipientId,
+								'shareWithDisplayName': recipient
+							};
 						}
 						data.recipientsCount++;
 					}
@@ -367,11 +395,6 @@
 					// convert the recipients map to a flat
 					// array of sorted names
 					data.mountType = 'shared';
-					data.recipients = _.keys(data.recipients);
-					data.recipientsDisplayName = OCA.Sharing.Util.formatRecipients(
-						data.recipients,
-						data.recipientsCount
-					);
 					delete data.recipientsCount;
 					if (self._sharedWithUser) {
 						// only for outgoing shres
@@ -405,9 +428,18 @@
 	 * @property {int} stime share timestamp in milliseconds
 	 * @property {String} [targetDisplayName] display name of the recipient
 	 * (only when shared with others)
+	 * @property {String} [targetShareWithId] id of the recipient
 	 *
 	 */
 
+	/**
+	 * Recipient attributes
+	 *
+	 * @typedef {Object} OCA.Sharing.RecipientInfo
+	 * @property {String} shareWith the id of the recipient
+	 * @property {String} shareWithDisplayName the display name of the recipient
+	 */
+
 	/**
 	 * Shared file info attributes.
 	 *
@@ -419,7 +451,8 @@
 	 * @property {String} shareOwner name of the share owner
 	 * @property {Array.<String>} recipients name of the first 4 recipients
 	 * (this is mostly for display purposes)
-	 * @property {String} recipientsDisplayName display name
+	 * @property {Object.<OCA.Sharing.RecipientInfo>} recipientData (as object for easier
+	 * passing to HTML data attributes with jQuery)
 	 */
 
 	OCA.Sharing.FileList = FileList;

apps/files_sharing/tests/js/shareSpec.js

@@ -140,6 +140,7 @@ describe('OCA.Sharing.Util tests', function() {
 				size: 12,
 				permissions: OC.PERMISSION_ALL,
 				shareOwner: 'User One',
+				shareOwnerId: 'User One',
 				etag: 'abc',
 				shareTypes: []
 			}]);
@@ -161,6 +162,16 @@ describe('OCA.Sharing.Util tests', function() {
 				size: 12,
 				permissions: OC.PERMISSION_ALL,
 				recipientsDisplayName: 'User One, User Two',
+				recipientData: {
+					0: {
+						shareWith: 'User One',
+						shareWithDisplayName: 'User One'
+					},
+					1: {
+						shareWith: 'User Two',
+						shareWithDisplayName: 'User Two'
+					}
+				},
 				etag: 'abc',
 				shareTypes: [OC.Share.SHARE_TYPE_USER]
 			}]);
@@ -264,15 +275,13 @@ describe('OCA.Sharing.Util tests', function() {
 			// simulate updating shares
 			shareTab._dialog.model.set({
 				shares: [
-					{share_with_displayname: 'User One'},
+					{share_with_displayname: 'User One', share_with: 'User One'},
-					{share_with_displayname: 'User Two'},
+					{share_with_displayname: 'User Two', share_with: 'User Two'},
-					{share_with_displayname: 'Group One'},
+					{share_with_displayname: 'Group One', share_with: 'Group One'},
-					{share_with_displayname: 'Group Two'}
+					{share_with_displayname: 'Group Two', share_with: 'Group Two'}
 				]
 			});
 
-			expect($tr.attr('data-share-recipients')).toEqual('Group One, Group Two, User One, User Two');
-
 			expect($action.text().trim()).toEqual('Shared with Group One Shared with Group Two Shared with User One Shared with User Two');
 			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
@@ -298,14 +307,12 @@ describe('OCA.Sharing.Util tests', function() {
 			// simulate updating shares
 			shareTab._dialog.model.set({
 				shares: [
-					{share_with_displayname: 'User One'},
+					{share_with_displayname: 'User One', share_with: 'User One'},
-					{share_with_displayname: 'User Two'},
+					{share_with_displayname: 'User Two', share_with: 'User Two'},
-					{share_with_displayname: 'User Three'}
+					{share_with_displayname: 'User Three', share_with: 'User Three'}
 				]
 			});
 
-			expect($tr.attr('data-share-recipients')).toEqual('User One, User Three, User Two');
-
 			expect($action.text().trim()).toEqual('Shared with User One Shared with User Three Shared with User Two');
 			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
@@ -334,7 +341,7 @@ describe('OCA.Sharing.Util tests', function() {
 				shares: []
 			});
 
-			expect($tr.attr('data-share-recipients')).not.toBeDefined();
+			expect($tr.attr('data-share-recipient-data')).not.toBeDefined();
 		});
 		it('keep share text after updating reshare', function() {
 			var $action, $tr;
@@ -348,7 +355,8 @@ describe('OCA.Sharing.Util tests', function() {
 				size: 12,
 				permissions: OC.PERMISSION_ALL,
 				etag: 'abc',
-				shareOwner: 'User One'
+				shareOwner: 'User One',
+				shareOwnerId: 'User One'
 			}]);
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
@@ -360,8 +368,6 @@ describe('OCA.Sharing.Util tests', function() {
 				shares: [{share_with_displayname: 'User Two'}]
 			});
 
-			expect($tr.attr('data-share-recipients')).toEqual('User Two');
-
 			expect($action.find('>span').text().trim()).toEqual('Shared by User One');
 			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
@@ -379,7 +385,9 @@ describe('OCA.Sharing.Util tests', function() {
 				permissions: OC.PERMISSION_ALL,
 				etag: 'abc',
 				shareOwner: 'User One',
-				recipients: 'User Two'
+				shareOwnerId: 'User One',
+				recipients: 'User Two',
+				recipientData: {'User Two': 'User Two'}
 			}]);
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
@@ -391,60 +399,13 @@ describe('OCA.Sharing.Util tests', function() {
 				shares: []
 			});
 
-			expect($tr.attr('data-share-recipients')).not.toBeDefined();
+			expect($tr.attr('data-share-recipient-data')).not.toBeDefined();
 
 			expect($action.find('>span').text().trim()).toEqual('Shared by User One');
 			expect($action.find('.icon').hasClass('icon-shared')).toEqual(true);
 			expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
 		});
 	});
-	describe('formatRecipients', function() {
-		it('returns a single recipient when one passed', function() {
-			expect(OCA.Sharing.Util.formatRecipients(['User one']))
-				.toEqual('User one');
-		});
-		it('returns two recipients when two passed', function() {
-			expect(OCA.Sharing.Util.formatRecipients(['User one', 'User two']))
-				.toEqual('User one, User two');
-		});
-		it('returns four recipients with plus when five passed', function() {
-			var recipients = [
-				'User one',
-				'User two',
-				'User three',
-				'User four',
-				'User five'
-			];
-			expect(OCA.Sharing.Util.formatRecipients(recipients))
-				.toEqual('User four, User one, User three, User two, +1');
-		});
-		it('returns four recipients with plus when ten passed', function() {
-			var recipients = [
-				'User one',
-				'User two',
-				'User three',
-				'User four',
-				'User five',
-				'User six',
-				'User seven',
-				'User eight',
-				'User nine',
-				'User ten'
-			];
-			expect(OCA.Sharing.Util.formatRecipients(recipients))
-				.toEqual('User four, User one, User three, User two, +6');
-		});
-		it('returns four recipients with plus when four passed with counter', function() {
-			var recipients = [
-				'User one',
-				'User two',
-				'User three',
-				'User four'
-			];
-			expect(OCA.Sharing.Util.formatRecipients(recipients, 10))
-				.toEqual('User four, User one, User three, User two, +6');
-		});
-	});
 	describe('Excluded lists', function() {
 		function createListThenAttach(listId) {
 			var fileActions = new OCA.Files.FileActions();

apps/files_sharing/tests/js/sharedfilelistSpec.js

@@ -628,7 +628,7 @@ describe('OCA.Sharing.FileList tests', function() {
 			expect($tr.attr('data-permissions')).toEqual('31'); // read and delete
 			expect($tr.attr('data-mime')).toEqual('text/plain');
 			expect($tr.attr('data-mtime')).toEqual('11111000');
-			expect($tr.attr('data-share-recipients')).not.toBeDefined();
+			expect($tr.attr('data-share-recipient-data')).not.toBeDefined();
 			expect($tr.attr('data-share-owner')).not.toBeDefined();
 			expect($tr.attr('data-share-id')).toEqual('7');
 			expect($tr.attr('data-favorite')).toEqual('true');
@@ -681,7 +681,7 @@ describe('OCA.Sharing.FileList tests', function() {
 			expect($tr.attr('data-permissions')).toEqual('31'); // read and delete
 			expect($tr.attr('data-mime')).toEqual('text/plain');
 			expect($tr.attr('data-mtime')).toEqual('11111000');
-			expect($tr.attr('data-share-recipients')).not.toBeDefined();
+			expect($tr.attr('data-share-recipient-data')).not.toBeDefined();
 			expect($tr.attr('data-share-owner')).not.toBeDefined();
 			expect($tr.attr('data-share-id')).toEqual('7');
 			expect($tr.attr('data-favorite')).toEqual('true');

core/js/share.js

@@ -161,7 +161,6 @@ OC.Share = _.extend(OC.Share || {}, {
 	updateIcon:function(itemType, itemSource) {
 		var shares = false;
 		var link = false;
-		var image = OC.imagePath('core', 'actions/share');
 		var iconClass = '';
 		$.each(OC.Share.itemShares, function(index) {
 			if (OC.Share.itemShares[index]) {
@@ -200,15 +199,17 @@ OC.Share = _.extend(OC.Share || {}, {
 	/**
 	 * Format a remote address
 	 *
-	 * @param {String} remoteAddress full remote share
+	 * @param {String} shareWith userid, full remote share, or whatever
+	 * @param {String} shareWithDisplayName
+	 * @param {String} message
 	 * @return {String} HTML code to display
 	 */
-	_formatRemoteShare: function(remoteAddress, message) {
+	_formatRemoteShare: function(shareWith, shareWithDisplayName, message) {
-		var parts = this._REMOTE_OWNER_REGEXP.exec(remoteAddress);
+		var parts = this._REMOTE_OWNER_REGEXP.exec(shareWith);
 		if (!parts) {
 			// display avatar of the user
-			var avatar = '<span class="avatar" data-userName="' + escapeHTML(remoteAddress) + '" title="' + message + " " + escapeHTML(remoteAddress) + '"></span>';
+			var avatar = '<span class="avatar" data-username="' + escapeHTML(shareWith) + '" title="' + message + " " + escapeHTML(shareWithDisplayName) + '"></span>';
-			var hidden = '<span class="hidden-visually">' + message + ' ' + escapeHTML(remoteAddress) + '</span> ';
+			var hidden = '<span class="hidden-visually">' + message + ' ' + escapeHTML(shareWithDisplayName) + '</span> ';
 			return avatar + hidden;
 		}
 
@@ -238,14 +239,17 @@ OC.Share = _.extend(OC.Share || {}, {
 	 * Loop over all recipients in the list and format them using
 	 * all kind of fancy magic.
 	 *
-	 * @param {String[]} recipients array of all the recipients
+	 * @param {Object} recipients array of all the recipients
 	 * @return {String[]} modified list of recipients
 	 */
 	_formatShareList: function(recipients) {
 		var _parent = this;
+		recipients = _.toArray(recipients);
+		recipients.sort(function(a, b) {
+			return a.shareWithDisplayName.localeCompare(b.shareWithDisplayName);
+		});
 		return $.map(recipients, function(recipient) {
-			recipient = _parent._formatRemoteShare(recipient, t('core', 'Shared with'));
+			return _parent._formatRemoteShare(recipient.shareWith, recipient.shareWithDisplayName, t('core', 'Shared with'));
-			return recipient;
 		});
 	},
 	/**
@@ -261,12 +265,13 @@ OC.Share = _.extend(OC.Share || {}, {
 		var type = $tr.data('type');
 		var icon = action.find('.icon');
 		var message, recipients, avatars;
+		var ownerId = $tr.attr('data-share-owner-id');
 		var owner = $tr.attr('data-share-owner');
 		var shareFolderIcon;
 		var iconClass = 'icon-shared';
 		action.removeClass('shared-style');
 		// update folder icon
-		if (type === 'dir' && (hasShares || hasLink || owner)) {
+		if (type === 'dir' && (hasShares || hasLink || ownerId)) {
 			if (hasLink) {
 				shareFolderIcon = OC.MimeType.getIconUrl('dir-public');
 			}
@@ -290,25 +295,26 @@ OC.Share = _.extend(OC.Share || {}, {
 			$tr.find('.filename .thumbnail').css('background-image', 'url(' + shareFolderIcon + ')');
 		}
 		// update share action text / icon
-		if (hasShares || owner) {
+		if (hasShares || ownerId) {
-			recipients = $tr.attr('data-share-recipients');
+			recipients = $tr.data('share-recipient-data');
 			action.addClass('shared-style');
 
 			avatars = '<span>' + t('core', 'Shared') + '</span>';
 			// even if reshared, only show "Shared by"
-			if (owner) {
+			if (ownerId) {
 				message = t('core', 'Shared by');
-				avatars = this._formatRemoteShare(owner, message);
+				avatars = this._formatRemoteShare(ownerId, owner, message);
 			} else if (recipients) {
-				avatars = this._formatShareList(recipients.split(', ')).join('');
+				avatars = this._formatShareList(recipients);
 			}
 			action.html(avatars).prepend(icon);
 
-			if (owner || recipients) {
+			if (ownerId || recipients) {
 				var avatarElement = action.find('.avatar');
-				avatarElement.avatar(avatarElement.data('username'), 32);
+				avatarElement.each(function () {
-
+					$(this).avatar($(this).data('username'), 32);
-				action.find('.icon-shared + span').tooltip({placement: 'top'});
+				});
+				action.find('span[title]').tooltip({placement: 'top'});
 			}
 		} else {
 			action.html('<span class="hidden-visually">' + t('core', 'Shared') + '</span>').prepend(icon);

core/js/tests/specs/shareSpec.js

@@ -45,6 +45,7 @@ describe('OC.Share tests', function() {
 				var $action;
 
 				$file.attr('data-share-owner', input);
+				$file.attr('data-share-owner-id', input);
 				OC.Share.markFileAsShared($file);
 
 				$action = $file.find('.action-share>span').parent();
@@ -119,6 +120,7 @@ describe('OC.Share tests', function() {
 			it('shows a shared folder icon for folders shared with the current user', function() {
 				$file.attr('data-type', 'dir');
 				$file.attr('data-share-owner', 'someoneelse');
+				$file.attr('data-share-owner-id', 'someoneelse');
 				OC.Share.markFileAsShared($file);
 
 				checkIcon('filetypes/folder-shared');
@@ -155,7 +157,7 @@ describe('OC.Share tests', function() {
 			function checkRecipients(input, output, title) {
 				var $action;
 
-				$file.attr('data-share-recipients', input);
+				$file.attr('data-share-recipient-data', JSON.stringify(input));
 				OC.Share.markFileAsShared($file, true);
 
 				$action = $file.find('.action-share>span').parent();
@@ -177,66 +179,187 @@ describe('OC.Share tests', function() {
 			}
 
 			it('displays the local share owner as is', function() {
-				checkRecipients('User One', 'Shared with User One', null);
+				var input = {
+					0: {
+						shareWith: 'User One',
+						shareWithDisplayName: 'User One'
+					}
+				};
+				checkRecipients(input, 'Shared with User One', null);
 			});
 			it('displays the user name part of a remote recipient', function() {
+				var input = {
+					0: {
+						shareWith: 'User One@someserver.com',
+						shareWithDisplayName: 'User One@someserver.com'
+					}
+				};
 				checkRecipients(
-					'User One@someserver.com',
+					input,
 					'User One@…',
 					'Shared with User One@someserver.com'
 				);
+
+				input = {
+					0: {
+						shareWith: 'User One@someserver.com/',
+						shareWithDisplayName: 'User One@someserver.com/'
+					}
+				};
 				checkRecipients(
-					'User One@someserver.com/',
+					input,
 					'User One@…',
 					'Shared with User One@someserver.com'
 				);
+
+				input = {
+					0: {
+						shareWith: 'User One@someserver.com/root/of/nextcloud',
+						shareWithDisplayName: 'User One@someserver.com/root/of/nextcloud'
+					}
+				};
 				checkRecipients(
-					'User One@someserver.com/root/of/owncloud',
+					input,
 					'User One@…',
 					'Shared with User One@someserver.com'
 				);
 			});
 			it('displays the user name part with domain of a remote share owner', function() {
+				var input = {
+					0: {
+						shareWith: 'User One@example.com@someserver.com',
+						shareWithDisplayName: 'User One@example.com@someserver.com'
+					}
+				};
 				checkRecipients(
-					'User One@example.com@someserver.com',
+					input,
 					'User One@example.com',
 					'Shared with User One@example.com@someserver.com'
 				);
+
+				input = {
+					0: {
+						shareWith: 'User One@example.com@someserver.com/',
+						shareWithDisplayName: 'User One@example.com@someserver.com/'
+					}
+				};
 				checkRecipients(
-					'User One@example.com@someserver.com/',
+					input,
 					'User One@example.com',
 					'Shared with User One@example.com@someserver.com'
 				);
+
+				input = {
+					0: {
+						shareWith: 'User One@example.com@someserver.com/root/of/nextcloud',
+						shareWithDisplayName: 'User One@example.com@someserver.com/root/of/nextcloud'
+					}
+				};
 				checkRecipients(
-					'User One@example.com@someserver.com/root/of/owncloud',
+					input,
 					'User One@example.com',
 					'Shared with User One@example.com@someserver.com'
 				);
 			});
 			it('display multiple remote recipients', function() {
+				var input = {
+					0: {
+						shareWith: 'One@someserver.com',
+						shareWithDisplayName: 'One@someserver.com'
+					},
+					1: {
+						shareWith: 'two@otherserver.com',
+						shareWithDisplayName: 'two@otherserver.com'
+					}
+				};
 				checkRecipients(
-					'One@someserver.com, two@otherserver.com',
+					input,
 					'One@… two@…',
 					['Shared with One@someserver.com', 'Shared with two@otherserver.com']
 				);
+
+				input = {
+					0: {
+						shareWith: 'One@someserver.com/',
+						shareWithDisplayName: 'One@someserver.com/'
+					},
+					1: {
+						shareWith: 'two@someserver.com',
+						shareWithDisplayName: 'two@someserver.com'
+					}
+				};
 				checkRecipients(
-					'One@someserver.com/, two@otherserver.com',
+					input,
 					'One@… two@…',
 					['Shared with One@someserver.com', 'Shared with two@otherserver.com']
 				);
+
+				input = {
+					0: {
+						shareWith: 'One@someserver.com/root/of/nextcloud',
+						shareWithDisplayName: 'One@someserver.com/root/of/nextcloud'
+					},
+					1: {
+						shareWith: 'two@someserver.com',
+						shareWithDisplayName: 'two@someserver.com'
+					}
+				};
 				checkRecipients(
-					'One@someserver.com/root/of/owncloud, two@otherserver.com',
+					input,
 					'One@… two@…',
 					['Shared with One@someserver.com', 'Shared with two@otherserver.com']
 				);
 			});
 			it('display mixed recipients', function() {
 				checkRecipients(
-					'One, two@otherserver.com',
+					{
+						0: {
+							shareWith: 'One',
+							shareWithDisplayName: 'One'
+						},
+						1: {
+							shareWith: 'two@otherserver.com',
+							shareWithDisplayName: 'two@otherserver.com'
+						}
+					},
 					'Shared with One two@…',
 					['Shared with two@otherserver.com']
 				);
 			});
+			it('display multiple with divergent displaynames', function() {
+				var recipients = {
+					0: {
+						shareWith: 'One',
+						shareWithDisplayName: 'Yoko Ono',
+						_output: 'Shared with Yoko Ono'
+					},
+					1: {
+						shareWith: 'two@otherserver.com',
+						shareWithDisplayName: 'two@othererver.com',
+						_output: 'two@…'
+					},
+					2: {
+						shareWith: 'Three',
+						shareWithDisplayName: 'Green, Mina',
+						_output: 'Shared with Green, Mina'
+					}
+				};
+
+				// we cannot assume the locale, also because PhantomJS has a bug.
+				var sortArray = _.toArray(recipients)
+					.sort(function(a, b) {
+						return a.shareWithDisplayName.localeCompare(b.shareWithDisplayName);
+					});
+				var sortedOutput = _.map(sortArray, function(recipient) {
+					return recipient._output;
+				}).join(' ');
+
+				checkRecipients(
+					recipients,
+					sortedOutput,
+					['Shared with two@otherserver.com']
+				);
+			});
 		});
 	});
 });