refactor(files_sharing): migrate to new Files Sidebar API

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

apps/files_sharing/src/files_sharing_tab.js

@@ -5,61 +5,54 @@
 
 import ShareVariant from '@mdi/svg/svg/share-variant.svg?raw'
 import { getCSPNonce } from '@nextcloud/auth'
+import { registerSidebarTab } from '@nextcloud/files'
 import { n, t } from '@nextcloud/l10n'
+import wrap from '@vue/web-component-wrapper'
 import Vue from 'vue'
+import FilesSidebarTab from './views/FilesSidebarTab.vue'
 import ExternalShareActions from './services/ExternalShareActions.js'
 import ShareSearch from './services/ShareSearch.js'
 import TabSections from './services/TabSections.js'
 
 __webpack_nonce__ = getCSPNonce()
 
 // Init Sharing Tab Service
-if (!window.OCA.Sharing) {
-	window.OCA.Sharing = {}
-}
+window.OCA.Sharing ??= {}
 Object.assign(window.OCA.Sharing, { ShareSearch: new ShareSearch() })
 Object.assign(window.OCA.Sharing, { ExternalShareActions: new ExternalShareActions() })
 Object.assign(window.OCA.Sharing, { ShareTabSections: new TabSections() })
 
 Vue.prototype.t = t
 Vue.prototype.n = n
 
-// Init Sharing tab component
-let TabInstance = null
-
-window.addEventListener('DOMContentLoaded', function() {
-	if (OCA.Files && OCA.Files.Sidebar) {
-		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
-			id: 'sharing',
-			name: t('files_sharing', 'Sharing'),
-			iconSvg: ShareVariant,
-
-			async mount(el, fileInfo, context) {
-				const SharingTab = (await import('./views/SharingTab.vue')).default
-				const View = Vue.extend(SharingTab)
-
-				if (TabInstance) {
-					TabInstance.$destroy()
-				}
-				TabInstance = new View({
-					// Better integration with vue parent component
-					parent: context,
-				})
-				// Only mount after we have all the info we need
-				await TabInstance.update(fileInfo)
-				TabInstance.$mount(el)
-			},
-
-			update(fileInfo) {
-				TabInstance.update(fileInfo)
-			},
-
-			destroy() {
-				if (TabInstance) {
-					TabInstance.$destroy()
-					TabInstance = null
-				}
-			},
-		}))
-	}
+const tagName = 'files_sharing-sidebar-tab'
+
+registerSidebarTab({
+	id: 'sharing',
+	displayName: t('files_sharing', 'Sharing'),
+	iconSvgInline: ShareVariant,
+	order: 10,
+	tagName,
+	enabled() {
+		if (!window.customElements.get(tagName)) {
+			setupSidebarTab()
+		}
+		return true
+	},
 })
+
+/**
+ * Setup the sidebar tab as a web component
+ */
+function setupSidebarTab() {
+	const webComponent = wrap(Vue, FilesSidebarTab)
+	// In Vue 2, wrap doesn't support diseabling shadow. Disable with a hack
+	Object.defineProperty(webComponent.prototype, 'attachShadow', {
+		value() { return this },
+	})
+	Object.defineProperty(webComponent.prototype, 'shadowRoot', {
+		get() { return this },
+	})
+
+	window.customElements.define(tagName, webComponent)
+}

apps/files/src/services/FileInfo.ts …s/files_sharing/src/services/FileInfo.tsapps/files/src/services/FileInfo.ts renamed to apps/files_sharing/src/services/FileInfo.ts apps/files/src/services/FileInfo.ts renamed to apps/files_sharing/src/services/FileInfo.ts

@@ -1,11 +1,9 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-/* eslint-disable jsdoc/require-jsdoc */
-
-import type { Attribute, Node } from '@nextcloud/files'
+import type { Attribute, INode } from '@nextcloud/files'
 
 interface RawLegacyFileInfo {
 	id: number
@@ -30,11 +28,16 @@ export type LegacyFileInfo = RawLegacyFileInfo & {
 	get: (key: keyof RawLegacyFileInfo) => unknown
 	isDirectory: () => boolean
 	canEdit: () => boolean
-	node: Node
+	node: INode
 	canDownload: () => boolean
 }
 
-export default function(node: Node): LegacyFileInfo {
+/**
+ * Convert Node to legacy file info
+ *
+ * @param node - The Node to convert
+ */
+export default function(node: INode): LegacyFileInfo {
 	const rawFileInfo: RawLegacyFileInfo = {
 		id: node.fileid!,
 		path: node.dirname,

apps/files_sharing/src/views/FilesSidebarTab.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { IFolder, INode, IView } from '@nextcloud/files'
+
+import { computed } from 'vue'
+import SharingTab from './SharingTab.vue'
+import FileInfo from '../services/FileInfo.ts'
+
+const props = defineProps<{
+	node?: INode
+	// eslint-disable-next-line vue/no-unused-properties -- Required on the web component interface
+	folder?: IFolder
+	// eslint-disable-next-line vue/no-unused-properties -- Required on the web component interface
+	view?: IView
+}>()
+
+const fileInfo = computed(() => props.node && FileInfo(props.node))
+</script>
+
+<template>
+	<SharingTab v-if="fileInfo" :file-info="fileInfo" />
+</template>

apps/files_sharing/src/views/SharingTab.vue

@@ -230,6 +230,13 @@ export default {
 
 	mixins: [ShareDetails],
 
+	props: {
+		fileInfo: {
+			type: Object,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			config: new Config(),
@@ -238,8 +245,6 @@ export default {
 			expirationInterval: null,
 			loading: true,
 
-			fileInfo: null,
-
 			// reshare Share object
 			reshare: null,
 			sharedWithMe: {},
@@ -328,18 +333,17 @@ export default {
 		},
 	},
 
-	methods: {
-		/**
-		 * Update current fileInfo and fetch new data
-		 *
-		 * @param {object} fileInfo the current file FileInfo
-		 */
-		async update(fileInfo) {
-			this.fileInfo = fileInfo
-			this.resetState()
-			this.getShares()
+	watch: {
+		fileInfo: {
+			immediate: true,
+			handler() {
+				this.resetState()
+				this.getShares()
+			},
 		},
+	},
 
+	methods: {
 		/**
 		 * Get the existing shares infos
 		 */