fix(files): Clear search filter when changing directory or viewpull/44889/head
@@ -428,6 +428,7 @@ export default defineComponent({ | |||
logger.debug('View changed', { newView, oldView }) | |||
this.selectionStore.reset() | |||
this.resetSearch() | |||
this.fetchContent() | |||
}, | |||
@@ -435,6 +436,7 @@ export default defineComponent({ | |||
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 | |||
@@ -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') |
@@ -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> | |||
@@ -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> | |||
@@ -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> | |||
@@ -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" /> |
@@ -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)}"]`) | |||
} |
@@ -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') | |||
}) | |||
}) |