Merge pull request #44109 from nextcloud/feat/frontend-change-for-version-author

feat: author displayname and avatar on versions

apps/files_versions/src/components/Version.vue

@@ -17,7 +17,6 @@
  -->
 <template>
 	<NcListItem class="version"
-		:name="versionLabel"
 		:force-display-actions="true"
 		:data-files-versions-version="version.fileVersion"
 		@click="click">
@@ -39,13 +38,30 @@
 			</div>
 		</template>
 
+		<!-- author -->
+		<template #name>
+			<div class="version__info">
+				<div v-if="versionLabel" class="version__info__label">{{ versionLabel }}</div>
+				<div v-if="versionAuthor" class="version__info">
+					<div v-if="versionLabel">•</div>
+					<NcAvatar class="avatar"
+						:user="version.author"
+						:size="16"
+						:disable-menu="true"
+						:disable-tooltip="true"
+						:show-user-status="false" />
+					<div>{{ versionAuthor }}</div>
+				</div>
+			</div>
+		</template>
+
 		<!-- Version file size as subline -->
 		<template #subname>
-			<div class="version__info">
+			<div class="version__info version__info__subline">
 				<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
 				<!-- Separate dot to improve alignement -->
-				<span class="version__info__size">•</span>
-				<span class="version__info__size">{{ version.size | humanReadableSize }}</span>
+				<span>•</span>
+				<span>{{ version.size | humanReadableSize }}</span>
 			</div>
 		</template>
 
@@ -113,11 +129,13 @@ import Pencil from 'vue-material-design-icons/Pencil.vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { defineComponent, type PropType } from 'vue'
-import { getRootUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import { getRootUrl, generateOcsUrl } from '@nextcloud/router'
 import { joinPaths } from '@nextcloud/paths'
 import { loadState } from '@nextcloud/initial-state'
 import { Permission, formatFileSize } from '@nextcloud/files'
@@ -132,6 +150,7 @@ export default defineComponent({
 	components: {
 		NcActionLink,
 		NcActionButton,
+		NcAvatar,
 		NcListItem,
 		BackupRestore,
 		Download,
@@ -145,6 +164,10 @@ export default defineComponent({
 		tooltip: Tooltip,
 	},
 
+	created() {
+		this.fetchDisplayName()
+	},
+
 	filters: {
 		humanReadableSize(bytes: number): string {
 			return formatFileSize(bytes)
@@ -193,6 +216,7 @@ export default defineComponent({
 			previewLoaded: false,
 			previewErrored: false,
 			capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
+			versionAuthor: '',
 		}
 	},
 
@@ -279,6 +303,19 @@ export default defineComponent({
 			this.$emit('delete', this.version)
 		},
 
+		async fetchDisplayName() {
+			// check to make sure that we have a valid author - in case database did not migrate, null author, etc.
+			if (this.version.author) {
+				try {
+					const { data } = await axios.get(generateOcsUrl(`/cloud/users/${this.version.author}`))
+					this.versionAuthor = data.ocs.data.displayname
+				} catch (e) {
+					// Promise got rejected - default to null author to not try to load author profile
+					this.versionAuthor = null
+				}
+			}
+		},
+
 		click() {
 			if (!this.canView) {
 				window.location = this.downloadURL
@@ -309,10 +346,16 @@ export default defineComponent({
 		flex-direction: row;
 		align-items: center;
 		gap: 0.5rem;
+		color: var(--color-main-text);
+		font-weight: 500;
 
-		&__size {
-			color: var(--color-text-lighter);
+		&__label {
+			font-weight: 700;
 		}
+
+		&__subline {
+		color: var(--color-text-maxcontrast)
+	}
 	}
 
 	&__image {

apps/files_versions/src/utils/versions.ts

@@ -35,6 +35,7 @@ import logger from '../utils/logger.js'
 export interface Version {
 	fileId: string, // The id of the file associated to the version.
 	label: string, // 'Current version' or ''
+	author: string|null, // UID for the author of the version
 	filename: string, // File name relative to the version DAV endpoint
 	basename: string, // A base name generated from the mtime
 	mime: string, // Empty for the current version, else the actual mime type of the version
@@ -107,6 +108,7 @@ function formatVersion(version: any, fileInfo: any): Version {
 	return {
 		fileId: fileInfo.id,
 		label: version.props['version-label'],
+		author: version.props['version-author'] ?? null,
 		filename: version.filename,
 		basename: moment(mtime).format('LLL'),
 		mime: version.mime,