Skip to content

Commit

Permalink
Merge pull request #44882 from nextcloud/fix/files-search-clearing
Browse files Browse the repository at this point in the history
fix(files): Clear search filter when changing directory or view
  • Loading branch information
susnux authored Apr 17, 2024
2 parents f325e40 + 4ae2642 commit f865f44
Show file tree
Hide file tree
Showing 8 changed files with 194 additions and 10 deletions.
10 changes: 10 additions & 0 deletions apps/files/src/views/FilesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -428,13 +428,15 @@ export default defineComponent({
logger.debug('View changed', { newView, oldView })
this.selectionStore.reset()
this.resetSearch()
this.fetchContent()
},
dir(newDir, oldDir) {
logger.debug('Directory changed', { newDir, oldDir })
// TODO: preserve selection on browsing?
this.selectionStore.reset()
this.resetSearch()
this.fetchContent()
// Scroll to top, force virtual scroller to re-render
Expand Down Expand Up @@ -608,6 +610,14 @@ export default defineComponent({
console.debug('Files app handling search event from unified search...', searchEvent)
this.filterText = searchEvent.query
}, 500),
/**
* Reset the search query
*/
resetSearch() {
this.filterText = ''
},
openSharingSidebar() {
if (!this.currentFolder) {
logger.debug('No current folder found for opening sharing sidebar')
Expand Down
10 changes: 6 additions & 4 deletions core/src/views/UnifiedSearchModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@
<div class="unified-search-modal__header">
<h2>{{ t('core', 'Unified search') }}</h2>
<NcInputField ref="searchInput"
data-cy-unified-search-input
:value.sync="searchQuery"
type="text"
:label="t('core', 'Search apps, files, tags, messages') + '...'"
@update:value="debouncedFind" />
<div class="unified-search-modal__filters">
<NcActions :menu-name="t('core', 'Places')" :open.sync="providerActionMenuIsOpen">
<div class="unified-search-modal__filters" data-cy-unified-search-filters>
<NcActions :menu-name="t('core', 'Places')" :open.sync="providerActionMenuIsOpen" data-cy-unified-search-filter="places">
<template #icon>
<ListBox :size="20" />
</template>
Expand All @@ -33,7 +34,7 @@
{{ provider.name }}
</NcActionButton>
</NcActions>
<NcActions :menu-name="t('core', 'Date')" :open.sync="dateActionMenuIsOpen">
<NcActions :menu-name="t('core', 'Date')" :open.sync="dateActionMenuIsOpen" data-cy-unified-search-filter="date">
<template #icon>
<CalendarRangeIcon :size="20" />
</template>
Expand All @@ -59,6 +60,7 @@
<SearchableList :label-text="t('core', 'Search people')"
:search-list="userContacts"
:empty-content-text="t('core', 'Not found')"
data-cy-unified-search-filter="people"
@search-term-change="debouncedFilterContacts"
@item-selected="applyPersonFilter">
<template #trigger>
Expand All @@ -70,7 +72,7 @@
</NcButton>
</template>
</SearchableList>
<NcButton v-if="supportFiltering" @click="closeModal">
<NcButton v-if="supportFiltering" data-cy-unified-search-filter="current-view" @click="closeModal">
{{ t('core', 'Filter in current view') }}
<template #icon>
<FilterIcon :size="20" />
Expand Down
67 changes: 67 additions & 0 deletions cypress/e2e/core-utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
*
* @author Ferdinand Thiessen <opensource@fthiessen.de>
*
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/

/**
* Get the unified search modal (if open)
*/
export function getUnifiedSearchModal() {
return cy.get('#unified-search')
}

/**
* Open the unified search modal
*/
export function openUnifiedSearch() {
cy.get('button[aria-label="Unified search"]').click({ force: true })
// wait for it to be open
getUnifiedSearchModal().should('be.visible')
}

/**
* Close the unified search modal
*/
export function closeUnifiedSearch() {
getUnifiedSearchModal().find('button[aria-label="Close"]').click({ force: true })
getUnifiedSearchModal().should('not.be.visible')
}

/**
* Get the input field of the unified search
*/
export function getUnifiedSearchInput() {
return getUnifiedSearchModal().find('[data-cy-unified-search-input]')
}

export enum UnifiedSearchFilter {
FilterCurrentView = 'current-view',
Places = 'places',
People = 'people',
Date = 'date',
}

/**
* Get a filter action from the unified search
* @param filter The filter to get
*/
export function getUnifiedSearchFilter(filter: UnifiedSearchFilter) {
return getUnifiedSearchModal().find(`[data-cy-unified-search-filters] [data-cy-unified-search-filter="${CSS.escape(filter)}"]`)
}
105 changes: 105 additions & 0 deletions cypress/e2e/files/files-searching.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/**
* @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
*
* @author Ferdinand Thiessen <opensource@fthiessen.de>
*
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/

import type { User } from '@nextcloud/cypress'
import { getRowForFile, navigateToFolder } from './FilesUtils'
import { UnifiedSearchFilter, getUnifiedSearchFilter, getUnifiedSearchInput, getUnifiedSearchModal, openUnifiedSearch } from '../core-utils.ts'

describe('files: Search and filter in files list', { testIsolation: true }, () => {
let user: User

beforeEach(() => cy.createRandomUser().then(($user) => {
user = $user

cy.mkdir(user, '/a folder')
cy.uploadContent(user, new Blob([]), 'text/plain', '/b file')
cy.uploadContent(user, new Blob([]), 'text/plain', '/a folder/c file')
cy.login(user)
cy.visit('/apps/files')
}))

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')

// See that only the folder is visible
getRowForFile('a folder').should('be.visible')
getRowForFile('b file').should('not.exist')
})

it('resets filter when changeing the directory', () => {
// 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')

// See that only the folder is visible
getRowForFile('a folder').should('be.visible')
getRowForFile('b file').should('not.exist')

// go to that folder
navigateToFolder('a folder')

// see that the folder is not filtered
getRowForFile('c file').should('be.visible')
})

it('resets filter when changeing the 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')

// See that only the folder is visible
getRowForFile('a folder').should('be.visible')
getRowForFile('b file').should('not.exist')

// go to other view
cy.get('[data-cy-files-navigation-item="personal"] a').click({ force: true })
// wait for view changed
cy.url().should('match', /apps\/files\/personal/)

// see that the folder is not filtered
getRowForFile('a folder').should('be.visible')
getRowForFile('b file').should('be.visible')
})
})
4 changes: 2 additions & 2 deletions dist/core-unified-search.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/core-unified-search.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/files-main.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/files-main.js.map

Large diffs are not rendered by default.

0 comments on commit f865f44

Please sign in to comment.