Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

fix: Allow to reset unified search using the `nextcloud:unified-search:reset` event 

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/41609/head
Ferdinand Thiessen 1 year ago
parent
dd3dcf3703
commit
362c6238fc
No known key found for this signature in database GPG Key ID: 45FAE7268762B400
8 changed files with 240 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      apps/files/src/views/FilesList.vue
  2. 6
      core/src/views/UnifiedSearch.vue
  3. 34
      cypress/e2e/files/files-searching.cy.ts
  4. 75
      cypress/pages/UnifiedSearch.ts
  5. 1
      cypress/support/commands.ts
  6. 8
      cypress/tsconfig.json
  7. 116
      package-lock.json
  8. 1
      package.json

24
apps/files/src/views/FilesList.vue
View File

@ -464,7 +464,7 @@ export default defineComponent({
logger.debug('View changed', { newView, oldView })
this.selectionStore.reset()
this.resetSearch()
this.triggerResetSearch()
this.fetchContent()
},
@ -472,7 +472,7 @@ export default defineComponent({
logger.debug('Directory changed', { newDir, oldDir })
// TODO: preserve selection on browsing?
this.selectionStore.reset()
this.resetSearch()
this.triggerResetSearch()
this.fetchContent()
// Scroll to top, force virtual scroller to re-render
@ -493,8 +493,8 @@ export default defineComponent({
subscribe('files:node:deleted', this.onNodeDeleted)
subscribe('files:node:updated', this.onUpdatedNode)
subscribe('nextcloud:unified-search.search', this.onSearch)
subscribe('nextcloud:unified-search.reset', this.resetSearch)
subscribe('nextcloud:unified-search:search', this.onSearch)
subscribe('nextcloud:unified-search:reset', this.onResetSearch)
// reload on settings change
this.unsubscribeStoreCallback = this.userConfigStore.$subscribe(() => this.fetchContent(), { deep: true })
@ -503,8 +503,8 @@ export default defineComponent({
unmounted() {
unsubscribe('files:node:deleted', this.onNodeDeleted)
unsubscribe('files:node:updated', this.onUpdatedNode)
unsubscribe('nextcloud:unified-search.search', this.onSearch)
unsubscribe('nextcloud:unified-search.reset', this.resetSearch)
unsubscribe('nextcloud:unified-search:search', this.onSearch)
unsubscribe('nextcloud:unified-search:reset', this.onResetSearch)
this.unsubscribeStoreCallback()
},
@ -676,15 +676,23 @@ export default defineComponent({
},
/**
* Reset the search query
* Handle reset search query event
*/
resetSearch() {
onResetSearch() {
// Reset debounced calls to not set the query again
this.onSearch.clear()
// Reset filter query
this.filterText = ''
},
/**
* Trigger a reset of the local search (part of unified search)
* This is usful to reset the search on directory / view change
*/
triggerResetSearch() {
emit('nextcloud:unified-search:reset')
},
openSharingSidebar() {
if (!this.currentFolder) {
logger.debug('No current folder found for opening sharing sidebar')

6
core/src/views/UnifiedSearch.vue
View File

@ -99,6 +99,12 @@ export default defineComponent({
// register keyboard listener for search shortcut
window.addEventListener('keydown', this.onKeyDown)
// Allow external reset of the search / close local search
subscribe('nextcloud:unified-search:reset', () => {
this.showLocalSearch = false
this.queryText = ''
})
// Deprecated events to be removed
subscribe('nextcloud:unified-search:reset', () => {
emit('nextcloud:unified-search.reset', { query: '' })

34
cypress/e2e/files/files-searching.cy.ts
View File

@ -5,9 +5,10 @@
import type { User } from '@nextcloud/cypress'
import { getRowForFile, navigateToFolder } from './FilesUtils'
import { UnifiedSearchFilter, getUnifiedSearchFilter, getUnifiedSearchInput, getUnifiedSearchModal, openUnifiedSearch } from '../core-utils.ts'
import { UnifiedSearchPage } from '../../pages/UnifiedSearch.ts'
describe('files: Search and filter in files list', { testIsolation: true }, () => {
const unifiedSearch = new UnifiedSearchPage()
let user: User
beforeEach(() => cy.createRandomUser().then(($user) => {
@ -20,17 +21,21 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
cy.visit('/apps/files')
}))
it('files app supports local search', () => {
unifiedSearch.openLocalSearch()
unifiedSearch.localSearchInput()
.should('not.have.css', 'display', 'none')
.and('not.be.disabled')
})
it('filters current view', () => {
// All are visible by default
getRowForFile('a folder').should('be.visible')
getRowForFile('b file').should('be.visible')
// Set up a search query
openUnifiedSearch()
getUnifiedSearchInput().type('a folder')
getUnifiedSearchFilter(UnifiedSearchFilter.FilterCurrentView).click({ force: true })
// Wait for modal to close
getUnifiedSearchModal().should('not.be.visible')
unifiedSearch.openLocalSearch()
unifiedSearch.typeLocalSearch('a folder')
// See that only the folder is visible
getRowForFile('a folder').should('be.visible')
@ -43,11 +48,8 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
getRowForFile('b file').should('be.visible')
// Set up a search query
openUnifiedSearch()
getUnifiedSearchInput().type('a folder')
getUnifiedSearchFilter(UnifiedSearchFilter.FilterCurrentView).click({ force: true })
// Wait for modal to close
getUnifiedSearchModal().should('not.be.visible')
unifiedSearch.openLocalSearch()
unifiedSearch.typeLocalSearch('a folder')
// See that only the folder is visible
getRowForFile('a folder').should('be.visible')
@ -66,11 +68,8 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
getRowForFile('b file').should('be.visible')
// Set up a search query
openUnifiedSearch()
getUnifiedSearchInput().type('a folder')
getUnifiedSearchFilter(UnifiedSearchFilter.FilterCurrentView).click({ force: true })
// Wait for modal to close
getUnifiedSearchModal().should('not.be.visible')
unifiedSearch.openLocalSearch()
unifiedSearch.typeLocalSearch('a folder')
// See that only the folder is visible
getRowForFile('a folder').should('be.visible')
@ -84,5 +83,8 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
// see that the folder is not filtered
getRowForFile('a folder').should('be.visible')
getRowForFile('b file').should('be.visible')
// see the filter bar is gone
unifiedSearch.localSearchInput().should('not.exist')
})
})

75
cypress/pages/UnifiedSearch.ts
View File

@ -0,0 +1,75 @@
/**
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
/**
* Page object model for the UnifiedSearch
*/
export class UnifiedSearchPage {
toggleButton() {
return cy.findByRole('button', { name: 'Unified search' })
}
globalSearchButton() {
return cy.findByRole('button', { name: 'Search everywhere' })
}
localSearchInput() {
return cy.findByRole('textbox', { name: 'Search in current app' })
}
globalSearchInput() {
return cy.findByRole('textbox', { name: /Search apps, files/ })
}
globalSearchModal() {
// TODO: Broken in library
// return cy.findByRole('dialog', { name: 'Unified search' })
return cy.get('#unified-search')
}
// functions
openLocalSearch() {
this.toggleButton()
.if('visible')
.click()
this.localSearchInput().should('exist').and('not.have.css', 'display', 'none')
}
/**
* Type in the local search (must be open before)
* Helper because the input field is overlayed by the global-search button -> cypress thinks the input is not visible
*
* @param text The text to type
* @param options Options as for `cy.type()`
*/
typeLocalSearch(text: string, options?: Partial<Omit<Cypress.TypeOptions, 'force'>>) {
return this.localSearchInput()
.type(text, { ...options, force: true })
}
openGlobalSearch() {
this.toggleButton()
.if('visible').click()
this.globalSearchButton()
.if('visible').click()
}
closeGlobalSearch() {
this.globalSearchModal()
.findByRole('button', { name: 'Close' })
.click()
}
getResults(category: string | RegExp) {
return this.globalSearchModal()
.findByRole('list', { name: category })
.findAllByRole('listitem')
}
}

1
cypress/support/commands.ts
View File

@ -10,6 +10,7 @@ import { addCommands, User } from '@nextcloud/cypress'
import { basename } from 'path'
// Add custom commands
import '@testing-library/cypress/add-commands'
import 'cypress-if'
import 'cypress-wait-until'
addCommands()

8
cypress/tsconfig.json
View File

@ -2,6 +2,12 @@
"extends": "../tsconfig.json",
"include": ["./**/*.ts"],
"compilerOptions": {
"types": ["cypress", "cypress-axe", "cypress-wait-until", "dockerode"],
"types": [
"@testing-library/cypress",
"cypress",
"cypress-axe",
"cypress-wait-until",
"dockerode"
],
}
}

116
package-lock.json
View File

@ -101,6 +101,7 @@
"@nextcloud/webpack-vue-config": "^6.0.1",
"@pinia/testing": "^0.1.2",
"@simplewebauthn/types": "^10.0.0",
"@testing-library/cypress": "^10.0.2",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/user-event": "^14.4.3",
"@testing-library/vue": "^5.8.3",
@ -5255,6 +5256,121 @@
"string.prototype.matchall": "^4.0.6"
}
},
"node_modules/@testing-library/cypress": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.0.2.tgz",
"integrity": "sha512-dKv95Bre5fDmNb9tOIuWedhGUryxGu1GWYWtXDqUsDPcr9Ekld0fiTb+pcBvSsFpYXAZSpmyEjhoXzLbhh06yQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.14.6",
"@testing-library/dom": "^10.1.0"
},
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"cypress": "^12.0.0 || ^13.0.0"
}
},
"node_modules/@testing-library/cypress/node_modules/@testing-library/dom": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz",
"integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@testing-library/cypress/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/@testing-library/cypress/node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"dependencies": {
"dequal": "^2.0.3"
}
},
"node_modules/@testing-library/cypress/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/@testing-library/cypress/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/@testing-library/cypress/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/@testing-library/cypress/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/@testing-library/cypress/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@testing-library/dom": {
"version": "9.3.4",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",

1
package.json
View File

@ -129,6 +129,7 @@
"@nextcloud/webpack-vue-config": "^6.0.1",
"@pinia/testing": "^0.1.2",
"@simplewebauthn/types": "^10.0.0",
"@testing-library/cypress": "^10.0.2",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/user-event": "^14.4.3",
"@testing-library/vue": "^5.8.3",

Write Preview
Loading…
Cancel
Save