Merge pull request #5659 from owncloud/feat/refresh-list

[full-ci] feat: refresh list on breadcrumb click

changelog/unreleased/enhancement-refresh-list-via-breadcrumbs

@@ -0,0 +1,6 @@
+Enhancement: refresh files list via breadcrumbs
+
+In the personal and public files lists we've added a click handler to the last breadcrumb item representing the current folder that reloads the files list.
+
+https://github.com/owncloud/web/issues/2018
+https://github.com/owncloud/web/pull/5659

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

@@ -14,6 +14,7 @@
       <oc-breadcrumb
         v-if="showBreadcrumb"
         id="files-breadcrumb"
+        data-testid="files-breadcrumbs"
         class="oc-p-s"
         :items="breadcrumbs"
       />
@@ -115,6 +116,7 @@ import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import MixinRoutes from '../../mixins/routes'
 import MixinScrollToResource from '../../mixins/filesListScrolling'
 import { buildResource } from '../../helpers/resources'
+import { bus } from 'web-pkg/src/instance'
 
 import BatchActions from './SelectedResources/BatchActions.vue'
 import FileDrop from './Upload/FileDrop.vue'
@@ -221,9 +223,13 @@ export default {
         baseUrl = '/files/list/all/'
         pathItems.push('/') // as of now we need to add the url encoded root path `/`, otherwise we'll land in the configured homeFolder
         breadcrumbs.push({
-          text: this.$gettext('All files'),
-          to: baseUrl + encodeURIComponent(pathUtil.join(...pathItems))
+          text: this.$gettext('All files')
         })
+
+        pathSegments.length < 1
+          ? (breadcrumbs[0].onClick = () =>
+              bus.emit('app.files.list.load', this.$route.params.item))
+          : (breadcrumbs[0].to = baseUrl + encodeURIComponent(pathUtil.join(...pathItems)))
       } else {
         baseUrl = '/files/public/list/'
         pathItems.push(pathSegments.splice(0, 1)[0])
@@ -236,6 +242,16 @@ export default {
       for (let i = 0; i < pathSegments.length; i++) {
         pathItems.push(pathSegments[i])
         const to = baseUrl + encodeURIComponent(pathUtil.join(...pathItems))
+
+        if (i === pathSegments.length - 1) {
+          breadcrumbs.push({
+            text: pathSegments[i],
+            onClick: () => bus.emit('app.files.list.load', this.$route.params.item)
+          })
+
+          continue
+        }
+
         breadcrumbs.push({
           text: pathSegments[i],
           to: i + 1 === pathSegments.length ? null : to

packages/web-app-files/src/views/Personal.vue

@@ -71,6 +71,7 @@ import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { buildResource } from '../helpers/resources'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
+import { bus } from 'web-pkg/src/instance'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -191,6 +192,10 @@ export default {
 
   mounted() {
     this.adjustTableHeaderPosition()
+
+    bus.on('app.files.list.load', path => {
+      this.loadResources(this.$route.params.item === path, path)
+    })
   },
 
   beforeDestroy() {
@@ -226,13 +231,13 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    async loadResources(sameRoute) {
+    async loadResources(sameRoute, path = null) {
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()
 
       try {
         let resources = await this.$client.files.list(
-          this.$route.params.item,
+          path || this.$route.params.item,
           1,
           DavProperties.Default
         )

packages/web-app-files/src/views/PublicFiles.vue

@@ -61,6 +61,7 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 import { buildResource } from '../helpers/resources'
+import { bus } from 'web-pkg/src/instance'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -162,6 +163,13 @@ export default {
   beforeDestroy() {
     visibilityObserver.disconnect()
   },
+
+  created() {
+    bus.on('app.files.list.load', path => {
+      this.loadResources(this.$route.params.item === path, path)
+    })
+  },
+
   methods: {
     ...mapActions('Files', ['loadPreview']),
     ...mapMutations('Files', [
@@ -189,13 +197,13 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    async loadResources(sameRoute) {
+    async loadResources(sameRoute, path = null) {
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()
 
       try {
         let resources = await this.$client.publicFiles.list(
-          this.$route.params.item,
+          path || this.$route.params.item,
           this.publicLinkPassword,
           DavProperties.PublicLink
         )

packages/web-app-files/tests/integration/specs/appBar.spec.js

@@ -0,0 +1,55 @@
+import '@testing-library/jest-dom'
+import { render, waitFor, fireEvent } from '@testing-library/vue'
+import { config } from '@vue/test-utils'
+
+import StoreFiles from '@files/src/store'
+import Store from '@runtime/src/store'
+import { bus } from '@pkg/src/instance'
+
+import AppBar from '@files/src/components/AppBar/AppBar.vue'
+
+const store = {
+  ...Store,
+  modules: {
+    ...Store.modules,
+    user: {
+      ...Store.modules.user,
+      state: {
+        ...Store.modules.user.state,
+        id: 'alice'
+      }
+    },
+    Files: {
+      ...StoreFiles
+    }
+  }
+}
+
+describe('AppBar contains set of actions and informations', () => {
+  describe('when breadcrumbs are visible', () => {
+    beforeEach(() => {
+      config.mocks.publicPage = () => false
+
+      bus.emit = jest.fn(path => path)
+    })
+
+    test('user can refresh files list by clicking on last breadcrumb item', async () => {
+      render(
+        AppBar,
+        {
+          store,
+          routes: [{ name: 'files-personal', path: '/files/list/personal/:item?/:page?' }]
+        },
+        (vue, store, router) => {
+          vue.directive('translate', () => {})
+          router.push({ name: 'files-personal', params: { item: '/documents' } })
+        }
+      )
+      const item = document.querySelector('[data-testid="files-breadcrumbs"] .oc-button')
+
+      await waitFor(() => expect(item).toBeVisible())
+      await fireEvent.click(item)
+      expect(bus.emit).toHaveBeenCalledWith('app.files.list.load', '/documents')
+    })
+  })
+})