refactor(files_trashbin): migrate app to Vue 3

apps/files/src/actions/deleteAction.ts

@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 import type { Node, View } from '@nextcloud/files'
 
 import CloseSvg from '@mdi/svg/svg/close.svg?raw'
@@ -11,10 +12,13 @@ import { FileAction, Permission } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import PQueue from 'p-queue'
-import { TRASHBIN_VIEW_ID } from '../../../files_trashbin/src/files_views/trashbinView.ts'
 import logger from '../logger.ts'
 import { askConfirmation, canDisconnectOnly, canUnshareOnly, deleteNode, displayName, shouldAskForConfirmation } from './deleteUtils.ts'
 
+// TODO: once the files app is migrated to the new frontend use the import instead:
+// import { TRASHBIN_VIEW_ID } from '../../../files_trashbin/src/files_views/trashbinView.ts'
+const TRASHBIN_VIEW_ID = 'trashbin'
+
 const queue = new PQueue({ concurrency: 5 })
 
 export const ACTION_DELETE = 'delete'

apps/files_sharing/src/files_filters/AccountFilter.ts

@@ -11,7 +11,10 @@ import { ShareType } from '@nextcloud/sharing'
 import { isPublicShare } from '@nextcloud/sharing/public'
 import Vue from 'vue'
 import FileListFilterAccount from '../components/FileListFilterAccount.vue'
-import { TRASHBIN_VIEW_ID } from '../../../files_trashbin/src/files_views/trashbinView.ts'
+
+// once files_sharing is migrated to the new frontend use the import instead:
+// import { TRASHBIN_VIEW_ID } from '../../../files_trashbin/src/files_views/trashbinView.ts'
+const TRASHBIN_VIEW_ID = 'trashbin'
 
 export interface IAccountData {
 	uid: string

apps/files_trashbin/src/files_actions/restoreAction.spec.ts

@@ -7,16 +7,23 @@ import * as ncEventBus from '@nextcloud/event-bus'
 import { Folder } from '@nextcloud/files'
 import isSvg from 'is-svg'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { PERMISSION_ALL, PERMISSION_NONE } from '../../../../core/src/OC/constants.js'
 import { trashbinView } from '../files_views/trashbinView.ts'
 import { restoreAction } from './restoreAction.ts'
 
+// TODO: once core is migrated to the new frontend use the import instead:
+// import { PERMISSION_ALL, PERMISSION_NONE } from '../../../../core/src/OC/constants.js'
+export const PERMISSION_NONE = 0
+export const PERMISSION_ALL = 31
+
 const axiosMock = vi.hoisted(() => ({
 	request: vi.fn(),
 }))
-vi.mock('@nextcloud/axios', () => ({ default: axiosMock }))
+vi.mock('@nextcloud/axios', async (origial) => ({ ...(await origial()), default: axiosMock }))
 vi.mock('@nextcloud/auth')
 
+const errorSpy = vi.spyOn(window.console, 'error').mockImplementation(() => {})
+beforeEach(() => errorSpy.mockClear())
+
 describe('files_trashbin: file actions - restore action', () => {
 	it('has id set', () => {
 		expect(restoreAction.id).toBe('restore')
@@ -99,9 +106,9 @@ describe('files_trashbin: file actions - restore action', () => {
 
 			expect(await restoreAction.exec(node, trashbinView, '/')).toBe(true)
 			expect(axiosMock.request).toBeCalled()
-			expect(axiosMock.request.mock.calls[0][0].method).toBe('MOVE')
-			expect(axiosMock.request.mock.calls[0][0].url).toBe(node.encodedSource)
-			expect(axiosMock.request.mock.calls[0][0].headers.destination).toContain('/restore/')
+			expect(axiosMock.request.mock.calls[0]![0].method).toBe('MOVE')
+			expect(axiosMock.request.mock.calls[0]![0].url).toBe(node.encodedSource)
+			expect(axiosMock.request.mock.calls[0]![0].headers.destination).toContain('/restore/')
 		})
 
 		it('deletes node from current view after successfull request', async () => {
@@ -115,7 +122,7 @@ describe('files_trashbin: file actions - restore action', () => {
 			expect(emitSpy).toBeCalledWith('files:node:deleted', node)
 		})
 
-		it('does not delete node from view if reuest failed', async () => {
+		it('does not delete node from view if request failed', async () => {
 			const node = new Folder({ owner: 'test', source: 'https://example.com/remote.php/dav/trashbin/test/folder', root: '/trashbin/test/', permissions: PERMISSION_ALL })
 
 			axiosMock.request.mockImplementationOnce(() => {
@@ -126,6 +133,7 @@ describe('files_trashbin: file actions - restore action', () => {
 			expect(await restoreAction.exec(node, trashbinView, '/')).toBe(false)
 			expect(axiosMock.request).toBeCalled()
 			expect(emitSpy).not.toBeCalled()
+			expect(errorSpy).toBeCalled()
 		})
 
 		it('batch: only returns success if all requests worked', async () => {
@@ -143,6 +151,7 @@ describe('files_trashbin: file actions - restore action', () => {
 			})
 			expect(await restoreAction.execBatch!([node, node], trashbinView, '/')).toStrictEqual([false, true])
 			expect(axiosMock.request).toBeCalledTimes(2)
+			expect(errorSpy).toBeCalled()
 		})
 	})
 })

apps/files_trashbin/src/files_actions/restoreAction.ts

@@ -1,20 +1,21 @@
-import type { Node, View } from '@nextcloud/files'
-
-import svgHistory from '@mdi/svg/svg/history.svg?raw'
-/**
+/*!
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import type { Node, View } from '@nextcloud/files'
+
+import svgHistory from '@mdi/svg/svg/history.svg?raw'
 import { getCurrentUser } from '@nextcloud/auth'
-import axios from '@nextcloud/axios'
+import axios, { isAxiosError } from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { FileAction, Permission } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { encodePath } from '@nextcloud/paths'
 import { generateRemoteUrl } from '@nextcloud/router'
-import logger from '../../../files/src/logger.ts'
 import { TRASHBIN_VIEW_ID } from '../files_views/trashbinView.ts'
+import { logger } from '../logger.ts'
 
 export const restoreAction = new FileAction({
 	id: 'restore',
@@ -54,7 +55,7 @@ export const restoreAction = new FileAction({
 			emit('files:node:deleted', node)
 			return true
 		} catch (error) {
-			if (error.response?.status === 507) {
+			if (isAxiosError(error) && error.response?.status === 507) {
 				showError(t('files_trashbin', 'Not enough free space to restore the file/folder'))
 			}
 			logger.error('Failed to restore node', { error, node })

apps/files_trashbin/src/files_listActions/emptyTrashAction.spec.ts

@@ -126,7 +126,7 @@ describe('files_trashbin: file list actions - empty trashbin', () => {
 
 			dialogBuilder.build.mockImplementationOnce(() => ({
 				show: async () => {
-					const buttons = dialogBuilder.setButtons.mock.calls[0][0]
+					const buttons = dialogBuilder.setButtons.mock.calls[0]![0]
 					const cancel = buttons.find(({ label }) => label === 'Cancel')
 					await cancel.callback()
 				},
@@ -142,7 +142,7 @@ describe('files_trashbin: file list actions - empty trashbin', () => {
 
 			dialogBuilder.build.mockImplementationOnce(() => ({
 				show: async () => {
-					const buttons = dialogBuilder.setButtons.mock.calls[0][0]
+					const buttons = dialogBuilder.setButtons.mock.calls[0]![0]
 					const cancel = buttons.find(({ label }) => label === 'Empty deleted files')
 					await cancel.callback()
 				},
@@ -160,7 +160,7 @@ describe('files_trashbin: file list actions - empty trashbin', () => {
 
 			dialogBuilder.build.mockImplementationOnce(() => ({
 				show: async () => {
-					const buttons = dialogBuilder.setButtons.mock.calls[0][0]
+					const buttons = dialogBuilder.setButtons.mock.calls[0]![0]
 					const cancel = buttons.find(({ label }) => label === 'Empty deleted files')
 					await cancel.callback()
 				},

apps/files_trashbin/src/files_views/columns.spec.ts

@@ -180,14 +180,14 @@ describe('files_trashbin: file list columns', () => {
 				const node = new File({ owner: 'test', source: 'https://example.com/remote.php/dav/files/test/a.txt', mime: 'text/plain', attributes: { 'trashbin-deleted-by-id': 'user-id' } })
 				const el: HTMLElement = deletedBy.render(node, trashbinView)
 				expect(el).toBeInstanceOf(HTMLElement)
-				expect(el.textContent).toMatch(/\suser-id\s/)
+				expect(el.textContent.trim()).toBe('user-id')
 			})
 
 			it('renders a node with deleting user display name', () => {
 				const node = new File({ owner: 'test', source: 'https://example.com/remote.php/dav/files/test/a.txt', mime: 'text/plain', attributes: { 'trashbin-deleted-by-display-name': 'user-name', 'trashbin-deleted-by-id': 'user-id' } })
 				const el: HTMLElement = deletedBy.render(node, trashbinView)
 				expect(el).toBeInstanceOf(HTMLElement)
-				expect(el.textContent).toMatch(/\suser-name\s/)
+				expect(el.textContent.trim()).toBe('user-name')
 			})
 
 			it('renders a node even when information is missing', () => {

apps/files_trashbin/src/files_views/columns.ts

@@ -9,7 +9,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { Column } from '@nextcloud/files'
 import { formatRelativeTime, getCanonicalLocale, getLanguage, t } from '@nextcloud/l10n'
 import { dirname } from '@nextcloud/paths'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
 
 export const originalLocation = new Column({
@@ -40,14 +40,13 @@ export const deletedBy = new Column({
 			return span
 		}
 
-		const UserBubble = Vue.extend(NcUserBubble)
-		const propsData = {
+		const el = document.createElement('div')
+		createApp(NcUserBubble, {
 			size: 32,
 			user: userId ?? undefined,
 			displayName: displayName ?? userId,
-		}
-		const userBubble = new UserBubble({ propsData }).$mount().$el
-		return userBubble as HTMLElement
+		}).mount(el)
+		return el
 	},
 	sort(nodeA, nodeB) {
 		const deletedByA = parseDeletedBy(nodeA)

apps/files_trashbin/src/files_views/trashbinView.spec.ts

@@ -1,8 +1,9 @@
-import isSvg from 'is-svg'
-/**
+/*!
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import isSvg from 'is-svg'
 import { describe, expect, it } from 'vitest'
 import { getContents } from '../services/trashbin.ts'
 import { deleted, deletedBy, originalLocation } from './columns.ts'

apps/files_trashbin/src/files_views/trashbinView.ts

@@ -1,8 +1,9 @@
-import svgDelete from '@mdi/svg/svg/trash-can-outline.svg?raw'
-/**
+/*!
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import svgDelete from '@mdi/svg/svg/trash-can-outline.svg?raw'
 import { View } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import { getContents } from '../services/trashbin.ts'

apps/files_trashbin/src/logger.spec.ts

@@ -13,8 +13,8 @@ describe('files_trashbin: logger', () => {
 
 		logger.error('<message>')
 		expect(consoleSpy).toBeCalledTimes(1)
-		expect(consoleSpy.mock.calls[0][0]).toContain('<message>')
-		expect(consoleSpy.mock.calls[0][0]).toContain('files_trashbin')
-		expect(consoleSpy.mock.calls[0][1].app).toBe('files_trashbin')
+		expect(consoleSpy.mock.calls[0]![0]).toContain('<message>')
+		expect(consoleSpy.mock.calls[0]![0]).toContain('files_trashbin')
+		expect(consoleSpy.mock.calls[0]![1].app).toBe('files_trashbin')
 	})
 })

apps/files_trashbin/src/services/client.ts

@@ -4,9 +4,8 @@
  */
 
 import { getCurrentUser } from '@nextcloud/auth'
-import { davGetClient } from '@nextcloud/files'
+import { getClient } from '@nextcloud/files/dav'
 
-// init webdav client
 export const rootPath = `/trashbin/${getCurrentUser()?.uid}/trash`
 
-export const client = davGetClient()
+export const client = getClient()

apps/files_trashbin/src/services/trashbin.ts

@@ -1,11 +1,12 @@
-import type { ContentsWithRoot, File, Folder } from '@nextcloud/files'
-/**
+/*!
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import type { ContentsWithRoot, Folder, Node } from '@nextcloud/files'
 import type { FileStat, ResponseDataDetailed } from 'webdav'
 
-import { davResultToNode, getDavNameSpaces, getDavProperties } from '@nextcloud/files'
+import { resultToNode as davResultToNode, getDavNameSpaces, getDavProperties } from '@nextcloud/files/dav'
 import { generateUrl } from '@nextcloud/router'
 import { client, rootPath } from './client.ts'
 
@@ -22,18 +23,21 @@ const data = `<?xml version="1.0"?>
 </d:propfind>`
 
 /**
+ * Converts a WebDAV file stat to a File or Folder
+ * This will fix the preview URL attribute for trashbin items
  *
- * @param stat
+ * @param stat - The file stat object from WebDAV response
  */
-function resultToNode(stat: FileStat): File | Folder {
+function resultToNode(stat: FileStat): Node {
 	const node = davResultToNode(stat, rootPath)
 	node.attributes.previewUrl = generateUrl('/apps/files_trashbin/preview?fileId={fileid}&x=32&y=32', { fileid: node.fileid })
 	return node
 }
 
 /**
+ * Get the contents of a trashbin folder
  *
- * @param path
+ * @param path - The path of the trashbin folder to get contents from
  */
 export async function getContents(path = '/'): Promise<ContentsWithRoot> {
 	const contentsResponse = await client.getDirectoryContents(`${rootPath}${path}`, {

apps/files_trashbin/src/shims.d.ts

@@ -0,0 +1,9 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+declare module '*?raw' {
+	const content: string
+	export default content
+}

apps/files_trashbin/src/trashbin.scss

@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 .files-list__row-trashbin-original-location {
-  width: 150px !important;
+	width: 150px !important;
 }

build/frontend-legacy/webpack.modules.cjs

@@ -57,9 +57,6 @@ module.exports = {
 		'personal-settings': path.join(__dirname, 'apps/files_sharing/src', 'personal-settings.js'),
 		'public-nickname-handler': path.join(__dirname, 'apps/files_sharing/src', 'public-nickname-handler.ts'),
 	},
-	files_trashbin: {
-		init: path.join(__dirname, 'apps/files_trashbin/src', 'files-init.ts'),
-	},
 	oauth2: {
 		oauth2: path.join(__dirname, 'apps/oauth2/src', 'main.js'),
 	},

build/frontend/vite.config.mts

@@ -7,6 +7,9 @@ import { createAppConfig } from '@nextcloud/vite-config'
 import { resolve } from 'node:path'
 
 const modules = {
+	files_trashbin: {
+		init: resolve(import.meta.dirname, 'apps/files_trashbin/src', 'files-init.ts'),
+	},
 	files_versions: {
 		'sidebar-tab': resolve(import.meta.dirname, 'apps/files_versions/src', 'sidebar_tab.ts'),
 	},