feat(files): add sharing icon in header

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

1 files changed, 80 insertions, 4 deletions

diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index fbd483fd23f..0b858a15e4d 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -25,8 +25,20 @@
 			<!-- Current folder breadcrumbs -->
 			<BreadCrumbs :path="dir" @reload="fetchContent">
 				<template #actions>
+					<NcButton v-if="canShare"
+						:aria-label="shareButtonLabel"
+						:class="{ 'files-list__header-share-button--shared': shareButtonType }"
+						:title="shareButtonLabel"
+						class="files-list__header-share-button"
+						type="tertiary"
+						@click="openSharingSidebar">
+						<template #icon>
+							<LinkIcon v-if="shareButtonType === Type.SHARE_TYPE_LINK" />
+							<ShareVariantIcon v-else :size="20" />
+						</template>
+					</NcButton>
 					<!-- Uploader -->
-					<UploadPicker v-if="currentFolder"
+					<UploadPicker v-if="currentFolder && canUpload"
 						:content="dirContents"
 						:destination="currentFolder"
 						:multiple="true"
@@ -77,18 +89,24 @@ import type { Upload } from '@nextcloud/upload'
 import type { UserConfig } from '../types.ts'
 import type { View, ContentsWithRoot } from '@nextcloud/files'
 
-import { Folder, Node } from '@nextcloud/files'
+import { Folder, Node, Permission } from '@nextcloud/files'
+import { getCapabilities } from '@nextcloud/capabilities'
 import { join, dirname } from 'path'
 import { orderBy } from 'natural-orderby'
 import { translate } from '@nextcloud/l10n'
 import { UploadPicker } from '@nextcloud/upload'
+import { Type } from '@nextcloud/sharing'
+import Vue from 'vue'
+
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import Vue from 'vue'
+import LinkIcon from 'vue-material-design-icons/Link.vue'
+import ShareVariantIcon from 'vue-material-design-icons/ShareVariant.vue'
 
+import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { useSelectionStore } from '../store/selection.ts'
@@ -100,17 +118,21 @@ import FilesListVirtual from '../components/FilesListVirtual.vue'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
 
+const isSharingEnabled = getCapabilities()?.files_sharing !== undefined
+
 export default Vue.extend({
 	name: 'FilesList',
 
 	components: {
 		BreadCrumbs,
 		FilesListVirtual,
+		LinkIcon,
 		NcAppContent,
 		NcButton,
 		NcEmptyContent,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
+		ShareVariantIcon,
 		UploadPicker,
 	},
 
@@ -139,6 +161,7 @@ export default Vue.extend({
 		return {
 			loading: true,
 			promise: null,
+			Type,
 		}
 	},
 
@@ -157,7 +180,7 @@ export default Vue.extend({
 		 */
 		dir(): string {
 			// Remove any trailing slash but leave root slash
-			return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1')
+			return (this.$route?.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
 		},
 
 		/**
@@ -242,6 +265,43 @@ export default Vue.extend({
 			const dir = this.dir.split('/').slice(0, -1).join('/') || '/'
 			return { ...this.$route, query: { dir } }
 		},
+
+		shareAttributes(): number[]|undefined {
+			if (!this.currentFolder?.attributes?.['share-types']) {
+				return undefined
+			}
+			return Object.values(this.currentFolder?.attributes?.['share-types'] || {}).flat() as number[]
+		},
+		shareButtonLabel() {
+			if (!this.shareAttributes) {
+				return this.t('files', 'Share')
+			}
+
+			if (this.shareButtonType === Type.SHARE_TYPE_LINK) {
+				return this.t('files', 'Shared by link')
+			}
+			return this.t('files', 'Shared')
+		},
+		shareButtonType(): Type|null {
+			if (!this.shareAttributes) {
+				return null
+			}
+
+			// If all types are links, show the link icon
+			if (this.shareAttributes.some(type => type === Type.SHARE_TYPE_LINK)) {
+				return Type.SHARE_TYPE_LINK
+			}
+
+			return Type.SHARE_TYPE_USER
+		},
+
+		canUpload() {
+			return this.currentFolder && (this.currentFolder.permissions & Permission.CREATE) !== 0
+		},
+		canShare() {
+			return isSharingEnabled
+				&& this.currentFolder && (this.currentFolder.permissions & Permission.SHARE) !== 0
+		},
 	},
 
 	watch: {
@@ -348,6 +408,13 @@ export default Vue.extend({
 			}
 		},
 
+		openSharingSidebar() {
+			if (window?.OCA?.Files?.Sidebar?.setActiveTab) {
+				window.OCA.Files.Sidebar.setActiveTab('sharing')
+			}
+			sidebarAction.exec(this.currentFolder, this.currentView, this.currentFolder.path)
+		},
+
 		t: translate,
 	},
 })
@@ -378,12 +445,21 @@ $navigationToggleSize: 50px;
 			// Only the breadcrumbs shrinks
 			flex: 0 0;
 		}
+
+		&-share-button {
+			opacity: .3;
+			&--shared {
+				opacity: 1;
+			}
+		}
 	}
+
 	&__refresh-icon {
 		flex: 0 0 44px;
 		width: 44px;
 		height: 44px;
 	}
+
 	&__loading-icon {
 		margin: auto;
 	}