Merge pull request #18185 from owncloud/share-dialog-files-sidebar

Share dialog files sidebar

6 files changed, 238 insertions, 137 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 194c658e3a1..23834fa44de 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -368,6 +368,21 @@
 		},
 
 		/**
+		 * Displays the details view for the given file and
+		 * selects the given tab
+		 *
+		 * @param {string} fileName file name for which to show details
+		 * @param {string} [tabId] optional tab id to select
+		 */
+		showDetailsView: function(fileName, tabId) {
+			this._updateDetailsView(fileName);
+			if (tabId) {
+				this._detailsView.selectTab(tabId);
+			}
+			OC.Apps.showAppSidebar();
+		},
+
+		/**
 		 * Update the details view to display the given file
 		 *
 		 * @param {string} fileName file name from the current list
diff --git a/apps/files_sharing/appinfo/app.php b/apps/files_sharing/appinfo/app.php
index 20f1b046d35..8d919d1466f 100644
--- a/apps/files_sharing/appinfo/app.php
+++ b/apps/files_sharing/appinfo/app.php
@@ -54,9 +54,18 @@ $application->setupPropagation();
 \OCP\Share::registerBackend('file', 'OC_Share_Backend_File');
 \OCP\Share::registerBackend('folder', 'OC_Share_Backend_Folder', 'file');
 
-\OCP\Util::addScript('files_sharing', 'share');
-\OCP\Util::addScript('files_sharing', 'external');
-\OCP\Util::addStyle('files_sharing', 'sharetabview');
+$eventDispatcher = \OC::$server->getEventDispatcher();
+$eventDispatcher->addListener(
+	'OCA\Files::loadAdditionalScripts',
+	function() {
+		\OCP\Util::addScript('files_sharing', 'share');
+		\OCP\Util::addScript('files_sharing', 'sharetabview');
+		\OCP\Util::addScript('files_sharing', 'external');
+		\OCP\Util::addStyle('files_sharing', 'sharetabview');
+	}
+);
+
+// \OCP\Util::addStyle('files_sharing', 'sharetabview');
 
 \OC::$server->getActivityManager()->registerExtension(function() {
 		return new \OCA\Files_Sharing\Activity(
diff --git a/apps/files_sharing/css/sharetabview.css b/apps/files_sharing/css/sharetabview.css
index 42c9bee7173..0cc812e917c 100644
--- a/apps/files_sharing/css/sharetabview.css
+++ b/apps/files_sharing/css/sharetabview.css
@@ -1,3 +1,75 @@
 .app-files .shareTabView {
 	min-height: 100px;
 }
+
+.shareTabView .oneline { white-space: nowrap; }
+
+.shareTabView .shareWithLoading {
+	padding-left: 10px;
+	position: relative;
+	right: 30px;
+	top: 2px;
+}
+
+.shareTabView .shareWithRemoteInfo {
+	padding: 11px 0 11px 10px
+}
+
+.shareTabView label {
+	font-weight:400;
+	white-space: nowrap;
+}
+
+.shareTabView input[type="checkbox"] {
+	margin:0 3px 0 8px;
+	vertical-align: middle;
+}
+
+.shareTabView input[type="text"], .shareTabView input[type="password"] {
+	width: 91%;
+	margin-left: 7px;
+}
+
+.shareTabView form {
+	font-size: 100%;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+#shareWithList {
+	list-style-type:none;
+	padding:8px;
+}
+
+#shareWithList li {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	font-weight: bold;
+	line-height: 21px;
+	white-space: normal;
+}
+
+#shareWithList .unshare img, #shareWithList .showCruds img {
+	vertical-align:text-bottom; /* properly align icons */
+}
+
+#shareWithList label input[type=checkbox]{
+	margin-left: 0;
+	position: relative;
+}
+#shareWithList .username{
+	padding-right: 8px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: 254px;
+	display: inline-block;
+	overflow: hidden;
+	vertical-align: middle;
+}
+#shareWithList li label{
+	margin-right: 8px;
+}
+
+.shareTabView .icon-loading-small {
+	margin-left: -30px;
+}
diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js
index c124d390d04..5290dfbb7d1 100644
--- a/apps/files_sharing/js/share.js
+++ b/apps/files_sharing/js/share.js
@@ -79,7 +79,9 @@
 						$files = fileList.$fileList.find('tr');
 					}
 					_.each($files, function(file) {
-						OCA.Sharing.Util.updateFileActionIcon($(file));
+						var $tr = $(file);
+						var shareStatus = OC.Share.statuses[$tr.data('id')];
+						OCA.Sharing.Util._updateFileActionIcon($tr, !!shareStatus, shareStatus && shareStatus.link);
 					});
 				}
 
@@ -104,71 +106,59 @@
 				permissions: OC.PERMISSION_SHARE,
 				icon: OC.imagePath('core', 'actions/share'),
 				type: OCA.Files.FileActions.TYPE_INLINE,
-				actionHandler: function(filename, context) {
-					var $tr = context.$file;
-					var itemType = 'file';
-					if ($tr.data('type') === 'dir') {
-						itemType = 'folder';
-					}
-					var possiblePermissions = $tr.data('share-permissions');
-					if (_.isUndefined(possiblePermissions)) {
-						possiblePermissions = $tr.data('permissions');
-					}
-
-					var appendTo = $tr.find('td.filename');
-					// Check if drop down is already visible for a different file
-					if (OC.Share.droppedDown) {
-						if ($tr.attr('data-id') !== $('#dropdown').attr('data-item-source')) {
-							OC.Share.hideDropDown(function () {
-								$tr.addClass('mouseOver');
-								OC.Share.showDropDown(itemType, $tr.data('id'), appendTo, true, possiblePermissions, filename);
-							});
-						} else {
-							OC.Share.hideDropDown();
-						}
-					} else {
-						$tr.addClass('mouseOver');
-						OC.Share.showDropDown(itemType, $tr.data('id'), appendTo, true, possiblePermissions, filename);
-					}
-					$('#dropdown').on('sharesChanged', function(ev) {
-						// files app current cannot show recipients on load, so we don't update the
-						// icon when changed for consistency
-						if (context.fileList.$el.closest('#app-content-files').length) {
-							return;
-						}
-						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
-						if (recipients.length) {
-							$tr.attr('data-share-recipients', OCA.Sharing.Util.formatRecipients(recipients));
-						}
-						else {
-							$tr.removeAttr('data-share-recipients');
-						}
-					});
+				actionHandler: function(fileName) {
+					fileList.showDetailsView(fileName, 'shareTabView');
 				}
 			});
 
-			OC.addScript('files_sharing', 'sharetabview').done(function() {
-				fileList.registerTabView(new OCA.Sharing.ShareTabView('shareTabView'));
+			var shareTab = new OCA.Sharing.ShareTabView('shareTabView');
+			// detect changes and change the matching list entry
+			shareTab.on('sharesChanged', function(shareModel) {
+				var fileInfoModel = shareModel.fileInfoModel;
+				var $tr = fileList.findFileEl(fileInfoModel.get('name'));
+				OCA.Sharing.Util._updateFileListDataAttributes(fileList, $tr, shareModel);
+				if (!OCA.Sharing.Util._updateFileActionIcon($tr, shareModel.hasUserShares(), shareModel.hasLinkShare())) {
+					// remove icon, if applicable
+					OC.Share.markFileAsShared($tr, false, false);
+				}
 			});
+			fileList.registerTabView(shareTab);
+		},
+
+		/**
+		 * Update file list data attributes
+		 */
+		_updateFileListDataAttributes: function(fileList, $tr, shareModel) {
+			// files app current cannot show recipients on load, so we don't update the
+			// icon when changed for consistency
+			if (fileList.id === 'files') {
+				return;
+			}
+			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));
+			}
+			else {
+				$tr.removeAttr('data-share-recipients');
+			}
 		},
 
 		/**
 		 * 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 {bool} hasLinkShare true if a link share exists
+		 *
+		 * @return {bool} true if the icon was set, false otherwise
 		 */
-		updateFileActionIcon: function($tr) {
+		_updateFileActionIcon: function($tr, hasUserShares, hasLinkShare) {
 			// if the statuses are loaded already, use them for the icon
 			// (needed when scrolling to the next page)
-			var shareStatus = OC.Share.statuses[$tr.data('id')];
-			if (shareStatus || $tr.attr('data-share-recipients') || $tr.attr('data-share-owner')) {
+			if (hasUserShares || hasLinkShare || $tr.attr('data-share-recipients') || $tr.attr('data-share-owner')) {
 				var permissions = $tr.data('permissions');
-				var hasLink = !!(shareStatus && shareStatus.link);
-				OC.Share.markFileAsShared($tr, true, hasLink);
+				OC.Share.markFileAsShared($tr, true, hasLinkShare);
 				if ((permissions & OC.PERMISSION_SHARE) === 0 && $tr.attr('data-share-owner')) {
 					// if no share action exists because the admin disabled sharing for this user
 					// we create a share notification action to inform the user about files
@@ -187,7 +177,9 @@
 						return $result;
 					});
 				}
+				return true;
 			}
+			return false;
 		},
 
 		/**
diff --git a/apps/files_sharing/js/sharetabview.js b/apps/files_sharing/js/sharetabview.js
index ee572b747ea..e24320604fb 100644
--- a/apps/files_sharing/js/sharetabview.js
+++ b/apps/files_sharing/js/sharetabview.js
@@ -10,7 +10,9 @@
 
 (function() {
 	var TEMPLATE =
-		'<div><ul>{{#if owner}}<li>Owner: {{owner}}</li>{{/if}}</ul></div>';
+		'<div>' +
+		'<div class="dialogContainer"></div>' +
+		'</div>';
 
 	/**
 	 * @memberof OCA.Sharing
@@ -20,7 +22,12 @@
 		id: 'shareTabView',
 		className: 'tab shareTabView',
 
-		_template: null,
+		template: function(params) {
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+			return this._template(params);
+		},
 
 		getLabel: function() {
 			return t('files_sharing', 'Sharing');
@@ -30,23 +37,40 @@
 		 * Renders this details view
 		 */
 		render: function() {
-			this.$el.empty();
-
-			if (!this._template) {
-				this._template = Handlebars.compile(TEMPLATE);
+			var self = this;
+			if (this._dialog) {
+				// remove/destroy older instance
+				this._dialog.model.off();
+				this._dialog.remove();
+				this._dialog = null;
 			}
 
 			if (this.model) {
-				console.log(this.model);
-				var owner = this.model.get('shareOwner');
-				if (owner === OC.currentUser) {
-					owner = null;
-				}
-				this.$el.append(this._template({
-					owner: owner
-				}));
+				this.$el.html(this.template());
 
+				// TODO: the model should read these directly off the passed fileInfoModel
+				var attributes = {
+					itemType: this.model.isDirectory() ? 'folder' : 'file',
+				   	itemSource: this.model.get('id'),
+					possiblePermissions: this.model.get('sharePermissions')
+				};
+				var configModel = new OC.Share.ShareConfigModel();
+				var shareModel = new OC.Share.ShareItemModel(attributes, {
+					configModel: configModel,
+					fileInfoModel: this.model
+				});
+				this._dialog = new OC.Share.ShareDialogView({
+					configModel: configModel,
+					model: shareModel
+				});
+				this.$el.find('.dialogContainer').append(this._dialog.$el);
+				this._dialog.render();
+				this._dialog.model.fetch();
+				this._dialog.model.on('change', function() {
+					self.trigger('sharesChanged', shareModel);
+				});
 			} else {
+				this.$el.empty();
 				// TODO: render placeholder text?
 			}
 		}
diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index b6368b901ee..96a96f1b814 100644
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -97,7 +97,6 @@ describe('OCA.Sharing.Util tests', function() {
 			}]);
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder.svg');
 			expect($action.find('img').length).toEqual(1);
@@ -116,7 +115,6 @@ describe('OCA.Sharing.Util tests', function() {
 			}]);
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('Shared');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
@@ -137,7 +135,6 @@ describe('OCA.Sharing.Util tests', function() {
 			}]);
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('Shared');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('public.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-public.svg');
@@ -158,7 +155,6 @@ describe('OCA.Sharing.Util tests', function() {
 			}]);
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
@@ -178,7 +174,6 @@ describe('OCA.Sharing.Util tests', function() {
 			}]);
 			$tr = fileList.$el.find('tbody tr:first');
 			$action = $tr.find('.action-share');
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
@@ -200,7 +195,6 @@ describe('OCA.Sharing.Util tests', function() {
 			$tr = fileList.$el.find('tbody tr:first');
 			expect($tr.find('.action-share').length).toEqual(0);
 			$action = $tr.find('.action-share-notification');
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 			expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
@@ -225,7 +219,7 @@ describe('OCA.Sharing.Util tests', function() {
 		});
 	});
 	describe('Share action', function() {
-		var showDropDownStub;
+		var shareTab;
 
 		function makeDummyShareItem(displayName) {
 			return {
@@ -234,12 +228,35 @@ describe('OCA.Sharing.Util tests', function() {
 		}
 
 		beforeEach(function() {
-			showDropDownStub = sinon.stub(OC.Share, 'showDropDown', function() {
-				$('#testArea').append($('<div id="dropdown"></div>'));
-			});
+			// make it look like not the "All files" list
+			fileList.id = 'test';
+			shareTab = fileList._detailsView._tabViews[0];
 		});
 		afterEach(function() {
-			showDropDownStub.restore();
+			shareTab = null;
+		});
+		it('clicking share action opens sidebar and share tab', function() {
+			var showDetailsViewStub = sinon.stub(fileList, 'showDetailsView');
+
+			fileList.setFiles([{
+				id: 1,
+				type: 'file',
+				name: 'One.txt',
+				path: '/subdir',
+				mimetype: 'text/plain',
+				size: 12,
+				permissions: OC.PERMISSION_ALL,
+				etag: 'abc'
+			}]);
+
+			var $tr = fileList.$el.find('tr:first');
+			$tr.find('.action-share').click();
+
+			expect(showDetailsViewStub.calledOnce).toEqual(true);
+			expect(showDetailsViewStub.getCall(0).args[0]).toEqual('One.txt');
+			expect(showDetailsViewStub.getCall(0).args[1]).toEqual('shareTabView');
+
+			showDetailsViewStub.restore();
 		});
 		it('adds share icon after sharing a non-shared file', function() {
 			var $action, $tr;
@@ -257,24 +274,20 @@ describe('OCA.Sharing.Util tests', function() {
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
 
-			expect($action.hasClass('permanent')).toEqual(true);
-
 			$tr.find('.action-share').click();
 
-			expect(showDropDownStub.calledOnce).toEqual(true);
-
-			// simulate what the dropdown does
-			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}));
+			// simulate updating shares
+			shareTab._dialog.model.set({
+				shares: [
+					{share_with_displayname: 'User One'},
+					{share_with_displayname: 'User Two'},
+					{share_with_displayname: 'Group One'},
+					{share_with_displayname: 'Group Two'}
+				]
+			});
 
 			expect($tr.attr('data-share-recipients')).toEqual('Group One, Group Two, User One, User Two');
 
-			OC.Share.updateIcon('file', 1);
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('Shared with Group One, Group Two, User One, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
@@ -294,23 +307,19 @@ describe('OCA.Sharing.Util tests', function() {
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
 
-			expect($action.hasClass('permanent')).toEqual(true);
-
 			$tr.find('.action-share').click();
 
-			expect(showDropDownStub.calledOnce).toEqual(true);
-
-			// simulate what the dropdown does
-			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}));
+			// simulate updating shares
+			shareTab._dialog.model.set({
+				shares: [
+					{share_with_displayname: 'User One'},
+					{share_with_displayname: 'User Two'},
+					{share_with_displayname: 'User Three'}
+				]
+			});
 
 			expect($tr.attr('data-share-recipients')).toEqual('User One, User Three, User Two');
 
-			OC.Share.updateIcon('file', 1);
-
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Three, User Two');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
@@ -331,20 +340,14 @@ describe('OCA.Sharing.Util tests', function() {
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
 
-			expect($action.hasClass('permanent')).toEqual(true);
-
 			$tr.find('.action-share').click();
 
-			expect(showDropDownStub.calledOnce).toEqual(true);
-
-			// simulate what the dropdown does
-			OC.Share.itemShares = {};
-			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: {}}));
+			// simulate updating shares
+			shareTab._dialog.model.set({
+				shares: []
+			});
 
 			expect($tr.attr('data-share-recipients')).not.toBeDefined();
-
-			OC.Share.updateIcon('file', 1);
-			expect($action.hasClass('permanent')).toEqual(true);
 		});
 		it('keep share text after updating reshare', function() {
 			var $action, $tr;
@@ -363,23 +366,15 @@ describe('OCA.Sharing.Util tests', function() {
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
 
-			expect($action.hasClass('permanent')).toEqual(true);
-
 			$tr.find('.action-share').click();
 
-			expect(showDropDownStub.calledOnce).toEqual(true);
-
-			// simulate what the dropdown does
-			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}));
+			// simulate updating shares
+			shareTab._dialog.model.set({
+				shares: [{share_with_displayname: 'User Two'}]
+			});
 
 			expect($tr.attr('data-share-recipients')).toEqual('User Two');
 
-			OC.Share.updateIcon('file', 1);
-
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});
@@ -401,21 +396,15 @@ describe('OCA.Sharing.Util tests', function() {
 			$action = fileList.$el.find('tbody tr:first .action-share');
 			$tr = fileList.$el.find('tr:first');
 
-			expect($action.hasClass('permanent')).toEqual(true);
-
 			$tr.find('.action-share').click();
 
-			expect(showDropDownStub.calledOnce).toEqual(true);
-
-			// simulate what the dropdown does
-			OC.Share.itemShares = {};
-			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: {}}));
+			// simulate updating shares
+			shareTab._dialog.model.set({
+				shares: []
+			});
 
 			expect($tr.attr('data-share-recipients')).not.toBeDefined();
 
-			OC.Share.updateIcon('file', 1);
-
-			expect($action.hasClass('permanent')).toEqual(true);
 			expect($action.find('>span').text().trim()).toEqual('User One');
 			expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
 		});