Merge pull request #61107 from nextcloud/backport/60943/stable33

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

Author: blizzz

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

@@ -7,11 +7,10 @@
 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 logger from '../../logger.ts'
-import { useActiveStore } from '../../store/active.ts'
 import { useSidebarStore } from '../../store/sidebar.ts'
 
 const props = defineProps<{
@@ -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 logger from '../logger.ts'
 import { fetchNode } from '../services/WebdavClient.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/AuthMechanismRsa-3Nt-tl8J.chunk.mjs dist/AuthMechanismRsa-Bb04w0qi.chunk.mjsdist/AuthMechanismRsa-3Nt-tl8J.chunk.mjs renamed to dist/AuthMechanismRsa-Bb04w0qi.chunk.mjs

@@ -1,2 +1,2 @@
-import{b as g,q as y,s as v,c as p,u as o,o as n,H as h,w as _,g as V,t as b,v as x,r as M,j as d,e as f,F as q,C as w,_ as K,$ as U}from"./runtime-dom.esm-bundler-cd4tMQOC.chunk.mjs";import{c as j}from"./index-CPwHjAPR.chunk.mjs";import{a as C}from"./index-C1xmmKTZ-DKmPRT9t.chunk.mjs";import{t as s}from"./translation-DoG5ZELJ-DFt3Gk_P.chunk.mjs";import{g as N}from"./createElementId-DhjFt1I9-yLNeGKRZ.chunk.mjs";import{N as S}from"./logger-D3RVzcfQ-BiFhTTAc.chunk.mjs";import{N as A}from"./NcSelect-B1uITk_3-Nzy1TKZA.chunk.mjs";import{N as E}from"./NcCheckboxRadioSwitch-D0gFwEVl-CQqKxPRl.chunk.mjs";import{N as L}from"./NcPasswordField-BOLzDHBJ-CjV6dvT3.chunk.mjs";import{_ as z}from"./NcDateTime.vue_vue_type_script_setup_true_lang-B4upiZjL-C2ieIUJz.chunk.mjs";import{C as c,a as k}from"./types-BxBcKZMN.chunk.mjs";import{l as B}from"./logger-DaDjQfyb.chunk.mjs";const P=g({__name:"ConfigurationEntry",props:y({configKey:{},configOption:{}},{modelValue:{type:[String,Boolean],default:""},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=v(e,"modelValue");return(t,i)=>e.configOption.type!==o(c).Boolean?(n(),p(h(e.configOption.type===o(c).Password?o(L):o(z)),{key:0,modelValue:a.value,"onUpdate:modelValue":i[0]||(i[0]=l=>a.value=l),name:e.configKey,required:!(e.configOption.flags&o(k).Optional),label:e.configOption.value,title:e.configOption.tooltip},null,8,["modelValue","name","required","label","title"])):(n(),p(o(E),{key:1,modelValue:a.value,"onUpdate:modelValue":i[1]||(i[1]=l=>a.value=l),type:"switch",title:e.configOption.tooltip},{default:_(()=>[V(b(e.configOption.value),1)]),_:1},8,["modelValue","title"]))}}),R=g({__name:"AuthMechanismRsa",props:y({authMechanism:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=v(e,"modelValue"),t=M();x(t,()=>{t.value&&(a.value.private_key="",a.value.public_key="")});async function i(){try{const{data:l}=await j.post(N("/apps/files_external/ajax/public_key.php"),{keyLength:t.value});a.value.private_key=l.data.private_key,a.value.public_key=l.data.public_key}catch(l){B.error("Error generating RSA key pair",{error:l}),C(s("files_external","Error generating key pair"))}}return(l,m)=>(n(),d("div",null,[(n(!0),d(q,null,w(e.authMechanism.configuration,(r,u)=>K((n(),p(P,{key:r.value,modelValue:a.value[u],"onUpdate:modelValue":O=>a.value[u]=O,configKey:u,configOption:r},null,8,["modelValue","onUpdate:modelValue","configKey","configOption"])),[[U,!(r.flags&o(k).Hidden)]])),128)),f(o(A),{modelValue:t.value,"onUpdate:modelValue":m[0]||(m[0]=r=>t.value=r),clearable:!1,inputLabel:o(s)("files_external","Key size"),options:[1024,2048,4096],required:""},null,8,["modelValue","inputLabel"]),f(o(S),{disabled:!t.value,wide:"",onClick:i},{default:_(()=>[V(b(o(s)("files_external","Generate keys")),1)]),_:1},8,["disabled"])]))}}),Z=Object.freeze(Object.defineProperty({__proto__:null,default:R},Symbol.toStringTag,{value:"Module"}));export{Z as A,P as _};
-//# sourceMappingURL=AuthMechanismRsa-3Nt-tl8J.chunk.mjs.map
+import{b as g,q as y,s as v,c as p,u as o,o as n,H as h,w as _,g as V,t as b,v as x,r as M,j as d,e as f,F as q,C as w,_ as K,$ as U}from"./runtime-dom.esm-bundler-cd4tMQOC.chunk.mjs";import{c as j}from"./index-CPwHjAPR.chunk.mjs";import{a as C}from"./index-C1xmmKTZ-BfviRmbX.chunk.mjs";import{t as s}from"./translation-DoG5ZELJ-DFt3Gk_P.chunk.mjs";import{g as N}from"./createElementId-DhjFt1I9-yLNeGKRZ.chunk.mjs";import{N as S}from"./logger-D3RVzcfQ-BiFhTTAc.chunk.mjs";import{N as A}from"./NcSelect-B1uITk_3-Nzy1TKZA.chunk.mjs";import{N as E}from"./NcCheckboxRadioSwitch-D0gFwEVl-CQqKxPRl.chunk.mjs";import{N as L}from"./NcPasswordField-BOLzDHBJ-CjV6dvT3.chunk.mjs";import{_ as z}from"./NcDateTime.vue_vue_type_script_setup_true_lang-B4upiZjL-C2ieIUJz.chunk.mjs";import{C as c,a as k}from"./types-BxBcKZMN.chunk.mjs";import{l as B}from"./logger-DaDjQfyb.chunk.mjs";const P=g({__name:"ConfigurationEntry",props:y({configKey:{},configOption:{}},{modelValue:{type:[String,Boolean],default:""},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=v(e,"modelValue");return(t,i)=>e.configOption.type!==o(c).Boolean?(n(),p(h(e.configOption.type===o(c).Password?o(L):o(z)),{key:0,modelValue:a.value,"onUpdate:modelValue":i[0]||(i[0]=l=>a.value=l),name:e.configKey,required:!(e.configOption.flags&o(k).Optional),label:e.configOption.value,title:e.configOption.tooltip},null,8,["modelValue","name","required","label","title"])):(n(),p(o(E),{key:1,modelValue:a.value,"onUpdate:modelValue":i[1]||(i[1]=l=>a.value=l),type:"switch",title:e.configOption.tooltip},{default:_(()=>[V(b(e.configOption.value),1)]),_:1},8,["modelValue","title"]))}}),R=g({__name:"AuthMechanismRsa",props:y({authMechanism:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=v(e,"modelValue"),t=M();x(t,()=>{t.value&&(a.value.private_key="",a.value.public_key="")});async function i(){try{const{data:l}=await j.post(N("/apps/files_external/ajax/public_key.php"),{keyLength:t.value});a.value.private_key=l.data.private_key,a.value.public_key=l.data.public_key}catch(l){B.error("Error generating RSA key pair",{error:l}),C(s("files_external","Error generating key pair"))}}return(l,m)=>(n(),d("div",null,[(n(!0),d(q,null,w(e.authMechanism.configuration,(r,u)=>K((n(),p(P,{key:r.value,modelValue:a.value[u],"onUpdate:modelValue":O=>a.value[u]=O,configKey:u,configOption:r},null,8,["modelValue","onUpdate:modelValue","configKey","configOption"])),[[U,!(r.flags&o(k).Hidden)]])),128)),f(o(A),{modelValue:t.value,"onUpdate:modelValue":m[0]||(m[0]=r=>t.value=r),clearable:!1,inputLabel:o(s)("files_external","Key size"),options:[1024,2048,4096],required:""},null,8,["modelValue","inputLabel"]),f(o(S),{disabled:!t.value,wide:"",onClick:i},{default:_(()=>[V(b(o(s)("files_external","Generate keys")),1)]),_:1},8,["disabled"])]))}}),Z=Object.freeze(Object.defineProperty({__proto__:null,default:R},Symbol.toStringTag,{value:"Module"}));export{Z as A,P as _};
+//# sourceMappingURL=AuthMechanismRsa-Bb04w0qi.chunk.mjs.map