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,
@@ -274,6 +275,9 @@ export default defineComponent({
     const language = useGettext()
     const areFileExtensionsShown = computed(() => unref(store.state.Files.areFileExtensionsShown))
 
+    const appsStore = useAppsStore()
+    const { newFileHandlers } = storeToRefs(appsStore)
+
     useUpload({ uppyService })
 
     if (!uppyService.getPlugin('HandleUpload')) {
@@ -306,12 +310,10 @@ export default defineComponent({
 
     const createNewShortcutAction = computed(() => unref(createNewShortcut)[0].handler)
 
-    const newFileHandlers = computed(() => store.getters.newFileHandlers)
-
     const { actions: createNewFileActions } = useFileActionsCreateNewFile({
       store,
       space: props.space,
-      newFileHandlers: newFileHandlers
+      newFileHandlers
     })
 
     const mimetypesAllowedForCreation = computed(() => {
@@ -432,6 +434,7 @@ export default defineComponent({
     return {
       ...useFileActions({ store }),
       ...useRequest(),
+      newFileHandlers,
       clientService,
       isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-link'),
       isSpacesGenericLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-generic'),
@@ -457,7 +460,7 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapGetters(['configuration', 'newFileHandlers']),
+    ...mapGetters(['configuration']),
     ...mapGetters('Files', ['files', 'selectedFiles', 'clipboardResources']),
     ...mapGetters('runtime/ancestorMetaData', ['ancestorMetaData']),
 

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

@@ -207,14 +207,8 @@ function getWrapper({
     })
   )
 
-  const storeOptions = {
-    ...defaultStoreMockOptions,
-    getters: {
-      ...defaultStoreMockOptions.getters,
-      newFileHandlers: () => newFileHandlers,
-      user: () => ({ id: '1' })
-    }
-  }
+  const storeOptions = { ...defaultStoreMockOptions }
+
   storeOptions.getters.apps.mockImplementation(() => ({
     fileEditors: []
   }))
@@ -245,6 +239,7 @@ function getWrapper({
         plugins: [
           ...defaultPlugins({
             piniaOptions: {
+              appsState: { newFileHandlers },
               spacesState: { spaces: spaces as any },
               capabilityState: { capabilities }
             }

packages/web-app-preview/src/App.vue

@@ -89,6 +89,7 @@ import {
   AppTopBar,
   FileSideBar,
   ProcessorType,
+  useAppsStore,
   useSelectedResources,
   useSideBar
 } from '@ownclouders/web-pkg'
@@ -111,26 +112,10 @@ import { CachedFile } from './helpers/types'
 import AppBanner from '@ownclouders/web-pkg/src/components/AppBanner.vue'
 import { watch } from 'vue'
 import { getCurrentInstance } from 'vue'
+import { getMimeTypes } from './mimeTypes'
 
 export const appId = 'preview'
 
-export const mimeTypes = () => {
-  return [
-    'audio/flac',
-    'audio/mpeg',
-    'audio/ogg',
-    'audio/wav',
-    'audio/x-flac',
-    'audio/x-wav',
-    'image/gif',
-    'image/jpeg',
-    'image/png',
-    'video/mp4',
-    'video/webm',
-    ...((window as any).__$store?.getters.extensionConfigByAppId(appId).mimeTypes || [])
-  ]
-}
-
 export default defineComponent({
   name: 'Preview',
   components: {
@@ -145,6 +130,7 @@ export default defineComponent({
   setup() {
     const router = useRouter()
     const route = useRoute()
+    const appsStore = useAppsStore()
     const appDefaults = useAppDefaults({ applicationId: 'preview' })
     const contextRouteQuery = useRouteQuery('contextRouteQuery')
     const { downloadFile } = useDownloadFile()
@@ -153,6 +139,10 @@ export default defineComponent({
     const cachedFiles = ref<CachedFile[]>([])
     const folderLoaded = ref(false)
 
+    const mimeTypes = computed(() => {
+      return getMimeTypes(appsStore.getExternalAppConfigByAppId(appId)?.mimeTypes)
+    })
+
     const sortBy = computed(() => {
       if (!unref(contextRouteQuery)) {
         return 'name'
@@ -189,7 +179,7 @@ export default defineComponent({
       }
 
       const files = unref(activeFiles).filter((file) => {
-        return mimeTypes().includes(file.mimeType?.toLowerCase())
+        return unref(mimeTypes).includes(file.mimeType?.toLowerCase())
       })
 
       return sortHelper(files, [{ name: unref(sortBy) }], unref(sortBy), unref(sortDir))

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

@@ -1,41 +1,48 @@
+import { defineWebApplication, useAppsStore } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import * as app from './App.vue'
-const { default: App, mimeTypes, appId } = app as any
+import { useGettext } from 'vue3-gettext'
+import { getMimeTypes } from './mimeTypes'
 
-// just a dummy function to trick gettext tools
-function $gettext(msg) {
-  return msg
-}
+const { default: App, appId } = app as any
 
-const routes = [
-  {
-    path: '/:driveAliasAndItem(.*)?',
-    component: App,
-    name: 'media',
-    meta: {
-      authContext: 'hybrid',
-      title: $gettext('Preview'),
-      patchCleanPath: true
-    }
-  }
-]
+export default defineWebApplication({
+  setup() {
+    const { $gettext } = useGettext()
+    const appsStore = useAppsStore()
+
+    const routes = [
+      {
+        path: '/:driveAliasAndItem(.*)?',
+        component: App,
+        name: 'media',
+        meta: {
+          authContext: 'hybrid',
+          title: $gettext('Preview'),
+          patchCleanPath: true
+        }
+      }
+    ]
 
-const routeName = 'preview-media'
+    const routeName = 'preview-media'
 
-const appInfo = {
-  name: $gettext('Preview'),
-  id: appId,
-  icon: 'eye',
-  extensions: mimeTypes().map((mimeType) => ({
-    mimeType,
-    routeName,
-    label: $gettext('Preview')
-  }))
-}
+    const appInfo = {
+      name: $gettext('Preview'),
+      id: appId,
+      icon: 'eye',
+      extensions: getMimeTypes(appsStore.getExternalAppConfigByAppId(appId)?.mimeTypes).map(
+        (mimeType) => ({
+          mimeType,
+          routeName,
+          label: $gettext('Preview')
+        })
+      )
+    }
 
-export default {
-  appInfo,
-  routes,
-  translations,
-  mimeTypes
-}
+    return {
+      appInfo,
+      routes,
+      translations
+    }
+  }
+})

packages/web-app-preview/src/mimeTypes.ts

@@ -0,0 +1,16 @@
+export const getMimeTypes = (extensionMimeTypes: string[] = []) => {
+  return [
+    'audio/flac',
+    'audio/mpeg',
+    'audio/ogg',
+    'audio/wav',
+    'audio/x-flac',
+    'audio/x-wav',
+    'image/gif',
+    'image/jpeg',
+    'image/png',
+    'video/mp4',
+    'video/webm',
+    ...extensionMimeTypes
+  ]
+}

packages/web-app-text-editor/src/index.ts

@@ -1,12 +1,18 @@
 import { useGettext } from 'vue3-gettext'
 import translations from '../l10n/translations.json'
 import TextEditor from './App.vue'
-import { AppWrapperRoute, defineWebApplication, useUserStore } from '@ownclouders/web-pkg'
+import {
+  AppWrapperRoute,
+  defineWebApplication,
+  useAppsStore,
+  useUserStore
+} from '@ownclouders/web-pkg'
 
 export default defineWebApplication({
   setup() {
     const { $gettext } = useGettext()
     const userStore = useUserStore()
+    const appsStore = useAppsStore()
 
     const appId = 'text-editor'
 
@@ -50,11 +56,13 @@ export default defineWebApplication({
         }
       ]
 
-      const config = (window as any).__$store.getters.extensionConfigByAppId(appId)
+      const config = appsStore.getExternalAppConfigByAppId(appId)
       extensions.push(...(config.extraExtensions || []).map((ext) => ({ extension: ext })))
 
-      let primaryExtensions = (window as any).__$store.getters.extensionConfigByAppId(appId)
-        .primaryExtensions || ['txt', 'md']
+      let primaryExtensions = appsStore.getExternalAppConfigByAppId(appId).primaryExtensions || [
+        'txt',
+        'md'
+      ]
 
       if (typeof primaryExtensions === 'string') {
         primaryExtensions = [primaryExtensions]

packages/web-pkg/src/apps/types.ts

@@ -2,9 +2,9 @@ import { App, ComponentCustomProperties, Ref } from 'vue'
 import { RouteLocationRaw, Router, RouteRecordRaw } from 'vue-router'
 import { Module, Store } from 'vuex'
 import { Extension } from '../composables/piniaStores'
+import { IconFillType } from '../helpers'
 
 export interface AppReadyHookArgs {
-  announceExtension: (extension: { [key: string]: unknown }) => void
   globalProperties: ComponentCustomProperties & Record<string, any>
   router: Router
   store: Store<unknown>
@@ -42,18 +42,44 @@ export interface ApplicationQuickAction {
 export type AppConfigObject = Record<string, any>
 
 export interface ApplicationMenuItem {
-  enabled: () => boolean
-  priority: number
+  enabled?: () => boolean
+  priority?: number
   openAsEditor?: boolean
 }
 
+export interface ApplicationNewFileHandler {
+  action?: ApplicationFileEditor
+  ext?: string
+  menuTitle?: () => string
+  routes?: RouteLocationRaw[]
+}
+
+export interface ApplicationFileEditor {
+  app?: string
+  extension?: string
+  handler?: () => Promise<void> | void
+  hasPriority?: boolean
+  label?: string
+  mimeType?: string
+  routeName?: string
+}
+
+export interface ApplicationInformationExtension extends ApplicationFileEditor {
+  newFileMenu?: ApplicationNewFileHandler
+  routes?: RouteLocationRaw[]
+}
+
 /** ApplicationInformation describes required information of an application */
 export interface ApplicationInformation {
+  color?: string
   id?: string
   name?: string
   icon?: string
+  iconFillType?: IconFillType
+  iconColor?: string
+  img?: string
   isFileEditor?: boolean
-  extensions?: any[]
+  extensions?: ApplicationInformationExtension[]
   defaultExtension?: string
   applicationMenu?: ApplicationMenuItem
 }

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -54,7 +54,8 @@ import {
   useSideBar,
   useModals,
   useMessages,
-  useSpacesStore
+  useSpacesStore,
+  useAppsStore
 } from '../../composables'
 import {
   Action,
@@ -106,6 +107,7 @@ export default defineComponent({
   setup(props) {
     const { $gettext } = useGettext()
     const store = useStore()
+    const appsStore = useAppsStore()
     const { showMessage, showErrorMessage } = useMessages()
     const router = useRouter()
     const currentRoute = useRoute()
@@ -166,7 +168,7 @@ export default defineComponent({
       applicationId: props.applicationId
     })
 
-    const { applicationMeta } = useAppMeta({ applicationId: props.applicationId, store })
+    const { applicationMeta } = useAppMeta({ applicationId: props.applicationId, appsStore })
 
     const pageTitle = computed(() => {
       const { name: appName } = unref(applicationMeta)