Merge pull request #44868 from nextcloud/fix/sidebar-comments

fix(comments): Fix issues thrown by comments sidebar tab code

apps/comments/src/comments-tab.js

@@ -49,6 +49,9 @@ if (loadState('comments', 'activityEnabled', false) && OCA?.Activity?.registerSi
 			TabInstance = new OCA.Comments.View('files', {
 				// Better integration with vue parent component
 				parent: context,
+				propsData: {
+					resourceId: fileInfo.id,
+				},
 			})
 			// Only mount after we have all the info we need
 			await TabInstance.update(fileInfo.id)

apps/comments/src/views/Comments.vue

@@ -31,7 +31,7 @@
 			:resource-type="resourceType"
 			:editor="true"
 			:user-data="userData"
-			:resource-id="resourceId"
+			:resource-id="currentResourceId"
 			class="comments__writer"
 			@new="onNewComment" />
 
@@ -52,7 +52,7 @@
 					:auto-complete="autoComplete"
 					:resource-type="resourceType"
 					:message.sync="comment.props.message"
-					:resource-id="resourceId"
+					:resource-id="currentResourceId"
 					:user-data="genMentionsData(comment.props.mentions)"
 					class="comments__list"
 					@delete="onDelete" />
@@ -86,7 +86,7 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
-import { vElementVisibility } from '@vueuse/components'
+import { vElementVisibility as elementVisibility } from '@vueuse/components'
 
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -113,7 +113,7 @@ export default {
 	},
 
 	directives: {
-		vElementVisibility,
+		elementVisibility,
 	},
 
 	mixins: [CommentView],
@@ -124,7 +124,7 @@ export default {
 			loading: false,
 			done: false,
 
-			resourceId: null,
+			currentResourceId: this.resourceId,
 			offset: 0,
 			comments: [],
 
@@ -144,13 +144,19 @@ export default {
 		},
 	},
 
+	watch: {
+		resourceId() {
+			this.currentResourceId = this.resourceId
+		},
+	},
+
 	methods: {
 		t,
 
 		async onVisibilityChange(isVisible) {
 			if (isVisible) {
 				try {
-					await markCommentsAsRead(this.resourceType, this.resourceId, new Date())
+					await markCommentsAsRead(this.resourceType, this.currentResourceId, new Date())
 				} catch (e) {
 					showError(e.message || t('comments', 'Failed to mark comments as read'))
 				}
@@ -163,7 +169,7 @@ export default {
 		 * @param {number} resourceId the current resourceId (fileId...)
 		 */
 		async update(resourceId) {
-			this.resourceId = resourceId
+			this.currentResourceId = resourceId
 			this.resetState()
 			this.getComments()
 		},
@@ -202,7 +208,7 @@ export default {
 				// Fetch comments
 				const { data: comments } = await request({
 					resourceType: this.resourceType,
-					resourceId: this.resourceId,
+					resourceId: this.currentResourceId,
 				}, { offset: this.offset }) || { data: [] }
 
 				this.logger.debug(`Processed ${comments.length} comments`, { comments })

apps/files/src/views/Sidebar.vue

@@ -33,7 +33,7 @@
 		@opened="handleOpened"
 		@closing="handleClosing"
 		@closed="handleClosed">
-		<template #subname>
+		<template v-if="fileInfo" #subname>
 			<NcIconSvgWrapper v-if="fileInfo.isFavourited"
 				:path="mdiStar"
 				:name="t('files', 'Favorite')"
@@ -222,7 +222,7 @@ export default {
 		 * @return {string}
 		 */
 		size() {
-			return formatFileSize(this.fileInfo.size)
+			return formatFileSize(this.fileInfo?.size)
 		},
 
 		/**
@@ -334,7 +334,7 @@ export default {
 		},
 
 		getPreviewIfAny(fileInfo) {
-			if (fileInfo.hasPreview && !this.isFullScreen) {
+			if (fileInfo?.hasPreview && !this.isFullScreen) {
 				return generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
 			}
 			return this.getIconUrl(fileInfo)
@@ -348,7 +348,7 @@ export default {
 		 * @return {string} Url to the icon for mimeType
 		 */
 		getIconUrl(fileInfo) {
-			const mimeType = fileInfo.mimetype || 'application/octet-stream'
+			const mimeType = fileInfo?.mimetype || 'application/octet-stream'
 			if (mimeType === 'httpd/unix-directory') {
 				// use default folder icon
 				if (fileInfo.mountType === 'shared' || fileInfo.mountType === 'shared-root') {