Merge pull request #43988 from nextcloud/fix/files-favorite

fix(files): Adjust sidebar - remove deprecated function calls and add aria label for favorite icon

apps/files/src/views/Sidebar.vue

@@ -32,6 +32,15 @@
 		@opened="handleOpened"
 		@closing="handleClosing"
 		@closed="handleClosed">
+		<template #subname>
+			<NcIconSvgWrapper v-if="fileInfo.isFavourited"
+				:path="mdiStar"
+				:name="t('files', 'Favorite')"
+				inline />
+			{{ size }}
+			<NcDateTime :timestamp="fileInfo.mtime" />
+		</template>
+
 		<!-- TODO: create a standard to allow multiple elements here? -->
 		<template v-if="fileInfo" #description>
 			<div class="sidebar__description">
@@ -50,11 +59,8 @@
 		<template v-if="fileInfo" #secondary-actions>
 			<NcActionButton :close-after-click="true"
 				@click="toggleStarred(!fileInfo.isFavourited)">
-				<template v-if="fileInfo.isFavourited" #icon>
-					<StarOutline :size="20" />
-				</template>
-				<template v-else #icon>
-					<Star :size="20" />
+				<template #icon>
+					<NcIconSvgWrapper :path="fileInfo.isFavourited ? mdiStarOutline : mdiStar" />
 				</template>
 				{{ fileInfo.isFavourited ? t('files', 'Remove from favorites') : t('files', 'Add to favorites') }}
 			</NcActionButton>
@@ -96,27 +102,29 @@
 	</NcAppSidebar>
 </template>
 <script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { getCapabilities } from '@nextcloud/capabilities'
+import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import { File, Folder, formatFileSize } from '@nextcloud/files'
 import { encodePath } from '@nextcloud/paths'
-import { File, Folder } from '@nextcloud/files'
-import { getCapabilities } from '@nextcloud/capabilities'
-import { getCurrentUser } from '@nextcloud/auth'
+import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { Type as ShareTypes } from '@nextcloud/sharing'
-import $ from 'jquery'
+import { mdiStar, mdiStarOutline } from '@mdi/js'
 import axios from '@nextcloud/axios'
-import moment from '@nextcloud/moment'
-
-import Star from 'vue-material-design-icons/Star.vue'
-import StarOutline from 'vue-material-design-icons/StarOutline.vue'
+import $ from 'jquery'
 
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
 import FileInfo from '../services/FileInfo.js'
 import LegacyView from '../components/LegacyView.vue'
 import SidebarTab from '../components/SidebarTab.vue'
 import SystemTags from '../../../systemtags/src/components/SystemTags.vue'
+import logger from '../logger.js'
 
 export default {
 	name: 'Sidebar',
@@ -125,11 +133,23 @@ export default {
 		LegacyView,
 		NcActionButton,
 		NcAppSidebar,
+		NcDateTime,
 		NcEmptyContent,
+		NcIconSvgWrapper,
 		SidebarTab,
 		SystemTags,
-		Star,
-		StarOutline,
+	},
+
+	setup() {
+		const currentUser = getCurrentUser()
+
+		// Non reactive properties
+		return {
+			currentUser,
+
+			mdiStar,
+			mdiStarOutline,
+		}
 	},
 
 	data() {
@@ -141,7 +161,6 @@ export default {
 			error: null,
 			loading: true,
 			fileInfo: null,
-			starLoading: false,
 			isFullScreen: false,
 			hasLowHeight: false,
 		}
@@ -183,55 +202,26 @@ export default {
 		 * @return {string}
 		 */
 		davPath() {
-			const user = OC.getCurrentUser().uid
-			return OC.linkToRemote(`dav/files/${user}${encodePath(this.file)}`)
+			const user = this.currentUser.uid
+			return generateRemoteUrl(`dav/files/${user}${encodePath(this.file)}`)
 		},
 
 		/**
 		 * Current active tab handler
 		 *
-		 * @param {string} id the tab id to set as active
 		 * @return {string} the current active tab
 		 */
 		activeTab() {
 			return this.Sidebar.activeTab
 		},
 
-		/**
-		 * Sidebar subtitle
-		 *
-		 * @return {string}
-		 */
-		subtitle() {
-			const starredIndicator = this.fileInfo.isFavourited ? '★ ' : ''
-			return `${starredIndicator} ${this.size}, ${this.time}`
-		},
-
-		/**
-		 * File last modified formatted string
-		 *
-		 * @return {string}
-		 */
-		time() {
-			return OC.Util.relativeModifiedDate(this.fileInfo.mtime)
-		},
-
-		/**
-		 * File last modified full string
-		 *
-		 * @return {string}
-		 */
-		fullTime() {
-			return moment(this.fileInfo.mtime).format('LLL')
-		},
-
 		/**
 		 * File size formatted string
 		 *
 		 * @return {string}
 		 */
 		size() {
-			return OC.Util.humanFileSize(this.fileInfo.size)
+			return formatFileSize(this.fileInfo.size)
 		},
 
 		/**
@@ -252,7 +242,6 @@ export default {
 			if (this.fileInfo) {
 				return {
 					'data-mimetype': this.fileInfo.mimetype,
-					'star-loading': this.starLoading,
 					active: this.activeTab,
 					background: this.background,
 					class: {
@@ -261,8 +250,6 @@ export default {
 					},
 					compact: this.hasLowHeight || !this.fileInfo.hasPreview || this.isFullScreen,
 					loading: this.loading,
-					subname: this.subtitle,
-					subtitle: this.fullTime,
 					name: this.fileInfo.name,
 					title: this.fileInfo.name,
 				}
@@ -347,7 +334,7 @@ export default {
 
 		getPreviewIfAny(fileInfo) {
 			if (fileInfo.hasPreview && !this.isFullScreen) {
-				return OC.generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
+				return generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
 			}
 			return this.getIconUrl(fileInfo)
 		},
@@ -406,7 +393,6 @@ export default {
 		 */
 		async toggleStarred(state) {
 			try {
-				this.starLoading = true
 				await axios({
 					method: 'PROPPATCH',
 					url: this.davPath,
@@ -432,11 +418,12 @@ export default {
 					root: `/files/${getCurrentUser().uid}`,
 					mime: isDir ? undefined : this.fileInfo.mimetype,
 				}))
+
+				this.fileInfo.isFavourited = state
 			} catch (error) {
-				OC.Notification.showTemporary(t('files', 'Unable to change the favourite state of the file'))
-				console.error('Unable to change favourite state', error)
+				showError(t('files', 'Unable to change the favourite state of the file'))
+				logger.error('Unable to change favourite state', { error })
 			}
-			this.starLoading = false
 		},
 
 		onDefaultAction() {