refactor: move app vuex store to pinia

Removes the vuex app store module in favour of a pinia store instead. Also cleans up the app types a bit, although this is still a bit messy due to some weird naming choices in the past. That's something for a follow-up though.

Also removes the `announceExtensions` method inside the app's `ready` hook, which could be used to register file editors. Apparently it was not used by any app because there is already another way to register file editors, which is via the `extensions` property inside the `appInfo` object.

changelog/unreleased/change-registering-app-file-editors

@@ -0,0 +1,6 @@
+Change: Registering app file editors
+
+BREAKING CHANGE for developers: The `announceExtensions` method inside the app's `ready` hook, which could be used to register file editors, has been removed. Developers should use the `extensions` property inside the `appInfo` object instead.
+
+https://github.com/owncloud/web/pull/10330
+https://github.com/owncloud/web/issues/10210

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -190,6 +190,7 @@ import { mapActions, mapGetters } from 'vuex'
 import {
   isLocationPublicActive,
   isLocationSpacesActive,
+  useAppsStore,
   useCapabilityStore,
   useFileActions,
   useFileActionsCreateNewShortcut,
@@ -267,6 +268,7 @@ export default defineComponent({
     const store = useStore()
     const userStore = useUserStore()
     const spacesStore = useSpacesStore()
+    const appsStore = useAppsStore()
     const messageStore = useMessages()
     const capabilityStore = useCapabilityStore()
     const capabilityRefs = storeToRefs(capabilityStore)
@@ -306,12 +308,14 @@ export default defineComponent({
 
     const createNewShortcutAction = computed(() => unref(createNewShortcut)[0].handler)
 
-    const newFileHandlers = computed(() => store.getters.newFileHandlers)
+    const appNewFileMenuExtensions = computed(() =>
+      appsStore.fileExtensions.filter(({ newFileMenu }) => !!newFileMenu)
+    )
 
     const { actions: createNewFileActions } = useFileActionsCreateNewFile({
       store,
       space: props.space,
-      newFileHandlers: newFileHandlers
+      appNewFileMenuExtensions
     })
 
     const mimetypesAllowedForCreation = computed(() => {
@@ -432,6 +436,7 @@ export default defineComponent({
     return {
       ...useFileActions({ store }),
       ...useRequest(),
+      appNewFileMenuExtensions,
       clientService,
       isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-link'),
       isSpacesGenericLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-generic'),
@@ -457,7 +462,7 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapGetters(['configuration', 'newFileHandlers']),
+    ...mapGetters(['configuration']),
     ...mapGetters('Files', ['files', 'selectedFiles', 'clipboardResources']),
     ...mapGetters('runtime/ancestorMetaData', ['ancestorMetaData']),
 
@@ -473,7 +478,7 @@ export default defineComponent({
     },
 
     createFileActionsAvailable() {
-      return this.newFileHandlers.length > 0 || this.mimetypesAllowedForCreation.length > 0
+      return this.appNewFileMenuExtensions.length > 0 || this.mimetypesAllowedForCreation.length > 0
     },
     newButtonTooltip() {
       if (!this.canUpload) {

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts

@@ -41,31 +41,18 @@ const elSelector = {
   clearClipboardBtn: '.clear-clipboard-btn'
 }
 
-const fileHandlerMocks = [
+const fileExtensionMocks = [
   {
-    ext: 'txt',
-    action: {
-      app: 'text-editor',
-      extension: 'txt'
-    },
-    menuTitle: () => 'Plain text file'
+    extension: 'txt',
+    newFileMenu: { menuTitle: () => 'Plain text file' }
   },
   {
-    ext: 'md',
-    action: {
-      app: 'text-editor',
-      extension: 'md'
-    },
-    menuTitle: () => 'Mark-down file'
+    extension: 'md',
+    newFileMenu: { menuTitle: () => 'Mark-down file' }
   },
   {
-    ext: 'drawio',
-    action: {
-      app: 'draw-io',
-      routeName: 'draw-io-edit',
-      extension: 'drawio'
-    },
-    menuTitle: () => 'Draw.io document'
+    extension: 'drawio',
+    newFileMenu: { menuTitle: () => 'Draw.io document' }
   }
 ]
 
@@ -95,12 +82,12 @@ describe('CreateAndUpload component', () => {
       expect(wrapper.findAll(elSelector.resourceUpload).length).toBe(2)
     })
     it('should show additional handlers', () => {
-      const { wrapper } = getWrapper({ newFileHandlers: fileHandlerMocks })
+      const { wrapper } = getWrapper({ fileExtensions: fileExtensionMocks })
       expect(wrapper.html()).toMatchSnapshot()
     })
     it('should show file extension if file extensions are enabled', () => {
       const { wrapper } = getWrapper({
-        newFileHandlers: fileHandlerMocks,
+        fileExtensions: fileExtensionMocks,
         areFileExtensionsShown: true
       })
       expect(wrapper.html()).toMatchSnapshot()
@@ -180,7 +167,7 @@ describe('CreateAndUpload component', () => {
 })
 
 function getWrapper({
-  newFileHandlers = [],
+  fileExtensions = [],
   clipboardResources = [],
   files = [],
   currentFolder = mock<Resource>({ canUpload: () => true }),
@@ -207,17 +194,7 @@ function getWrapper({
     })
   )
 
-  const storeOptions = {
-    ...defaultStoreMockOptions,
-    getters: {
-      ...defaultStoreMockOptions.getters,
-      newFileHandlers: () => newFileHandlers,
-      user: () => ({ id: '1' })
-    }
-  }
-  storeOptions.getters.apps.mockImplementation(() => ({
-    fileEditors: []
-  }))
+  const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.modules.Files.state.areFileExtensionsShown = areFileExtensionsShown
   storeOptions.modules.Files.getters.currentFolder.mockImplementation(() => currentFolder)
   storeOptions.modules.Files.getters.clipboardResources.mockImplementation(() => clipboardResources)
@@ -245,6 +222,7 @@ function getWrapper({
         plugins: [
           ...defaultPlugins({
             piniaOptions: {
+              appsState: { fileExtensions },
               spacesState: { spaces: spaces as any },
               capabilityState: { capabilities }
             }