refactor: search provider registration

packages/web-app-files/src/extensions.ts

@@ -0,0 +1,28 @@
+import {
+  ApplicationSetupOptions,
+  Extension,
+  useStore,
+  useRouter,
+  useClientService,
+  useConfigurationManager
+} from '@ownclouders/web-pkg'
+import { computed } from 'vue'
+import { SDKSearch } from './search'
+
+export const extensions = ({ applicationConfig }: ApplicationSetupOptions) => {
+  const store = useStore()
+  const router = useRouter()
+  const clientService = useClientService()
+  const configurationManager = useConfigurationManager()
+
+  return computed(
+    () =>
+      [
+        {
+          id: 'com.github.owncloud.web.files.search',
+          type: 'search',
+          searchProvider: new SDKSearch(store, router, clientService, configurationManager)
+        }
+      ] satisfies Extension[]
+  )
+}

packages/web-app-files/src/index.ts

@@ -8,14 +8,12 @@ import SpaceDriveResolver from './views/spaces/DriveResolver.vue'
 import SpaceProjects from './views/spaces/Projects.vue'
 import TrashOverview from './views/trash/Overview.vue'
 import translations from '../l10n/translations.json'
-import { quickActions } from '@ownclouders/web-pkg'
+import { defineWebApplication, quickActions } from '@ownclouders/web-pkg'
 import store from './store'
-import { SDKSearch } from './search'
-import { eventBus } from '@ownclouders/web-pkg'
-import { Registry } from './services'
+import { extensions } from './extensions'
 import fileSideBars from './fileSideBars'
 import { buildRoutes } from '@ownclouders/web-pkg'
-import { AppNavigationItem, AppReadyHookArgs } from '@ownclouders/web-pkg'
+import { AppNavigationItem } from '@ownclouders/web-pkg'
 
 // dirty: importing view from other extension within project
 import SearchResults from '../../web-app-search/src/views/List.vue'
@@ -24,7 +22,6 @@ import {
   isPersonalSpaceResource,
   isShareSpaceResource
 } from '@ownclouders/web-client/src/helpers'
-import { configurationManager } from '@ownclouders/web-pkg'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -40,7 +37,7 @@ const appInfo = {
   extensions: [],
   fileSideBars
 }
-const navItems = (context): AppNavigationItem[] => {
+export const navItems = (context): AppNavigationItem[] => {
   return [
     {
       name(capabilities) {
@@ -121,36 +118,33 @@ const navItems = (context): AppNavigationItem[] => {
   ]
 }
 
-export default {
-  appInfo,
-  store,
-  routes: buildRoutes({
-    App,
-    Favorites,
-    FilesDrop,
-    SearchResults,
-    Shares: {
-      SharedViaLink,
-      SharedWithMe,
-      SharedWithOthers
-    },
-    Spaces: {
-      DriveResolver: SpaceDriveResolver,
-      Projects: SpaceProjects
-    },
-    Trash: {
-      Overview: TrashOverview
+export default defineWebApplication({
+  setup(args) {
+    return {
+      appInfo,
+      store,
+      routes: buildRoutes({
+        App,
+        Favorites,
+        FilesDrop,
+        SearchResults,
+        Shares: {
+          SharedViaLink,
+          SharedWithMe,
+          SharedWithOthers
+        },
+        Spaces: {
+          DriveResolver: SpaceDriveResolver,
+          Projects: SpaceProjects
+        },
+        Trash: {
+          Overview: TrashOverview
+        }
+      }),
+      navItems,
+      quickActions,
+      translations,
+      extensions: extensions(args)
     }
-  }),
-  navItems,
-  quickActions,
-  translations,
-  ready({ router, store, globalProperties }: AppReadyHookArgs) {
-    const { $clientService } = globalProperties
-    Registry.sdkSearch = new SDKSearch(store, router, $clientService, configurationManager)
-
-    // when discussing the boot process of applications we need to implement a
-    // registry that does not rely on call order, aka first register "on" and only after emit.
-    eventBus.publish('app.search.register.provider', Registry.sdkSearch)
   }
-}
+})

packages/web-app-files/tests/unit/index.spec.ts

@@ -1,27 +1,27 @@
-import WebAppFiles from '../../src/index'
+import { navItems } from '../../src/index'
 
 describe('Web app files', () => {
   describe('navItems', () => {
     describe('Personal', () => {
       it('should be enabled if user has a personal space', () => {
-        const navItems = WebAppFiles.navItems({
+        const items = navItems({
           $store: {
             getters: {
               'runtime/spaces/spaces': [{ id: '1', driveType: 'personal', isOwner: () => true }]
             }
           }
         })
-        expect(navItems[0].enabled({ spaces: { enabled: true } })).toBeTruthy()
+        expect(items[0].enabled({ spaces: { enabled: true } })).toBeTruthy()
       })
       it('should be disabled if user has no a personal space', () => {
-        const navItems = WebAppFiles.navItems({
+        const items = navItems({
           $store: {
             getters: {
               'runtime/spaces/spaces': [{ id: '1', driveType: 'project', isOwner: () => false }]
             }
           }
         })
-        expect(navItems[0].enabled({ spaces: { enabled: true } })).toBeFalsy()
+        expect(items[0].enabled({ spaces: { enabled: true } })).toBeFalsy()
       })
     })
   })

packages/web-app-search/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './useAvailableProviders'

packages/web-app-search/src/composables/useAvailableProviders.ts

@@ -0,0 +1,14 @@
+import { SearchExtension, SearchProvider, useExtensionRegistry } from '@ownclouders/web-pkg'
+import { computed, Ref } from 'vue'
+
+export const useAvailableProviders = (): Ref<SearchProvider[]> => {
+  const extensionRegistry = useExtensionRegistry()
+
+  const availableProviders = computed(() => {
+    return extensionRegistry
+      .requestExtensions<SearchExtension>('search')
+      .map(({ searchProvider }) => searchProvider)
+  })
+
+  return availableProviders
+}

packages/web-app-search/src/index.ts

@@ -1,8 +1,6 @@
 import SearchBar from './portals/SearchBar.vue'
 import App from './App.vue'
 import List from './views/List.vue'
-import { providerStore } from './service'
-import { eventBus, SearchProvider } from '@ownclouders/web-pkg'
 import { Component } from 'vue'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -13,10 +11,6 @@ const $gettext = (msg) => {
   return msg
 }
 
-eventBus.subscribe('app.search.register.provider', (provider: SearchProvider) => {
-  providerStore.addProvider(provider)
-})
-
 export default {
   appInfo: {
     name: $gettext('Search'),

packages/web-app-search/src/portals/SearchBar.vue

@@ -103,7 +103,6 @@
 </template>
 
 <script lang="ts">
-import { providerStore } from '../service'
 import {
   createLocationCommon,
   isLocationCommonActive,
@@ -116,6 +115,7 @@ import { eventBus } from '@ownclouders/web-pkg'
 import { computed, defineComponent, GlobalComponents, inject, Ref, ref, unref, watch } from 'vue'
 import { SearchLocationFilterConstants } from '@ownclouders/web-pkg'
 import { SearchBarFilter } from '@ownclouders/web-pkg'
+import { useAvailableProviders } from '../composables'
 
 export default defineComponent({
   name: 'SearchBar',
@@ -126,7 +126,7 @@ export default defineComponent({
     const showCancelButton = ref(false)
     const isMobileWidth = inject<Ref<boolean>>('isMobileWidth')
     const scopeQueryValue = useRouteQuery('scope')
-    const shareId = useRouteQuery('shareId')
+    const availableProviders = useAvailableProviders()
     const locationFilterId = ref(SearchLocationFilterConstants.everywhere)
     const optionsDropRef = ref(null)
     const activePreviewIndex = ref(null)
@@ -153,18 +153,10 @@ export default defineComponent({
       }
     })
 
-    const isShareRoute = () => {
-      return !!shareId.value
-    }
-
     const optionsDrop = computed(() => {
       return unref(optionsDropRef) as InstanceType<GlobalComponents['OcDrop']>
     })
 
-    const availableProviders = computed(() => {
-      return unref(providerStore)?.availableProviders
-    })
-
     const search = async () => {
       searchResults.value = []
       if (!unref(term)) {
@@ -282,7 +274,6 @@ export default defineComponent({
       onKeyUpEnter,
       searchResults,
       loading,
-      providerStore,
       availableProviders,
       search,
       showPreview,

packages/web-app-search/src/views/List.vue

@@ -8,42 +8,44 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-
-import { providerStore } from '../service'
+import { computed, defineComponent, ref, unref } from 'vue'
+import { queryItemAsString, useRouteQuery } from '@ownclouders/web-pkg'
+import { useAvailableProviders } from '../composables'
 
 export default defineComponent({
-  data() {
-    const { provider: providerId } = this.$route.query
-    const { listSearch } = providerStore.availableProviders.find(
-      (provider) => provider.id === providerId
-    )
-    // abort and return if no provider is found
-    return {
-      loading: false,
-      debouncedSearch: undefined,
-      searchResult: {
-        values: [],
-        totalResults: null
-      },
-      listSearch
-    }
-  },
-  methods: {
-    async search(term: string) {
-      this.loading = true
+  setup() {
+    const availableProviders = useAvailableProviders()
+    const providerId = useRouteQuery('provider')
+
+    const listSearch = computed(() => {
+      const { listSearch } = unref(availableProviders).find(
+        (provider) => provider.id === queryItemAsString(unref(providerId))
+      )
+      return listSearch
+    })
+
+    const loading = ref(false)
+    const searchResult = ref({
+      values: [],
+      totalResults: null
+    })
+
+    const search = async (term: string) => {
+      loading.value = true
       try {
-        this.searchResult = await this.listSearch.search(term || '')
+        searchResult.value = await unref(listSearch).search(term || '')
       } catch (e) {
-        this.searchResult = {
+        searchResult.value = {
           values: [],
           totalResults: null
         }
         console.error(e)
       }
 
-      this.loading = false
+      loading.value = false
     }
+
+    return { listSearch, loading, searchResult, search }
   }
 })
 </script>

packages/web-app-search/tests/unit/portals/SearchBar.spec.ts

@@ -1,6 +1,7 @@
 import SearchBar from '../../../src/portals/SearchBar.vue'
 import flushPromises from 'flush-promises'
 import { mock } from 'jest-mock-extended'
+import { ref } from 'vue'
 import { defineComponent } from 'vue'
 import {
   createStore,
@@ -10,6 +11,7 @@ import {
   defaultComponentMocks,
   RouteLocation
 } from 'web-test-helpers'
+import { useAvailableProviders } from '../../../src/composables'
 
 const component = defineComponent({
   emits: ['click', 'keyup'],
@@ -57,13 +59,8 @@ const selectors = {
 }
 
 jest.mock('lodash-es/debounce', () => (fn) => fn)
-jest.mock('web-app-search/src/service/providerStore', () => ({
-  get providerStore() {
-    return {
-      availableProviders: [providerFiles, providerContacts]
-    }
-  }
-}))
+jest.mock('../../../src/composables/useAvailableProviders')
+
 beforeEach(() => {
   providerFiles.previewSearch.search.mockImplementation(() => {
     return {
@@ -220,6 +217,8 @@ describe('Search Bar portal component', () => {
 })
 
 function getMountedWrapper({ data = {}, mocks = {}, isUserContextReady = true } = {}) {
+  jest.mocked(useAvailableProviders).mockReturnValue(ref([providerFiles, providerContacts]))
+
   const currentRoute = mock<RouteLocation>({
     name: 'files-spaces-generic',
     query: {