Omit 'page'-query in breadcrumb navigation

changelog/unreleased/bugfix-omit-page-query-in-breadcrumb-navigation

@@ -0,0 +1,6 @@
+Bugfix: Omit "page"-query in breadcrumb navigation
+
+We've omitted the "page"-query when navigating via breadcrumb. This solves an issue were the file list would be empty after navigating via breadcrumb from a paginated folder.
+
+https://github.com/owncloud/web/pull/8061
+https://github.com/owncloud/web/issues/8060

packages/web-app-files/src/helpers/breadcrumbs.ts

@@ -24,7 +24,7 @@ export const breadcrumbsFromPath = (
         text,
         to: {
           path: '/' + [...current].splice(0, current.length - resource.length + i + 1).join('/'),
-          query: omit(currentRoute.query, 'fileId') // TODO: we need the correct fileId in the query. until we have that we must omit it because otherwise we would correct the path to the one of the (wrong) fileId.
+          query: omit(currentRoute.query, 'fileId', 'page') // TODO: we need the correct fileId in the query. until we have that we must omit it because otherwise we would correct the path to the one of the (wrong) fileId.
         }
       } as BreadcrumbItem)
   )

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -232,7 +232,7 @@ export default defineComponent({
 
       let spaceBreadcrumbItem
       let { params, query } = createFileRouteOptions(space, { fileId: space.fileId })
-      query = { ...unref(route).query, ...query }
+      query = omit({ ...unref(route).query, ...query }, 'page')
       if (isPersonalSpaceResource(space)) {
         spaceBreadcrumbItem = {
           text: space.name,

packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts

@@ -63,6 +63,30 @@ describe('GenericSpace view', () => {
       expect(wrapper.find('resource-table-stub').exists()).toBeTruthy()
     })
   })
+  describe('breadcrumbs', () => {
+    it.each([
+      { driveType: 'personal', expectedItems: 1 },
+      { driveType: 'project', expectedItems: 2 },
+      { driveType: 'share', expectedItems: 3 }
+    ])('include root item(s)', (data) => {
+      const { driveType } = data
+      const space = { id: 1, getDriveAliasAndItem: jest.fn(), driveType }
+      const { wrapper } = getMountedWrapper({ files, props: { space } })
+      expect(wrapper.find('app-bar-stub').props().breadcrumbs.length).toBe(data.expectedItems)
+    })
+    it('include the root item and the current folder', () => {
+      const folderName = 'someFolder'
+      const { wrapper } = getMountedWrapper({ files, props: { item: `/${folderName}` } })
+      expect(wrapper.find('app-bar-stub').props().breadcrumbs.length).toBe(2)
+      expect(wrapper.find('app-bar-stub').props().breadcrumbs[1].text).toEqual(folderName)
+    })
+    it('omit the "page"-query of the current route', () => {
+      const currentRoute = { name: 'files-spaces-generic', path: '/', query: { page: '2' } }
+      const { wrapper } = getMountedWrapper({ files, props: { item: 'someFolder' }, currentRoute })
+      const breadCrumbItem = wrapper.find('app-bar-stub').props().breadcrumbs[0]
+      expect(breadCrumbItem.to.query.page).toBeUndefined()
+    })
+  })
   describe('loader task', () => {
     it('re-loads the resources on item change', async () => {
       const loaderSpy = jest.spyOn((GenericSpace as any).methods, 'performLoaderTask')
@@ -85,17 +109,21 @@ describe('GenericSpace view', () => {
   })
 })
 
-function getMountedWrapper({ mocks = {}, props = {}, files = [], loading = false } = {}) {
+function getMountedWrapper({
+  mocks = {},
+  props = {},
+  files = [],
+  loading = false,
+  currentRoute = { name: 'files-spaces-generic', path: '/' }
+} = {}) {
   jest.mocked(useResourcesViewDefaults).mockImplementation(() =>
     useResourcesViewDefaultsMock({
       paginatedResources: ref(files),
       areResourcesLoading: ref(loading)
     })
   )
   const defaultMocks = {
-    ...defaultComponentMocks({
-      currentRoute: { name: 'files-spaces-generic', path: '/' }
-    }),
+    ...defaultComponentMocks({ currentRoute }),
     ...(mocks && mocks)
   }
   const storeOptions = { ...defaultStoreMockOptions }