From df7b3e0dcf707dd9de8f287d951071d74ee813be Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 16 Jan 2024 14:36:11 +0100
Subject: [PATCH] refactor: remove vuex store in external app

---
 .../change-registering-app-file-editors       |   3 +
 packages/web-app-external/package.json        |   3 +-
 packages/web-app-external/src/index.ts        |  71 +++++++-
 packages/web-app-external/src/schemas.ts      |  20 +++
 packages/web-app-external/src/store/index.ts  |  70 --------
 .../src/components/AppBar/CreateAndUpload.vue |  52 +++---
 .../components/AppBar/CreateAndUpload.spec.ts |  43 ++---
 .../CreateAndUpload.spec.ts.snap              | 101 +----------
 packages/web-pkg/src/apps/types.ts            |   7 +-
 .../components/FilesList/ContextActions.vue   |   8 +-
 .../actions/files/useFileActions.ts           | 135 ++-------------
 .../files/useFileActionsCreateNewFile.ts      | 157 +++++-------------
 .../web-pkg/src/composables/actions/types.ts  |   1 +
 .../src/composables/piniaStores/apps.ts       |   3 +-
 .../files/useFileActionsCreateNewFile.spec.ts |  54 ++----
 .../components/Topbar/ApplicationsMenu.vue    |   9 +-
 pnpm-lock.yaml                                |   3 +
 17 files changed, 220 insertions(+), 520 deletions(-)
 create mode 100644 packages/web-app-external/src/schemas.ts
 delete mode 100644 packages/web-app-external/src/store/index.ts

diff --git a/changelog/unreleased/change-registering-app-file-editors b/changelog/unreleased/change-registering-app-file-editors
index 70665897d06..01aa0bda3fa 100644
--- a/changelog/unreleased/change-registering-app-file-editors
+++ b/changelog/unreleased/change-registering-app-file-editors
@@ -2,5 +2,8 @@ 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.
 
+Note that the `handler` property of such an extension has been renamed to `createFileHandler`.
+
 https://github.com/owncloud/web/pull/10330
+https://github.com/owncloud/web/pull/10346
 https://github.com/owncloud/web/issues/10210
diff --git a/packages/web-app-external/package.json b/packages/web-app-external/package.json
index 76d10079fce..433fb40a63e 100644
--- a/packages/web-app-external/package.json
+++ b/packages/web-app-external/package.json
@@ -13,6 +13,7 @@
     "uuid": "9.0.1",
     "vue-concurrency": "4.0.1",
     "vue3-gettext": "2.4.0",
-    "vuex": "4.1.0"
+    "vuex": "4.1.0",
+    "zod": "3.22.4"
   }
 }
diff --git a/packages/web-app-external/src/index.ts b/packages/web-app-external/src/index.ts
index 183fdb7fad1..34c0cbbbb77 100644
--- a/packages/web-app-external/src/index.ts
+++ b/packages/web-app-external/src/index.ts
@@ -2,11 +2,16 @@ import {
   AppWrapperRoute,
   defineWebApplication,
   useCapabilityStore,
-  useConfigStore
+  useAppsStore,
+  useClientService,
+  useRequest
 } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import App from './App.vue'
-import store from './store'
+import { stringify } from 'qs'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { join } from 'path'
+import { AppListSchema } from './schemas'
 
 const appInfo = {
   name: 'External',
@@ -30,15 +35,69 @@ const routes = [
 export default defineWebApplication({
   setup() {
     const capabilityStore = useCapabilityStore()
-    const configStore = useConfigStore()
+    const appsStore = useAppsStore()
+    const { makeRequest } = useRequest()
+    const clientService = useClientService()
 
     return {
       appInfo,
       routes,
-      store,
       translations,
-      ready({ store }) {
-        store.dispatch('External/fetchMimeTypes', { capabilityStore, configStore })
+      ready: async () => {
+        if (!capabilityStore.filesAppProviders[0]?.enabled) {
+          return
+        }
+
+        const {
+          data: { 'mime-types': mimeTypes }
+        } = await clientService.httpUnAuthenticated.get(
+          capabilityStore.filesAppProviders[0].apps_url,
+          {
+            schema: AppListSchema
+          }
+        )
+
+        mimeTypes.forEach((mimeType) => {
+          mimeType.app_providers.forEach((provider) => {
+            appsStore.registerFileExtension({
+              appId: 'external',
+              data: {
+                extension: mimeType.ext,
+                label: mimeType.name,
+                mimeType: mimeType.mime_type,
+                routeName: 'external-apps',
+                hasPriority: mimeType.default_application === provider.name,
+                ...(mimeType.allow_creation && { newFileMenu: { menuTitle: () => mimeType.name } }),
+                createFileHandler: async ({
+                  fileName,
+                  space,
+                  currentFolder
+                }: {
+                  fileName: string
+                  space: SpaceResource
+                  currentFolder: Resource
+                }) => {
+                  if (fileName === '') {
+                    return
+                  }
+
+                  const query = stringify({
+                    parent_container_id: currentFolder.fileId,
+                    filename: fileName
+                  })
+                  const url = `${capabilityStore.filesAppProviders[0].new_url}?${query}`
+                  const response = await makeRequest('POST', url)
+                  if (response.status !== 200) {
+                    throw new Error(`An error has occurred: ${response.status}`)
+                  }
+
+                  const path = join(currentFolder.path, fileName) || ''
+                  return clientService.webdav.getFileInfo(space, { path })
+                }
+              }
+            })
+          })
+        })
       }
     }
   }
diff --git a/packages/web-app-external/src/schemas.ts b/packages/web-app-external/src/schemas.ts
new file mode 100644
index 00000000000..ef197f0065f
--- /dev/null
+++ b/packages/web-app-external/src/schemas.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+const AppProviderSchema = z.object({
+  icon: z.string(),
+  name: z.string()
+})
+
+const MimeTypeSchema = z.object({
+  allow_creation: z.boolean().optional(),
+  app_providers: z.array(AppProviderSchema),
+  default_application: z.string().optional(),
+  description: z.string().optional(),
+  ext: z.string().optional(),
+  mime_type: z.string(),
+  name: z.string().optional()
+})
+
+export const AppListSchema = z.object({
+  'mime-types': z.array(MimeTypeSchema)
+})
diff --git a/packages/web-app-external/src/store/index.ts b/packages/web-app-external/src/store/index.ts
deleted file mode 100644
index c368fd83cd8..00000000000
--- a/packages/web-app-external/src/store/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Commit } from 'vuex'
-import { urlJoin } from '@ownclouders/web-client/src/utils'
-import { CapabilityStore, ConfigStore } from '@ownclouders/web-pkg'
-import { v4 as uuidV4 } from 'uuid'
-
-interface AppProvider {
-  icon: string
-  name: string
-}
-
-/* eslint-disable camelcase */
-interface MimeType {
-  allow_creation?: boolean
-  app_providers: Array<AppProvider>
-  default_application?: string
-  description?: string
-  ext?: string
-  mime_type: string
-  name?: string
-}
-/* eslint-enable camelcase */
-
-const State = {
-  mimeTypes: []
-}
-
-const actions = {
-  async fetchMimeTypes(
-    {
-      commit
-    }: {
-      commit: Commit
-    },
-    { capabilityStore, configStore }: { capabilityStore: CapabilityStore; configStore: ConfigStore }
-  ): Promise<void> {
-    if (!capabilityStore.filesAppProviders[0]?.enabled) {
-      return
-    }
-
-    const url = urlJoin(configStore.serverUrl, capabilityStore.filesAppProviders[0].apps_url)
-    const response = await fetch(url, { headers: { 'X-Request-ID': uuidV4() } })
-
-    if (!response.ok) {
-      throw new Error('Error fetching app provider MIME types')
-    }
-
-    const { 'mime-types': mimeTypes } = await response.json()
-    commit('SET_MIME_TYPES', mimeTypes)
-  }
-}
-
-const getters = {
-  mimeTypes: (state: typeof State): Array<MimeType> => {
-    return state.mimeTypes
-  }
-}
-
-const mutations = {
-  SET_MIME_TYPES(state: typeof State, mimeTypes: Array<MimeType>): void {
-    state.mimeTypes = mimeTypes
-  }
-}
-
-export default {
-  namespaced: true,
-  state: State,
-  actions,
-  mutations,
-  getters
-}
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 2cb88d5be1c..c18242d1bc6 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -30,32 +30,26 @@
               <span v-text="$gettext('Folder')" />
             </oc-button>
           </li>
-          <template v-if="mimetypesAllowedForCreation">
+          <template v-if="externalFileActions">
             <li
-              v-for="(mimeTypeAction, key) in createNewFileMimeTypeActions"
+              v-for="(fileAction, key) in externalFileActions"
               :key="`file-creation-item-external-${key}`"
               class="create-list-file oc-menu-item-hover"
             >
-              <oc-button appearance="raw" @click="mimeTypeAction.handler">
-                <resource-icon :resource="getIconResource(mimeTypeAction)" size="medium" />
+              <oc-button appearance="raw" @click="fileAction.handler">
+                <resource-icon :resource="getIconResource(fileAction)" size="medium" />
+                <span class="create-list-file-item-text" v-text="fileAction.label()" />
                 <span
-                  class="create-list-file-item-text"
-                  v-text="$gettext(mimeTypeAction.label())"
-                />
-                <span
-                  v-if="areFileExtensionsShown && mimeTypeAction.ext"
+                  v-if="areFileExtensionsShown && fileAction.ext"
                   class="create-list-file-item-extension"
-                  v-text="mimeTypeAction.ext"
+                  v-text="fileAction.ext"
                 />
               </oc-button>
             </li>
           </template>
+          <li v-if="externalFileActions.length && appFileActions.length" class="bottom-seperator" />
           <li
-            v-if="mimetypesAllowedForCreation && createNewFileMimeTypeActions.length > 0"
-            class="bottom-seperator"
-          />
-          <li
-            v-for="(fileAction, key) in createNewFileActions"
+            v-for="(fileAction, key) in appFileActions"
             :key="`file-creation-item-${key}`"
             class="create-list-file oc-menu-item-hover"
           >
@@ -314,23 +308,16 @@ export default defineComponent({
 
     const { actions: createNewFileActions } = useFileActionsCreateNewFile({
       store,
-      space: props.space,
-      appNewFileMenuExtensions
+      space: props.space
     })
 
-    const mimetypesAllowedForCreation = computed(() => {
-      const mimeTypes = store.getters['External/mimeTypes']
-      if (!mimeTypes) {
-        return []
-      }
-      return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
-    })
+    const appFileActions = computed(() =>
+      unref(createNewFileActions).filter(({ isExternal }) => !isExternal)
+    )
 
-    const { actions: createNewFileMimeTypeActions } = useFileActionsCreateNewFile({
-      store,
-      space: props.space,
-      mimetypesAllowedForCreation: mimetypesAllowedForCreation
-    })
+    const externalFileActions = computed(() =>
+      unref(createNewFileActions).filter(({ isExternal }) => isExternal)
+    )
 
     const extensionRegistry = useExtensionRegistry()
     const extensionActions = computed(() => {
@@ -444,10 +431,9 @@ export default defineComponent({
       hasSpaces: capabilityRefs.spacesEnabled,
       canUpload,
       currentFolder,
-      createNewFileActions,
-      createNewFileMimeTypeActions,
       createNewFolder,
-      mimetypesAllowedForCreation,
+      appFileActions,
+      externalFileActions,
       createNewFolderAction,
       createNewShortcutAction,
       extensionActions,
@@ -476,7 +462,7 @@ export default defineComponent({
     },
 
     createFileActionsAvailable() {
-      return this.appNewFileMenuExtensions.length > 0 || this.mimetypesAllowedForCreation.length > 0
+      return this.appFileActions.length > 0 || this.externalFileActions.length > 0
     },
     newButtonTooltip() {
       if (!this.canUpload) {
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
index 914513a5ca2..12bb7385ff4 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -41,21 +41,6 @@ const elSelector = {
   clearClipboardBtn: '.clear-clipboard-btn'
 }
 
-const fileExtensionMocks = [
-  {
-    extension: 'txt',
-    newFileMenu: { menuTitle: () => 'Plain text file' }
-  },
-  {
-    extension: 'md',
-    newFileMenu: { menuTitle: () => 'Mark-down file' }
-  },
-  {
-    extension: 'drawio',
-    newFileMenu: { menuTitle: () => 'Draw.io document' }
-  }
-]
-
 describe('CreateAndUpload component', () => {
   describe('action buttons', () => {
     it('should show and be enabled if file creation is possible', () => {
@@ -66,7 +51,7 @@ describe('CreateAndUpload component', () => {
     })
     it('should be disabled if file creation is not possible', () => {
       const currentFolder = mock<Resource>({ canUpload: () => false })
-      const { wrapper } = getWrapper({ currentFolder })
+      const { wrapper } = getWrapper({ currentFolder, createActions: [] })
       expect(wrapper.findComponent<any>(elSelector.uploadBtn).props().disabled).toBeTruthy()
       expect(wrapper.findComponent<any>(elSelector.newFolderBtn).props().disabled).toBeTruthy()
     })
@@ -81,15 +66,8 @@ describe('CreateAndUpload component', () => {
       const { wrapper } = getWrapper()
       expect(wrapper.findAll(elSelector.resourceUpload).length).toBe(2)
     })
-    it('should show additional handlers', () => {
-      const { wrapper } = getWrapper({ fileExtensions: fileExtensionMocks })
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-    it('should show file extension if file extensions are enabled', () => {
-      const { wrapper } = getWrapper({
-        fileExtensions: fileExtensionMocks,
-        areFileExtensionsShown: true
-      })
+    it('should show entries for all new file handlers', () => {
+      const { wrapper } = getWrapper()
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
@@ -167,7 +145,6 @@ describe('CreateAndUpload component', () => {
 })
 
 function getWrapper({
-  fileExtensions = [],
   clipboardResources = [],
   files = [],
   currentFolder = mock<Resource>({ canUpload: () => true }),
@@ -177,7 +154,12 @@ function getWrapper({
   item = undefined,
   itemId = undefined,
   newFileAction = false,
-  areFileExtensionsShown = false
+  areFileExtensionsShown = false,
+  createActions = [
+    mock<FileAction>({ label: () => 'Plain text file', ext: 'txt' }),
+    mock<FileAction>({ label: () => 'Mark-down file', ext: 'md' }),
+    mock<FileAction>({ label: () => 'Draw.io document', ext: 'drawio' })
+  ]
 } = {}) {
   jest.mocked(useRequest).mockImplementation(() => ({
     makeRequest: jest.fn().mockResolvedValue({ status: 200 })
@@ -186,11 +168,7 @@ function getWrapper({
 
   jest.mocked(useFileActionsCreateNewFile).mockReturnValue(
     mock<ReturnType<typeof useFileActionsCreateNewFile>>({
-      actions: ref([
-        mock<FileAction>({ label: () => 'Plain text file', ext: 'txt' }),
-        mock<FileAction>({ label: () => 'Mark-down file', ext: 'md' }),
-        mock<FileAction>({ label: () => 'Draw.io document', ext: 'drawio' })
-      ])
+      actions: ref(createActions)
     })
   )
 
@@ -222,7 +200,6 @@ function getWrapper({
         plugins: [
           ...defaultPlugins({
             piniaOptions: {
-              appsState: { fileExtensions },
               spacesState: { spaces: spaces as any },
               capabilityState: { capabilities }
             }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index 5fe32bc7123..90323f2a788 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -1,39 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CreateAndUpload component action buttons should show and be enabled if file creation is possible 1`] = `
-<div class="create-and-upload-actions oc-flex-inline oc-mr-s">
-  <span>
-    <button aria-label="New folder" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-folder-btn" type="button">
-      <!--v-if-->
-      <!-- @slot Content of the button -->
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="resource-type-folder" size="medium" type="span" variation="passive"></oc-icon-stub>
-      <span>New Folder</span>
-    </button>
-  </span>
-  <span>
-    <button aria-label="Upload files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-outline" id="upload-menu-btn" type="button">
-      <!--v-if-->
-      <!-- @slot Content of the button -->
-      <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span" variation="passive"></oc-icon-stub>
-      <span>Upload</span>
-    </button>
-  </span>
-  <oc-drop-stub class="oc-width-auto" closeonclick="true" dropid="upload-menu-drop" isnested="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn">
-    <oc-list-stub class="" id="upload-list" raw="false">
-      <li class="oc-menu-item-hover">
-        <resource-upload-stub btnclass="oc-width-1-1" btnlabel="" isfolder="false"></resource-upload-stub>
-      </li>
-      <li class="oc-menu-item-hover">
-        <resource-upload-stub btnclass="oc-width-1-1" btnlabel="" isfolder="true"></resource-upload-stub>
-      </li>
-    </oc-list-stub>
-    <!--v-if-->
-  </oc-drop-stub>
-  <!--v-if-->
-</div>
-`;
-
-exports[`CreateAndUpload component file handlers should show additional handlers 1`] = `
 <div class="create-and-upload-actions oc-flex-inline oc-mr-s">
   <span>
     <button aria-label="Create new files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-file-menu-btn" type="button">
@@ -80,34 +47,7 @@ exports[`CreateAndUpload component file handlers should show additional handlers
           <!--v-if-->
         </button>
       </li>
-      <li class="bottom-seperator"></li>
-      <li class="create-list-file oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-txt" type="button">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
-          <span class="create-list-file-item-text">Plain text file</span>
-          <!--v-if-->
-        </button>
-      </li>
-      <li class="create-list-file oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-md" type="button">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
-          <span class="create-list-file-item-text">Mark-down file</span>
-          <!--v-if-->
-        </button>
-      </li>
-      <li class="create-list-file oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-drawio" type="button">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
-          <span class="create-list-file-item-text">Draw.io document</span>
-          <!--v-if-->
-        </button>
-      </li>
+      <!--v-if-->
       <li class="create-list-shortcut oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="new-shortcut-btn" type="button">
           <!--v-if-->
@@ -142,7 +82,7 @@ exports[`CreateAndUpload component file handlers should show additional handlers
 </div>
 `;
 
-exports[`CreateAndUpload component file handlers should show file extension if file extensions are enabled 1`] = `
+exports[`CreateAndUpload component file handlers should show entries for all new file handlers 1`] = `
 <div class="create-and-upload-actions oc-flex-inline oc-mr-s">
   <span>
     <button aria-label="Create new files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-file-menu-btn" type="button">
@@ -153,7 +93,7 @@ exports[`CreateAndUpload component file handlers should show file extension if f
     </button>
   </span>
   <oc-drop-stub class="oc-width-auto" closeonclick="true" dropid="new-file-menu-drop" isnested="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn">
-    <oc-list-stub class="expanded-list" id="create-list" raw="false">
+    <oc-list-stub class="" id="create-list" raw="false">
       <li class="create-list-folder oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="new-folder-btn" type="button">
           <!--v-if-->
@@ -168,7 +108,7 @@ exports[`CreateAndUpload component file handlers should show file extension if f
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
           <span class="create-list-file-item-text">Plain text file</span>
-          <span class="create-list-file-item-extension">txt</span>
+          <!--v-if-->
         </button>
       </li>
       <li class="create-list-file oc-menu-item-hover">
@@ -177,7 +117,7 @@ exports[`CreateAndUpload component file handlers should show file extension if f
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
           <span class="create-list-file-item-text">Mark-down file</span>
-          <span class="create-list-file-item-extension">md</span>
+          <!--v-if-->
         </button>
       </li>
       <li class="create-list-file oc-menu-item-hover">
@@ -186,44 +126,17 @@ exports[`CreateAndUpload component file handlers should show file extension if f
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
           <span class="create-list-file-item-text">Draw.io document</span>
-          <span class="create-list-file-item-extension">drawio</span>
-        </button>
-      </li>
-      <li class="bottom-seperator"></li>
-      <li class="create-list-file oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-txt" type="button">
           <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
-          <span class="create-list-file-item-text">Plain text file</span>
-          <span class="create-list-file-item-extension">txt</span>
-        </button>
-      </li>
-      <li class="create-list-file oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-md" type="button">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
-          <span class="create-list-file-item-text">Mark-down file</span>
-          <span class="create-list-file-item-extension">md</span>
-        </button>
-      </li>
-      <li class="create-list-file oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw new-file-btn-drawio" type="button">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub>
-          <span class="create-list-file-item-text">Draw.io document</span>
-          <span class="create-list-file-item-extension">drawio</span>
         </button>
       </li>
+      <!--v-if-->
       <li class="create-list-shortcut oc-menu-item-hover">
         <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="new-shortcut-btn" type="button">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span" variation="passive"></oc-icon-stub>
           <span>Shortcut</span>
-          <span class="create-list-file-item-extension">url</span>
+          <!--v-if-->
         </button>
       </li>
     </oc-list-stub>
diff --git a/packages/web-pkg/src/apps/types.ts b/packages/web-pkg/src/apps/types.ts
index be8d2be6cca..d1ce9dc5b6c 100644
--- a/packages/web-pkg/src/apps/types.ts
+++ b/packages/web-pkg/src/apps/types.ts
@@ -3,6 +3,7 @@ import { RouteLocationRaw, Router, RouteRecordRaw } from 'vue-router'
 import { Module, Store } from 'vuex'
 import { Extension } from '../composables/piniaStores'
 import { IconFillType } from '../helpers'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 
 export interface AppReadyHookArgs {
   globalProperties: ComponentCustomProperties & Record<string, any>
@@ -50,7 +51,11 @@ export interface ApplicationMenuItem {
 export interface ApplicationFileExtension {
   app?: string
   extension?: string
-  handler?: (...args) => Promise<void> | void
+  createFileHandler?: (arg: {
+    fileName: string
+    space: SpaceResource
+    currentFolder: Resource
+  }) => Promise<Resource>
   hasPriority?: boolean
   label?: string
   mimeType?: string
diff --git a/packages/web-pkg/src/components/FilesList/ContextActions.vue b/packages/web-pkg/src/components/FilesList/ContextActions.vue
index 07ca2c5b586..870a41eb77f 100644
--- a/packages/web-pkg/src/components/FilesList/ContextActions.vue
+++ b/packages/web-pkg/src/components/FilesList/ContextActions.vue
@@ -51,7 +51,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
 
-    const { editorActions, loadExternalAppActions } = useFileActions()
+    const { editorActions } = useFileActions()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
     const { actions: hideShareActions } = useFileActionsToggleHideShare({ store })
@@ -101,11 +101,7 @@ export default defineComponent({
     )
 
     const menuItemsContext = computed(() => {
-      const fileHandlers = [
-        ...unref(openShortcutActions),
-        ...unref(editorActions),
-        ...loadExternalAppActions(unref(actionOptions))
-      ]
+      const fileHandlers = [...unref(openShortcutActions), ...unref(editorActions)]
 
       return [...fileHandlers]
         .filter((item) => item.isEnabled(unref(actionOptions)))
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActions.ts b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
index 04bb0e387a9..58772fd081a 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActions.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
@@ -31,8 +31,9 @@ import {
   useFileActionsRestore,
   useFileActionsCreateSpaceFromResource
 } from './index'
-import { useAppsStore, useCapabilityStore, useConfigStore } from '../../piniaStores'
+import { useAppsStore, useConfigStore } from '../../piniaStores'
 import { ApplicationFileExtension } from '../../../apps'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 
 export const EDITOR_MODE_EDIT = 'edit'
 export const EDITOR_MODE_CREATE = 'create'
@@ -45,13 +46,9 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const appsStore = useAppsStore()
   const configStore = useConfigStore()
-  const capabilityStore = useCapabilityStore()
   const router = useRouter()
   const { $gettext } = useGettext()
   const isSearchActive = useIsSearchActive()
-  const appProvidersEnabled = computed(() => {
-    return !!capabilityStore.filesAppProviders.find((appProvider) => appProvider.enabled)
-  })
 
   const { openUrl } = useWindowOpen()
 
@@ -108,9 +105,8 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
           handler: (options) =>
             openEditor(
               fileExtension,
-              options.space.getDriveAliasAndItem(options.resources[0]),
-              options.resources[0].webDavPath,
-              options.resources[0].fileId,
+              options.space,
+              options.resources[0],
               EDITOR_MODE_EDIT,
               options.space.shareId
             ),
@@ -158,23 +154,22 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
 
   const routeOptsHelper = (
     appFileExtension: ApplicationFileExtension,
-    driveAliasAndItem: string,
-    filePath: string,
-    fileId: string,
+    space: SpaceResource,
+    resource: Resource,
     mode: string,
     shareId: string
   ) => {
     return {
       name: appFileExtension.routeName || appFileExtension.app,
       params: {
-        driveAliasAndItem,
-        filePath,
-        fileId,
+        driveAliasAndItem: space.getDriveAliasAndItem(resource),
+        filePath: resource.path,
+        fileId: resource.fileId,
         mode
       },
       query: {
         ...(shareId && { shareId }),
-        ...(fileId && configStore.options.routing.idBased && { fileId }),
+        ...(resource.fileId && configStore.options.routing.idBased && { fileId: resource.fileId }),
         ...routeToContextQuery(unref(router.currentRoute))
       }
     }
@@ -182,35 +177,16 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
 
   const openEditor = (
     appFileExtension: ApplicationFileExtension,
-    driveAliasAndItem: string,
-    filePath: string,
-    fileId: string,
+    space: SpaceResource,
+    resource: Resource,
     mode: string,
     shareId: string = undefined
   ) => {
-    if (appFileExtension.handler) {
-      return appFileExtension.handler({
-        config: configStore.options,
-        driveAliasAndItem,
-        filePath,
-        fileId,
-        mode,
-        ...(shareId && { shareId })
-      })
-    }
-
-    const routeOpts = routeOptsHelper(
-      appFileExtension,
-      driveAliasAndItem,
-      filePath,
-      fileId,
-      mode,
-      shareId
-    )
+    const routeOpts = routeOptsHelper(appFileExtension, space, resource, mode, shareId)
 
     if (configStore.options.openAppsInTab) {
       const path = router.resolve(routeOpts).href
-      const target = `${appFileExtension.routeName}-${filePath}`
+      const target = `${appFileExtension.routeName}-${resource.path}`
 
       openUrl(path, target, true)
       return
@@ -250,12 +226,8 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
     // first priority: handlers from config
     const enabledEditorActions = unref(editorActions).filter(filterCallback)
 
-    // second priority: `/app/open` endpoint of app provider if available
-    // FIXME: files app should not know anything about the `external apps` app
-    const externalAppsActions = loadExternalAppActions(options).filter(filterCallback)
-
     // prioritize apps that have hasPriority set
-    const appActions = [...enabledEditorActions, ...externalAppsActions].sort(
+    const appActions = enabledEditorActions.sort(
       (a, b) => Number(b.hasPriority) - Number(a.hasPriority)
     )
 
@@ -268,92 +240,17 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
   }
 
   const getAllAvailableActions = (options: FileActionOptions) => {
-    return [
-      ...unref(editorActions),
-      ...loadExternalAppActions(options),
-      ...unref(systemActions)
-    ].filter((action) => {
+    return [...unref(editorActions), ...unref(systemActions)].filter((action) => {
       return action.isEnabled(options)
     })
   }
 
-  // returns an array of available external Apps
-  // to open a resource with a specific mimeType
-  // FIXME: filesApp should not know anything about any other app, dont cross the line!!! BAD
-  const loadExternalAppActions = (options: FileActionOptions): Action[] => {
-    if (isLocationTrashActive(router, 'files-trash-generic')) {
-      return []
-    }
-
-    // we don't support external apps as batch action as of now
-    if (options.resources.length !== 1) {
-      return []
-    }
-
-    const resource = options.resources[0]
-    const { mimeType, webDavPath, fileId } = resource
-    const driveAliasAndItem = options.space?.getDriveAliasAndItem(resource)
-    if (!driveAliasAndItem) {
-      return []
-    }
-
-    const mimeTypes = store.getters['External/mimeTypes'] || []
-    if (mimeType === undefined || !unref(appProvidersEnabled) || !mimeTypes.length) {
-      return []
-    }
-
-    const filteredMimeTypes = mimeTypes.find((t) => t.mime_type === mimeType)
-    if (filteredMimeTypes === undefined) {
-      return []
-    }
-    const { app_providers: appProviders = [], default_application: defaultApplication } =
-      filteredMimeTypes
-
-    return appProviders.map((app): FileAction => {
-      const label = $gettext('Open in %{ appName }')
-      return {
-        name: app.name,
-        icon: app.icon,
-        img: app.img,
-        componentType: 'button',
-        class: `oc-files-actions-${app.name}-trigger`,
-        isEnabled: () => true,
-        hasPriority: defaultApplication === app.name,
-        handler: () =>
-          openExternalApp(app.name, driveAliasAndItem, webDavPath, fileId, options.space.shareId),
-        label: () => $gettext(label, { appName: app.name })
-      }
-    })
-  }
-
-  const openExternalApp = (app, driveAliasAndItem: string, filePath, fileId, shareId) => {
-    const routeOpts = routeOptsHelper(
-      {
-        routeName: 'external-apps'
-      },
-      driveAliasAndItem,
-      filePath,
-      undefined,
-      undefined,
-      shareId
-    )
-
-    routeOpts.query = {
-      app,
-      fileId,
-      ...routeOpts.query
-    } as any
-
-    openUrl(router.resolve(routeOpts).href, configStore.options.openAppsInTab ? '_blank' : '_self')
-  }
-
   return {
     editorActions,
     systemActions,
     getDefaultAction,
     getDefaultEditorAction,
     getAllAvailableActions,
-    loadExternalAppActions,
     openEditor,
     triggerAction,
     triggerDefaultAction
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
index 6f1faf8edbe..19803620462 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
@@ -4,9 +4,8 @@ import {
   extractNameWithoutExtension
 } from '@ownclouders/web-client/src/helpers'
 import { Store } from 'vuex'
-import { computed, Ref, unref } from 'vue'
+import { computed, unref } from 'vue'
 import { useClientService } from '../../clientService'
-import { useRequest } from '../../authContext'
 import { useRouter } from '../../router'
 import { useStore } from '../../store'
 import { FileAction, FileActionOptions } from '../types'
@@ -17,40 +16,26 @@ import { WebDAV } from '@ownclouders/web-client/src/webdav'
 import { isLocationSpacesActive } from '../../../router'
 import { getIndicators } from '../../../helpers'
 import { EDITOR_MODE_CREATE, useFileActions } from './useFileActions'
-import { urlJoin } from '@ownclouders/web-client/src/utils'
-import { stringify } from 'qs'
 import { AncestorMetaData } from '../../../types'
-import {
-  useMessages,
-  useModals,
-  useUserStore,
-  useCapabilityStore,
-  useConfigStore
-} from '../../piniaStores'
+import { useMessages, useModals, useUserStore, useAppsStore } from '../../piniaStores'
 import { ApplicationFileExtension } from '../../../apps'
 
 export const useFileActionsCreateNewFile = ({
   store,
-  space,
-  appNewFileMenuExtensions,
-  mimetypesAllowedForCreation
+  space
 }: {
   store?: Store<any>
   space?: SpaceResource
-  appNewFileMenuExtensions?: Ref<ApplicationFileExtension[]>
-  mimetypesAllowedForCreation?: Ref<any> // FIXME: type?
 } = {}) => {
   store = store || useStore()
-  const configStore = useConfigStore()
   const { showMessage, showErrorMessage } = useMessages()
   const userStore = useUserStore()
-  const capabilityStore = useCapabilityStore()
   const router = useRouter()
   const { $gettext } = useGettext()
-  const { makeRequest } = useRequest()
   const { dispatchModal } = useModals()
+  const appsStore = useAppsStore()
 
-  const { openEditor, triggerDefaultAction } = useFileActions()
+  const { openEditor } = useFileActions()
   const clientService = useClientService()
   const currentFolder = computed((): Resource => store.getters['Files/currentFolder'])
   const files = computed((): Array<Resource> => store.getters['Files/files'])
@@ -59,6 +44,10 @@ export const useFileActionsCreateNewFile = ({
   )
   const areFileExtensionsShown = computed((): boolean => store.state.Files.areFileExtensionsShown)
 
+  const appNewFileMenuExtensions = computed(() =>
+    appsStore.fileExtensions.filter(({ newFileMenu }) => !!newFileMenu)
+  )
+
   const getNameErrorMsg = (fileName: string) => {
     if (fileName === '') {
       return $gettext('File name cannot be empty')
@@ -89,83 +78,18 @@ export const useFileActionsCreateNewFile = ({
     return null
   }
 
-  const addAppProviderFileFunc = async (fileName: string) => {
-    // FIXME: this belongs in web-app-external, but the app provider handles file creation differently than other editor extensions. Needs more refactoring.
-    if (fileName === '') {
-      return
-    }
-    try {
-      const baseUrl = urlJoin(configStore.serverUrl, capabilityStore.filesAppProviders[0].new_url)
-      const query = stringify({
-        parent_container_id: unref(currentFolder).fileId,
-        filename: fileName
-      })
-      const url = `${baseUrl}?${query}`
-      const response = await makeRequest('POST', url)
-      if (response.status !== 200) {
-        throw new Error(`An error has occurred: ${response.status}`)
-      }
-      const path = join(unref(currentFolder).path, fileName) || ''
-      const resource = await (clientService.webdav as WebDAV).getFileInfo(space, {
-        path
-      })
-      if (unref(loadIndicatorsForNewFile)) {
-        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
-      }
-      triggerDefaultAction({ space: space, resources: [resource] })
-      store.commit('Files/UPSERT_RESOURCE', resource)
-      showMessage({ title: $gettext('"%{fileName}" was created successfully', { fileName }) })
-    } catch (error) {
-      console.error(error)
-      showErrorMessage({
-        title: $gettext('Failed to create file'),
-        errors: [error]
-      })
-    }
-  }
-
   const loadIndicatorsForNewFile = computed(() => {
     return isLocationSpacesActive(router, 'files-spaces-generic') && space.driveType !== 'share'
   })
 
-  const addNewFile = async (fileName: string, appFileExtension: ApplicationFileExtension) => {
-    if (fileName === '') {
-      return
+  const openFile = (resource: Resource, appFileExtension: ApplicationFileExtension) => {
+    if (loadIndicatorsForNewFile.value) {
+      resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
     }
 
-    try {
-      const path = join(unref(currentFolder).path, fileName)
-      const resource = await (clientService.webdav as WebDAV).putFileContents(space, {
-        path
-      })
+    store.commit('Files/UPSERT_RESOURCE', resource)
 
-      if (loadIndicatorsForNewFile.value) {
-        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
-      }
-
-      store.commit('Files/UPSERT_RESOURCE', resource)
-
-      if (appFileExtension) {
-        openEditor(
-          appFileExtension,
-          space.getDriveAliasAndItem(resource),
-          resource.webDavPath,
-          resource.fileId,
-          EDITOR_MODE_CREATE,
-          space.shareId
-        )
-
-        return
-      }
-
-      showMessage({ title: $gettext('"%{fileName}" was created successfully', { fileName }) })
-    } catch (error) {
-      console.error(error)
-      showErrorMessage({
-        title: $gettext('Failed to create file'),
-        errors: [error]
-      })
-    }
+    return openEditor(appFileExtension, space, resource, EDITOR_MODE_CREATE, space.shareId)
   }
 
   const handler = (
@@ -194,16 +118,38 @@ export const useFileActionsCreateNewFile = ({
       inputValue: defaultName,
       inputLabel: $gettext('File name'),
       inputSelectionRange,
-      onConfirm: (fileName: string) => {
+      onConfirm: async (fileName: string) => {
         if (!areFileExtensionsShown.value) {
           fileName = `${fileName}.${extension}`
         }
 
-        if (!appFileExtension) {
-          return addAppProviderFileFunc(fileName)
+        try {
+          let resource: Resource
+          if (appFileExtension.createFileHandler) {
+            resource = await appFileExtension.createFileHandler({
+              fileName,
+              space,
+              currentFolder: unref(currentFolder)
+            })
+          } else {
+            const path = join(unref(currentFolder).path, fileName)
+            resource = await (clientService.webdav as WebDAV).putFileContents(space, {
+              path
+            })
+          }
+
+          showMessage({
+            title: $gettext('"%{fileName}" was created successfully', { fileName: resource.name })
+          })
+
+          return openFile(resource, appFileExtension)
+        } catch (error) {
+          console.error(error)
+          showErrorMessage({
+            title: $gettext('Failed to create file'),
+            errors: [error]
+          })
         }
-
-        return addNewFile(fileName, appFileExtension)
       },
       onInput: (name, setError) =>
         setError(getNameErrorMsg(areFileExtensionsShown.value ? name : `${name}.${extension}`))
@@ -217,27 +163,14 @@ export const useFileActionsCreateNewFile = ({
         name: 'create-new-file',
         icon: 'add',
         handler: (args) => handler(args, appFileExtension.extension, appFileExtension),
-        label: () => appFileExtension.newFileMenu.menuTitle(),
-        isEnabled: () => {
-          return unref(currentFolder)?.canUpload({ user: userStore.user })
-        },
-        componentType: 'button',
-        class: 'oc-files-actions-create-new-file',
-        ext: appFileExtension.extension
-      })
-    }
-    for (const mimeType of unref(mimetypesAllowedForCreation) || []) {
-      actions.push({
-        name: 'create-new-file',
-        icon: 'add',
-        handler: (args) => handler(args, mimeType.ext, undefined),
-        label: () => mimeType.name,
+        label: () => $gettext(appFileExtension.newFileMenu.menuTitle()),
         isEnabled: () => {
           return unref(currentFolder)?.canUpload({ user: userStore.user })
         },
         componentType: 'button',
         class: 'oc-files-actions-create-new-file',
-        ext: mimeType.ext
+        ext: appFileExtension.extension,
+        isExternal: appFileExtension.app === 'external'
       })
     }
 
@@ -247,6 +180,6 @@ export const useFileActionsCreateNewFile = ({
   return {
     actions,
     getNameErrorMsg,
-    addNewFile
+    openFile
   }
 }
diff --git a/packages/web-pkg/src/composables/actions/types.ts b/packages/web-pkg/src/composables/actions/types.ts
index f977ce4c551..bf49634f685 100644
--- a/packages/web-pkg/src/composables/actions/types.ts
+++ b/packages/web-pkg/src/composables/actions/types.ts
@@ -18,6 +18,7 @@ export interface Action<T = ActionOptions> {
   shortcut?: string
   keepOpen?: boolean
   opensInNewWindow?: boolean
+  isExternal?: boolean
   ext?: string
 
   label(options?: T): string
diff --git a/packages/web-pkg/src/composables/piniaStores/apps.ts b/packages/web-pkg/src/composables/piniaStores/apps.ts
index 4738dd57afc..c62be0ad940 100644
--- a/packages/web-pkg/src/composables/piniaStores/apps.ts
+++ b/packages/web-pkg/src/composables/piniaStores/apps.ts
@@ -39,7 +39,7 @@ export const useAppsStore = defineStore('apps', () => {
     unref(fileExtensions).push({
       app: appId,
       extension: data.extension,
-      handler: data.handler,
+      createFileHandler: data.createFileHandler,
       label: data.label,
       mimeType: data.mimeType,
       routeName: data.routeName,
@@ -62,6 +62,7 @@ export const useAppsStore = defineStore('apps', () => {
     fileExtensions,
 
     registerApp,
+    registerFileExtension,
     loadExternalAppConfig
   }
 })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
index 7de4512e78e..bf743e52798 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
@@ -39,38 +39,14 @@ describe('useFileActionsCreateNewFile', () => {
     })
   })
 
-  describe('addNewFile', () => {
-    it('create new file', () => {
+  describe('openFile', () => {
+    it('upserts the resource before opening', () => {
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
         space,
-        setup: async ({ addNewFile }, { storeOptions }) => {
-          await addNewFile('myfile.txt', null)
-          await nextTick()
+        setup: ({ openFile }, { storeOptions }) => {
+          openFile(mock<Resource>(), null)
           expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalled()
-          const { showMessage } = useMessages()
-          expect(showMessage).toHaveBeenCalledWith({
-            title: '"myfile.txt" was created successfully'
-          })
-        }
-      })
-    })
-    it('show error message if createFile fails', () => {
-      const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
-      const space = mock<SpaceResource>({ id: '1' })
-      getWrapper({
-        resolveCreateFile: false,
-        space,
-        setup: async ({ addNewFile }) => {
-          await addNewFile('myfolder', null)
-          await nextTick()
-
-          const { showErrorMessage } = useMessages()
-          expect(showErrorMessage).toHaveBeenCalledWith(
-            expect.objectContaining({ title: 'Failed to create file' })
-          )
-
-          consoleErrorMock.mockRestore()
         }
       })
     })
@@ -136,20 +112,26 @@ function getWrapper({
       () => {
         const instance = useFileActionsCreateNewFile({
           store,
-          space,
-          appNewFileMenuExtensions: ref([
-            mock<ApplicationFileExtension>({
-              extension: '.txt',
-              newFileMenu: { menuTitle: jest.fn() }
-            })
-          ])
+          space
         })
         setup(instance, { storeOptions })
       },
       {
         store,
         provide: mocks,
-        mocks
+        mocks,
+        pluginOptions: {
+          piniaOptions: {
+            appsState: {
+              fileExtensions: [
+                mock<ApplicationFileExtension>({
+                  extension: '.txt',
+                  newFileMenu: { menuTitle: jest.fn() }
+                })
+              ]
+            }
+          }
+        }
       }
     )
   }
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 4099e188673..62d8d731e5c 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -128,14 +128,7 @@ export default defineComponent({
         ({ app, extension }) => app === item.id && extension === item.defaultExtension
       )
 
-      openEditor(
-        appFileExtension,
-        space.getDriveAliasAndItem(emptyResource),
-        emptyResource.webDavPath,
-        emptyResource.id,
-        EDITOR_MODE_EDIT,
-        space.shareId
-      )
+      openEditor(appFileExtension, space, emptyResource, EDITOR_MODE_EDIT, space.shareId)
     }
     const getAdditionalEventBindings = (item: ApplicationInformation) => {
       if (item.applicationMenu?.openAsEditor) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9ebf3bc211..a5991c56b74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -659,6 +659,9 @@ importers:
       vuex:
         specifier: 4.1.0
         version: 4.1.0(vue@3.3.8)
+      zod:
+        specifier: 3.22.4
+        version: 3.22.4
     devDependencies:
       web-test-helpers:
         specifier: workspace:*