[stable34] fix(files): make sure nested changes are propagated to sidebar tabs

apps/files/src/components/FilesSidebar/FilesSidebarTab.vue

@@ -7,10 +7,9 @@
 import type { ISidebarTab } from '@nextcloud/files'
 
 import { NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
-import { ref, toRef, watch } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
-import { useActiveStore } from '../../store/active.ts'
 import { useSidebarStore } from '../../store/sidebar.ts'
 import { logger } from '../../utils/logger.ts'
 
@@ -27,7 +26,17 @@ const props = defineProps<{
 }>()
 
 const sidebar = useSidebarStore()
-const activeStore = useActiveStore()
+
+const context = computed(() => {
+	if (!sidebar.currentContext) {
+		return undefined
+	}
+	return {
+		folder: sidebar.currentContext.folder.clone(),
+		node: sidebar.currentContext.node.clone(),
+		view: sidebar.currentContext.view,
+	}
+})
 
 const loading = ref(true)
 watch(toRef(props, 'active'), async (active) => {
@@ -65,7 +74,7 @@ const initializedTabs = new Set<string>()
 		<template #icon>
 			<NcIconSvgWrapper :svg="tab.iconSvgInline" />
 		</template>
-		<NcEmptyContent v-if="loading">
+		<NcEmptyContent v-if="loading || !context">
 			<template #icon>
 				<NcLoadingIcon />
 			</template>
@@ -75,8 +84,8 @@ const initializedTabs = new Set<string>()
 			:is="tab.tagName"
 			v-else
 			:active.prop="active"
-			:node.prop="sidebar.currentNode"
-			:folder.prop="activeStore.activeFolder"
-			:view.prop="activeStore.activeView" />
+			:node.prop="context.node"
+			:folder.prop="context.folder"
+			:view.prop="context.view" />
 	</NcAppSidebarTab>
 </template>

apps/files/src/store/files.ts

@@ -11,6 +11,7 @@ import { defineStore } from 'pinia'
 import Vue, { ref } from 'vue'
 import { fetchNode } from '../services/WebdavClient.ts'
 import { logger } from '../utils/logger.ts'
+import { useActiveStore } from './active.ts'
 import { usePathsStore } from './paths.ts'
 
 /**
@@ -124,6 +125,12 @@ export const useFilesStore = defineStore('files', () => {
 		}, {} as FilesStore)
 
 		files.value = { ...files.value, ...newNodes }
+
+		// handle updating the active node
+		const activeStore = useActiveStore()
+		if (activeStore.activeNode && activeStore.activeNode.source in newNodes) {
+			activeStore.activeNode = files.value[activeStore.activeNode.source]
+		}
 	}
 
 	/**
@@ -232,7 +239,8 @@ export const useFilesStore = defineStore('files', () => {
 		}
 
 		// Otherwise, it means we receive an event for a node that is not in the store
-		fetchNode(node.path).then((n) => updateNodes([n]))
+		const newNode = await fetchNode(node.path)
+		updateNodes([newNode])
 	}
 
 	/**

apps/files_versions/src/views/FilesVersionsSidebarTab.vue

@@ -48,7 +48,8 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
-import { computed, ref, toRef, watch } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import VersionEntry from '../components/VersionEntry.vue'
 import VersionLabelDialog from '../components/VersionLabelDialog.vue'
@@ -72,19 +73,6 @@ const loading = ref(false)
 const showVersionLabelForm = ref(false)
 const editedVersion = ref<Version | null>(null)
 
-watch(toRef(() => props.node), async () => {
-	if (!props.node) {
-		return
-	}
-
-	try {
-		loading.value = true
-		versions.value = await fetchVersions(props.node)
-	} finally {
-		loading.value = false
-	}
-}, { immediate: true })
-
 const currentVersionMtime = computed(() => props.node?.mtime?.getTime() ?? 0)
 
 /**
@@ -139,6 +127,24 @@ const canCompare = computed(() => {
 		&& window.OCA.Viewer?.mimetypesCompare?.includes(props.node?.mime)
 })
 
+// When either the current node to show or its mtime changes we need to refetch the versions
+// When the id changed we immediately show changes
+watch(() => props.node.id, loadVersions, { immediate: true })
+// On mtime changes we debounce to prevent too many requests.
+watchDebounced(currentVersionMtime, loadVersions, { debounce: 600 })
+
+/**
+ * Load versions for the current node
+ */
+async function loadVersions() {
+	try {
+		loading.value = true
+		versions.value = await fetchVersions(props.node)
+	} finally {
+		loading.value = false
+	}
+}
+
 /**
  * Handle restored event from Version.vue
  *

dist/files_versions-sidebar-tab.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('', '', 'dist/FilesVersionsSidebarTab-atbPhgbB.chunk.mjs'),window.OC.filePath('', '', 'dist/index-C1xmmKTZ-Bo5nTIwa.chunk.mjs'),window.OC.filePath('', '', 'dist/Web-QAUOZHME.chunk.mjs'),window.OC.filePath('', '', 'dist/public-C1mLBHT3.chunk.mjs'),window.OC.filePath('', '', 'dist/index-3jjiyfjs.chunk.mjs'),window.OC.filePath('', '', 'dist/NcModal-DUWLRm_F-BZS263we.chunk.mjs'),window.OC.filePath('', '', 'dist/logger-D3RVzcfQ-CLVxJ56T.chunk.mjs'),window.OC.filePath('', '', 'dist/createElementId-DhjFt1I9-DUWz92Dc.chunk.mjs'),window.OC.filePath('', '', 'dist/translation-DoG5ZELJ-DGHp0fUA.chunk.mjs'),window.OC.filePath('', '', 'dist/index-B-dGqfIG.chunk.mjs'),window.OC.filePath('', '', 'dist/common-createElementId-DhjFt1I9-C_oBIsvc.chunk.css'),window.OC.filePath('', '', 'dist/common-logger-D3RVzcfQ-BE3lcFW4.chunk.css'),window.OC.filePath('', '', 'dist/common-NcModal-DUWLRm_F-BsKc2RT9.chunk.css'),window.OC.filePath('', '', 'dist/TrashCanOutline-YGP-sSCM.chunk.mjs'),window.OC.filePath('', '', 'dist/common-TrashCanOutline-BYHcrfvW.chunk.css'),window.OC.filePath('', '', 'dist/common-index-DYA_tnKg.chunk.css'),window.OC.filePath('', '', 'dist/mdi-BoCCzYk4.chunk.mjs'),window.OC.filePath('', '', 'dist/common-mdi-BWNFKLbC.chunk.css'),window.OC.filePath('', '', 'dist/index-AwEw3-gc.chunk.mjs'),window.OC.filePath('', '', 'dist/folder-29HuacU_-Joa_bkj_.chunk.mjs'),window.OC.filePath('', '', 'dist/util-Alk1iwuj.chunk.mjs'),window.OC.filePath('', '', 'dist/PencilOutline-D7ZkzTZ1.chunk.mjs'),window.OC.filePath('', '', 'dist/common-PencilOutline-B3DMd8SU.chunk.css'),window.OC.filePath('', '', 'dist/NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7--jcUZ6ph.chunk.mjs'),window.OC.filePath('', '', 'dist/common-NcDateTime-b9UhLDij.chunk.css'),window.OC.filePath('', '', 'dist/NcAvatar-M3-CbKbq-ChiWUwh7.chunk.mjs'),window.OC.filePath('', '', 'dist/index-D-g4nFri.chunk.mjs'),window.OC.filePath('', '', 'dist/ArrowRight-CNEnwER1.chunk.mjs'),window.OC.filePath('', '', 'dist/common-ArrowRight-vZpQWIqF.chunk.css'),window.OC.filePath('', '', 'dist/colors-BDeMBgfq-DVmAS1Nw.chunk.mjs'),window.OC.filePath('', '', 'dist/NcUserStatusIcon-DsviB2Cr-9VlOsEV1.chunk.mjs'),window.OC.filePath('', '', 'dist/common-NcUserStatusIcon-DsviB2Cr-Bq_6hmXG.chunk.css'),window.OC.filePath('', '', 'dist/common-NcAvatar-M3-CbKbq-DTVmI7NO.chunk.css'),window.OC.filePath('', '', 'dist/TrayArrowDown-BUd2FonK.chunk.mjs'),window.OC.filePath('', '', 'dist/common-TrayArrowDown-CaC9_ffV.chunk.css'),window.OC.filePath('', '', 'dist/NcTextField.vue_vue_type_script_setup_true_lang-BQHjkK8r-DmUgp42Y.chunk.mjs'),window.OC.filePath('', '', 'dist/NcInputField-B1bGxYHt-CDUAJ_TX.chunk.mjs'),window.OC.filePath('', '', 'dist/common-NcInputField-B1bGxYHt-BYHxARP-.chunk.css'),window.OC.filePath('', '', 'dist/dav-vVSQ_IOa.chunk.mjs'),window.OC.filePath('', '', 'dist/index-C5hDjOdy.chunk.mjs'),window.OC.filePath('', '', 'dist/files_versions-FilesVersionsSidebarTab-Cjl2hr1y.chunk.css')])))=>i.map(i=>d[i]);
-import{d as i,a as r,_ as e}from"./Web-QAUOZHME.chunk.mjs";import{r as t}from"./index-AwEw3-gc.chunk.mjs";import{t as m}from"./translation-DoG5ZELJ-DGHp0fUA.chunk.mjs";import{i as n}from"./public-C1mLBHT3.chunk.mjs";import{F as a}from"./folder-29HuacU_-Joa_bkj_.chunk.mjs";import"./index-B-dGqfIG.chunk.mjs";import"./util-Alk1iwuj.chunk.mjs";const d='<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backup-restore" viewBox="0 0 24 24"><path d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" /></svg>',s="files-versions_sidebar-tab";t({id:"files_versions",tagName:s,order:90,displayName:m("files_versions","Versions"),iconSvgInline:d,enabled({node:o}){return!(n()||o.type!==a.File)},async onInit(){const o=r(()=>e(()=>import("./FilesVersionsSidebarTab-atbPhgbB.chunk.mjs"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]),import.meta.url));window.customElements.define(s,i(o,{shadowRoot:!1}))}});
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('', '', 'dist/FilesVersionsSidebarTab-C5JF-4fq.chunk.mjs'),window.OC.filePath('', '', 'dist/index-C1xmmKTZ-Bo5nTIwa.chunk.mjs'),window.OC.filePath('', '', 'dist/Web-QAUOZHME.chunk.mjs'),window.OC.filePath('', '', 'dist/public-C1mLBHT3.chunk.mjs'),window.OC.filePath('', '', 'dist/index-3jjiyfjs.chunk.mjs'),window.OC.filePath('', '', 'dist/NcModal-DUWLRm_F-BZS263we.chunk.mjs'),window.OC.filePath('', '', 'dist/logger-D3RVzcfQ-CLVxJ56T.chunk.mjs'),window.OC.filePath('', '', 'dist/createElementId-DhjFt1I9-DUWz92Dc.chunk.mjs'),window.OC.filePath('', '', 'dist/translation-DoG5ZELJ-DGHp0fUA.chunk.mjs'),window.OC.filePath('', '', 'dist/index-B-dGqfIG.chunk.mjs'),window.OC.filePath('', '', 'dist/common-createElementId-DhjFt1I9-C_oBIsvc.chunk.css'),window.OC.filePath('', '', 'dist/common-logger-D3RVzcfQ-BE3lcFW4.chunk.css'),window.OC.filePath('', '', 'dist/common-NcModal-DUWLRm_F-BsKc2RT9.chunk.css'),window.OC.filePath('', '', 'dist/TrashCanOutline-YGP-sSCM.chunk.mjs'),window.OC.filePath('', '', 'dist/common-TrashCanOutline-BYHcrfvW.chunk.css'),window.OC.filePath('', '', 'dist/common-index-DYA_tnKg.chunk.css'),window.OC.filePath('', '', 'dist/mdi-BoCCzYk4.chunk.mjs'),window.OC.filePath('', '', 'dist/common-mdi-BWNFKLbC.chunk.css'),window.OC.filePath('', '', 'dist/index-AwEw3-gc.chunk.mjs'),window.OC.filePath('', '', 'dist/folder-29HuacU_-Joa_bkj_.chunk.mjs'),window.OC.filePath('', '', 'dist/util-Alk1iwuj.chunk.mjs'),window.OC.filePath('', '', 'dist/PencilOutline-D7ZkzTZ1.chunk.mjs'),window.OC.filePath('', '', 'dist/common-PencilOutline-B3DMd8SU.chunk.css'),window.OC.filePath('', '', 'dist/NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7--jcUZ6ph.chunk.mjs'),window.OC.filePath('', '', 'dist/common-NcDateTime-b9UhLDij.chunk.css'),window.OC.filePath('', '', 'dist/NcAvatar-M3-CbKbq-ChiWUwh7.chunk.mjs'),window.OC.filePath('', '', 'dist/index-D-g4nFri.chunk.mjs'),window.OC.filePath('', '', 'dist/ArrowRight-CNEnwER1.chunk.mjs'),window.OC.filePath('', '', 'dist/common-ArrowRight-vZpQWIqF.chunk.css'),window.OC.filePath('', '', 'dist/colors-BDeMBgfq-DVmAS1Nw.chunk.mjs'),window.OC.filePath('', '', 'dist/NcUserStatusIcon-DsviB2Cr-9VlOsEV1.chunk.mjs'),window.OC.filePath('', '', 'dist/common-NcUserStatusIcon-DsviB2Cr-Bq_6hmXG.chunk.css'),window.OC.filePath('', '', 'dist/common-NcAvatar-M3-CbKbq-DTVmI7NO.chunk.css'),window.OC.filePath('', '', 'dist/TrayArrowDown-BUd2FonK.chunk.mjs'),window.OC.filePath('', '', 'dist/common-TrayArrowDown-CaC9_ffV.chunk.css'),window.OC.filePath('', '', 'dist/NcTextField.vue_vue_type_script_setup_true_lang-BQHjkK8r-DmUgp42Y.chunk.mjs'),window.OC.filePath('', '', 'dist/NcInputField-B1bGxYHt-CDUAJ_TX.chunk.mjs'),window.OC.filePath('', '', 'dist/common-NcInputField-B1bGxYHt-BYHxARP-.chunk.css'),window.OC.filePath('', '', 'dist/dav-vVSQ_IOa.chunk.mjs'),window.OC.filePath('', '', 'dist/index-C5hDjOdy.chunk.mjs'),window.OC.filePath('', '', 'dist/index-Dxv8iPNc.chunk.mjs'),window.OC.filePath('', '', 'dist/files_versions-FilesVersionsSidebarTab-Cjl2hr1y.chunk.css')])))=>i.map(i=>d[i]);
+import{d as i,a as r,_ as e}from"./Web-QAUOZHME.chunk.mjs";import{r as t}from"./index-AwEw3-gc.chunk.mjs";import{t as m}from"./translation-DoG5ZELJ-DGHp0fUA.chunk.mjs";import{i as n}from"./public-C1mLBHT3.chunk.mjs";import{F as a}from"./folder-29HuacU_-Joa_bkj_.chunk.mjs";import"./index-B-dGqfIG.chunk.mjs";import"./util-Alk1iwuj.chunk.mjs";const d='<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backup-restore" viewBox="0 0 24 24"><path d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" /></svg>',s="files-versions_sidebar-tab";t({id:"files_versions",tagName:s,order:90,displayName:m("files_versions","Versions"),iconSvgInline:d,enabled({node:o}){return!(n()||o.type!==a.File)},async onInit(){const o=r(()=>e(()=>import("./FilesVersionsSidebarTab-C5JF-4fq.chunk.mjs"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]),import.meta.url));window.customElements.define(s,i(o,{shadowRoot:!1}))}});
 //# sourceMappingURL=files_versions-sidebar-tab.mjs.map