Use recipient display names when updating shares in the UI

Since OC.Share didn't have any array containing the list of shares for
the current file, OC.Share.currentShares has been introduced to contain
the full share item structure instead of the reduced one
OC.Share.itemShares.

The event "sharesChanged" is now passing OC.Share.currentShares, which
itself includes the display name to be displayed for the recipients in
the action icon.

4 files changed, 85 insertions, 52 deletions

diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js
index 8a63593883b..e833612fb51 100644
--- a/apps/files_sharing/js/share.js
+++ b/apps/files_sharing/js/share.js
@@ -75,7 +75,9 @@
 					OCA.Sharing.sharesLoaded = true;
 				}
 				else{
-					// this will update the icons for all the visible elements
+					// this will update the icons for all the currently visible elements
+					// additionally added elements when scrolling down will be
+					// updated in the _renderRow override
 					OC.Share.updateIcons('file', fileList);
 				}
 			});
@@ -113,11 +115,11 @@
 					OC.Share.showDropDown(itemType, $tr.data('id'), appendTo, true, possiblePermissions, filename);
 				}
 				$('#dropdown').on('sharesChanged', function(ev) {
+					var recipients = _.pluck(ev.shares[OC.Share.SHARE_TYPE_USER], 'share_with_displayname');
+					var groupRecipients = _.pluck(ev.shares[OC.Share.SHARE_TYPE_GROUP], 'share_with_displayname');
+					recipients = recipients.concat(groupRecipients);
 					// note: we only update the data attribute because updateIcon()
 					// is called automatically after this event
-					var userShares = ev.itemShares[OC.Share.SHARE_TYPE_USER] || [];
-					var groupShares = ev.itemShares[OC.Share.SHARE_TYPE_GROUP] || [];
-					var recipients = _.union(userShares, groupShares);
 					if (recipients.length) {
 						$tr.attr('data-share-recipients', OCA.Sharing.Util.formatRecipients(recipients));
 					}
diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index 1b75ad7a9fd..455addaccc0 100644
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -71,6 +71,7 @@ describe('OCA.Sharing.Util tests', function() {
 		delete OCA.Sharing.sharesLoaded;
 		delete OC.Share.droppedDown;
 		OC.Share.statuses = {};
+		OC.Share.currentShares = {};
 	});
 
 	describe('Sharing data in table row', function() {
@@ -205,6 +206,12 @@ describe('OCA.Sharing.Util tests', function() {
 	describe('Share action', function() {
 		var showDropDownStub;
 
+		function makeDummyShareItem(displayName) {
+			return {
+				share_with_displayname: displayName
+			};
+		}
+
 		beforeEach(function() {
 			showDropDownStub = sinon.stub(OC.Share, 'showDropDown', function() {
 				$('#testArea').append($('<div id="dropdown"></div>'));
@@ -236,11 +243,12 @@ describe('OCA.Sharing.Util tests', function() {
 			expect(showDropDownStub.calledOnce).toEqual(true);
 
 			// simulate what the dropdown does
-			var itemShares = {};
-			itemShares[OC.Share.SHARE_TYPE_USER] = ['User One', 'User Two'];
-			itemShares[OC.Share.SHARE_TYPE_GROUP] = ['Group One', 'Group Two'];
-			OC.Share.itemShares = itemShares;
-			$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: itemShares}));
+			var shares = {};
+			OC.Share.itemShares[OC.Share.SHARE_TYPE_USER] = ['user1', 'user2'];
+			OC.Share.itemShares[OC.Share.SHARE_TYPE_GROUP] = ['group1', 'group2'];
+			shares[OC.Share.SHARE_TYPE_USER] = _.map(['User One', 'User Two'], makeDummyShareItem);
+			shares[OC.Share.SHARE_TYPE_GROUP] = _.map(['Group One', 'Group Two'], makeDummyShareItem);
+			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: shares}));
 
 			expect($tr.attr('data-share-recipients')).toEqual('Group One, Group Two, User One, User Two');
 
@@ -249,7 +257,7 @@ describe('OCA.Sharing.Util tests', function() {
 			expect($action.find('>span').text()).toEqual('Shared with Group One, Group Two, User One, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
-		it('removes share icon after unsharing a shared file', function() {
+		it('updates share icon after updating shares of a file', function() {
 			var $action, $tr;
 			OC.Share.statuses = {1: {link: false, path: '/subdir'}};
 			fileList.setFiles([{
@@ -272,10 +280,10 @@ describe('OCA.Sharing.Util tests', function() {
 			expect(showDropDownStub.calledOnce).toEqual(true);
 
 			// simulate what the dropdown does
-			var itemShares = {};
-			itemShares[OC.Share.SHARE_TYPE_USER] = ['User One', 'User Two', 'User Three'];
-			OC.Share.itemShares = itemShares;
-			$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: itemShares}));
+			var shares = {};
+			OC.Share.itemShares[OC.Share.SHARE_TYPE_USER] = ['user1', 'user2', 'user3'];
+			shares[OC.Share.SHARE_TYPE_USER] = _.map(['User One', 'User Two', 'User Three'], makeDummyShareItem);
+			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: shares}));
 
 			expect($tr.attr('data-share-recipients')).toEqual('User One, User Three, User Two');
 
@@ -285,7 +293,7 @@ describe('OCA.Sharing.Util tests', function() {
 			expect($action.find('>span').text()).toEqual('Shared with User One, User Three, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
-		it('updates share icon after modifying shares on a shared file', function() {
+		it('removes share icon after removing all shares from a file', function() {
 			var $action, $tr;
 			OC.Share.statuses = {1: {link: false, path: '/subdir'}};
 			fileList.setFiles([{
@@ -309,9 +317,8 @@ describe('OCA.Sharing.Util tests', function() {
 			expect(showDropDownStub.calledOnce).toEqual(true);
 
 			// simulate what the dropdown does
-			var itemShares = {};
-			OC.Share.itemShares = itemShares;
-			$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: itemShares}));
+			OC.Share.itemShares = {};
+			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: {}}));
 
 			expect($tr.attr('data-share-recipients')).not.toBeDefined();
 
@@ -342,10 +349,10 @@ describe('OCA.Sharing.Util tests', function() {
 			expect(showDropDownStub.calledOnce).toEqual(true);
 
 			// simulate what the dropdown does
-			var itemShares = {};
-			itemShares[OC.Share.SHARE_TYPE_USER] = ['User Two'];
-			OC.Share.itemShares = itemShares;
-			$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: itemShares}));
+			var shares = {};
+			OC.Share.itemShares[OC.Share.SHARE_TYPE_USER] = ['user2'];
+			shares[OC.Share.SHARE_TYPE_USER] = _.map(['User Two'], makeDummyShareItem);
+			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: shares}));
 
 			expect($tr.attr('data-share-recipients')).toEqual('User Two');
 
@@ -380,9 +387,8 @@ describe('OCA.Sharing.Util tests', function() {
 			expect(showDropDownStub.calledOnce).toEqual(true);
 
 			// simulate what the dropdown does
-			var itemShares = {};
-			OC.Share.itemShares = itemShares;
-			$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: itemShares}));
+			OC.Share.itemShares = {};
+			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: {}}));
 
 			expect($tr.attr('data-share-recipients')).not.toBeDefined();
 
diff --git a/core/js/share.js b/core/js/share.js
index a46a17102fd..a478b08cd6b 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -3,8 +3,25 @@ OC.Share={
 	SHARE_TYPE_GROUP:1,
 	SHARE_TYPE_LINK:3,
 	SHARE_TYPE_EMAIL:4,
+	/**
+	 * @deprecated use OC.Share.currentShares instead
+	 */
 	itemShares:[],
+	/**
+	 * Full list of all share statuses
+	 */
 	statuses:{},
+	/**
+	 * Shares for the currently selected file.
+	 * (for which the dropdown is open)
+	 *
+	 * Key is item type and value is an array or
+	 * shares of the given item type.
+	 */
+	currentShares: {},
+	/**
+	 * Whether the share dropdown is opened.
+	 */
 	droppedDown:false,
 	/**
 	 * Loads ALL share statuses from server, stores them in OC.Share.statuses then
@@ -345,6 +362,7 @@ OC.Share={
 			dropDownEl = dropDownEl.appendTo(appendTo);
 			// Reset item shares
 			OC.Share.itemShares = [];
+			OC.Share.currentShares = {};
 			if (data.shares) {
 				$.each(data.shares, function(index, share) {
 					if (share.share_type == OC.Share.SHARE_TYPE_LINK) {
@@ -418,7 +436,7 @@ OC.Share={
 				OC.Share.share(itemType, itemSource, shareType, shareWith, permissions, itemSourceName, expirationDate, function() {
 					OC.Share.addShareWith(shareType, shareWith, selected.item.label, permissions, possiblePermissions);
 					$('#shareWith').val('');
-					$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: OC.Share.itemShares}));
+					$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
 					OC.Share.updateIcon(itemType, itemSource);
 				});
 				return false;
@@ -475,6 +493,7 @@ OC.Share={
 		$('#shareWith').focus();
 	},
 	hideDropDown:function(callback) {
+		OC.Share.currentShares = null;
 		$('#dropdown').hide('blind', function() {
 			OC.Share.droppedDown = false;
 			$('#dropdown').remove();
@@ -487,6 +506,12 @@ OC.Share={
 		});
 	},
 	addShareWith:function(shareType, shareWith, shareWithDisplayName, permissions, possiblePermissions, mailSend, collection) {
+		var shareItem = {
+			share_type: shareType,
+			share_with: shareWith,
+			share_with_displayname: shareWithDisplayName,
+			permissions: permissions
+		};
 		if (shareType === 1) {
 			shareWithDisplayName = shareWithDisplayName + " (" + t('core', 'group') + ')';
 		}
@@ -565,6 +590,10 @@ OC.Share={
 				html.find('.cruds').before(showCrudsButton);
 			}
 			$('#expiration').show();
+			if (!OC.Share.currentShares[shareType]) {
+				OC.Share.currentShares[shareType] = [];
+			}
+			OC.Share.currentShares[shareType].push(shareItem);
 		}
 	},
 	showLink:function(token, password, itemSource) {
@@ -700,7 +729,9 @@ $(document).ready(function() {
 			$li.remove();
 			var index = OC.Share.itemShares[shareType].indexOf(shareWith);
 			OC.Share.itemShares[shareType].splice(index, 1);
-			$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: OC.Share.itemShares}));
+			// updated list of shares
+			OC.Share.currentShares[shareType].splice(index, 1);
+			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
 			OC.Share.updateIcon(itemType, itemSource);
 			if (typeof OC.Share.statuses[itemSource] === 'undefined') {
 				$('#expiration').hide('blind');
@@ -759,7 +790,7 @@ $(document).ready(function() {
 			if (oc_appconfig.core.enforcePasswordForPublicLink === false) {
 				OC.Share.share(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', OC.PERMISSION_READ, itemSourceName, expirationDate, function(data) {
 					OC.Share.showLink(data.token, null, itemSource);
-					$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: OC.Share.itemShares}));
+					$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
 					OC.Share.updateIcon(itemType, itemSource);
 				});
 			} else {
@@ -772,7 +803,7 @@ $(document).ready(function() {
 			if ($('#linkText').val() !== '') {
 				OC.Share.unshare(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', function() {
 					OC.Share.itemShares[OC.Share.SHARE_TYPE_LINK] = false;
-					$('#dropdown').trigger(new $.Event('sharesChanged', {itemShares: OC.Share.itemShares}));
+					$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
 					OC.Share.updateIcon(itemType, itemSource);
 					if (typeof OC.Share.statuses[itemSource] === 'undefined') {
 						$('#expiration').hide('blind');
diff --git a/core/js/tests/specs/shareSpec.js b/core/js/tests/specs/shareSpec.js
index a8d9225649c..458bc41b6a1 100644
--- a/core/js/tests/specs/shareSpec.js
+++ b/core/js/tests/specs/shareSpec.js
@@ -170,11 +170,11 @@ describe('OC.Share tests', function() {
 					JSON.stringify({status: 'success'})
 				);
 				expect(handler.calledOnce).toEqual(true);
-				var itemShares = handler.getCall(0).args[0].itemShares;
-				expect(itemShares).toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_USER]).toEqual(['user1', 'user2']);
-				expect(itemShares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_LINK]).not.toBeDefined();
+				var shares = handler.getCall(0).args[0].shares;
+				expect(shares).toBeDefined();
+				expect(shares[OC.Share.SHARE_TYPE_USER][0].share_with_displayname).toEqual('User One');
+				expect(shares[OC.Share.SHARE_TYPE_USER][1].share_with_displayname).toEqual('User Two');
+				expect(shares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
 			});
 			it('triggers "sharesChanged" event when deleting shares', function() {
 				$('#dropdown .unshare:eq(0)').click();
@@ -184,11 +184,10 @@ describe('OC.Share tests', function() {
 					JSON.stringify({status: 'success'})
 				);
 				expect(handler.calledOnce).toEqual(true);
-				var itemShares = handler.getCall(0).args[0].itemShares;
-				expect(itemShares).toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_USER]).toEqual([]);
-				expect(itemShares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_LINK]).not.toBeDefined();
+				var shares = handler.getCall(0).args[0].shares;
+				expect(shares).toBeDefined();
+				expect(shares[OC.Share.SHARE_TYPE_USER]).toEqual([]);
+				expect(shares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
 			});
 			it('triggers "sharesChanged" event when toggling link share', function() {
 				// simulate autocomplete selection
@@ -199,11 +198,10 @@ describe('OC.Share tests', function() {
 					JSON.stringify({status: 'success', data: { token: 'abc' }})
 				);
 				expect(handler.calledOnce).toEqual(true);
-				var itemShares = handler.getCall(0).args[0].itemShares;
-				expect(itemShares).toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_USER]).toEqual(['user1']);
-				expect(itemShares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_LINK]).toEqual(true);
+				var shares = handler.getCall(0).args[0].shares;
+				expect(shares).toBeDefined();
+				expect(shares[OC.Share.SHARE_TYPE_USER][0].share_with_displayname).toEqual('User One');
+				expect(shares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
 
 				handler.reset();
 
@@ -216,14 +214,10 @@ describe('OC.Share tests', function() {
 				);
 
 				expect(handler.calledOnce).toEqual(true);
-				itemShares = handler.getCall(0).args[0].itemShares;
-				expect(itemShares).toBeDefined();
-				expect(itemShares[OC.Share.SHARE_TYPE_USER]).toEqual(['user1']);
-				expect(itemShares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
-				// currently inconsistent, removing share with link sets it to false
-				// instead of delete
-				expect(itemShares[OC.Share.SHARE_TYPE_LINK]).toBeFalsy();
-				//expect(itemShares[OC.Share.SHARE_TYPE_LINK]).not.toBeDefined();
+				shares = handler.getCall(0).args[0].shares;
+				expect(shares).toBeDefined();
+				expect(shares[OC.Share.SHARE_TYPE_USER][0].share_with_displayname).toEqual('User One');
+				expect(shares[OC.Share.SHARE_TYPE_GROUP]).not.toBeDefined();
 			});
 		});
 	});