refactor: adjust for Nextcloud 33 new files sidebar API

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

Author: susnux

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

@@ -1,9 +1,10 @@
-import wsData from './activity_ws.json'
 /**
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import wsData from './activity_ws.json' with { type: 'json' }
+
 const axios = {
 	/**
 	 * @param {string} url URL to get

src/__mocks__/@nextcloud/axios.js

@@ -1,19 +1,33 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import type { VueWrapper } from '@vue/test-utils'
+
 import { mount } from '@vue/test-utils'
 import { expect, test, vi } from 'vitest'
+import { nextTick } from 'vue'
 import ActivityTab from '../views/ActivityTab.vue'
 
 vi.mock('@nextcloud/axios')
 
 test('Create ActivityTab', async () => {
-	const wrapper = mount(ActivityTab, {})
+	const wrapper = mount(ActivityTab, {
+		props: {
+			node: { id: 'test' } as any,
+		},
+	})
 
-	expect(wrapper.vm.$data.activities.length).toBe(0)
-
-	await wrapper.vm.update({ id: 'test' })
+	await new Promise<void>((resolve) => waitFor('ul', wrapper, resolve))
 
+	await nextTick()
 	expect(wrapper.vm.$data.activities.length).toBe(18)
 })
+
+function waitFor(query: string, wrapper: VueWrapper, callback: () => void) {
+	if (wrapper.find(query).exists()) {
+		return callback()
+	}
+	nextTick(() => waitFor(query, wrapper, callback))
+}

src/__tests__/ActivityTab.test.ts

@@ -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
-	}
 })