refactor: Sharing sidebar UI redesign

apps/files_sharing/src/components/SharingInput.vue

@@ -5,7 +5,6 @@
 
 <template>
 	<div class="sharing-search">
-		<label for="sharing-search-input">{{ t('files_sharing', 'Search for share recipients') }}</label>
 		<NcSelect ref="select"
 			v-model="value"
 			input-id="sharing-search-input"

apps/files_sharing/src/views/SharingDetailsTab.vue

@@ -1124,7 +1124,7 @@ export default {
 	&__wrapper {
 		position: relative;
 		overflow: scroll;
-		flex-shrink: 1;
+		flex: 1 0 auto;
 		padding: 4px;
 		padding-inline-end: 12px;
 	}

apps/files_sharing/src/views/SharingTab.vue

@@ -25,6 +25,9 @@
 				</SharingEntrySimple>
 			</ul>
 
+			<h3>Internal shares</h3>
+
+			<!-- TODO: component must either be configurable or diffentiated into two -->
 			<!-- add new share input -->
 			<SharingInput v-if="!loading"
 				:can-reshare="canReshare"
@@ -34,13 +37,14 @@
 				:shares="shares"
 				@open-sharing-details="toggleShareDetailsView" />
 
-			<!-- link shares list -->
-			<SharingLinkList v-if="!loading"
-				ref="linkShareList"
-				:can-reshare="canReshare"
-				:file-info="fileInfo"
-				:shares="linkShares"
-				@open-sharing-details="toggleShareDetailsView" />
+			<!-- will move _into_ the dropdown component -->
+			<div style="border-top: 1px dotted grey;"></div>
+
+			<!-- internal link copy -->
+			<SharingEntryInternal :file-info="fileInfo" />
+
+			<div style="border-top: 1px dotted grey;"></div>
+			<!-- will move _into_ the dropdown component -->
 
 			<!-- other shares list -->
 			<SharingList v-if="!loading"
@@ -52,10 +56,42 @@
 			<!-- inherited shares -->
 			<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
 
-			<!-- internal link copy -->
-			<SharingEntryInternal :file-info="fileInfo" />
+			<hr>
+			<h3>External shares</h3>
+
+			<!-- ***** DISSOLVED OUT FROM ShareLinkList ***** -->
+			<SharingEntryLink v-if="!hasLinkShares && canReshare"
+				:can-reshare="canReshare"
+				:file-info="fileInfo"
+				@add:share="addShare" />
+			<!-- ***** DISSOLVED OUT FROM ShareLinkList ***** -->
+
+			<!-- TODO: component must either be configurable or diffentiated into two -->
+			<!-- add new email/federated share input -->
+			<SharingInput v-if="!loading"
+				:can-reshare="canReshare"
+				:file-info="fileInfo"
+				:link-shares="linkShares"
+				:reshare="reshare"
+				:shares="shares"
+				@open-sharing-details="toggleShareDetailsView" />
+
+			<!-- ***** DISSOLVED OUT FROM ShareLinkList ***** -->
+			<template v-if="hasShares">
+				<!-- using shares[index] to work with .sync -->
+				<SharingEntryLink v-for="(share, index) in shares"
+					:key="share.id"
+					:index="shares.length > 1 ? index + 1 : null"
+					:can-reshare="canReshare"
+					:share.sync="shares[index]"
+					:file-info="fileInfo"
+					@add:share="addShare(...arguments)"
+					@update:share="awaitForShare(...arguments)"
+					@remove:share="removeShare"
+					@open-sharing-details="openSharingDetails(share)" />
+			</template>
+			<!-- ***** DISSOLVED OUT FROM ShareLinkList ***** -->
 
-			<!-- projects -->
 			<CollectionList v-if="projectsEnabled && fileInfo"
 				:id="`${fileInfo.id}`"
 				type="file"
@@ -71,6 +107,14 @@
 			<component :is="section($refs['section-'+index], fileInfo)" :file-info="fileInfo" />
 		</div>
 
+		<!-- projects (deprecated as of NC25 (replaced by related_resources) - see instance config "projects.enabled" ; ignore this / remove it / move into own section) -->
+		<div v-show="!showSharingDetailsView && projectsEnabled && fileInfo"
+			class="sharingTab__additionalContent">
+			<CollectionList :id="`${fileInfo.id}`"
+				type="file"
+				:name="fileInfo.name" />
+		</div>
+
 		<!-- share details -->
 		<SharingDetailsTab v-if="showSharingDetailsView"
 			:file-info="shareDetailsData.fileInfo"
@@ -105,11 +149,15 @@ import SharingInherited from './SharingInherited.vue'
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
 import SharingDetailsTab from './SharingDetailsTab.vue'
+import { getCapabilities } from '@nextcloud/capabilities'
+import SharingEntryLink from '../components/SharingEntryLink.vue'
+import ShareDetails from '../mixins/ShareDetails.js'
 
 export default {
 	name: 'SharingTab',
 
 	components: {
+		SharingEntryLink,
 		NcAvatar,
 		CollectionList,
 		SharingEntryInternal,
@@ -121,6 +169,8 @@ export default {
 		SharingDetailsTab,
 	},
 
+	mixins: [ShareDetails],
+
 	data() {
 		return {
 			config: new Config(),
@@ -142,6 +192,7 @@ export default {
 			showSharingDetailsView: false,
 			shareDetailsData: {},
 			returnFocusElement: null,
+			canLinkShare: getCapabilities().files_sharing.public.enabled,
 		}
 	},
 
@@ -159,6 +210,26 @@ export default {
 			return !!(this.fileInfo.permissions & OC.PERMISSION_SHARE)
 				|| !!(this.reshare && this.reshare.hasSharePermission && this.config.isResharingAllowed)
 		},
+
+		/**
+		 * Do we have link shares?
+		 * Using this to still show the `new link share`
+		 * button regardless of mail shares
+		 *
+		 * @return {Array}
+		 */
+		hasLinkShares() {
+			return this.shares.filter(share => share.type === ShareType.Link).length > 0
+		},
+
+		/**
+		 * Do we have any link or email shares?
+		 *
+		 * @return {boolean}
+		 */
+		hasShares() {
+			return this.shares.length > 0
+		},
 	},
 
 	methods: {
@@ -431,4 +502,8 @@ export default {
 		margin: 44px 0;
 	}
 }
+
+h3 {
+	font-weight: bold;
+}
 </style>