refactor: adjust for Nextcloud 33 new files sidebar API

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

Author: susnux

cypress/e2e/sidebar.cy.ts

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { createFolder, getFileListRow, navigateToFolder, moveFile, renameFile } from './filesUtils'
-import { addComment, addTag, createPublicShare, toggleFavorite, showActivityTab, randHash } from './sidebarUtils'
+import { createFolder, getFileListRow, moveFile, navigateToFolder, renameFile } from './filesUtils.ts'
+import { addComment, addTag, createPublicShare, randHash, showActivityTab, toggleFavorite } from './sidebarUtils.ts'
 
 describe('Check activity listing in the sidebar', { testIsolation: true }, () => {
 	beforeEach(function() {
@@ -77,5 +77,4 @@ describe('Check activity listing in the sidebar', { testIsolation: true }, () =>
 		showActivityTab('welcome.txt')
 		cy.get('.comments-activity').first().should('contains.text', 'A comment')
 	})
-
 })

package-lock.json

@@ -61,6 +61,7 @@
   "devDependencies": {
     "@nextcloud/browserslist-config": "^3.1.2",
     "@nextcloud/cypress": "^1.0.0-beta.15",
+    "@nextcloud/files": "^4.0.0-beta.8",
     "@nextcloud/stylelint-config": "^3.1.1",
     "@nextcloud/vite-config": "^2.5.2",
     "@testing-library/cypress": "^10.1.0",

package.json

@@ -8,14 +8,18 @@
 </template>
 
 <script setup lang="ts">
+import type { INode } from '@nextcloud/files'
 import type { IActivitySidebarAction } from '../models/ActivityAPI.ts'
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const props = defineProps<{
 	/** The sidebar plugin */
 	plugin: IActivitySidebarAction
-	fileInfo: object | null
+	/**
+	 * The current node (file or folder)
+	 */
+	node: INode
 }>()
 
 const emit = defineEmits<{
@@ -25,8 +29,8 @@ const emit = defineEmits<{
 const attachTarget = ref<HTMLDivElement>()
 
 onMounted(() => props.plugin.mount(attachTarget.value as HTMLDivElement, {
-	context: getCurrentInstance()?.proxy,
-	fileInfo: props.fileInfo,
+	node: props.node,
+	context: getCurrentInstance()?.proxy ?? undefined,
 	reload: () => emit('reload-activities'),
 }))
 onBeforeUnmount(() => props.plugin.unmount())

src/components/ActivitySidebarPlugin.vue

@@ -6,7 +6,8 @@
 <template>
 	<li class="activity-entry">
 		<NcAvatar
-			:class="[applyMonochromeIconColor, 'activity-entry__icon', 'activity-icon', 'avatardiv--unknown']"
+			class="activity-entry__icon activity-icon avatardiv--unknown"
+			:class="[applyMonochromeIconColor]"
 			:disable-menu="true"
 			:disable-tooltip="true"
 			:url="activity.icon"

src/components/activities/GenericActivity.vue

@@ -2,23 +2,29 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import type { INode } from '@nextcloud/files'
+import type { ComponentPublicInstance } from 'vue'
 import type ActivityModel from './ActivityModel.js'
 
 interface MountOptions {
 	/**
 	 * Trigger reloading the activities
 	 */
 	reload: () => void
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	fileInfo: any
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	context: any
+	/**
+	 * The current file or folder context
+	 */
+	node: INode
+	/**
+	 * The current Vue component instance context
+	 */
+	context?: ComponentPublicInstance
 }
 
 export interface ActivityFactoryQueryOptions {
-	/** File to show entries for */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	fileInfo: any
+	/** File or folder to show entries for */
+	node: INode
 	/** Limit the number of entries */
 	limit?: number
 	/** Offset for the entries queried */
@@ -52,7 +58,7 @@ export interface IActivitySidebarEntry {
 	/**
 	 * The action is called with the HTML element where is should be mounted
 	 */
-	mount: (element: HTMLElement, options: Omit<MountOptions, 'fileInfo'>) => void
+	mount: (element: HTMLElement, options: Omit<MountOptions, 'node'>) => void
 
 	/**
 	 * Called just before the sidebar is destroyed to allow plugins to cleanup

src/models/ActivityAPI.ts

@@ -3,51 +3,23 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { App, Component, ComponentPublicInstance } from 'vue'
-import type { ActivityTabType } from './views/ActivityTab.vue'
-
 import LightningBolt from '@mdi/svg/svg/lightning-bolt.svg?raw'
-import { translate as t } from '@nextcloud/l10n'
-import { createApp } from 'vue'
+import { registerSidebarTab } from '@nextcloud/files'
+import { t } from '@nextcloud/l10n'
+import { defineAsyncComponent, defineCustomElement } from 'vue'
 
-// Init Activity tab component
-let LazyActivityTab: Component | null = null
-let activityTabApp: App<Element> | null = null
-let activityTabInstance: ComponentPublicInstance<ActivityTabType> | null = null
+window.customElements.define(
+	'activity-files-sidebar-tab',
+	defineCustomElement(defineAsyncComponent(() => import('./views/ActivityTab.vue'))),
+)
 
-const activityTab = new OCA.Files.Sidebar.Tab({
+registerSidebarTab({
 	id: 'activity',
-	name: t('activity', 'Activity'),
-	iconSvg: LightningBolt,
-
-	async mount(el, fileInfo) {
-		// only load if needed
-		if (LazyActivityTab === null) {
-			const { default: ActivityTab } = await import('./views/ActivityTab.vue')
-			LazyActivityTab = ActivityTab
-		}
-		// destroy previous instance if available
-		if (activityTabApp) {
-			activityTabApp.unmount()
-		}
-		activityTabApp = createApp(LazyActivityTab)
-		// No need to await this, we will show a loading indicator instead
-		activityTabInstance = activityTabApp.mount(el)
-		activityTabInstance.update(fileInfo)
-	},
-	update(fileInfo) {
-		activityTabInstance!.update(fileInfo)
+	order: 50,
+	displayName: t('activity', 'Activity'),
+	iconSvgInline: LightningBolt,
+	tagName: 'activity-files-sidebar-tab',
+	enabled() {
+		return true
 	},
-	destroy() {
-		activityTabApp?.unmount()
-		activityTabApp = null
-	},
-})
-
-window.addEventListener('DOMContentLoaded', async function() {
-	if (OCA.Files && OCA.Files.Sidebar) {
-		OCA.Files.Sidebar.registerTab(activityTab)
-		const { default: ActivityTab } = await import('./views/ActivityTab.vue')
-		LazyActivityTab = ActivityTab
-	}
 })

src/sidebar.ts

@@ -28,7 +28,7 @@ declare global {
 				__sidebar_filters: IActivityFilter[]
 			}
 			Viewer?: {
-				open(options: { path?: string, fileInfo?: unknown }): void
+				open(options: { path?: string }): void
 				get mimetypes(): string[]
 			}
 		}
@@ -74,7 +74,7 @@ export function getSidebarActions() {
 /**
  * Get all additional activity stream entries for a given file object
  *
- * @param options Filter options for the additonal entries
+ * @param options Filter options for the additional entries
  */
 export async function getAdditionalEntries(options: ActivityFactoryQueryOptions) {
 	if (window.OCA?.Activity?.__sidebar_factories === undefined) {

src/utils/api.ts

@@ -8,7 +8,7 @@
 		:class="{ 'icon-loading': loading }"
 		class="activity">
 		<!-- error message -->
-		<NcEmptyContent v-if="error || fileInfo === null" :name="error">
+		<NcEmptyContent v-if="error || !node" :name="error">
 			<template #icon>
 				<NcIconSvgWrapper :svg="lightningBoltSVG" />
 			</template>
@@ -20,7 +20,7 @@
 					v-for="plugin, index of sidebarPlugins"
 					:key="index"
 					:plugin="plugin"
-					:file-info="fileInfo"
+					:node="node"
 					@reload-activities="getActivities()" />
 			</div>
 
@@ -54,6 +54,8 @@
 </template>
 
 <script lang='ts'>
+import type { IFolder, INode, IView } from '@nextcloud/files'
+import type { PropType } from 'vue'
 import type { IActivitySidebarAction, IActivitySidebarEntry } from '../models/ActivityAPI.ts'
 
 import lightningBoltSVG from '@mdi/svg/svg/lightning-bolt.svg?raw'
@@ -72,6 +74,7 @@ import logger from '../utils/logger.ts'
 
 const ActivityTab = defineComponent({
 	name: 'ActivityTab',
+
 	components: {
 		ActivityComponent,
 		NcEmptyContent,
@@ -80,30 +83,66 @@ const ActivityTab = defineComponent({
 		ActivitySidebarPlugin,
 	},
 
+	props: {
+		/**
+		 * The node currently displayed in the sidebar
+		 */
+		node: {
+			type: Object as PropType<INode>,
+			required: true,
+		},
+
+		/**
+		 * The folder shown in the files app
+		 */
+		// eslint-disable-next-line vue/no-unused-properties
+		folder: {
+			type: Object as PropType<IFolder | undefined>,
+			required: false,
+			default: undefined,
+		},
+
+		/**
+		 * The view shown in the files app
+		 */
+		// eslint-disable-next-line vue/no-unused-properties
+		view: {
+			type: Object as PropType<IView | undefined>,
+			required: false,
+			default: undefined,
+		},
+	},
+
 	expose: ['update'],
 
 	data() {
 		return {
 			error: '',
 			loading: true,
-			fileInfo: null,
 			activities: [] as (IActivitySidebarEntry | ActivityModel)[],
 			lightningBoltSVG,
 			sidebarPlugins: [] as IActivitySidebarAction[],
 		}
 	},
 
+	watch: {
+		node: {
+			immediate: true,
+			async handler(node: INode) {
+				await this.update(node)
+			},
+		},
+	},
+
 	mounted() {
 		this.sidebarPlugins = getSidebarActions()
 	},
 
 	methods: {
 		/**
-		 * Update current fileInfo and fetch new activities
-		 *
-		 * @param fileInfo the current file FileInfo
+		 * Update current view and fetch new activities
 		 */
-		async update(fileInfo) {
+		async update() {
 			this.sidebarPlugins = []
 			const sidebarPlugins = getSidebarActions()
 			if (sidebarPlugins.length > 0) {
@@ -112,7 +151,6 @@ const ActivityTab = defineComponent({
 				})
 			}
 
-			this.fileInfo = fileInfo
 			this.resetState()
 			await this.getActivities()
 		},
@@ -125,7 +163,7 @@ const ActivityTab = defineComponent({
 				this.loading = true
 
 				const activities = await this.processActivities(await this.loadRealActivities())
-				const otherEntries = await getAdditionalEntries({ fileInfo: this.fileInfo })
+				const otherEntries = await getAdditionalEntries({ node: this.node })
 				this.activities = [...activities, ...otherEntries].sort((a, b) => b.timestamp - a.timestamp)
 			} catch (error) {
 				this.error = t('activity', 'Unable to load the activity list')
@@ -155,7 +193,7 @@ const ActivityTab = defineComponent({
 						params: {
 							format: 'json',
 							object_type: 'files',
-							object_id: this.fileInfo.id,
+							object_id: this.node.fileid,
 						},
 					},
 				)
@@ -177,7 +215,9 @@ const ActivityTab = defineComponent({
 		processActivities(activities): ActivityModel[] {
 			activities = activities.map((activity) => new ActivityModel(activity))
 
-			logger.debug(`Processed ${activities.length} activity(ies)`, { activities, fileInfo: this.fileInfo })
+			logger.debug(`Processed ${activities.length} activity(ies)`, {
+				activities, node: this.node,
+			})
 
 			const filters = getActivityFilters()
 			return activities.filter((activity) => !filters || filters.every((filter) => filter(activity)))