feat(files): restore unified search filtering in files view

The unified search emits, search events that other apps can subscribe to and
 react however they want to search queries, following
 4b55594f55 and prior updates to migrate the Files
app ui to vue.js that feature was broken.

This commit reintroduces the feature using the current `FileList` implementation.

This commit also adds some logging to an empty exception handler.

Resolve : https://github.com/nextcloud/server/issues/43365

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
(cherry picked from commit 29c37af40c)
Signed-off-by: Christopher Ng <chrng8@gmail.com>

apps/files/src/legacy/filelistSearch.js

@@ -1,42 +0,0 @@
-/*
- * @copyright Copyright (c) 2021 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @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 { subscribe } from '@nextcloud/event-bus'
-
-(function() {
-
-	const FilesPlugin = {
-		attach(fileList) {
-			subscribe('nextcloud:unified-search.search', ({ query }) => {
-				fileList.setFilter(query)
-			})
-			subscribe('nextcloud:unified-search.reset', () => {
-				this.query = null
-				fileList.setFilter('')
-			})
-
-		},
-	}
-
-	window.OC.Plugins.register('OCA.Files.FileList', FilesPlugin)
-
-})()

apps/files/src/views/FilesList.vue

@@ -80,8 +80,7 @@
 		</div>
 
 		<!-- Drag and drop notice -->
-		<DragAndDropNotice v-if="!loading && canUpload"
-			:current-folder="currentFolder" />
+		<DragAndDropNotice v-if="!loading && canUpload" :current-folder="currentFolder" />
 
 		<!-- Initial loading -->
 		<NcLoadingIcon v-if="loading && !isRefreshing"
@@ -159,6 +158,7 @@ import filesListWidthMixin from '../mixins/filesListWidth.ts'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
 import DragAndDropNotice from '../components/DragAndDropNotice.vue'
+import debounce from 'debounce'
 
 const isSharingEnabled = (getCapabilities() as { files_sharing?: boolean })?.files_sharing !== undefined
 
@@ -210,6 +210,7 @@ export default defineComponent({
 
 	data() {
 		return {
+			filterText: '',
 			loading: true,
 			promise: null,
 			Type,
@@ -240,7 +241,7 @@ export default defineComponent({
 		/**
 		 * The current folder.
 		 */
-		currentFolder(): Folder|undefined {
+		currentFolder(): Folder | undefined {
 			if (!this.currentView?.id) {
 				return
 			}
@@ -294,6 +295,15 @@ export default defineComponent({
 				return []
 			}
 
+			let filteredDirContent = [...this.dirContents]
+			// Filter based on the filterText obtained from nextcloud:unified-search.search event.
+			if (this.filterText) {
+				filteredDirContent = filteredDirContent.filter(node => {
+					return node.attributes.basename.toLowerCase().includes(this.filterText.toLowerCase())
+				})
+				console.debug('Files view filtered', filteredDirContent)
+			}
+
 			const customColumn = (this.currentView?.columns || [])
 				.find(column => column.id === this.sortingMode)
 
@@ -304,7 +314,7 @@ export default defineComponent({
 			}
 
 			return orderBy(
-				[...this.dirContents],
+				filteredDirContent,
 				...this.sortingParameters,
 			)
 		},
@@ -348,7 +358,7 @@ export default defineComponent({
 			return { ...this.$route, query: { dir } }
 		},
 
-		shareAttributes(): number[]|undefined {
+		shareAttributes(): number[] | undefined {
 			if (!this.currentFolder?.attributes?.['share-types']) {
 				return undefined
 			}
@@ -364,7 +374,7 @@ export default defineComponent({
 			}
 			return this.t('files', 'Shared')
 		},
-		shareButtonType(): Type|null {
+		shareButtonType(): Type | null {
 			if (!this.shareAttributes) {
 				return null
 			}
@@ -440,6 +450,8 @@ export default defineComponent({
 	mounted() {
 		this.fetchContent()
 		subscribe('files:node:updated', this.onUpdatedNode)
+		subscribe('nextcloud:unified-search.search', this.onSearch)
+		subscribe('nextcloud:unified-search.reset', this.onSearch)
 	},
 
 	unmounted() {
@@ -556,7 +568,9 @@ export default defineComponent({
 					showError(this.t('files', 'Error during upload: {message}', { message }))
 					return
 				}
-			} catch (error) {}
+			} catch (error) {
+				logger.error('Error while parsing', { error })
+			}
 
 			// Finally, check the status code if we have one
 			if (status !== 0) {
@@ -577,7 +591,15 @@ export default defineComponent({
 				this.fetchContent()
 			}
 		},
-
+		/**
+		 * Handle search event from unified search.
+		 *
+		 * @param searchEvent is event object.
+		 */
+		onSearch: debounce(function(searchEvent) {
+			console.debug('Files app handling search event from unified search...', searchEvent)
+			this.filterText = searchEvent.query
+		}, 500),
 		openSharingSidebar() {
 			if (!this.currentFolder) {
 				logger.debug('No current folder found for opening sharing sidebar')
@@ -589,7 +611,6 @@ export default defineComponent({
 			}
 			sidebarAction.exec(this.currentFolder, this.currentView, this.currentFolder.path)
 		},
-
 		toggleGridView() {
 			this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
 		},
@@ -622,7 +643,8 @@ $navigationToggleSize: 50px;
 		// Align with the navigation toggle icon
 		margin: $margin $margin $margin $navigationToggleSize;
 		max-width: 100%;
-		> * {
+
+		>* {
 			// Do not grow or shrink (horizontally)
 			// Only the breadcrumbs shrinks
 			flex: 0 0;
@@ -630,6 +652,7 @@ $navigationToggleSize: 50px;
 
 		&-share-button {
 			color: var(--color-text-maxcontrast) !important;
+
 			&--shared {
 				color: var(--color-main-text) !important;
 			}
@@ -646,5 +669,4 @@ $navigationToggleSize: 50px;
 		margin: auto;
 	}
 }
-
 </style>

core/src/views/UnifiedSearchModal.vue

@@ -237,6 +237,14 @@ export default {
 	},
 	watch: {
 		isVisible(value) {
+			if (value) {
+				/*
+				 * Before setting the search UI to visible, reset previous search event emissions.
+				 * This allows apps to restore defaults after "Filter in current view" if the user opens the search interface once more.
+				 * Additionally, it's a new search, so it's better to reset all previous events emitted.
+				 */
+				emit('nextcloud:unified-search.reset', { query: '' })
+			}
 			this.internalIsVisible = value
 		},
 		internalIsVisible(value) {
@@ -265,9 +273,9 @@ export default {
 			if (query.length === 0) {
 				this.results = []
 				this.searching = false
+				emit('nextcloud:unified-search.reset', { query })
 				return
 			}
-			// Event should probably be refactored at some point to used nextcloud:unified-search.search
 			emit('nextcloud:unified-search.search', { query })
 			const newResults = []
 			const providersToSearch = this.filteredProviders.length > 0 ? this.filteredProviders : this.providers