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.
owncloud · Jan 12, 2024 · 3d1cdeb · 3d1cdeb
1 parent 015dd7b
commit 3d1cdeb
Show file tree

Hide file tree

Showing 35 changed files with 315 additions and 361 deletions.
diff --git a/changelog/unreleased/change-registering-app-file-editors b/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
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/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']),
 

diff --git a/packages/web-app-files/tests/__fixtures__/fileActions.ts b/packages/web-app-files/tests/__fixtures__/fileActions.ts
@@ -1,26 +1,3 @@
-export const meta = {
-  files: {
-    name: 'Files',
-    id: 'files',
-    icon: 'folder'
-  },
-  preview: {
-    name: 'Preview',
-    id: 'preview',
-    icon: 'image'
-  },
-  'draw-io': {
-    name: 'Draw.io',
-    id: 'draw-io',
-    icon: 'grid'
-  },
-  'text-editor': {
-    name: 'Text Editor',
-    id: 'text-editor',
-    icon: 'file-text'
-  }
-}
-
 const routes = [
   'files-personal',
   'files-favorites',
@@ -56,17 +33,6 @@ export const editors = [
   }
 ]
 
-export const apps = {
-  customFileListIndicators: [],
-  file: {
-    edit: false,
-    path: ''
-  },
-  fileEditors: editors,
-  newFileHandlers: editors,
-  meta
-}
-
 export const fileActions = {
   download: {
     name: 'download-file',

diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts b/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 }
             }

diff --git a/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Actions/FileActions.spec.ts
@@ -1,5 +1,5 @@
 import FileActions from 'web-app-files/src/components/SideBar/Actions/FileActions.vue'
-import { fileActions, editors, meta } from 'web-app-files/tests/__fixtures__/fileActions'
+import { fileActions } from 'web-app-files/tests/__fixtures__/fileActions'
 import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { mock } from 'jest-mock-extended'
 import {
@@ -58,8 +58,6 @@ describe('FileActions', () => {
 function getWrapper() {
   const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.modules.Files.state.currentFolder = { path: '' }
-  storeOptions.modules.apps.state.fileEditors = editors
-  storeOptions.modules.apps.state.meta = meta
   const store = createStore(storeOptions)
   return {
     wrapper: mount(FileActions, {

diff --git a/packages/web-app-preview/src/App.vue b/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))

diff --git a/packages/web-app-preview/src/index.ts b/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
+    }
+  }
+})
diff --git a/packages/web-app-preview/src/mimeTypes.ts b/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
+  ]
+}
diff --git a/packages/web-app-text-editor/src/index.ts b/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]