Merge pull request #44694 from nextcloud/feat/show-trash-deleted-by

feat(trashbin): Show user who deleted a file

3 files changed, 148 insertions, 56 deletions

diff --git a/apps/files_trashbin/src/columns.ts b/apps/files_trashbin/src/columns.ts
new file mode 100644
index 00000000000..2b5e3ecfd6c
--- /dev/null
+++ b/apps/files_trashbin/src/columns.ts
@@ -0,0 +1,143 @@
+/**
+ * @copyright 2024 Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import moment from '@nextcloud/moment'
+import { Column, Node } from '@nextcloud/files'
+import { getCurrentUser } from '@nextcloud/auth'
+import { dirname, joinPaths } from '@nextcloud/paths'
+import { translate as t } from '@nextcloud/l10n'
+
+import Vue from 'vue'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+
+const parseOriginalLocation = (node: Node): string => {
+	const path = node.attributes?.['trashbin-original-location'] !== undefined ? String(node.attributes?.['trashbin-original-location']) : null
+	if (!path) {
+		return t('files_trashbin', 'Unknown')
+	}
+	const dir = dirname(path)
+	if (dir === path) { // Node is in root folder
+		return t('files_trashbin', 'All files')
+	}
+	return joinPaths(t('files_trashbin', 'All files'), dir)
+}
+
+interface DeletedBy {
+	userId: null | string
+	displayName: null | string
+	label: null | string
+}
+
+const generateLabel = (userId: null | string, displayName: null | string) => {
+	const currentUserId = getCurrentUser()?.uid
+	if (userId === currentUserId) {
+		return t('files_trashbin', 'You')
+	}
+	if (!userId && !displayName) {
+		return t('files_trashbin', 'Unknown')
+	}
+	return null
+}
+
+const parseDeletedBy = (node: Node): DeletedBy => {
+	const userId = node.attributes?.['trashbin-deleted-by-id'] !== undefined ? String(node.attributes?.['trashbin-deleted-by-id']) : null
+	const displayName = node.attributes?.['trashbin-deleted-by-display-name'] !== undefined ? String(node.attributes?.['trashbin-deleted-by-display-name']) : null
+	const label = generateLabel(userId, displayName)
+	return {
+		userId,
+		displayName,
+		label,
+	}
+}
+
+const originalLocation = new Column({
+	id: 'original-location',
+	title: t('files_trashbin', 'Original location'),
+	render(node) {
+		const originalLocation = parseOriginalLocation(node)
+		const span = document.createElement('span')
+		span.title = originalLocation
+		span.textContent = originalLocation
+		return span
+	},
+	sort(nodeA, nodeB) {
+		const locationA = parseOriginalLocation(nodeA)
+		const locationB = parseOriginalLocation(nodeB)
+		return locationA.localeCompare(locationB)
+	},
+})
+
+const deletedBy = new Column({
+	id: 'deleted-by',
+	title: t('files_trashbin', 'Deleted by'),
+	render(node) {
+		const { userId, displayName, label } = parseDeletedBy(node)
+		if (label) {
+			const span = document.createElement('span')
+			span.textContent = label
+			return span
+		}
+
+		const UserBubble = Vue.extend(NcUserBubble)
+		const propsData = {
+			size: 32,
+			user: userId ?? undefined,
+			displayName: displayName ?? t('files_trashbin', 'Unknown'),
+		}
+		const userBubble = new UserBubble({ propsData }).$mount().$el
+		return userBubble as HTMLElement
+	},
+	sort(nodeA, nodeB) {
+		const deletedByA = parseDeletedBy(nodeA).label ?? parseDeletedBy(nodeA).displayName ?? t('files_trashbin', 'Unknown')
+		const deletedByB = parseDeletedBy(nodeB).label ?? parseDeletedBy(nodeB).displayName ?? t('files_trashbin', 'Unknown')
+		return deletedByA.localeCompare(deletedByB)
+	},
+})
+
+const deleted = new Column({
+	id: 'deleted',
+	title: t('files_trashbin', 'Deleted'),
+	render(node) {
+		const deletionTime = node.attributes?.['trashbin-deletion-time']
+		const span = document.createElement('span')
+		if (deletionTime) {
+			span.title = moment.unix(deletionTime).format('LLL')
+			span.textContent = moment.unix(deletionTime).fromNow()
+			return span
+		}
+
+		// Unknown deletion time
+		span.textContent = t('files_trashbin', 'A long time ago')
+		return span
+	},
+	sort(nodeA, nodeB) {
+		const deletionTimeA = nodeA.attributes?.['trashbin-deletion-time'] || nodeA?.mtime || 0
+		const deletionTimeB = nodeB.attributes?.['trashbin-deletion-time'] || nodeB?.mtime || 0
+		return deletionTimeB - deletionTimeA
+	},
+})
+
+export const columns = [
+	originalLocation,
+	deletedBy,
+	deleted,
+]
diff --git a/apps/files_trashbin/src/main.ts b/apps/files_trashbin/src/main.ts
index d7a8ff48c18..0d0d7b2abaa 100644
--- a/apps/files_trashbin/src/main.ts
+++ b/apps/files_trashbin/src/main.ts
@@ -24,26 +24,13 @@ import './trashbin.scss'
 
 import { translate as t } from '@nextcloud/l10n'
 import DeleteSvg from '@mdi/svg/svg/delete.svg?raw'
-import moment from '@nextcloud/moment'
 
 import { getContents } from './services/trashbin'
+import { columns } from './columns.ts'
 
 // Register restore action
 import './actions/restoreAction'
-import { Column, Node, View, getNavigation } from '@nextcloud/files'
-import { dirname, joinPaths } from '@nextcloud/paths'
-
-const parseOriginalLocation = (node: Node): string => {
-	const path = node.attributes?.['trashbin-original-location'] !== undefined ? String(node.attributes?.['trashbin-original-location']) : null
-	if (!path) {
-		return t('files_trashbin', 'Unknown')
-	}
-	const dir = dirname(path)
-	if (dir === path) { // Node is in root folder
-		return t('files_trashbin', 'All files')
-	}
-	return joinPaths(t('files_trashbin', 'All files'), dir)
-}
+import { View, getNavigation } from '@nextcloud/files'
 
 const Navigation = getNavigation()
 Navigation.register(new View({
@@ -60,47 +47,7 @@ Navigation.register(new View({
 
 	defaultSortKey: 'deleted',
 
-	columns: [
-		new Column({
-			id: 'original-location',
-			title: t('files_trashbin', 'Original location'),
-			render(node) {
-				const originalLocation = parseOriginalLocation(node)
-				const span = document.createElement('span')
-				span.title = originalLocation
-				span.textContent = originalLocation
-				return span
-			},
-			sort(nodeA, nodeB) {
-				const locationA = parseOriginalLocation(nodeA)
-				const locationB = parseOriginalLocation(nodeB)
-				return locationA.localeCompare(locationB)
-			},
-		}),
-
-		new Column({
-			id: 'deleted',
-			title: t('files_trashbin', 'Deleted'),
-			render(node) {
-				const deletionTime = node.attributes?.['trashbin-deletion-time']
-				const span = document.createElement('span')
-				if (deletionTime) {
-					span.title = moment.unix(deletionTime).format('LLL')
-					span.textContent = moment.unix(deletionTime).fromNow()
-					return span
-				}
-
-				// Unknown deletion time
-				span.textContent = t('files_trashbin', 'A long time ago')
-				return span
-			},
-			sort(nodeA, nodeB) {
-				const deletionTimeA = nodeA.attributes?.['trashbin-deletion-time'] || nodeA?.mtime || 0
-				const deletionTimeB = nodeB.attributes?.['trashbin-deletion-time'] || nodeB?.mtime || 0
-				return deletionTimeB - deletionTimeA
-			},
-		}),
-	],
+	columns,
 
 	getContents,
 }))
diff --git a/apps/files_trashbin/src/services/trashbin.ts b/apps/files_trashbin/src/services/trashbin.ts
index 9aef75ef6d5..2ed0038c79c 100644
--- a/apps/files_trashbin/src/services/trashbin.ts
+++ b/apps/files_trashbin/src/services/trashbin.ts
@@ -35,6 +35,8 @@ const data = `<?xml version="1.0"?>
 		<nc:trashbin-deletion-time />
 		<nc:trashbin-original-location />
 		<nc:trashbin-title />
+		<nc:trashbin-deleted-by-id />
+		<nc:trashbin-deleted-by-display-name />
 		${getDavProperties()}
 	</d:prop>
 </d:propfind>`