Fix fuzzy fuse filter results

changelog/unreleased/bugfix-remove-fuzzy-search-results

@@ -3,4 +3,6 @@ Bugfix: Remove fuzzy search results
 We've had a bug that caused some search results to show up that didn't align with the search term.
 
 https://github.com/owncloud/web/pull/8508
-https://github.com/owncloud/web/issues/8493
+https://github.com/owncloud/web/pull/8863
+https://github.com/owncloud/web/issues/8493
+https://github.com/owncloud/web/issues/8860

packages/design-system/src/components/OcSelect/OcSelect.vue

@@ -119,8 +119,8 @@ export default defineComponent({
         const fuse = new Fuse(items, {
           ...(props.label && { keys: [props.label] }),
           shouldSort: true,
-          threshold: 0.1,
-          location: 0,
+          threshold: 0,
+          ignoreLocation: true,
           distance: 100,
           minMatchCharLength: 1
         })

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -111,6 +111,7 @@ import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { Group } from 'web-client/src/generated'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 import { useGettext } from 'vue3-gettext'
+import { defaultFuseOptions } from 'web-pkg/src/helpers'
 
 export default defineComponent({
   name: 'GroupsList',
@@ -287,13 +288,7 @@ export default defineComponent({
       if (!(filterTerm || '').trim()) {
         return groups
       }
-      const groupsSearchEngine = new Fuse(groups, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
-        keys: ['displayName']
-      })
-
+      const groupsSearchEngine = new Fuse(groups, { ...defaultFuseOptions, keys: ['displayName'] })
       return groupsSearchEngine.search(filterTerm).map((r) => r.item)
     },
     orderBy(list, prop, desc) {

packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue

@@ -22,6 +22,7 @@ import MembersRoleSection from '../../Groups/SideBar/MembersRoleSection.vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import { Group } from 'web-client/src/generated'
+import { defaultFuseOptions } from 'web-pkg/src/helpers'
 
 export default defineComponent({
   name: 'GroupsMembersPanel',
@@ -37,13 +38,7 @@ export default defineComponent({
         return collection
       }
 
-      const searchEngine = new Fuse(collection, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
-        keys: ['displayName']
-      })
-
+      const searchEngine = new Fuse(collection, { ...defaultFuseOptions, keys: ['displayName'] })
       return searchEngine.search(term).map((r) => r.item)
     }
 

packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue

@@ -43,6 +43,7 @@ import MembersRoleSection from './MembersRoleSection.vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
+import { defaultFuseOptions } from 'web-pkg/src/helpers'
 
 export default defineComponent({
   name: 'MembersPanel',
@@ -57,13 +58,7 @@ export default defineComponent({
         return collection
       }
 
-      const searchEngine = new Fuse(collection, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
-        keys: ['displayName']
-      })
-
+      const searchEngine = new Fuse(collection, { ...defaultFuseOptions, keys: ['displayName'] })
       return searchEngine.search(term).map((r) => r.item)
     }
 

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -119,7 +119,8 @@ import {
   formatDateFromJSDate,
   formatRelativeDateFromJSDate,
   displayPositionedDropdown,
-  formatFileSize
+  formatFileSize,
+  defaultFuseOptions
 } from 'web-pkg/src/helpers'
 import { computed, defineComponent, nextTick, onMounted, PropType, ref, unref, watch } from 'vue'
 import { SpaceResource } from 'web-client/src/helpers'
@@ -218,13 +219,7 @@ export default defineComponent({
       if (!(filterTerm || '').trim()) {
         return spaces
       }
-      const searchEngine = new Fuse(spaces, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
-        keys: ['name']
-      })
-
+      const searchEngine = new Fuse(spaces, { ...defaultFuseOptions, keys: ['name'] })
       return searchEngine.search(filterTerm).map((r) => r.item)
     }
     const isSpaceSelected = (space: SpaceResource) => {

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -110,7 +110,7 @@
 import { defineComponent, PropType, ref, unref, ComponentPublicInstance } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { displayPositionedDropdown, eventBus } from 'web-pkg'
+import { defaultFuseOptions, displayPositionedDropdown, eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { AppRole, User } from 'web-client/src/generated'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
@@ -311,9 +311,7 @@ export default defineComponent({
         return users
       }
       const usersSearchEngine = new Fuse(users, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
+        ...defaultFuseOptions,
         keys: ['displayName', 'mail', 'onPremisesSamAccountName', 'role.displayName']
       })
 

packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`MembersPanel should display an empty result if no matching members found 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <div>
       <h3 class="oc-text-bold oc-text-medium">No members found</h3>
@@ -14,7 +14,7 @@ exports[`MembersPanel should display an empty result if no matching members foun
 
 exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
 <div class="oc-ml-s">
-  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" type="text"></oc-text-input-stub>
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" readonly="false" type="text"></oc-text-input-stub>
   <div>
     <!--v-if-->
     <div class="oc-mb-m">

packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue

@@ -73,7 +73,7 @@ import { ProjectSpaceResource } from 'web-client/src/helpers'
 import { useClientService } from 'web-pkg/src/composables'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { configurationManager } from 'web-pkg'
+import { configurationManager, defaultFuseOptions } from 'web-pkg'
 
 export default defineComponent({
   name: 'SpaceMembers',
@@ -148,9 +148,7 @@ export default defineComponent({
         return collection
       }
       const searchEngine = new Fuse(collection, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
+        ...defaultFuseOptions,
         keys: ['collaborator.displayName', 'collaborator.name']
       })
 

packages/web-app-files/src/helpers/resource/filter.ts

@@ -1,10 +1,9 @@
 import Fuse from 'fuse.js'
+import { defaultFuseOptions } from 'web-pkg/src/helpers'
 
 export const filterResources = (resources: unknown[], term: string, limit?: number): unknown[] => {
   const engine = new Fuse(resources, {
-    includeScore: false,
-    useExtendedSearch: true,
-    threshold: 0.1,
+    ...defaultFuseOptions,
     keys: ['name', 'type', 'icon', 'extension', 'tags']
   })
 

packages/web-app-files/src/views/trash/Overview.vue

@@ -67,7 +67,7 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
-import { useClientService, useRouter, useStore } from 'web-pkg'
+import { defaultFuseOptions, useClientService, useRouter, useStore } from 'web-pkg'
 import { createLocationTrash } from 'web-app-files/src/router'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
@@ -155,13 +155,7 @@ export default defineComponent({
       if (!(filterTerm || '').trim()) {
         return spaces
       }
-      const searchEngine = new Fuse(spaces, {
-        includeScore: true,
-        useExtendedSearch: true,
-        threshold: 0.1,
-        keys: ['name']
-      })
-
+      const searchEngine = new Fuse(spaces, { ...defaultFuseOptions, keys: ['name'] })
       return searchEngine.search(filterTerm).map((r) => r.item)
     }
 

packages/web-pkg/src/components/ItemFilter.vue

@@ -58,7 +58,7 @@ import { defineComponent, nextTick, onMounted, ref, unref, watch } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import omit from 'lodash-es/omit'
-import { useRoute, useRouteQuery, useRouter } from 'web-pkg'
+import { defaultFuseOptions, useRoute, useRouteQuery, useRouter } from 'web-pkg'
 import { queryItemAsString } from 'web-pkg/src/composables/appDefaults'
 
 export default defineComponent({
@@ -164,9 +164,7 @@ export default defineComponent({
         return items
       }
       const usersSearchEngine = new Fuse(items, {
-        includeScore: false,
-        useExtendedSearch: true,
-        threshold: 0.1,
+        ...defaultFuseOptions,
         keys: props.filterableAttributes as any
       })
 

packages/web-pkg/src/helpers/fuse.ts

@@ -0,0 +1,5 @@
+export const defaultFuseOptions = {
+  ignoreLocation: true,
+  threshold: 0,
+  useExtendedSearch: true
+}

packages/web-pkg/src/helpers/index.ts

@@ -3,4 +3,5 @@ export * from './contextMenuDropdown'
 export * from './download'
 export * from './datetime'
 export * from './filesize'
+export * from './fuse'
 export * from './locale'