Improve sharing flow

This commit introduces the following changes:

- Does not create new share once user is selected for internal shares
- Adds a `SharingDetails` view for share configurations
- Adds a quick share select to enable fast changes in share permisions.

Resolves: https://github.com/nextcloud/server/issues/26691

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 41 insertions, 8 deletions

diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index bfaf8a766ee..e5d26156750 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -29,7 +29,7 @@
 		</div>
 
 		<!-- shares content -->
-		<div v-else class="sharingTab__content">
+		<div v-if="!showSharingDetailsView" class="sharingTab__content">
 			<!-- shared with me information -->
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
 				<template #avatar>
@@ -46,20 +46,22 @@
 				:link-shares="linkShares"
 				:reshare="reshare"
 				:shares="shares"
-				@add:share="addShare" />
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- link shares list -->
 			<SharingLinkList v-if="!loading"
 				ref="linkShareList"
 				:can-reshare="canReshare"
 				:file-info="fileInfo"
-				:shares="linkShares" />
+				:shares="linkShares"
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- other shares list -->
 			<SharingList v-if="!loading"
 				ref="shareList"
 				:shares="shares"
-				:file-info="fileInfo" />
+				:file-info="fileInfo"
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- inherited shares -->
 			<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
@@ -74,6 +76,15 @@
 				:name="fileInfo.name" />
 		</div>
 
+		<!-- share details -->
+		<div v-else>
+			<SharingDetailsTab :file-info="shareDetailsData.fileInfo"
+				:share="shareDetailsData.share"
+				@close-sharing-details="toggleShareDetailsView"
+				@add:share="addShare"
+				@remove:share="removeShare" />
+		</div>
+
 		<!-- additional entries, use it with cautious -->
 		<div v-for="(section, index) in sections"
 			:ref="'section-' + index"
@@ -102,6 +113,7 @@ import SharingInput from '../components/SharingInput.vue'
 import SharingInherited from './SharingInherited.vue'
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
+import SharingDetailsTab from './SharingDetailsTab.vue'
 
 export default {
 	name: 'SharingTab',
@@ -115,6 +127,7 @@ export default {
 		SharingInput,
 		SharingLinkList,
 		SharingList,
+		SharingDetailsTab,
 	},
 
 	mixins: [ShareTypes],
@@ -122,7 +135,7 @@ export default {
 	data() {
 		return {
 			config: new Config(),
-
+			deleteEvent: null,
 			error: '',
 			expirationInterval: null,
 			loading: true,
@@ -137,6 +150,8 @@ export default {
 
 			sections: OCA.Sharing.ShareTabSections.getSections(),
 			projectsEnabled: loadState('core', 'projects_enabled', false),
+			showSharingDetailsView: false,
+			shareDetailsData: {},
 		}
 	},
 
@@ -225,6 +240,8 @@ export default {
 			this.sharedWithMe = {}
 			this.shares = []
 			this.linkShares = []
+			this.showSharingDetailsView = false
+			this.shareDetailsData = {}
 		},
 
 		/**
@@ -307,7 +324,7 @@ export default {
 						'Shared with you by {owner}',
 						{ owner: this.fileInfo.shareOwner },
 						undefined,
-						{ escape: false }
+						{ escape: false },
 					),
 					user: this.fileInfo.shareOwnerId,
 				}
@@ -321,7 +338,7 @@ export default {
 		 * @param {Share} share the share to add to the array
 		 * @param {Function} [resolve] a function to run after the share is added and its component initialized
 		 */
-		addShare(share, resolve = () => {}) {
+		addShare(share, resolve = () => { }) {
 			// only catching share type MAIL as link shares are added differently
 			// meaning: not from the ShareInput
 			if (share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
@@ -331,7 +348,16 @@ export default {
 			}
 			this.awaitForShare(share, resolve)
 		},
-
+		/**
+		 * Remove a share from the shares list
+		 *
+		 * @param {Share} share the share to remove
+		 */
+		removeShare(share) {
+			const index = this.shares.findIndex(item => item.id === share.id)
+			// eslint-disable-next-line vue/no-mutating-props
+			this.shares.splice(index, 1)
+		},
 		/**
 		 * Await for next tick and render after the list updated
 		 * Then resolve with the matched vue component of the
@@ -355,6 +381,12 @@ export default {
 				}
 			})
 		},
+		toggleShareDetailsView(eventData) {
+			if (eventData) {
+				this.shareDetailsData = eventData
+			}
+			this.showSharingDetailsView = !this.showSharingDetailsView
+		},
 	},
 }
 </script>
@@ -368,6 +400,7 @@ export default {
 	&__content {
 		padding: 0 6px;
 	}
+
 	&__additionalContent {
 		margin: 44px 0;
 	}