1 files changed, 51 insertions, 31 deletions

diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index 177a9fef807..dc36e4134f9 100644
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -11,7 +11,7 @@
 		<!-- Icon -->
 		<template #icon>
 			<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
-			<img v-else-if="(isCurrent || version.hasPreview) && !previewErrored"
+			<img v-else-if="version.previewUrl && !previewErrored"
 				:src="version.previewUrl"
 				alt=""
 				decoding="async"
@@ -31,18 +31,24 @@
 			<div class="version__info">
 				<div v-if="versionLabel"
 					class="version__info__label"
+					data-cy-files-version-label
 					:title="versionLabel">
 					{{ versionLabel }}
 				</div>
-				<div v-if="versionAuthor" class="version__info">
+				<div v-if="versionAuthor"
+					class="version__info"
+					data-cy-files-version-author-name>
 					<span v-if="versionLabel">•</span>
 					<NcAvatar class="avatar"
 						:user="version.author"
-						:size="16"
-						:disable-menu="true"
-						:disable-tooltip="true"
+						:size="20"
+						disable-menu
+						disable-tooltip
 						:show-user-status="false" />
-					<div>{{ versionAuthor }}</div>
+					<div class="version__info__author_name"
+						:title="versionAuthor">
+						{{ versionAuthor }}
+					</div>
 				</div>
 			</div>
 		</template>
@@ -53,7 +59,7 @@
 				<NcDateTime class="version__info__date"
 					relative-time="short"
 					:timestamp="version.mtime" />
-				<!-- Separate dot to improve alignement -->
+				<!-- Separate dot to improve alignment -->
 				<span>•</span>
 				<span>{{ humanReadableSize }}</span>
 			</div>
@@ -114,29 +120,31 @@
 import type { PropType } from 'vue'
 import type { Version } from '../utils/versions'
 
+import { getCurrentUser } from '@nextcloud/auth'
+import { Permission, formatFileSize } from '@nextcloud/files'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { joinPaths } from '@nextcloud/paths'
+import { getRootUrl, generateUrl } from '@nextcloud/router'
 import { defineComponent } from 'vue'
 
+import axios from '@nextcloud/axios'
+import moment from '@nextcloud/moment'
+import logger from '../utils/logger'
+
 import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import FileCompare from 'vue-material-design-icons/FileCompare.vue'
 import ImageOffOutline from 'vue-material-design-icons/ImageOffOutline.vue'
-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 NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
-import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 
-import moment from '@nextcloud/moment'
-import { getRootUrl, generateOcsUrl } from '@nextcloud/router'
-import { joinPaths } from '@nextcloud/paths'
-import { loadState } from '@nextcloud/initial-state'
-import { Permission, formatFileSize } from '@nextcloud/files'
-import { translate as t } from '@nextcloud/l10n'
-import axios from '@nextcloud/axios'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import Tooltip from '@nextcloud/vue/directives/Tooltip'
 
 const hasPermission = (permissions: number, permission: number): boolean => (permissions & permission) !== 0
 
@@ -199,7 +207,7 @@ export default defineComponent({
 			previewLoaded: false,
 			previewErrored: false,
 			capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
-			versionAuthor: '',
+			versionAuthor: '' as string | null,
 		}
 	},
 
@@ -295,21 +303,26 @@ export default defineComponent({
 		},
 
 		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) {
+			this.versionAuthor = null
+			if (!this.version.author) {
+				return
+			}
+
+			if (this.version.author === getCurrentUser()?.uid) {
+				this.versionAuthor = t('files_versions', 'You')
+			} else {
 				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
+					const { data } = await axios.post(generateUrl('/displaynames'), { users: [this.version.author] })
+					this.versionAuthor = data.users[this.version.author]
+				} catch (error) {
+					logger.warn('Could not load user display name', { error })
 				}
 			}
 		},
 
 		click() {
 			if (!this.canView) {
-				window.location = this.downloadURL
+				window.location.href = this.downloadURL
 				return
 			}
 			this.$emit('click', { version: this.version })
@@ -339,12 +352,19 @@ export default defineComponent({
 		gap: 0.5rem;
 		color: var(--color-main-text);
 		font-weight: 500;
+		overflow: hidden;
 
 		&__label {
 			font-weight: 700;
 			// Fix overflow on narrow screens
 			overflow: hidden;
 			text-overflow: ellipsis;
+			min-width: 110px;
+		}
+
+		&__author_name {
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 
 		&__date {