Merge pull request #44902 from nextcloud/backport/44868/stable28

3 files changed, 29 insertions, 15 deletions

diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js
index 1a367cc18ee..73038412bd3 100644
--- a/apps/comments/src/comments-tab.js
+++ b/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)
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index 7936610ad12..d9df765c7fc 100644
--- a/apps/comments/src/views/Comments.vue
+++ b/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,20 +86,21 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
+import { vElementVisibility as elementVisibility } from '@vueuse/components'
 import VTooltip from 'v-tooltip'
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
+import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
-import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText.vue'
-import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline.vue'
 
-import Comment from '../components/Comment.vue'
 import { getComments, DEFAULT_LIMIT } from '../services/GetComments.ts'
-import cancelableRequest from '../utils/cancelableRequest.js'
 import { markCommentsAsRead } from '../services/ReadComments.ts'
+import cancelableRequest from '../utils/cancelableRequest.js'
+import Comment from '../components/Comment.vue'
 import CommentView from '../mixins/CommentView'
 
 Vue.use(VTooltip)
@@ -117,6 +118,10 @@ export default {
 		AlertCircleOutlineIcon,
 	},
 
+	directives: {
+		elementVisibility,
+	},
+
 	mixins: [CommentView],
 
 	data() {
@@ -125,7 +130,7 @@ export default {
 			loading: false,
 			done: false,
 
-			resourceId: null,
+			currentResourceId: this.resourceId,
 			offset: 0,
 			comments: [],
 
@@ -145,13 +150,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'))
 				}
@@ -164,7 +175,7 @@ export default {
 		 * @param {number} resourceId the current resourceId (fileId...)
 		 */
 		async update(resourceId) {
-			this.resourceId = resourceId
+			this.currentResourceId = resourceId
 			this.resetState()
 			this.getComments()
 		},
@@ -203,7 +214,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 })
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index e727f35a787..9a28930f388 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/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)
 		},
 
 		/**
@@ -337,7 +337,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)
@@ -351,7 +351,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') {