Merge pull request #44882 from nextcloud/fix/files-search-clearing

fix(files): Clear search filter when changing directory or view

apps/files/src/views/FilesList.vue

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

core/src/views/UnifiedSearchModal.vue

@@ -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" />

cypress/e2e/core-utils.ts

@@ -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)}"]`)
+}

cypress/e2e/files/files-searching.cy.ts

@@ -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')
+	})
+})