[full-ci] Improve performance when loading folders and share indicators

changelog/unreleased/bugfix-loading-shares-in-deep-nested-folders

@@ -0,0 +1,6 @@
+Bugfix: Loading shares in deep nested folders
+
+Loading shares and share indicators on page reloads in deep nested folders was not possible and has been fixed.
+
+https://github.com/owncloud/web/issues/7655
+https://github.com/owncloud/web/pull/8349

changelog/unreleased/enhancement-share-and-folder-loading-performance

@@ -0,0 +1,6 @@
+Enhancement: Improve performance when loading folders and share indicators
+
+The performance when loading folders and share indicators has been improved by optimizing the way how shares are being loaded.
+
+https://github.com/owncloud/web/issues/7721
+https://github.com/owncloud/web/pull/8349

packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue

@@ -13,7 +13,7 @@
         variation="inverse"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
-        @click="indicator.handler(resource, indicator.target)"
+        @click="indicator.handler(resource, indicator.target, $router)"
       >
         <oc-icon :name="indicator.icon" size="small" fill-type="line" />
       </oc-button>

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -178,6 +178,7 @@ import { urlJoin } from 'web-client/src/utils'
 import { stringify } from 'qs'
 import { useService } from 'web-pkg/src/composables/service'
 import { UppyService } from 'web-runtime/src/services/uppyService'
+import { getIndicators } from 'web-app-files/src/helpers/statusIndicators'
 
 export default defineComponent({
   components: {
@@ -252,7 +253,13 @@ export default defineComponent({
   }),
   computed: {
     ...mapGetters(['capabilities', 'configuration', 'newFileHandlers', 'user']),
-    ...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles', 'clipboardResources']),
+    ...mapGetters('Files', [
+      'ancestorMetaData',
+      'files',
+      'currentFolder',
+      'selectedFiles',
+      'clipboardResources'
+    ]),
     ...mapState('Files', ['areFileExtensionsShown']),
     ...mapGetters('runtime/spaces', ['spaces']),
 
@@ -317,15 +324,14 @@ export default defineComponent({
         return false
       }
       return this.currentFolder.canUpload({ user: this.user })
+    },
+
+    loadIndicatorsForNewFile() {
+      return this.isSpacesGenericLocation && this.space.driveType !== 'share'
     }
   },
   methods: {
-    ...mapActions('Files', [
-      'loadPreview',
-      'loadIndicators',
-      'clearClipboardFiles',
-      'pasteSelectedFiles'
-    ]),
+    ...mapActions('Files', ['clearClipboardFiles', 'pasteSelectedFiles']),
     ...mapActions(['showMessage', 'createModal', 'setModalInputErrorMessage', 'hideModal']),
     ...mapMutations('Files', ['UPSERT_RESOURCE']),
     ...mapMutations('runtime/spaces', ['UPDATE_SPACE_FIELD']),
@@ -453,16 +459,14 @@ export default defineComponent({
         const resource = await (this.$clientService.webdav as WebDAV).createFolder(this.space, {
           path
         })
-        this.UPSERT_RESOURCE(resource)
-        this.hideModal()
 
-        if (this.isSpacesGenericLocation && this.space.driveType !== 'share') {
-          this.loadIndicators({
-            client: this.$client,
-            currentFolder: this.currentFolder.path
-          })
+        if (this.loadIndicatorsForNewFile) {
+          resource.indicators = getIndicators({ resource, ancestorMetaData: this.ancestorMetaData })
         }
 
+        this.UPSERT_RESOURCE(resource)
+        this.hideModal()
+
         this.showMessage({
           title: this.$gettextInterpolate(
             this.$gettext('"%{folderName}" was created successfully'),
@@ -522,6 +526,10 @@ export default defineComponent({
           path
         })
 
+        if (this.loadIndicatorsForNewFile) {
+          resource.indicators = getIndicators({ resource, ancestorMetaData: this.ancestorMetaData })
+        }
+
         this.UPSERT_RESOURCE(resource)
 
         if (this.newFileAction) {
@@ -538,14 +546,6 @@ export default defineComponent({
         }
 
         this.hideModal()
-
-        if (this.isSpacesGenericLocation && this.space.driveType !== 'share') {
-          this.loadIndicators({
-            client: this.$client,
-            currentFolder: this.currentFolder.path
-          })
-        }
-
         this.showMessage({
           title: this.$gettextInterpolate(this.$gettext('"%{fileName}" was created successfully'), {
             fileName
@@ -584,16 +584,14 @@ export default defineComponent({
         const resource = await (this.$clientService.webdav as WebDAV).getFileInfo(this.space, {
           path
         })
+
+        if (this.loadIndicatorsForNewFile) {
+          resource.indicators = getIndicators({ resource, ancestorMetaData: this.ancestorMetaData })
+        }
+
         this.$_fileActions_triggerDefaultAction({ space: this.space, resources: [resource] })
         this.UPSERT_RESOURCE(resource)
         this.hideModal()
-
-        if (this.isSpacesGenericLocation && this.space.driveType !== 'share') {
-          this.loadIndicators({
-            client: this.$client,
-            currentFolder: this.currentFolder.path
-          })
-        }
         this.showMessage({
           title: this.$gettextInterpolate(this.$gettext('"%{fileName}" was created successfully'), {
             fileName

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -93,7 +93,7 @@ import { computed, defineComponent, unref } from 'vue'
 import { debounce } from 'lodash-es'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { mapActions, mapGetters, mapMutations } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import FileActions from '../../mixins/fileActions'
 import MixinAcceptShare from '../../mixins/actions/acceptShare'
 import MixinDeclineShare from '../../mixins/actions/declineShare'
@@ -258,8 +258,7 @@ export default defineComponent({
     visibilityObserver.disconnect()
   },
   methods: {
-    ...mapActions('Files', ['loadIndicators', 'loadPreview', 'loadAvatars']),
-    ...mapMutations('Files', ['LOAD_FILES', 'CLEAR_CURRENT_FILES_LIST']),
+    ...mapActions('Files', ['loadPreview', 'loadAvatars']),
 
     rowMounted(resource, component) {
       const debounced = debounce(({ unobserve }) => {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -284,7 +284,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters('runtime/spaces', ['spaces']),
-    ...mapGetters('Files', ['versions', 'sharesTree', 'sharesTreeLoading']),
+    ...mapGetters('Files', ['ancestorMetaData', 'versions', 'sharesTree', 'sharesTreeLoading']),
     ...mapGetters(['user', 'configuration']),
 
     matchingSpace() {
@@ -453,7 +453,7 @@ export default defineComponent({
       )
     },
     shareIndicators() {
-      return getIndicators(this.resource, this.sharesTree)
+      return getIndicators({ resource: this.resource, ancestorMetaData: this.ancestorMetaData })
     },
     shares() {
       if (this.sharedParentDir === null) {

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -538,13 +538,7 @@ export default defineComponent({
         this.currentFileOutgoingLinks.length === 1 ? this.currentFileOutgoingLinks[0].id : undefined
 
       try {
-        await this.removeLink({
-          client,
-          share,
-          path,
-          storageId: resource.fileId,
-          loadIndicators: !!lastLinkId
-        })
+        await this.removeLink({ client, share, path, loadIndicators: !!lastLinkId })
         this.showMessage({
           title: this.$gettext('Link was deleted successfully')
         })

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -303,7 +303,6 @@ export default defineComponent({
           client: this.$client,
           share: share,
           path,
-          storageId: this.resource.fileId,
           loadIndicators: !!lastShareId
         })
 

packages/web-app-files/src/components/SideBar/SideBar.vue

@@ -168,6 +168,9 @@ export default defineComponent({
     const highlightedFileIsSpace = computed(() => {
       return isProjectSpaceResource(unref(highlightedFile) || {})
     })
+    const highlightedSpace = computed(() => {
+      return store.getters['runtime/spaces/spaces'].find((s) => s.id === unref(highlightedFile).id)
+    })
     const sharesLoadingDisabledOnCurrentRoute = computed(() => {
       return unref(isPublicFilesLocation) || unref(isTrashLocation)
     })
@@ -204,9 +207,7 @@ export default defineComponent({
 
     const getSelectedResource = () => {
       if (unref(highlightedFileIsSpace) && unref(selectedFiles).length) {
-        return store.getters['runtime/spaces/spaces'].find(
-          (s) => s.id === unref(highlightedFile).id
-        )
+        return unref(highlightedSpace)
       }
       if (unref(selectedFiles).length === 1) {
         return unref(selectedFiles)[0]
@@ -254,8 +255,11 @@ export default defineComponent({
     }
 
     watch(
-      selectedFiles,
-      (newResource, oldResource) => {
+      () => [...unref(selectedFiles), props.open],
+      () => {
+        if (!props.open) {
+          return
+        }
         if (
           unref(selectedFiles).length === 1 &&
           unref(loadedResource)?.id === unref(selectedFiles)[0].id
@@ -267,16 +271,14 @@ export default defineComponent({
         loading.value = true
         let selectedResource = getSelectedResource()
         if (selectedResource) {
-          const shouldLoadShares =
-            !unref(sharesLoadingDisabledOnCurrentRoute) && (!!oldResource || !unref(currentFolder))
-          if (shouldLoadShares) {
+          if (!unref(sharesLoadingDisabledOnCurrentRoute)) {
             loadShares()
           }
 
           if (unref(highlightedFileIsSpace)) {
             store.dispatch('runtime/spaces/loadSpaceMembers', {
               graphClient: unref(graphClient),
-              space: selectedResource
+              space: unref(highlightedSpace)
             })
           }