From df6cff19601735a3540b20d06b99bcb84919b415 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 15 May 2023 16:14:42 +0200
Subject: [PATCH] Implement tag filter on search result page

---
 .../unreleased/enhancement-search-tag-filter  |   6 +
 .../components/FilesList/ResourceTable.vue    |   5 +-
 .../src/components/Search/List.vue            | 113 +++++++-
 packages/web-app-files/src/router/common.ts   |   2 +-
 .../tests/unit/components/Search/List.spec.ts | 261 ++++++------------
 .../web-app-search/src/portals/SearchBar.vue  |  12 +-
 packages/web-app-search/src/views/List.vue    |  32 +--
 .../tests/unit/portals/SearchBar.spec.ts      |  29 +-
 .../tests/unit/views/List.spec.ts             |  31 ++-
 .../web-pkg/src/components/ItemFilter.vue     |  11 +-
 10 files changed, 263 insertions(+), 239 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-search-tag-filter

diff --git a/changelog/unreleased/enhancement-search-tag-filter b/changelog/unreleased/enhancement-search-tag-filter
new file mode 100644
index 00000000000..c254cabaedd
--- /dev/null
+++ b/changelog/unreleased/enhancement-search-tag-filter
@@ -0,0 +1,6 @@
+Enhancement: Search tag filter
+
+The search result page now has a tag filter which can be used to filter the displayed search result by tags.
+
+https://github.com/owncloud/web/pull/9044
+https://github.com/owncloud/web/issues/9054
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 530b06a683a..72174602f8a 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -632,9 +632,10 @@ export default defineComponent({
     shouldDisplayThumbnails(item) {
       return this.areThumbnailsDisplayed && !isResourceTxtFileAlmostEmpty(item)
     },
-    getTagLink(tag) {
+    getTagLink(tag: string) {
+      const currentTerm = unref(this.$router.currentRoute).query?.term
       return createLocationCommon('files-common-search', {
-        query: { term: `Tags:"${tag}"`, provider: 'files.sdk' }
+        query: { provider: 'files.sdk', q_tags: tag, ...(currentTerm && { term: currentTerm }) }
       })
     },
     getTagComponentAttrs(tag) {
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index c31c0ba814c..ab545f33654 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -2,6 +2,28 @@
   <div class="files-search-result oc-flex">
     <files-view-wrapper>
       <app-bar :has-bulk-actions="false" :side-bar-open="sideBarOpen" />
+      <div class="files-search-result-filter oc-mx-m oc-mb-m">
+        <item-filter
+          v-if="availableTags.length"
+          ref="tagFilter"
+          :allow-multiple="true"
+          :filter-label="$gettext('Tags')"
+          :filterable-attributes="['label']"
+          :items="availableTags"
+          :option-filter-label="$gettext('Filter tags')"
+          :show-option-filter="true"
+          class="files-search-filter-tags oc-mr-s"
+          display-name-attribute="label"
+          filter-name="tags"
+        >
+          <template #image="{ item }">
+            <oc-avatar :width="24" :user-name="item.label" />
+          </template>
+          <template #item="{ item }">
+            <div v-text="item.label" />
+          </template>
+        </item-filter>
+      </div>
       <app-loading-spinner v-if="loading" />
       <template v-else>
         <no-content-message
@@ -77,7 +99,7 @@ import ContextActions from '../FilesList/ContextActions.vue'
 import { debounce } from 'lodash-es'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
 import AppBar from '../AppBar/AppBar.vue'
-import { defineComponent, nextTick } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, unref, VNodeRef, watch } from 'vue'
 import ListInfo from '../FilesList/ListInfo.vue'
 import Pagination from '../FilesList/Pagination.vue'
 import { useFileActions } from '../../composables/actions/files/useFileActions'
@@ -86,14 +108,30 @@ import { Resource } from 'web-client'
 import FilesViewWrapper from '../FilesViewWrapper.vue'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import { buildShareSpaceResource, SpaceResource } from 'web-client/src/helpers'
-import { useFileListHeaderPosition, useStore } from 'web-pkg/src/composables'
+import {
+  queryItemAsString,
+  useClientService,
+  useFileListHeaderPosition,
+  useRoute,
+  useRouteQuery,
+  useRouter,
+  useStore
+} from 'web-pkg/src/composables'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { basename } from 'path'
 import { onBeforeRouteLeave } from 'vue-router'
+import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg'
+import ItemFilter from 'web-pkg/src/components/ItemFilter.vue'
+import { isLocationCommonActive } from 'web-app-files/src/router'
 
 const visibilityObserver = new VisibilityObserver()
 
+type Tag = {
+  id: string
+  label: string
+}
+
 export default defineComponent({
   components: {
     AppBar,
@@ -104,7 +142,8 @@ export default defineComponent({
     Pagination,
     NoContentMessage,
     ResourceTable,
-    FilesViewWrapper
+    FilesViewWrapper,
+    ItemFilter
   },
   props: {
     searchResult: {
@@ -118,9 +157,28 @@ export default defineComponent({
       default: false
     }
   },
-  setup() {
+  emits: ['search'],
+  setup(props, { emit }) {
     const store = useStore()
+    const router = useRouter()
+    const route = useRoute()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const clientService = useClientService()
+
+    const searchTermQuery = useRouteQuery('term')
+    const searchTerm = computed(() => {
+      return queryItemAsString(unref(searchTermQuery))
+    })
+
+    const availableTags = ref<Tag[]>([])
+    const tagFilter = ref<VNodeRef>()
+    const tagParam = useRouteQuery('q_tags')
+    const loadAvailableTagsTask = useTask(function* () {
+      const {
+        data: { value: tags = [] }
+      } = yield clientService.graphAuthenticated.tags.getTags()
+      availableTags.value = [...tags.map((t) => ({ id: t, label: t }))]
+    })
 
     onBeforeRouteLeave(() => {
       eventBus.publish('app.search.term.clear')
@@ -136,11 +194,51 @@ export default defineComponent({
       return store.getters['runtime/spaces/spaces'].find((space) => space.id === resource.storageId)
     }
 
+    const buildSearchTerm = (manuallyUpdateFilterChip = false) => {
+      let term = unref(searchTerm)
+
+      const tags = queryItemAsString(unref(tagParam))
+      if (tags) {
+        const foo = tags.split('+')?.join(',') || ''
+        term += ` Tags:"${unref(foo)}"`
+        if (manuallyUpdateFilterChip && unref(tagFilter)) {
+          /**
+           * Handles edge cases where a filter is not being applied via the filter directly,
+           * e.g. when clicking on a tag in the files list.
+           * We need to manually update the selected items in the ItemFilter component because normally
+           * it only does this on mount or when interacting with the filter directly.
+           */
+          ;(unref(tagFilter) as any).setSelectedItemsBasedOnQuery()
+        }
+      }
+
+      return term
+    }
+
+    onMounted(async () => {
+      await loadAvailableTagsTask.perform()
+      emit('search', buildSearchTerm())
+    })
+
+    watch(
+      () => unref(route).query,
+      (newVal, oldVal) => {
+        const isChange = newVal?.term !== oldVal?.term || newVal?.q_tags !== oldVal?.q_tags
+        if (isChange && isLocationCommonActive(router, 'files-common-search')) {
+          emit('search', buildSearchTerm(true))
+        }
+      },
+      { deep: true }
+    )
+
     return {
       ...useFileActions({ store }),
       ...useResourcesViewDefaults<Resource, any, any[]>(),
+      loadAvailableTagsTask,
       fileListHeaderY,
-      getSpace
+      getSpace,
+      availableTags,
+      tagFilter
     }
   },
   computed: {
@@ -224,3 +322,8 @@ export default defineComponent({
   }
 })
 </script>
+<style lang="scss">
+.files-app-bar-actions {
+  display: none !important;
+}
+</style>
diff --git a/packages/web-app-files/src/router/common.ts b/packages/web-app-files/src/router/common.ts
index 54a31959d52..b5c13aed739 100644
--- a/packages/web-app-files/src/router/common.ts
+++ b/packages/web-app-files/src/router/common.ts
@@ -27,7 +27,7 @@ export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
         meta: {
           authContext: 'user',
           title: $gettext('Search results'),
-          contextQueryItems: ['term', 'provider']
+          contextQueryItems: ['term', 'provider', 'q_tags']
         }
       }
     ]
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.ts b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
index f16148f9daf..d07bfcb795e 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
@@ -1,176 +1,91 @@
 import { describe } from '@jest/globals'
-// import List from 'web-app-files/src/components/Search/List.vue'
-//
-// const stubs = {
-//   'app-bar': true,
-//   'no-content-message': false,
-//   'resource-table': false,
-//   pagination: true,
-//   'list-info': true
-// }
-//
-// const selectors = {
-//   noContentMessage: '.files-empty',
-//   filesTable: '.files-table',
-//   pagination: 'pagination-stub',
-//   listInfo: 'list-info-stub'
-// }
-//
-// const user = { id: 'test' }
-//
+import { shallowMount } from '@vue/test-utils'
+import List from 'web-app-files/src/components/Search/List.vue'
+import { useResourcesViewDefaults } from 'web-app-files/src/composables'
+import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  mockAxiosResolve
+} from 'web-test-helpers/src'
+import { queryItemAsString } from 'web-pkg'
+import { ref } from 'vue'
+import { Resource } from 'web-client/src'
+import { mock } from 'jest-mock-extended'
+
+jest.mock('web-app-files/src/composables')
+jest.mock('web-pkg/src/composables/appDefaults')
+
+const selectors = {
+  noContentMessageStub: 'no-content-message-stub',
+  resourceTableStub: 'resource-table-stub',
+  tagFilter: '.files-search-filter-tags'
+}
+
 describe('List component', () => {
-  it.todo('Refactor tests')
-  //   afterEach(() => {
-  //     jest.clearAllMocks()
-  //   })
-  //
-  //   describe.each(['no search term is entered', 'no resource is found'])('when %s', (message) => {
-  //     let wrapper
-  //     beforeEach(() => {
-  //       if (message === 'no search term is entered') {
-  //         wrapper = getWrapper()
-  //       } else {
-  //         wrapper = getWrapper('epsum.txt')
-  //       }
-  //     })
-  //
-  //     it('should show no-content-message component', () => {
-  //       const noContentMessage = wrapper.find(selectors.noContentMessage)
-  //
-  //       expect(noContentMessage.exists()).toBeTruthy()
-  //       expect(wrapper.html()).toMatchSnapshot()
-  //     })
-  //     it('should not show files table', () => {
-  //       const filesTable = wrapper.find(selectors.filesTable)
-  //       const listInfo = wrapper.find(selectors.listInfo)
-  //
-  //       expect(filesTable.exists()).toBeFalsy()
-  //       expect(listInfo.exists()).toBeFalsy()
-  //     })
-  //   })
-  //
-  //   describe('when resources are found', () => {
-  //     const spyTriggerDefaultAction = jest
-  //       .spyOn(List.mixins[0].methods, '$_fileActions_triggerDefaultAction')
-  //       .mockImplementation()
-  //     const spyRowMounted = jest.spyOn(List.methods, 'rowMounted')
-  //
-  //     let wrapper
-  //     beforeEach(() => {
-  //       wrapper = getWrapper('lorem', files)
-  //     })
-  //
-  //     it('should not show no-content-message component', () => {
-  //       const noContentMessage = wrapper.find(selectors.noContentMessage)
-  //
-  //       expect(noContentMessage.exists()).toBeFalsy()
-  //     })
-  //     it('should set correct props on list-info component', () => {
-  //       const listInfo = wrapper.find(selectors.listInfo)
-  //
-  //       expect(listInfo.exists()).toBeTruthy()
-  //       expect(listInfo.props().files).toEqual(files.length)
-  //       expect(listInfo.props().folders).toEqual(0)
-  //       expect(listInfo.props().size).toEqual(getTotalSize(files))
-  //     })
-  //     it('should trigger the default action when a "fileClick" event gets emitted', async () => {
-  //       const filesTable = wrapper.find(selectors.filesTable)
-  //
-  //       expect(spyTriggerDefaultAction).toHaveBeenCalledTimes(0)
-  //
-  //       await filesTable.trigger('fileClick')
-  //
-  //       expect(spyTriggerDefaultAction).toHaveBeenCalledTimes(1)
-  //     })
-  //     it('should lazily load previews when a "rowMounted" event gets emitted', () => {
-  //       expect(spyRowMounted).toHaveBeenCalledTimes(files.length)
-  //     })
-  //   })
+  it('should render no-content-message if no resources found', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find(selectors.noContentMessageStub).exists()).toBeTruthy()
+  })
+  it('should render resource table if resources found', () => {
+    const { wrapper } = getWrapper({ resources: [mock<Resource>()] })
+    expect(wrapper.find(selectors.resourceTableStub).exists()).toBeTruthy()
+  })
+  it('should emit search event on mount', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.vm.loadAvailableTagsTask.last
+    expect(wrapper.emitted('search').length).toBeGreaterThan(0)
+  })
+  describe('filter', () => {
+    describe('tags', () => {
+      it('should show all available tags', async () => {
+        const tag = 'tag1'
+        const { wrapper } = getWrapper({ availableTags: [tag] })
+        await wrapper.vm.loadAvailableTagsTask.last
+        expect(wrapper.find(selectors.tagFilter).exists()).toBeTruthy()
+        expect(wrapper.findComponent<any>(selectors.tagFilter).props('items')).toEqual([
+          { label: tag, id: tag }
+        ])
+      })
+      it('should set initial filter when tags are given via query param', async () => {
+        const tagFilterQuery = 'tag1'
+        const { wrapper } = getWrapper({
+          availableTags: ['tag1'],
+          tagFilterQuery
+        })
+        await wrapper.vm.loadAvailableTagsTask.last
+        expect(wrapper.emitted('search')[0][0]).toEqual(tagFilterQuery)
+      })
+    })
+  })
 })
-//
-// function getWrapper(searchTerm = '', files = []) {
-//   return mount(List, {
-//     propsData: {
-//       searchResult: {
-//         totalResults: 100,
-//         values: getSearchResults(files)
-//       }
-//     },
-//     store: createStore(files),
-//     stubs,
-//     mock: {
-//       webdav: {
-//         getFileInfo: jest.fn()
-//       }
-//     }
-//   })
-// }
-//
-// function createStore(activeFiles) {
-//   return createStore({
-//     getters: {
-//       configuration: () => ({
-//         options: {
-//           disablePreviews: true
-//         }
-//       }),
-//       user: () => user
-//     },
-//     modules: {
-//       Files: {
-//         namespaced: true,
-//         state: {
-//           selectedIds: []
-//         },
-//         getters: {
-//           activeFiles: () => activeFiles,
-//           selectedFiles: () => [],
-//           totalFilesCount: () => ({ files: activeFiles.length, folders: 0 }),
-//           totalFilesSize: () => getTotalSize(activeFiles),
-//           currentFolder: () => {
-//             return {
-//               path: '',
-//               canCreate() {
-//                 return false
-//               }
-//             }
-//           }
-//         },
-//         mutations: {
-//           CLEAR_CURRENT_FILES_LIST: jest.fn(),
-//           CLEAR_FILES_SEARCHED: jest.fn(),
-//           LOAD_FILES: jest.fn()
-//         }
-//       }
-//     }
-//   })
-// }
-//
-// function getSearchResults(files) {
-//   return files.map((file) => ({ data: file, id: file.id }))
-// }
-//
-// function getTotalSize(files) {
-//   return files.reduce((total, file) => total + file.size, 0)
-// }
-//
-// const files = [
-//   {
-//     id: '1',
-//     path: 'lorem.txt',
-//     size: 100
-//   },
-//   {
-//     id: '2',
-//     path: 'lorem.pdf',
-//     size: 50
-//   }
-// ].map((file) => {
-//   return {
-//     ...file,
-//     canDownload: () => true,
-//     canBeDeleted: () => true,
-//     isReceivedShare: () => false,
-//     isMounted: () => false
-//   }
-// })
+
+function getWrapper({ availableTags = [], resources = [], tagFilterQuery = null } = {}) {
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => tagFilterQuery)
+
+  const resourcesViewDetailsMock = useResourcesViewDefaultsMock({
+    paginatedResources: ref(resources)
+  })
+  jest.mocked(useResourcesViewDefaults).mockImplementation(() => resourcesViewDetailsMock)
+
+  const mocks = defaultComponentMocks()
+  mocks.$clientService.graphAuthenticated.tags.getTags.mockReturnValue(
+    mockAxiosResolve({ value: availableTags })
+  )
+  const storeOptions = defaultStoreMockOptions
+  const store = createStore(storeOptions)
+  return {
+    mocks,
+    wrapper: shallowMount(List, {
+      global: {
+        mocks,
+        stubs: {
+          FilesViewWrapper: false
+        },
+        plugins: [...defaultPlugins(), store]
+      }
+    })
+  }
+}
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 72a09a46783..769d67bbf12 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -272,9 +272,15 @@ export default defineComponent({
       this.optionsDrop.hide()
 
       if (this.term && this.activePreviewIndex === null) {
+        const currentQuery = unref(this.$router.currentRoute).query
+
         this.$router.push(
           createLocationCommon('files-common-search', {
-            query: { term: this.term, provider: 'files.sdk' }
+            query: {
+              ...(currentQuery && { ...currentQuery }),
+              term: this.term,
+              provider: 'files.sdk'
+            }
           })
         )
       }
@@ -344,8 +350,10 @@ export default defineComponent({
       return this.searchResults.find(({ providerId }) => providerId === provider.id)?.result
     },
     getMoreResultsLinkForProvider(provider) {
+      const currentQuery = unref(this.$router.currentRoute).query
+
       return createLocationCommon('files-common-search', {
-        query: { term: this.term, provider: provider.id }
+        query: { ...(currentQuery && { ...currentQuery }), term: this.term, provider: provider.id }
       })
     },
     getMoreResultsDetailsTextForProvider(provider) {
diff --git a/packages/web-app-search/src/views/List.vue b/packages/web-app-search/src/views/List.vue
index ae57927ab99..701ea5bff22 100644
--- a/packages/web-app-search/src/views/List.vue
+++ b/packages/web-app-search/src/views/List.vue
@@ -1,13 +1,16 @@
 <template>
-  <component :is="listSearch.component" :search-result="searchResult" :loading="loading" />
+  <component
+    :is="listSearch.component"
+    :search-result="searchResult"
+    :loading="loading"
+    @search="search"
+  />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 import { providerStore } from '../service'
-import { debounce } from 'lodash-es'
-import { queryItemAsString } from 'web-pkg/src'
 
 export default defineComponent({
   data() {
@@ -26,29 +29,10 @@ export default defineComponent({
       listSearch
     }
   },
-  watch: {
-    '$route.query': {
-      handler: function (newVal, oldVal) {
-        if (newVal?.term === oldVal?.term) {
-          return
-        }
-
-        this.$nextTick(() => {
-          this.debouncedSearch()
-        })
-      },
-      immediate: true
-    }
-  },
-  created() {
-    this.debouncedSearch = debounce(this.search, 10)
-  },
   methods: {
-    async search() {
+    async search(term: string) {
       this.loading = true
-      this.searchResult = await this.listSearch.search(
-        queryItemAsString(this.$route.query.term) || ''
-      )
+      this.searchResult = await this.listSearch.search(term || '')
       this.loading = false
     }
   }
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index c8106dbaca5..a6a783bbd5c 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -1,8 +1,13 @@
 import SearchBar from '../../../src/portals/SearchBar.vue'
-import { createLocationCommon } from 'web-app-files/src/router'
 import flushPromises from 'flush-promises'
 import { defineComponent } from 'vue'
-import { createStore, defaultPlugins, mount, defaultStoreMockOptions } from 'web-test-helpers'
+import {
+  createStore,
+  defaultPlugins,
+  mount,
+  defaultStoreMockOptions,
+  defaultComponentMocks
+} from 'web-test-helpers'
 import { ProviderStore } from 'web-app-search/src/service/providerStore'
 
 const component = defineComponent({
@@ -222,11 +227,10 @@ describe('Search Bar portal component', () => {
     await flushPromises()
     wrapper.find(selectors.searchInput).trigger('keyup.enter')
     expect(spyRouterPushStub).toHaveBeenCalledTimes(1)
-    expect(spyRouterPushStub).toHaveBeenCalledWith(
-      createLocationCommon('files-common-search', {
-        query: { term: 'albert', provider: 'files.sdk' }
-      })
-    )
+    expect(spyRouterPushStub).toHaveBeenCalledWith({
+      name: 'files-common-search',
+      query: expect.objectContaining({ term: 'albert', provider: 'files.sdk' })
+    })
   })
   test('does not navigate to files-common-search route on key press enter if no search term is given', async () => {
     wrapper = getMountedWrapper().wrapper
@@ -240,15 +244,8 @@ describe('Search Bar portal component', () => {
 
 function getMountedWrapper({ data = {}, mocks = {}, isUserContextReady = true } = {}) {
   const localMocks = {
-    $gettextInterpolate: (text) => text,
-    $gettext: (text) => text,
-    $route: {
-      name: ''
-    },
-    $router: {
-      go: jest.fn(),
-      push: jest.fn()
-    },
+    ...defaultComponentMocks(),
+    $route: { name: '' },
     ...mocks
   }
 
diff --git a/packages/web-app-search/tests/unit/views/List.spec.ts b/packages/web-app-search/tests/unit/views/List.spec.ts
index d0536db8a2c..f74e05abaad 100644
--- a/packages/web-app-search/tests/unit/views/List.spec.ts
+++ b/packages/web-app-search/tests/unit/views/List.spec.ts
@@ -14,22 +14,27 @@ const mockProvider = {
 }
 
 beforeEach(() => {
-  providerStore.providers = []
+  providerStore.providers = [mockProvider]
 })
 
 describe('search result List view', () => {
-  test('it requests the listSearch from the current active provider', () => {
-    providerStore.providers = [mockProvider]
-    const mocks = { ...defaultComponentMocks() }
-    mocks.$route.query = { provider: 'p1' }
-    const wrapper = mount(List, {
-      global: {
-        stubs: {
-          OcSpinner: true
-        },
-        mocks
-      }
-    })
+  it('requests the listSearch from the current active provider', () => {
+    const { wrapper } = getWrapper()
     expect(wrapper.vm.$data.listSearch).toMatchObject(mockProvider.listSearch)
   })
+  it('triggers the search', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.vm.search('term')
+    expect(mockProvider.listSearch.search).toHaveBeenCalledTimes(1)
+  })
 })
+
+const getWrapper = () => {
+  const mocks = { ...defaultComponentMocks() }
+  mocks.$route.query = { provider: 'p1' }
+  return {
+    wrapper: mount(List, {
+      global: { mocks }
+    })
+  }
+}
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index c045bce7af2..98e66e6d898 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -103,7 +103,7 @@ export default defineComponent({
     }
   },
   emits: ['selectionChange'],
-  setup: function (props, { emit }) {
+  setup: function (props, { emit, expose }) {
     const router = useRouter()
     const currentRoute = useRoute()
     const filterInputRef = ref()
@@ -198,12 +198,18 @@ export default defineComponent({
       }
     })
 
-    onMounted(() => {
+    const setSelectedItemsBasedOnQuery = () => {
       const queryStr = queryItemAsString(unref(currentRouteQuery))
       if (queryStr) {
         const ids = queryStr.split('+')
         selectedItems.value = props.items.filter((s: any) => ids.includes(s.id))
       }
+    }
+
+    expose({ setSelectedItemsBasedOnQuery })
+
+    onMounted(() => {
+      setSelectedItemsBasedOnQuery()
     })
 
     return {
@@ -247,4 +253,3 @@ export default defineComponent({
   }
 }
 </style>
-