Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(files): sort not working after changing views #50161

Merged
merged 1 commit into from
Jan 16, 2025
+77 −39
Merged

fix(files): sort not working after changing views #50161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/files/src/components/BreadCrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export default defineComponent({
},
getDirDisplayName(path: string): string {
if (path === '/') {
return this.$navigation?.active?.name || t('files', 'Home')
return this.currentView?.name || t('files', 'Home')
}

const source = this.getFileSourceFromPath(path)
Expand Down
6 changes: 0 additions & 6 deletions apps/files/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/
import type { Pinia } from 'pinia'
import { getCSPNonce } from '@nextcloud/auth'
import { getNavigation } from '@nextcloud/files'
import { PiniaVuePlugin } from 'pinia'
import Vue from 'vue'

Expand Down Expand Up @@ -44,11 +43,6 @@ Vue.use(PiniaVuePlugin)
// Init HotKeys AFTER pinia is set up
registerHotkeys()

// Init Navigation Service
// This only works with Vue 2 - with Vue 3 this will not modify the source but return just a observer
const Navigation = Vue.observable(getNavigation())
Vue.prototype.$navigation = Navigation

Comment on lines -47 to -51
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥳

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

// Init Files App Settings Service
const Settings = new SettingsService()
Object.assign(window.OCA.Files, { Settings })
Expand Down
14 changes: 9 additions & 5 deletions apps/files/src/mixins/filesSorting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,20 @@ import Vue from 'vue'

import { mapState } from 'pinia'
import { useViewConfigStore } from '../store/viewConfig'
import { Navigation, View } from '@nextcloud/files'
import { useNavigation } from '../composables/useNavigation'

export default Vue.extend({
setup() {
const { currentView } = useNavigation()

return {
currentView,
}
},

computed: {
...mapState(useViewConfigStore, ['getConfig', 'setSortingBy', 'toggleSortingDirection']),

currentView(): View {
return (this.$navigation as Navigation).active as View
},

/**
* Get the sorting mode for the current view
*/
Expand Down
10 changes: 0 additions & 10 deletions apps/files/src/views/Navigation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import NavigationView from './Navigation.vue'
import { useViewConfigStore } from '../store/viewConfig'
import { Folder, View, getNavigation } from '@nextcloud/files'

import Vue from 'vue'
import router from '../router/router'

const resetNavigation = () => {
Expand All @@ -29,12 +28,8 @@ const createView = (id: string, name: string, parent?: string) => new View({
})

describe('Navigation renders', () => {
let Navigation: Navigation

before(() => {
delete window._nc_navigation
Navigation = getNavigation()
Vue.prototype.$navigation = Navigation

cy.mockInitialState('files', 'storageStats', {
used: 1000 * 1000 * 1000,
Expand Down Expand Up @@ -66,7 +61,6 @@ describe('Navigation API', () => {
delete window._nc_navigation
Navigation = getNavigation()

Vue.prototype.$navigation = Navigation
await router.replace({ name: 'filelist', params: { view: 'files' } })
})

Expand Down Expand Up @@ -158,12 +152,8 @@ describe('Navigation API', () => {
})

describe('Quota rendering', () => {
let Navigation: Navigation

before(() => {
delete window._nc_navigation
Navigation = getNavigation()
Vue.prototype.$navigation = Navigation
})

afterEach(() => cy.unmockInitialState())
Expand Down
6 changes: 3 additions & 3 deletions apps/files/src/views/Navigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</template>

<script lang="ts">
import type { View } from '@nextcloud/files'
import { getNavigation, type View } from '@nextcloud/files'
import type { ViewConfig } from '../types.ts'

import { defineComponent } from 'vue'
Expand Down Expand Up @@ -164,7 +164,7 @@ export default defineComponent({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
.filter(([viewId, config]) => config.expanded === true)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
.map(([viewId, config]) => this.$navigation.views.find(view => view.id === viewId))
.map(([viewId, config]) => this.views.find(view => view.id === viewId))
.filter(Boolean) // Only registered views
.filter(view => view.loadChildViews && !view.loaded)
for (const view of viewsToLoad) {
Expand All @@ -179,7 +179,7 @@ export default defineComponent({
showView(view: View) {
// Closing any opened sidebar
window.OCA?.Files?.Sidebar?.close?.()
this.$navigation.setActive(view)
getNavigation().setActive(view)
emit('files:navigation:changed', view)
},

Expand Down
11 changes: 0 additions & 11 deletions apps/files/src/vue.d.ts
View file
Open in desktop

This file was deleted.

61 changes: 61 additions & 0 deletions cypress/e2e/files/files-sorting.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,4 +267,65 @@ describe('Files: Sorting the file list', { testIsolation: true }, () => {
}
})
})

it('Sorting works after switching view twice', () => {
cy.uploadContent(currentUser, new Blob(), 'text/plain', '/1 tiny.txt')
.uploadContent(currentUser, new Blob(['a'.repeat(1024)]), 'text/plain', '/z big.txt')
.uploadContent(currentUser, new Blob(['a'.repeat(512)]), 'text/plain', '/a medium.txt')
.mkdir(currentUser, '/folder')
cy.login(currentUser)
cy.visit('/apps/files')

// click sort button twice
cy.get('th').contains('button', 'Size').click()
cy.get('th').contains('button', 'Size').click()

// switch to personal and click sort button twice again
cy.get('[data-cy-files-navigation-item="personal"]').click()
cy.get('th').contains('button', 'Size').click()
cy.get('th').contains('button', 'Size').click()

// switch back to files view and do actual assertions
cy.get('[data-cy-files-navigation-item="files"]').click()

// click sort button
cy.get('th').contains('button', 'Size').click()
// sorting is set
cy.contains('th', 'Size').should('have.attr', 'aria-sort', 'ascending')
// Files are sorted
cy.get('[data-cy-files-list-row]').each(($row, index) => {
switch (index) {
case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
break
case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
break
case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
break
case 3: expect($row.attr('data-cy-files-list-row-name')).to.eq('a medium.txt')
break
case 4: expect($row.attr('data-cy-files-list-row-name')).to.eq('z big.txt')
break
}
})

// click sort button
cy.get('th').contains('button', 'Size').click()
// sorting is set
cy.contains('th', 'Size').should('have.attr', 'aria-sort', 'descending')
// Files are sorted
cy.get('[data-cy-files-list-row]').each(($row, index) => {
switch (index) {
case 0: expect($row.attr('data-cy-files-list-row-name')).to.eq('folder')
break
case 1: expect($row.attr('data-cy-files-list-row-name')).to.eq('z big.txt')
break
case 2: expect($row.attr('data-cy-files-list-row-name')).to.eq('a medium.txt')
break
case 3: expect($row.attr('data-cy-files-list-row-name')).to.eq('welcome.txt')
break
case 4: expect($row.attr('data-cy-files-list-row-name')).to.eq('1 tiny.txt')
break
}
})
})
})
4 changes: 2 additions & 2 deletions dist/files-main.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/files-main.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading