From d8b2349e394edd7867e7ccb14af72271f6f7c315 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 23 Oct 2023 16:13:21 +0200
Subject: [PATCH] Integrate file editors application menu (#9809)

* Integrate file editors in application menu
---
 .../src/components/OcResource/OcResource.vue  |  32 +++-
 .../OcResourceName/OcResourceName.vue         |  37 +++-
 .../OcTile/__snapshots__/OcTile.spec.ts.snap  |   4 +-
 packages/web-app-admin-settings/src/index.ts  |   9 +-
 packages/web-app-draw-io/src/index.ts         |  10 +
 packages/web-app-files/src/index.ts           |   6 +-
 packages/web-app-text-editor/src/index.ts     |  10 +
 .../web-client/src/helpers/space/types.ts     |  10 +-
 packages/web-pkg/src/apps/types.ts            |   8 +
 packages/web-pkg/src/components/AppTopBar.vue |  47 ++++-
 .../components/FilesList/ResourceTable.vue    | 125 ++++---------
 .../src/components/Search/ResourcePreview.vue |  84 +++------
 .../actions/files/useFileActions.ts           |   2 +-
 .../filesList/useResourceRouteResolver.ts     |   9 +-
 .../src/composables/folderLink/index.ts       |   1 +
 .../composables/folderLink/useFolderLink.ts   | 121 ++++++++++++
 packages/web-pkg/src/composables/index.ts     |   1 +
 .../composables/spaces/useGetMatchingSpace.ts |   7 +-
 .../tests/unit/components/AppTopBar.spec.ts   |  52 +++++-
 .../components/Search/ResourcePreview.spec.ts |  67 +------
 .../__snapshots__/AppTopBar.spec.ts.snap      |  10 +-
 .../folderLink/useFolderLink.spec.ts          | 172 ++++++++++++++++++
 packages/web-runtime/src/App.vue              |  33 +++-
 .../components/Topbar/ApplicationsMenu.vue    |  89 ++++++++-
 .../src/components/Topbar/TopBar.vue          |  12 +-
 .../web-runtime/src/layouts/Application.vue   |  11 +-
 packages/web-runtime/src/store/apps.ts        |   4 +-
 .../Topbar/ApplicationsMenu.spec.ts           |  27 ++-
 .../src/mocks/useGetMatchingSpaceMock.ts      |   4 +
 .../features/smoke/applicationMenu.feature    |  17 ++
 tests/e2e/cucumber/steps/ui/public.ts         |  26 +++
 .../support/objects/app-files/page/public.ts  |  13 ++
 .../objects/app-files/resource/actions.ts     |  19 ++
 .../support/objects/app-files/utils/editor.ts |   8 +
 .../support/objects/runtime/application.ts    |   5 +-
 35 files changed, 822 insertions(+), 270 deletions(-)
 create mode 100644 packages/web-pkg/src/composables/folderLink/index.ts
 create mode 100644 packages/web-pkg/src/composables/folderLink/useFolderLink.ts
 create mode 100644 packages/web-pkg/tests/unit/composables/folderLink/useFolderLink.spec.ts
 create mode 100644 tests/e2e/cucumber/features/smoke/applicationMenu.feature

diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 7753d7744ba..20f1d3929e3 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -50,6 +50,7 @@
         <oc-resource-name
           :key="resource.name"
           :name="resource.name"
+          :path-prefix="pathPrefix"
           :extension="resource.extension"
           :type="resource.type"
           :full-path="resource.path"
@@ -107,6 +108,14 @@ export default defineComponent({
       type: Object as PropType<Resource>,
       required: true
     },
+    /**
+     * The prefix that will be shown in the path
+     */
+    pathPrefix: {
+      type: String,
+      required: false,
+      default: ''
+    },
     /**
      * The resource folder link
      */
@@ -301,6 +310,20 @@ export default defineComponent({
   &-indicators {
     display: flex;
 
+    a {
+      &:hover {
+        background-color: var(--oc-color-input-bg);
+        border-radius: 2px;
+      }
+
+      .text {
+        &:hover {
+          color: var(--oc-color-text-default);
+          text-decoration: underline;
+        }
+      }
+    }
+
     .parent-folder {
       display: flex;
       align-items: center;
@@ -315,15 +338,6 @@ export default defineComponent({
       .text {
         font-size: 0.8125rem;
         color: var(--oc-color-text-muted);
-        &:hover {
-          color: var(--oc-color-text-default);
-          text-decoration: underline;
-        }
-      }
-
-      &:hover {
-        background-color: var(--oc-color-input-bg);
-        border-radius: 2px;
       }
     }
   }
diff --git a/packages/design-system/src/components/OcResourceName/OcResourceName.vue b/packages/design-system/src/components/OcResourceName/OcResourceName.vue
index ab3a20762be..88eb7a909a5 100644
--- a/packages/design-system/src/components/OcResourceName/OcResourceName.vue
+++ b/packages/design-system/src/components/OcResourceName/OcResourceName.vue
@@ -21,6 +21,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import path from 'path'
 
 export default defineComponent({
   name: 'OcResourceName',
@@ -34,6 +35,14 @@ export default defineComponent({
       type: String,
       required: true
     },
+    /**
+     * The prefix that will be shown in the path
+     */
+    pathPrefix: {
+      type: String,
+      required: false,
+      default: ''
+    },
     /**
      * The extension of the resource, if there is one
      */
@@ -123,6 +132,9 @@ export default defineComponent({
       if (this.displayPath === this.fullPath) {
         return null
       }
+      if (this.pathPrefix) {
+        return path.join(this.pathPrefix, this.fullPath)
+      }
       return this.fullPath
     },
 
@@ -146,6 +158,7 @@ export default defineComponent({
   &-name {
     display: flex;
     min-width: 0;
+
     &:hover {
       text-decoration: underline;
       text-decoration-color: var(--oc-color-text-default);
@@ -167,13 +180,21 @@ export default defineComponent({
 
 <docs>
 ```js
-<oc-resource-name full-path="documents/notes.txt" name="notes.txt" extension="txt" type="file" :is-extension-displayed="false" />
-<oc-resource-name full-path="documents/notes.txt" name="notes.txt" extension="txt" type="file" />
-<oc-resource-name full-path="documents/notes.txt" name="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" extension="txt" type="file" />
-<oc-resource-name full-path="documents/notes.txt" name="super-long-file-name-which-will-not-be-truncated-when-you-disable-it-manually-via-the-truncate-property.txt" extension="txt" type="file" :truncate-name="false" />
-<oc-resource-name full-path="images/nature/forest.jpg" :is-path-displayed="true" name="forest.jpg" extension="jpg" type="file" />
-<oc-resource-name full-path="super-long-path-to-a-subfolder-which-is-a-lot-of-levels-away-from–the-root-super-long-path-to-a-subfolder-which-is-a-lot-of-levels-away-from–the-root/asdf.txt" :is-path-displayed="true" name="asdf.txt" extension="txt" type="file" />
-<oc-resource-name full-path="some-folder" name="regular-folder" extension="" type="folder" />
-<oc-resource-name full-path="folder-name-with.dot" name="folder-name-with.dot" extension="" type="folder" />
+<oc-resource-name full-path="documents/notes.txt" name="notes.txt" extension="txt" type="file"
+                  :is-extension-displayed="false"/>
+<oc-resource-name full-path="documents/notes.txt" name="notes.txt" extension="txt" type="file"/>
+<oc-resource-name full-path="documents/notes.txt"
+                  name="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"
+                  extension="txt" type="file"/>
+<oc-resource-name full-path="documents/notes.txt"
+                  name="super-long-file-name-which-will-not-be-truncated-when-you-disable-it-manually-via-the-truncate-property.txt"
+                  extension="txt" type="file" :truncate-name="false"/>
+<oc-resource-name full-path="images/nature/forest.jpg" :is-path-displayed="true" name="forest.jpg" extension="jpg"
+                  type="file"/>
+<oc-resource-name
+  full-path="super-long-path-to-a-subfolder-which-is-a-lot-of-levels-away-from–the-root-super-long-path-to-a-subfolder-which-is-a-lot-of-levels-away-from–the-root/asdf.txt"
+  :is-path-displayed="true" name="asdf.txt" extension="txt" type="file"/>
+<oc-resource-name full-path="some-folder" name="regular-folder" extension="" type="folder"/>
+<oc-resource-name full-path="folder-name-with.dot" name="folder-name-with.dot" extension="" type="folder"/>
 ```
 </docs>
diff --git a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
index a233c8ce8f0..9e3c132d6a6 100644
--- a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
+++ b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`OcTile component renders default space correctly 1`] = `
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
       <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
-        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldername="" resource="[object Object]"></oc-resource-stub>
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldername="" pathprefix="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
@@ -40,7 +40,7 @@ exports[`OcTile component renders disabled space correctly 1`] = `
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
       <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
-        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldername="" resource="[object Object]"></oc-resource-stub>
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldername="" pathprefix="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
diff --git a/packages/web-app-admin-settings/src/index.ts b/packages/web-app-admin-settings/src/index.ts
index 86203706add..0a95b623bf7 100644
--- a/packages/web-app-admin-settings/src/index.ts
+++ b/packages/web-app-admin-settings/src/index.ts
@@ -5,6 +5,7 @@ import Groups from './views/Groups.vue'
 import Spaces from './views/Spaces.vue'
 import { Ability } from '@ownclouders/web-client/src/helpers/resource/types'
 import { AppNavigationItem } from '@ownclouders/web-pkg'
+import { Store } from 'vuex'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -16,7 +17,13 @@ const appInfo = {
   id: 'admin-settings',
   icon: 'settings-4',
   color: '#2b2b2b',
-  isFileEditor: false
+  isFileEditor: false,
+  applicationMenu: {
+    enabled: (store: Store<unknown>, ability: Ability) => {
+      return !!store.getters?.user?.id && ability.can('read-all', 'Setting')
+    },
+    priority: 40
+  }
 }
 
 const routes = ({ $ability }: { $ability: Ability }) => [
diff --git a/packages/web-app-draw-io/src/index.ts b/packages/web-app-draw-io/src/index.ts
index 561367309a9..2d87acb28f6 100644
--- a/packages/web-app-draw-io/src/index.ts
+++ b/packages/web-app-draw-io/src/index.ts
@@ -2,6 +2,7 @@ import { Resource } from '@ownclouders/web-client/src'
 import { AppWrapperRoute } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import App from './App.vue'
+import { Store } from 'vuex'
 
 const applicationId = 'draw-io'
 
@@ -26,6 +27,15 @@ const appInfo = {
   name: 'Draw.io',
   id: applicationId,
   icon: 'grid',
+  color: '#EF6C00',
+  applicationMenu: {
+    enabled: (store: Store<unknown>) => {
+      return !!store.getters?.user?.id
+    },
+    priority: 30,
+    openAsEditor: true
+  },
+  defaultExtension: 'drawio',
   extensions: [
     {
       extension: 'drawio',
diff --git a/packages/web-app-files/src/index.ts b/packages/web-app-files/src/index.ts
index b43bf2473af..984466084a0 100644
--- a/packages/web-app-files/src/index.ts
+++ b/packages/web-app-files/src/index.ts
@@ -35,7 +35,11 @@ const appInfo = {
   color: 'var(--oc-color-swatch-primary-muted)',
   isFileEditor: false,
   extensions: [],
-  fileSideBars
+  fileSideBars,
+  applicationMenu: {
+    enabled: () => true,
+    priority: 10
+  }
 }
 export const navItems = (context): AppNavigationItem[] => {
   return [
diff --git a/packages/web-app-text-editor/src/index.ts b/packages/web-app-text-editor/src/index.ts
index 45b4e6a4c50..ced7938dd86 100644
--- a/packages/web-app-text-editor/src/index.ts
+++ b/packages/web-app-text-editor/src/index.ts
@@ -1,6 +1,7 @@
 import translations from '../l10n/translations.json'
 import TextEditor from './App.vue'
 import { AppWrapperRoute } from '@ownclouders/web-pkg'
+import { Store } from 'vuex'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -92,7 +93,16 @@ const appInfo = {
   name: $gettext('Text Editor'),
   id: appId,
   icon: 'file-text',
+  color: '#7b27b6',
   isFileEditor: true,
+  applicationMenu: {
+    enabled: (store: Store<unknown>) => {
+      return !!store.getters?.user?.id
+    },
+    priority: 20,
+    openAsEditor: true
+  },
+  defaultExtension: 'txt',
   extensions: fileExtensions().map((extensionItem) => {
     return {
       extension: extensionItem.extension,
diff --git a/packages/web-client/src/helpers/space/types.ts b/packages/web-client/src/helpers/space/types.ts
index 243fae01248..a65804b1d8a 100644
--- a/packages/web-client/src/helpers/space/types.ts
+++ b/packages/web-client/src/helpers/space/types.ts
@@ -19,11 +19,11 @@ export interface SpaceResource extends Resource {
   getWebDavUrl({ path }: { path: string }): string
   getWebDavTrashUrl({ path }: { path: string }): string
   getDriveAliasAndItem(resource: Resource): string
-  isViewer(uuid: User): boolean
-  isEditor(uuid: User): boolean
-  isManager(uuid: User): boolean
-  isMember(uuid: User): boolean
-  isOwner(uuid: User): boolean
+  isViewer(user: User): boolean
+  isEditor(user: User): boolean
+  isManager(user: User): boolean
+  isMember(user: User): boolean
+  isOwner(user: User): boolean
 }
 
 export interface PersonalSpaceResource extends SpaceResource {
diff --git a/packages/web-pkg/src/apps/types.ts b/packages/web-pkg/src/apps/types.ts
index bad8853b4a6..700544902bd 100644
--- a/packages/web-pkg/src/apps/types.ts
+++ b/packages/web-pkg/src/apps/types.ts
@@ -52,6 +52,12 @@ export interface ApplicationQuickActions {
 
 export type AppConfigObject = Record<string, any>
 
+export interface ApplicationMenuItem {
+  enabled: () => boolean
+  priority: number
+  openAsEditor?: boolean
+}
+
 /** ApplicationInformation describes required information of an application */
 export interface ApplicationInformation {
   id?: string
@@ -59,7 +65,9 @@ export interface ApplicationInformation {
   icon?: string
   isFileEditor?: boolean
   extensions?: any[]
+  defaultExtension?: string
   fileSideBars?: any[]
+  applicationMenu?: ApplicationMenuItem
 }
 
 /**
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 2ebc1d24ba3..d2bb5105ae7 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -7,7 +7,13 @@
             v-if="resource"
             id="app-top-bar-resource"
             :is-thumbnail-displayed="false"
+            :path-prefix="pathPrefix"
             :resource="resource"
+            :parent-folder-name="parentFolderName"
+            :parent-folder-link-icon-additional-attributes="
+              parentFolderLinkIconAdditionalAttributes
+            "
+            :is-path-displayed="isPathDisplayed"
           />
         </div>
         <div class="oc-flex main-actions">
@@ -72,11 +78,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource } from '@ownclouders/web-client/src'
 import { Action } from '../composables/actions/types'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
+import { useFolderLink, useGetMatchingSpace } from '../composables'
+import { isPublicSpaceResource, isShareSpaceResource } from '@ownclouders/web-client/src/helpers'
 
 export default defineComponent({
   name: 'AppTopBar',
@@ -98,15 +106,42 @@ export default defineComponent({
     }
   },
   emits: ['close'],
-  setup() {
+  setup(props) {
     const { $gettext } = useGettext()
+    const { getMatchingSpace } = useGetMatchingSpace()
 
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
     const closeButtonLabel = computed(() => $gettext('Close'))
 
+    const { getParentFolderName, getParentFolderLinkIconAdditionalAttributes, getPathPrefix } =
+      useFolderLink()
+
+    const space = computed(() => getMatchingSpace(props.resource))
+
+    //FIXME: We currently have problems to display the parent folder name of a shared file, so we disabled it for now
+    const isPathDisplayed = computed(() => {
+      return !isShareSpaceResource(unref(space)) && !isPublicSpaceResource(unref(space))
+    })
+
+    const pathPrefix = computed(() => {
+      return props.resource ? getPathPrefix(props.resource) : null
+    })
+
+    const parentFolderName = computed(() => {
+      return props.resource ? getParentFolderName(props.resource) : null
+    })
+
+    const parentFolderLinkIconAdditionalAttributes = computed(() => {
+      return props.resource ? getParentFolderLinkIconAdditionalAttributes(props.resource) : null
+    })
+
     return {
+      pathPrefix,
+      isPathDisplayed,
       contextMenuLabel,
-      closeButtonLabel
+      closeButtonLabel,
+      parentFolderName,
+      parentFolderLinkIconAdditionalAttributes
     }
   }
 })
@@ -139,6 +174,12 @@ export default defineComponent({
     flex-basis: 250px;
     margin: 0;
   }
+
+  .oc-resource-indicators {
+    .text {
+      color: var(--oc-color-swatch-brand-contrast);
+    }
+  }
 }
 
 .open-file-bar {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 473b1ef3855..d436d0cf216 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -60,16 +60,17 @@
         <oc-resource
           :key="`${item.path}-${resourceDomSelector(item)}-${item.thumbnail}`"
           :resource="item"
+          :path-prefix="getPathPrefix(item)"
           :is-path-displayed="arePathsDisplayed"
           :parent-folder-name="getParentFolderName(item)"
           :is-thumbnail-displayed="shouldDisplayThumbnails(item)"
           :is-icon-displayed="!$slots['image']"
           :is-extension-displayed="areFileExtensionsShown"
           :is-resource-clickable="isResourceClickable(item.id)"
-          :folder-link="folderLink(item)"
-          :parent-folder-link="parentFolderLink(item)"
+          :folder-link="getFolderLink(item)"
+          :parent-folder-link="getParentFolderLink(item)"
           :parent-folder-link-icon-additional-attributes="
-            parentFolderLinkIconAdditionalAttributes(item)
+            getParentFolderLinkIconAdditionalAttributes(item)
           "
           :class="{ 'resource-table-resource-cut': isResourceCut(item) }"
           @click="emitFileClick(item)"
@@ -211,17 +212,9 @@
 <script lang="ts">
 import { defineComponent, PropType, computed, unref, ref, ComputedRef } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
 import { Resource } from '@ownclouders/web-client'
-import {
-  extractDomSelector,
-  extractParentFolderName,
-  isProjectSpaceResource,
-  isShareRoot,
-  isShareSpaceResource,
-  SpaceResource
-} from '@ownclouders/web-client/src/helpers'
+import { extractDomSelector, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { ShareTypes } from '@ownclouders/web-client/src/helpers/share'
 
 import {
@@ -233,7 +226,8 @@ import {
   useUserContext,
   ViewModeConstants,
   useConfigurationManager,
-  useGetMatchingSpace
+  useGetMatchingSpace,
+  useFolderLink
 } from '../../composables'
 import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED, ImageDimension } from '../../constants'
 import { eventBus } from '../../services'
@@ -250,11 +244,12 @@ import { useResourceRouteResolver } from '../../composables/filesList/useResourc
 import { ClipboardActions } from '../../helpers/clipboardActions'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
 import { useFileActionsRename } from '../../composables/actions'
-import { createLocationShares, createLocationCommon, createLocationSpaces } from '../../router'
+import { createLocationCommon } from '../../router'
 import get from 'lodash-es/get'
 
 // ODS component import is necessary here for CERN to overwrite OcTable
 import OcTable from 'design-system/src/components/OcTable/OcTable.vue'
+import { useGettext } from 'vue3-gettext'
 
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
@@ -444,6 +439,8 @@ export default defineComponent({
   setup(props, context) {
     const store = useStore()
     const configurationManager = useConfigurationManager()
+    const { getMatchingSpace } = useGetMatchingSpace()
+    const { $gettext } = useGettext()
 
     const { width } = useWindowSize()
     const hasTags = computed(
@@ -455,7 +452,7 @@ export default defineComponent({
 
     const getTagToolTip = (text: string) => (text.length > 7 ? text : '')
 
-    const isResourceDisabled = (resource) => {
+    const isResourceDisabled = (resource: Resource) => {
       return resource.processing === true
     }
 
@@ -479,14 +476,18 @@ export default defineComponent({
       hasShareJail: useCapabilityShareJailEnabled(),
       hasProjectSpaces: useCapabilityProjectSpacesEnabled(),
       isUserContext: useUserContext({ store }),
-      ...useGetMatchingSpace(),
+      getMatchingSpace,
       ...useResourceRouteResolver(
         {
           space: ref(props.space),
           targetRouteCallback: computed(() => props.targetRouteCallback)
         },
         context
-      )
+      ),
+      ...useFolderLink({
+        space: ref(props.space),
+        targetRouteCallback: computed(() => props.targetRouteCallback)
+      })
     }
   },
   data() {
@@ -769,47 +770,6 @@ export default defineComponent({
       }
       eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
     },
-    folderLink(file: Resource) {
-      return this.createFolderLink({
-        path: file.path,
-        fileId: file.fileId,
-        resource: file
-      })
-    },
-    parentFolderLink(file: Resource) {
-      const space = this.getMatchingSpace(file)
-      const parentFolderAccessible = this.isResourceAccessible({
-        space,
-        path: dirname(file.path)
-      })
-      if ((file.shareId && file.path === '/') || !parentFolderAccessible) {
-        return createLocationShares('files-shares-with-me')
-      }
-      if (isProjectSpaceResource(file)) {
-        return createLocationSpaces('files-spaces-projects')
-      }
-
-      return this.createFolderLink({
-        path: dirname(file.path),
-        ...(file.parentFolderId && { fileId: file.parentFolderId }),
-        resource: file
-      })
-    },
-    parentFolderLinkIconAdditionalAttributes(file) {
-      // Identify if resource is project space or is part of a project space and the resource is located in its root
-      if (
-        isProjectSpaceResource(file) ||
-        (isProjectSpaceResource(this.getInternalSpace(file.storageId) || ({} as Resource)) &&
-          file.path.split('/').length === 2)
-      ) {
-        return {
-          name: 'layout-grid',
-          'fill-type': 'fill'
-        }
-      }
-
-      return {}
-    },
     fileDragged(file) {
       this.addSelectedResource(file)
     },
@@ -978,39 +938,6 @@ export default defineComponent({
         resourceType,
         ownerName: resource.owner[0].displayName
       })
-    },
-    getParentFolderName(resource: Resource) {
-      const space = this.getMatchingSpace(resource)
-      const parentFolderAccessible = this.isResourceAccessible({
-        space,
-        path: dirname(resource.path)
-      })
-      if (isShareRoot(resource) || !parentFolderAccessible) {
-        return this.$gettext('Shared with me')
-      }
-      const parentFolder = extractParentFolderName(resource)
-      if (parentFolder) {
-        return parentFolder
-      }
-
-      if (isShareSpaceResource(space)) {
-        return space.name
-      }
-
-      if (this.hasProjectSpaces) {
-        if (isProjectSpaceResource(resource)) {
-          return this.$gettext('Spaces')
-        }
-        if (space?.driveType === 'project') {
-          return space.name
-        }
-      }
-
-      if (!this.hasShareJail) {
-        return this.$gettext('All files and folders')
-      }
-
-      return this.$gettext('Personal')
     }
   }
 })
@@ -1019,10 +946,12 @@ export default defineComponent({
 .oc-table.condensed > tbody > tr {
   height: 0 !important;
 }
+
 .resource-table {
   &-resource-cut {
     opacity: 0.6;
   }
+
   &-resource-wrapper {
     display: flex;
     align-items: center;
@@ -1037,21 +966,26 @@ export default defineComponent({
       }
     }
   }
+
   &-tag {
     max-width: 80px;
   }
+
   &-tag-more {
     cursor: pointer;
     border: 0 !important;
     vertical-align: text-bottom;
   }
+
   &-edit-name {
     display: inline-flex;
     margin-left: var(--oc-space-xsmall);
+
     svg {
       fill: var(--oc-color-text-muted);
     }
   }
+
   &-people {
     position: absolute;
     right: var(--oc-space-xsmall);
@@ -1266,15 +1200,18 @@ export default defineComponent({
     display: none;
   }
 }
+
 .oc-resource-icon-status-badge,
 .oc-resource-thumbnail-status-badge {
   .oc-icon {
     margin-top: -2px;
     margin-left: -1.5px;
+
     svg {
       fill: var(--oc-color-background-default) !important;
     }
   }
+
   .oc-spinner {
     margin-left: -2px;
     margin-top: -2px;
@@ -1288,26 +1225,32 @@ export default defineComponent({
     bottom: 2px !important;
   }
 }
+
 // on table row hover change the status badge background color
 .oc-tbody-tr:hover .oc-resource-icon-status-badge {
   background: var(--oc-color-background-hover) !important;
+
   .oc-icon {
     svg {
       fill: var(--oc-color-background-hover) !important;
     }
   }
+
   .oc-spinner {
     color: var(--oc-color-background-hover) !important;
   }
 }
+
 // on table row highlight change the status badge background color
 .oc-table-highlighted .oc-resource-icon-status-badge {
   background: var(--oc-color-background-highlight) !important;
+
   .oc-icon {
     svg {
       fill: var(--oc-color-background-highlight) !important;
     }
   }
+
   .oc-spinner {
     color: var(--oc-color-background-highlight) !important;
   }
diff --git a/packages/web-pkg/src/components/Search/ResourcePreview.vue b/packages/web-pkg/src/components/Search/ResourcePreview.vue
index 7104cbfac46..630aefee931 100644
--- a/packages/web-pkg/src/components/Search/ResourcePreview.vue
+++ b/packages/web-pkg/src/components/Search/ResourcePreview.vue
@@ -9,6 +9,7 @@
   >
     <oc-resource
       :resource="resource"
+      :path-prefix="pathPrefix"
       :is-path-displayed="true"
       :is-resource-clickable="false"
       :parent-folder-link="parentFolderLink"
@@ -27,22 +28,22 @@ import { debounce } from 'lodash-es'
 import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import { mapGetters } from 'vuex'
 import { createLocationShares, createLocationSpaces } from '../../router'
-import { dirname } from 'path'
+import path, { dirname } from 'path'
 import {
   useCapabilityShareJailEnabled,
   useGetMatchingSpace,
-  useFileActions
+  useFileActions,
+  useFolderLink
 } from '../../composables'
 import {
-  extractParentFolderName,
   isProjectSpaceResource,
-  isShareRoot,
   isShareSpaceResource,
   Resource
 } from '@ownclouders/web-client/src/helpers'
 import { eventBus } from '../../services'
 import { createFileRouteOptions, isResourceTxtFileAlmostEmpty } from '../../helpers'
 import { SearchResultValue } from './types'
+import { useGettext } from 'vue3-gettext'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -63,6 +64,9 @@ export default defineComponent({
   },
   setup(props) {
     const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace()
+    const { getPathPrefix, getParentFolderName, getParentFolderLinkIconAdditionalAttributes } =
+      useFolderLink()
+    const { $gettext } = useGettext()
     const previewData = ref()
 
     const resource = computed((): Resource => {
@@ -75,18 +79,35 @@ export default defineComponent({
       }
     })
 
+    const space = computed(() => getMatchingSpace(unref(resource)))
+
+    const spaceName = computed(() => {
+      if (isShareSpaceResource(unref(space))) {
+        return path.join($gettext('Shared with me'), unref(space).name)
+      }
+
+      return unref(space).name
+    })
+
     const resourceDisabled = computed(() => {
       return unref(resource).disabled === true
     })
 
     return {
+      space,
+      spaceName,
       ...useFileActions(),
       getInternalSpace,
       getMatchingSpace,
       hasShareJail: useCapabilityShareJailEnabled(),
       previewData,
       resource,
-      resourceDisabled
+      resourceDisabled,
+      pathPrefix: getPathPrefix(unref(resource)),
+      parentFolderName: getParentFolderName(unref(resource)),
+      parentFolderLinkIconAdditionalAttributes: getParentFolderLinkIconAdditionalAttributes(
+        unref(resource)
+      )
     }
   },
   computed: {
@@ -106,38 +127,11 @@ export default defineComponent({
         : {
             click: () =>
               this.triggerDefaultAction({
-                space: this.matchingSpace,
+                space: this.space,
                 resources: [this.resource]
               })
           }
     },
-    matchingSpace() {
-      return this.getMatchingSpace(this.resource)
-    },
-    parentFolderName() {
-      if (isShareRoot(this.resource)) {
-        return this.$gettext('Shared with me')
-      }
-
-      const parentFolder = extractParentFolderName(this.resource)
-      if (parentFolder) {
-        return parentFolder
-      }
-
-      if (!this.hasShareJail) {
-        return this.$gettext('All files and folders')
-      }
-
-      if (isProjectSpaceResource(this.resource)) {
-        return this.$gettext('Spaces')
-      }
-
-      if (isProjectSpaceResource(this.matchingSpace) || isShareSpaceResource(this.matchingSpace)) {
-        return this.matchingSpace.name
-      }
-
-      return this.$gettext('Personal')
-    },
     displayThumbnails() {
       return (
         !this.configuration?.options?.disablePreviews &&
@@ -155,24 +149,6 @@ export default defineComponent({
         return createLocationSpaces('files-spaces-projects')
       }
       return this.createFolderLink(dirname(this.resource.path), this.resource.parentFolderId)
-    },
-
-    parentFolderLinkIconAdditionalAttributes() {
-      // Identify if resource is project space or is part of a project space and the resource is located in its root
-      if (
-        isProjectSpaceResource(this.resource) ||
-        (isProjectSpaceResource(
-          this.getInternalSpace(this.resource.storageId) || ({} as Resource)
-        ) &&
-          this.resource.path.split('/').length === 2)
-      ) {
-        return {
-          name: 'layout-grid',
-          'fill-type': 'fill'
-        }
-      }
-
-      return {}
     }
   },
   mounted() {
@@ -188,7 +164,7 @@ export default defineComponent({
       unobserve()
       const preview = await this.$previewService.loadPreview(
         {
-          space: this.matchingSpace,
+          space: this.space,
           resource: this.resource,
           dimensions: ImageDimension.Thumbnail
         },
@@ -207,13 +183,13 @@ export default defineComponent({
       eventBus.publish('app.search.options-drop.hide')
     },
     createFolderLink(p: string, fileId: string | number) {
-      if (!this.matchingSpace) {
+      if (!this.space) {
         return {}
       }
 
       return createLocationSpaces(
         'files-spaces-generic',
-        createFileRouteOptions(this.matchingSpace, { path: p, fileId })
+        createFileRouteOptions(this.space, { path: p, fileId })
       )
     }
   }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActions.ts b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
index a5234e9189f..b7d770c953b 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActions.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActions.ts
@@ -152,7 +152,7 @@ export const useFileActions = ({ store }: { store?: Store<any> } = {}) => {
 
   const routeOptsHelper = (app, driveAliasAndItem: string, filePath, fileId, mode, shareId) => {
     return {
-      name: app.routeName || app.app,
+      name: app.routeName || app.app || app.id,
       params: {
         driveAliasAndItem,
         filePath,
diff --git a/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts b/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
index 372da85122d..a403f6419a5 100644
--- a/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
+++ b/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
@@ -3,19 +3,20 @@ import { unref, Ref } from 'vue'
 import { ConfigurationManager } from '../../configuration'
 import { useGetMatchingSpace } from '../spaces'
 import { createFileRouteOptions } from '../../helpers/router'
-import { useConfigurationManager } from '../configuration'
 import { createLocationSpaces, createLocationShares } from '../../router'
 import { CreateTargetRouteOptions } from '../../helpers/folderLink/types'
 import { Resource, SpaceResource } from '@ownclouders/web-client/src'
 
-type ResourceRouteResolverOptions = {
+export type ResourceRouteResolverOptions = {
   configurationManager?: ConfigurationManager
   targetRouteCallback?: Ref<any>
   space?: Ref<SpaceResource>
 }
 
-export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
-  const configurationManager = options.configurationManager || useConfigurationManager()
+export const useResourceRouteResolver = (
+  options: ResourceRouteResolverOptions = {},
+  context?: any
+) => {
   const targetRouteCallback = options.targetRouteCallback
   const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace(options)
 
diff --git a/packages/web-pkg/src/composables/folderLink/index.ts b/packages/web-pkg/src/composables/folderLink/index.ts
new file mode 100644
index 00000000000..d9529b979f4
--- /dev/null
+++ b/packages/web-pkg/src/composables/folderLink/index.ts
@@ -0,0 +1 @@
+export * from './useFolderLink'
diff --git a/packages/web-pkg/src/composables/folderLink/useFolderLink.ts b/packages/web-pkg/src/composables/folderLink/useFolderLink.ts
new file mode 100644
index 00000000000..9a329448645
--- /dev/null
+++ b/packages/web-pkg/src/composables/folderLink/useFolderLink.ts
@@ -0,0 +1,121 @@
+import { Resource } from '@ownclouders/web-client'
+import {
+  extractParentFolderName,
+  isProjectSpaceResource,
+  isShareRoot,
+  isShareSpaceResource
+} from '@ownclouders/web-client/src/helpers'
+import { useGettext } from 'vue3-gettext'
+import { unref } from 'vue'
+import { useCapabilityProjectSpacesEnabled, useCapabilityShareJailEnabled } from '../capability'
+import { useGetMatchingSpace } from '../spaces'
+import path, { dirname } from 'path'
+import { ResourceRouteResolverOptions, useResourceRouteResolver } from '../filesList'
+import { createLocationShares, createLocationSpaces } from '../../router'
+
+export const useFolderLink = (options: ResourceRouteResolverOptions = {}) => {
+  const { $gettext } = useGettext()
+  const hasShareJail = useCapabilityShareJailEnabled()
+  const hasProjectSpaces = useCapabilityProjectSpacesEnabled()
+  const { getInternalSpace, getMatchingSpace, isResourceAccessible } = useGetMatchingSpace()
+  const { createFolderLink } = useResourceRouteResolver(options)
+
+  const getPathPrefix = (resource: Resource) => {
+    const space = unref(options.space) || getMatchingSpace(resource)
+
+    if (isProjectSpaceResource(space)) {
+      return path.join($gettext('Spaces'), space.name)
+    }
+
+    if (isShareSpaceResource(space)) {
+      return path.join($gettext('Shares'), $gettext('Shared with me'), space.name)
+    }
+
+    return space.name
+  }
+  const getFolderLink = (resource: Resource) => {
+    return createFolderLink({
+      path: resource.path,
+      fileId: resource.fileId,
+      resource
+    })
+  }
+
+  const getParentFolderLink = (resource: Resource) => {
+    const space = unref(options.space) || getMatchingSpace(resource)
+    const parentFolderAccessible = isResourceAccessible({
+      space,
+      path: dirname(resource.path)
+    })
+    if ((resource.shareId && resource.path === '/') || !parentFolderAccessible) {
+      return createLocationShares('files-shares-with-me')
+    }
+    if (isProjectSpaceResource(resource)) {
+      return createLocationSpaces('files-spaces-projects')
+    }
+
+    return createFolderLink({
+      path: dirname(resource.path),
+      ...(resource.parentFolderId && { fileId: resource.parentFolderId }),
+      resource
+    })
+  }
+
+  const getParentFolderName = (resource: Resource) => {
+    const space = unref(options.space) || getMatchingSpace(resource)
+    const parentFolderAccessible = isResourceAccessible({
+      space,
+      path: dirname(resource.path)
+    })
+    if (isShareRoot(resource) || !parentFolderAccessible) {
+      return $gettext('Shared with me')
+    }
+    const parentFolder = extractParentFolderName(resource)
+    if (parentFolder) {
+      return parentFolder
+    }
+
+    if (isShareSpaceResource(space)) {
+      return space.name
+    }
+
+    if (unref(hasProjectSpaces)) {
+      if (isProjectSpaceResource(resource)) {
+        return $gettext('Spaces')
+      }
+      if (space?.driveType === 'project') {
+        return space.name
+      }
+    }
+
+    if (!unref(hasShareJail)) {
+      return $gettext('All files and folders')
+    }
+
+    return $gettext('Personal')
+  }
+
+  const getParentFolderLinkIconAdditionalAttributes = (resource: Resource) => {
+    // Identify if resource is project space or is part of a project space and the resource is located in its root
+    if (
+      isProjectSpaceResource(resource) ||
+      (isProjectSpaceResource(getInternalSpace(resource.storageId) || ({} as Resource)) &&
+        resource.path.split('/').length === 2)
+    ) {
+      return {
+        name: 'layout-grid',
+        'fill-type': 'fill'
+      }
+    }
+
+    return {}
+  }
+
+  return {
+    getPathPrefix,
+    getFolderLink,
+    getParentFolderLink,
+    getParentFolderName,
+    getParentFolderLinkIconAdditionalAttributes
+  }
+}
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index 9d854304270..1c5f20fa2a2 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -29,4 +29,5 @@ export * from './spaces'
 export * from './store'
 export * from './upload'
 export * from './viewMode'
+export * from './folderLink'
 export * from './embedMode'
diff --git a/packages/web-pkg/src/composables/spaces/useGetMatchingSpace.ts b/packages/web-pkg/src/composables/spaces/useGetMatchingSpace.ts
index 3b758933fb0..3c9495147b9 100644
--- a/packages/web-pkg/src/composables/spaces/useGetMatchingSpace.ts
+++ b/packages/web-pkg/src/composables/spaces/useGetMatchingSpace.ts
@@ -5,6 +5,7 @@ import { useRouteParam } from '../router'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import {
   MountPointSpaceResource,
+  PersonalSpaceResource,
   ProjectSpaceResource,
   User,
   buildShareSpaceResource,
@@ -42,7 +43,6 @@ export const useGetMatchingSpace = (options?: GetMatchingSpaceOptions) => {
     if (unref(driveAliasAndItem)?.startsWith('public/')) {
       storageId = unref(driveAliasAndItem).split('/')[1]
     }
-
     return (
       getInternalSpace(storageId) ||
       buildShareSpaceResource({
@@ -58,6 +58,10 @@ export const useGetMatchingSpace = (options?: GetMatchingSpaceOptions) => {
       (s) => isMountPointSpaceResource(s) && extractStorageId(s.root.remoteItem.rootId) === space.id
     )
 
+  const getPersonalSpace = (): PersonalSpaceResource => {
+    return unref(spaces).find((s) => isPersonalSpaceResource(s) && s.isOwner(unref(user)))
+  }
+
   const isResourceAccessible = ({ space, path }: { space: SpaceResource; path: string }) => {
     if (!configurationManager.options.routing.fullShareOwnerPaths) {
       return true
@@ -75,6 +79,7 @@ export const useGetMatchingSpace = (options?: GetMatchingSpaceOptions) => {
   return {
     getInternalSpace,
     getMatchingSpace,
+    getPersonalSpace,
     isResourceAccessible
   }
 }
diff --git a/packages/web-pkg/tests/unit/components/AppTopBar.spec.ts b/packages/web-pkg/tests/unit/components/AppTopBar.spec.ts
index 37c7321f4f1..60a977cf421 100644
--- a/packages/web-pkg/tests/unit/components/AppTopBar.spec.ts
+++ b/packages/web-pkg/tests/unit/components/AppTopBar.spec.ts
@@ -1,33 +1,64 @@
 import { mock } from 'jest-mock-extended'
-import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import {
+  RouteLocation,
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  shallowMount
+} from 'web-test-helpers'
 import { Resource } from '@ownclouders/web-client/src/helpers'
 import AppTopBar from '../../../src/components/AppTopBar.vue'
 import { Action } from '../../../src/composables/actions'
+import { ConfigurationManager } from '../../../types'
+
+jest.mock('../../../src/composables/configuration/useConfigurationManager', () => ({
+  useConfigurationManager: () =>
+    mock<ConfigurationManager>({
+      options: {
+        routing: {
+          fullShareOwnerPaths: false
+        }
+      }
+    })
+}))
 
 describe('AppTopBar', () => {
   describe('if no resource is present', () => {
     it('renders only a close button', () => {
-      const { wrapper } = getWrapper()
+      const { wrapper } = getWrapper(mock<Resource>({ path: '/test.txt', shareRoot: '/test' }))
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
   describe('if a resource is present', () => {
     it('renders a resource and no actions (if none given) and a close button', () => {
-      const { wrapper } = getWrapper(mock<Resource>())
+      const { wrapper } = getWrapper(mock<Resource>({ path: '/test.txt', shareRoot: '/test' }))
       expect(wrapper.html()).toMatchSnapshot()
     })
 
     it('renders a resource and mainActions (if given) and a close button', () => {
-      const { wrapper } = getWrapper(mock<Resource>(), [], [mock<Action>()])
+      const { wrapper } = getWrapper(
+        mock<Resource>({ path: '/test.txt', shareRoot: '/test' }),
+        [],
+        [mock<Action>()]
+      )
       expect(wrapper.html()).toMatchSnapshot()
     })
 
     it('renders a resource and dropdownActions (if given) and a close button', () => {
-      const { wrapper } = getWrapper(mock<Resource>(), [mock<Action>()], [])
+      const { wrapper } = getWrapper(
+        mock<Resource>({ path: '/test.txt', shareRoot: '/test' }),
+        [mock<Action>()],
+        []
+      )
       expect(wrapper.html()).toMatchSnapshot()
     })
     it('renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button', () => {
-      const { wrapper } = getWrapper(mock<Resource>(), [mock<Action>()], [mock<Action>()])
+      const { wrapper } = getWrapper(
+        mock<Resource>({ path: '/test.txt', shareRoot: '/test' }),
+        [mock<Action>()],
+        [mock<Action>()]
+      )
       expect(wrapper.html()).toMatchSnapshot()
     })
   })
@@ -38,6 +69,11 @@ function getWrapper(
   dropDownActions: Action[] = [],
   mainActions: Action[] = []
 ) {
+  const storeOptions = { ...defaultStoreMockOptions }
+  const store = createStore(storeOptions)
+  const mocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ name: 'admin-settings-general' })
+  })
   return {
     wrapper: shallowMount(AppTopBar, {
       props: {
@@ -46,7 +82,9 @@ function getWrapper(
         resource
       },
       global: {
-        plugins: [...defaultPlugins()]
+        plugins: [...defaultPlugins(), store],
+        mocks,
+        provide: mocks
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts b/packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts
index a0dde0dc33f..957c0a177d6 100644
--- a/packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts
@@ -16,12 +16,19 @@ jest.mock('../../../../src/composables/spaces/useGetMatchingSpace', () => ({
 }))
 
 describe('Preview component', () => {
+  const driveAliasAndItem = '1'
   jest.mocked(useGetMatchingSpace).mockImplementation(() => useGetMatchingSpaceMock())
   it('should set correct props on oc-resource component', () => {
-    const { wrapper } = getWrapper()
+    const { wrapper } = getWrapper({
+      space: mock<SpaceResource>({
+        id: '1',
+        driveType: 'project',
+        name: 'New space',
+        getDriveAliasAndItem: () => driveAliasAndItem
+      })
+    })
     const ocResource = wrapper.findComponent<any>('oc-resource-stub')
 
-    expect(ocResource.exists()).toBeTruthy()
     expect(ocResource.props().resource).toMatchObject(wrapper.vm.searchResult.data)
   })
   describe('computed parentFolderLink', () => {
@@ -38,62 +45,6 @@ describe('Preview component', () => {
       expect(wrapper.vm.parentFolderLink.params.driveAliasAndItem).toEqual(driveAliasAndItem)
     })
   })
-
-  describe('computed method "parentFolderName"', () => {
-    it('should equal "All files and folders" if spaces capability is not present', () => {
-      const { wrapper } = getWrapper({
-        hasShareJail: false
-      })
-      expect(wrapper.vm.parentFolderName).toEqual('All files and folders')
-    })
-    it('should equal the space name if resource storage is representing a project space', () => {
-      const { wrapper } = getWrapper({
-        space: mock<SpaceResource>({
-          id: '1',
-          driveType: 'project',
-          name: 'New space',
-          getDriveAliasAndItem: jest.fn()
-        })
-      })
-      expect(wrapper.vm.parentFolderName).toEqual('New space')
-    })
-    it('should equal the share name if resource is representing a file or folder in the root of a share', () => {
-      const { wrapper } = getWrapper({
-        searchResult: {
-          id: '1',
-          data: {
-            path: '/My share/test.txt',
-            shareRoot: '/My share',
-            shareId: '1'
-          }
-        }
-      })
-      expect(wrapper.vm.parentFolderName).toEqual('My share')
-    })
-    it('should equal the "Shared with me" if resource is representing the root share', () => {
-      const { wrapper } = getWrapper({
-        searchResult: {
-          id: '1',
-          data: {
-            path: '/My share',
-            shareRoot: '/My share',
-            shareId: '1',
-            isShareRoot: () => true
-          }
-        }
-      })
-      expect(wrapper.vm.parentFolderName).toEqual('Shared with me')
-    })
-    it('should equal "Personal" if resource storage is not representing the personal home', () => {
-      const { wrapper } = getWrapper({
-        space: mock<SpaceResource>({
-          id: 1,
-          driveType: 'personal'
-        })
-      })
-      expect(wrapper.vm.parentFolderName).toEqual('Personal')
-    })
-  })
 })
 
 function getWrapper({
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index 24b297c8f87..dbf7655debc 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`AppTopBar if a resource is present renders a resource and dropdownActio
   <div class="oc-app-top-bar oc-flex">
     <span class="oc-app-top-bar-inner oc-px-m oc-flex oc-flex-middle oc-flex-between">
       <div class="open-file-bar oc-flex">
-        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfoldername="" resource="undefined"></oc-resource-stub>
+        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfolderlinkiconadditionalattributes="[object Object]" parentfoldername="test" pathprefix="Shares/Shared with me/test" resource="undefined"></oc-resource-stub>
       </div>
       <div class="oc-flex main-actions">
         <!--v-if-->
@@ -23,7 +23,7 @@ exports[`AppTopBar if a resource is present renders a resource and dropdownActio
   <div class="oc-app-top-bar oc-flex">
     <span class="oc-app-top-bar-inner oc-px-m oc-flex oc-flex-middle oc-flex-between">
       <div class="open-file-bar oc-flex">
-        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfoldername="" resource="undefined"></oc-resource-stub>
+        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfolderlinkiconadditionalattributes="[object Object]" parentfoldername="test" pathprefix="Shares/Shared with me/test" resource="undefined"></oc-resource-stub>
       </div>
       <div class="oc-flex main-actions">
         <context-action-menu-stub actionoptions="[object Object]" appearance="raw-inverse" menusections="[object Object]" variation="brand"></context-action-menu-stub>
@@ -41,7 +41,7 @@ exports[`AppTopBar if a resource is present renders a resource and mainActions (
   <div class="oc-app-top-bar oc-flex">
     <span class="oc-app-top-bar-inner oc-px-m oc-flex oc-flex-middle oc-flex-between">
       <div class="open-file-bar oc-flex">
-        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfoldername="" resource="undefined"></oc-resource-stub>
+        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfolderlinkiconadditionalattributes="[object Object]" parentfoldername="test" pathprefix="Shares/Shared with me/test" resource="undefined"></oc-resource-stub>
       </div>
       <div class="oc-flex main-actions">
         <context-action-menu-stub actionoptions="[object Object]" appearance="raw-inverse" menusections="[object Object]" variation="brand"></context-action-menu-stub>
@@ -58,7 +58,7 @@ exports[`AppTopBar if a resource is present renders a resource and no actions (i
   <div class="oc-app-top-bar oc-flex">
     <span class="oc-app-top-bar-inner oc-px-m oc-flex oc-flex-middle oc-flex-between">
       <div class="open-file-bar oc-flex">
-        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfoldername="" resource="undefined"></oc-resource-stub>
+        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfolderlinkiconadditionalattributes="[object Object]" parentfoldername="test" pathprefix="Shares/Shared with me/test" resource="undefined"></oc-resource-stub>
       </div>
       <div class="oc-flex main-actions">
         <!--v-if-->
@@ -75,7 +75,7 @@ exports[`AppTopBar if no resource is present renders only a close button 1`] = `
   <div class="oc-app-top-bar oc-flex">
     <span class="oc-app-top-bar-inner oc-px-m oc-flex oc-flex-middle oc-flex-between">
       <div class="open-file-bar oc-flex">
-        <!--v-if-->
+        <oc-resource-stub id="app-top-bar-resource" isextensiondisplayed="true" isicondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="false" parentfolderlinkiconadditionalattributes="[object Object]" parentfoldername="test" pathprefix="Shares/Shared with me/test" resource="undefined"></oc-resource-stub>
       </div>
       <div class="oc-flex main-actions">
         <!--v-if-->
diff --git a/packages/web-pkg/tests/unit/composables/folderLink/useFolderLink.spec.ts b/packages/web-pkg/tests/unit/composables/folderLink/useFolderLink.spec.ts
new file mode 100644
index 00000000000..ffbacc26d92
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/folderLink/useFolderLink.spec.ts
@@ -0,0 +1,172 @@
+import { mock } from 'jest-mock-extended'
+import {
+  createStore,
+  defaultComponentMocks,
+  defaultStoreMockOptions,
+  getComposableWrapper
+} from 'web-test-helpers'
+import { useFolderLink } from '../../../../src/composables'
+import { ConfigurationManager } from '../../../../src/configuration'
+
+jest.mock('../../../../src/configuration', () => {
+  return {
+    configurationManager: {
+      options: {
+        routing: {
+          fullShareOwnerPaths: false,
+          idBased: true
+        }
+      }
+    }
+  }
+})
+
+jest.mock('../../../../src/composables/configuration', () => ({
+  useConfigurationManager: () =>
+    mock<ConfigurationManager>({
+      options: {
+        routing: {
+          fullShareOwnerPaths: false,
+          idBased: true
+        }
+      }
+    })
+}))
+
+describe('useFolderLink', () => {
+  it('getFolderLink should return the correct folder link', () => {
+    const resource = {
+      path: '/my-folder',
+      id: '2',
+      fileId: '2',
+      storageId: '1'
+    }
+    const wrapper = createWrapper()
+
+    const folderLink = wrapper.vm.getFolderLink(resource)
+    expect(folderLink).toEqual({
+      name: 'files-spaces-generic',
+      params: { driveAliasAndItem: 'personal/admin' },
+      query: { fileId: '2' }
+    })
+  })
+
+  it('getParentFolderLink should return the correct parent folder link', () => {
+    const resource = {
+      path: '/my-folder',
+      id: '2',
+      fileId: '2',
+      storageId: '1',
+      parentFolderId: '1'
+    }
+
+    const wrapper = createWrapper()
+    const parentFolderLink = wrapper.vm.getParentFolderLink(resource)
+    expect(parentFolderLink).toEqual({
+      name: 'files-spaces-generic',
+      params: { driveAliasAndItem: 'personal/admin' },
+      query: { fileId: '1' }
+    })
+  })
+
+  describe('getParentFolderName should return the correct parent folder name', () => {
+    it('should equal "Personal" if share jail is enabled', () => {
+      const resource = {
+        path: '/my-folder',
+        storageId: '1'
+      }
+
+      const wrapper = createWrapper()
+      const parentFolderName = wrapper.vm.getParentFolderName(resource)
+      expect(parentFolderName).toEqual('Personal')
+    })
+    it('should equal "All files and folders" if share jail disabled', () => {
+      const resource = {
+        path: '/my-folder',
+        storageId: '1'
+      }
+
+      const wrapper = createWrapper({ hasShareJail: false })
+      const parentFolderName = wrapper.vm.getParentFolderName(resource)
+      expect(parentFolderName).toEqual('All files and folders')
+    })
+    it('should equal the space name if resource storage is representing a project space', () => {
+      const resource = {
+        path: '/my-folder',
+        storageId: '2'
+      }
+
+      const wrapper = createWrapper()
+      const parentFolderName = wrapper.vm.getParentFolderName(resource)
+      expect(parentFolderName).toEqual('New space')
+    })
+    it('should equal the "Shared with me" if resource is representing the root share', () => {
+      const resource = {
+        path: '/My share',
+        shareRoot: '/My share',
+        shareId: '1',
+        isShareRoot: () => true
+      }
+
+      const wrapper = createWrapper()
+      const parentFolderName = wrapper.vm.getParentFolderName(resource)
+      expect(parentFolderName).toEqual('Shared with me')
+    })
+    it('should equal the share name if resource is representing a file or folder in the root of a share', () => {
+      const resource = {
+        path: '/My share/test.txt',
+        shareRoot: '/My share',
+        shareId: '1'
+      }
+
+      const wrapper = createWrapper()
+      const parentFolderName = wrapper.vm.getParentFolderName(resource)
+      expect(parentFolderName).toEqual('My share')
+    })
+  })
+})
+
+const createWrapper = ({ hasShareJail = true }: { hasShareJail?: boolean } = {}) => {
+  const storeOptions = { ...defaultStoreMockOptions }
+  storeOptions.getters.capabilities.mockImplementation(() => ({
+    spaces: { projects: true, share_jail: hasShareJail }
+  }))
+  storeOptions.modules.runtime.modules.spaces.getters.spaces = jest.fn(() => [
+    {
+      id: '1',
+      fileId: '1',
+      driveType: 'personal',
+      getDriveAliasAndItem: () => 'personal/admin'
+    },
+    {
+      id: '2',
+      driveType: 'project',
+      name: 'New space',
+      getDriveAliasAndItem: jest.fn()
+    }
+  ])
+  const store = createStore(storeOptions)
+  const mocks = defaultComponentMocks({})
+  return getComposableWrapper(
+    () => {
+      const {
+        getFolderLink,
+        getParentFolderLink,
+        getParentFolderName,
+        getParentFolderLinkIconAdditionalAttributes
+      } = useFolderLink()
+
+      return {
+        getFolderLink,
+        getParentFolderLink,
+        getParentFolderName,
+        getParentFolderLinkIconAdditionalAttributes
+      }
+    },
+    {
+      mocks,
+      provide: mocks,
+      store
+    }
+  )
+}
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 5699cda4481..81203440396 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -54,12 +54,13 @@ import SkipTo from './components/SkipTo.vue'
 import LayoutApplication from './layouts/Application.vue'
 import LayoutLoading from './layouts/Loading.vue'
 import LayoutPlain from './layouts/Plain.vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, unref, watch } from 'vue'
 import { isPublicLinkContext, isUserContext } from './router'
 import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line
-import { eventBus } from '@ownclouders/web-pkg'
+import { eventBus, useRouter } from '@ownclouders/web-pkg'
 import { useHead } from './composables/head'
 import { useStore } from '@ownclouders/web-pkg'
+import { RouteLocation } from 'vue-router'
 
 export default defineComponent({
   components: {
@@ -67,7 +68,35 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+    const router = useRouter()
     useHead({ store })
+
+    const activeRoute = computed(() => router.resolve(unref(router.currentRoute)))
+
+    watch(
+      () => unref(activeRoute),
+      (newRoute, oldRoute) => {
+        const getAppFromRoute = (route: RouteLocation): string => {
+          return route?.path?.split('/')?.[1]
+        }
+
+        const oldApp = getAppFromRoute(oldRoute)
+        const newApp = getAppFromRoute(newRoute)
+
+        if (oldApp === newApp) {
+          return
+        }
+
+        if ('driveAliasAndItem' in newRoute.params) {
+          return
+        }
+
+        /*
+         * If app has been changed and no file context is set, we will reset current folder.
+         */
+        store.commit('Files/SET_CURRENT_FOLDER', null)
+      }
+    )
   },
   data() {
     return {
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 8a5358effe8..f4929c8f8ea 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -29,13 +29,12 @@
           <li v-for="(n, nid) in applicationsList" :key="`apps-menu-${nid}`">
             <oc-button
               :key="n.url ? 'apps-menu-external-link' : 'apps-menu-internal-link'"
-              :type="n.url ? 'a' : 'router-link'"
-              :target="n.target"
-              :href="n.url"
-              :to="n.path"
               :appearance="n.active ? 'raw-inverse' : 'raw'"
               :variation="n.active ? 'primary' : 'passive'"
               :class="{ 'oc-background-primary-gradient router-link-active': n.active }"
+              :data-test-id="n.id"
+              v-bind="getAdditionalAttributes(n)"
+              v-on="getAdditionalEventBindings(n)"
             >
               <oc-application-icon
                 :key="`apps-menu-icon-${nid}-${appIconKey}`"
@@ -52,11 +51,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ComponentPublicInstance, ref, computed } from 'vue'
+import { defineComponent, PropType, ComponentPublicInstance, ref, computed, unref } from 'vue'
 import { OcDrop } from 'design-system/src/components'
 import OcApplicationIcon from 'design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue'
 import { useGettext } from 'vue3-gettext'
 import * as uuid from 'uuid'
+import {
+  ApplicationInformation,
+  EDITOR_MODE_EDIT,
+  resolveFileNameDuplicate,
+  useClientService,
+  useFileActions,
+  useGetMatchingSpace,
+  useStore
+} from '@ownclouders/web-pkg'
+import { Resource } from '@ownclouders/web-client'
+import { urlJoin } from '@ownclouders/web-client/src/utils'
 
 export default defineComponent({
   components: {
@@ -70,8 +80,12 @@ export default defineComponent({
     }
   },
   setup() {
+    const store = useStore()
+    const { openEditor } = useFileActions()
+    const clientService = useClientService()
     const { $gettext } = useGettext()
     const appIconKey = ref('')
+    const { getMatchingSpace, getPersonalSpace } = useGetMatchingSpace()
 
     const applicationSwitcherLabel = computed(() => {
       return $gettext('Application Switcher')
@@ -79,10 +93,69 @@ export default defineComponent({
     const updateAppIcons = () => {
       appIconKey.value = uuid.v4().replaceAll('-', '')
     }
+    const currentFolder = computed(() => {
+      return store.getters['Files/currentFolder']
+    })
+    const files = computed((): Array<Resource> => store.getters['Files/files'])
+
+    const onEditorApplicationClick = async (item: ApplicationInformation) => {
+      let destinationSpace = unref(currentFolder) ? getMatchingSpace(unref(currentFolder)) : null
+      let destinationFiles = unref(files)
+      let filePath = unref(currentFolder)?.path
+
+      if (!destinationSpace || !unref(currentFolder).canCreate()) {
+        destinationSpace = getPersonalSpace()
+        destinationFiles = (await clientService.webdav.listFiles(destinationSpace)).children
+        filePath = ''
+      }
+
+      let fileName = $gettext('New file') + `.${item.defaultExtension}`
+
+      if (destinationFiles.some((f) => f.name === fileName)) {
+        fileName = resolveFileNameDuplicate(fileName, item.defaultExtension, destinationFiles)
+      }
+
+      const emptyResource = await clientService.webdav.putFileContents(destinationSpace, {
+        path: urlJoin(filePath, fileName)
+      })
+
+      const space = getMatchingSpace(emptyResource)
+
+      openEditor(
+        item,
+        space.getDriveAliasAndItem(emptyResource),
+        emptyResource.webDavPath,
+        emptyResource.id,
+        EDITOR_MODE_EDIT,
+        space.shareId
+      )
+    }
+    const getAdditionalEventBindings = (item: ApplicationInformation) => {
+      if (item.applicationMenu?.openAsEditor) {
+        return {
+          click: () => onEditorApplicationClick(item)
+        }
+      }
+      return {}
+    }
+    const getAdditionalAttributes = (item: any) => {
+      if (item.applicationMenu?.openAsEditor) {
+        return {}
+      }
+      return {
+        type: item.url ? 'a' : 'router-link',
+        target: item.target,
+        href: item.url,
+        to: item.path
+      }
+    }
+
     return {
       appIconKey,
       updateAppIcons,
-      applicationSwitcherLabel
+      applicationSwitcherLabel,
+      getAdditionalAttributes,
+      getAdditionalEventBindings
     }
   },
   mounted() {
@@ -99,12 +172,14 @@ export default defineComponent({
 .oc-drop {
   width: 280px;
 }
+
 .applications-list li {
   margin: var(--oc-space-xsmall) 0;
 
   &:first-child {
     margin-top: 0;
   }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -123,6 +198,7 @@ export default defineComponent({
         color: var(--oc-color-swatch-primary-contrast) !important;
       }
     }
+
     &.oc-button-passive-raw {
       &:focus,
       &:hover {
@@ -133,6 +209,7 @@ export default defineComponent({
     &:focus {
       text-decoration: none;
     }
+
     &:hover {
       background-color: var(--oc-color-background-hover);
       text-decoration: none;
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index c5974ccfcbf..5d37e749f23 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -47,6 +47,7 @@ import Notifications from './Notifications.vue'
 import FeedbackLink from './FeedbackLink.vue'
 import ThemeSwitcher from './ThemeSwitcher.vue'
 import {
+  useAbility,
   useCapabilityNotifications,
   useEmbedMode,
   useRouter,
@@ -77,6 +78,7 @@ export default {
     const isUserContext = useUserContext({ store })
     const language = useGettext()
     const router = useRouter()
+    const ability = useAbility()
     const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
 
     const logoWidth = ref('150px')
@@ -109,7 +111,10 @@ export default {
             return (
               store.getters
                 .getNavItemsByExtension(app.id)
-                .filter((navItem) => isNavItemPermitted(permittedMenus, navItem)).length > 0
+                .filter((navItem) => isNavItemPermitted(permittedMenus, navItem)).length > 0 ||
+              (app.applicationMenu.enabled instanceof Function &&
+                app.applicationMenu.enabled(store, ability) &&
+                !permittedMenus.includes('user'))
             )
           }
           return isNavItemPermitted(permittedMenus, app)
@@ -136,10 +141,13 @@ export default {
           }
 
           const app: any = {
+            id: item.id,
             icon: icon,
             iconUrl: iconUrl,
             title: title,
-            color: color
+            color: color,
+            applicationMenu: item.applicationMenu,
+            defaultExtension: item.defaultExtension
           }
 
           if (item.url) {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 49fbaa3a232..ccaa42f9077 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -189,10 +189,9 @@ export default defineComponent({
     applicationsList() {
       const list = []
 
-      // Get extensions which have at least one nav item
-      this.getExtensionsWithNavItems.forEach((extensionId) => {
+      Object.values(this.apps).forEach((app: any) => {
         list.push({
-          ...this.apps[extensionId],
+          ...app,
           type: 'extension'
         })
       })
@@ -205,7 +204,11 @@ export default defineComponent({
         })
       })
 
-      return list
+      return list.sort(
+        (a, b) =>
+          (a.applicationMenu?.priority || Number.MAX_SAFE_INTEGER) -
+          (b.applicationMenu?.priority || Number.MAX_SAFE_INTEGER)
+      )
     }
   },
   mounted() {
diff --git a/packages/web-runtime/src/store/apps.ts b/packages/web-runtime/src/store/apps.ts
index 9960a185fe8..86f5c4fedd7 100644
--- a/packages/web-runtime/src/store/apps.ts
+++ b/packages/web-runtime/src/store/apps.ts
@@ -86,7 +86,9 @@ const mutations = {
       ...(appInfo.iconColor && { iconColor: appInfo.iconColor }),
       img: appInfo.img || null,
       config: (state.fileEditorConfigs || {})[appInfo.id],
-      color: appInfo.color || ''
+      color: appInfo.color || '',
+      applicationMenu: appInfo.applicationMenu || {},
+      defaultExtension: appInfo.defaultExtension || ''
     }
     state.meta[app.id] = app
   },
diff --git a/packages/web-runtime/tests/unit/components/Topbar/ApplicationsMenu.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/ApplicationsMenu.spec.ts
index e2ba647fee5..209f7f3f2c9 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/ApplicationsMenu.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/ApplicationsMenu.spec.ts
@@ -1,5 +1,13 @@
 import ApplicationsMenu from 'web-runtime/src/components/Topbar/ApplicationsMenu.vue'
-import { defaultComponentMocks, defaultPlugins, shallowMount } from 'web-test-helpers'
+import {
+  RouteLocation,
+  createStore,
+  defaultComponentMocks,
+  defaultPlugins,
+  defaultStoreMockOptions,
+  shallowMount
+} from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
 
 const menuLinks = [
   {
@@ -25,6 +33,18 @@ describe('ApplicationsMenu component', () => {
 })
 
 function getWrapper(applicationsList = []) {
+  const storeOptions = {
+    ...defaultStoreMockOptions,
+    modules: { ...defaultStoreMockOptions.modules, user: { state: { id: 'alice', uuid: 1 } } }
+  }
+  const store = createStore(storeOptions)
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ query: { app: 'admin-settings' } })
+    }),
+    space: { driveType: 'personal', spaceRoles: { viewer: [], editor: [], manager: [] } }
+  }
+
   return {
     wrapper: shallowMount(ApplicationsMenu, {
       props: {
@@ -32,8 +52,9 @@ function getWrapper(applicationsList = []) {
       },
       global: {
         renderStubDefaultSlot: true,
-        mocks: defaultComponentMocks(),
-        plugins: [...defaultPlugins()]
+        mocks,
+        provide: mocks,
+        plugins: [...defaultPlugins(), store]
       }
     })
   }
diff --git a/packages/web-test-helpers/src/mocks/useGetMatchingSpaceMock.ts b/packages/web-test-helpers/src/mocks/useGetMatchingSpaceMock.ts
index a9f79ed94fa..c25583d5ad0 100644
--- a/packages/web-test-helpers/src/mocks/useGetMatchingSpaceMock.ts
+++ b/packages/web-test-helpers/src/mocks/useGetMatchingSpaceMock.ts
@@ -1,6 +1,7 @@
 import { mock } from 'jest-mock-extended'
 import { Resource, SpaceResource } from '../../../web-client/src'
 import { useGetMatchingSpace } from '../../../web-pkg'
+import { PersonalSpaceResource } from '../../../web-client/src/helpers'
 
 export const useGetMatchingSpaceMock = (
   options: Partial<ReturnType<typeof useGetMatchingSpace>> = {}
@@ -12,6 +13,9 @@ export const useGetMatchingSpaceMock = (
     getMatchingSpace(resource: Resource) {
       return mock<SpaceResource>()
     },
+    getPersonalSpace() {
+      return mock<PersonalSpaceResource>()
+    },
     isResourceAccessible({ space, path }) {
       return false
     },
diff --git a/tests/e2e/cucumber/features/smoke/applicationMenu.feature b/tests/e2e/cucumber/features/smoke/applicationMenu.feature
new file mode 100644
index 00000000000..3959cc1cd2f
--- /dev/null
+++ b/tests/e2e/cucumber/features/smoke/applicationMenu.feature
@@ -0,0 +1,17 @@
+Feature: Application menu
+  As a user
+  I want to open the editor via the application menu
+  So that I have instant access
+
+  Scenario: Open text editor via application menu
+    Given "Admin" creates following user using API
+      | id    |
+      | Alice |
+    And "Alice" logs in
+    When "Alice" opens the "text-editor" app
+    And "Alice" enters the text "Hello world" in editor "TextEditor"
+    And "Alice" saves the file viewer
+    And "Alice" closes the file viewer
+    Then following resources should be displayed in the files list for user "Alice"
+      | resource     |
+      | New file.txt |
diff --git a/tests/e2e/cucumber/steps/ui/public.ts b/tests/e2e/cucumber/steps/ui/public.ts
index e9a0910b30a..3633b168b05 100644
--- a/tests/e2e/cucumber/steps/ui/public.ts
+++ b/tests/e2e/cucumber/steps/ui/public.ts
@@ -47,6 +47,32 @@ When(
   }
 )
 
+When(
+  '{string} saves the file viewer',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    await editor.save(page)
+  }
+)
+
+When(
+  '{string} enters the text {string} in editor {string}',
+  async function (
+    this: World,
+    stepUser: string,
+    text: string,
+    editorToOpen: string
+  ): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const pageObject = new objects.applicationFiles.page.Public({ page })
+    await pageObject.fillContentOfOpenDocumentOrMicrosoftWordDocument({
+      page,
+      text,
+      editorToOpen
+    })
+  }
+)
+
 When(
   '{string} should see the content {string} in editor {string}',
   async function (
diff --git a/tests/e2e/support/objects/app-files/page/public.ts b/tests/e2e/support/objects/app-files/page/public.ts
index 24dfde41ee8..563fbc89dbf 100644
--- a/tests/e2e/support/objects/app-files/page/public.ts
+++ b/tests/e2e/support/objects/app-files/page/public.ts
@@ -10,6 +10,7 @@ const dropUploadResourceSelector = '.upload-info-items [data-test-resource-name=
 const toggleUploadDetailsButton = '.upload-info-toggle-details-btn'
 const uploadInfoSuccessLabelSelector = '.upload-info-success'
 const publicLinkAuthorizeButton = '.oc-login-authorize-button'
+
 export class Public {
   #page: Page
 
@@ -94,4 +95,16 @@ export class Public {
   }): Promise<string> {
     return await po.openAndGetContentOfDocument({ page, editorToOpen })
   }
+
+  async fillContentOfOpenDocumentOrMicrosoftWordDocument({
+    page,
+    text,
+    editorToOpen
+  }: {
+    page: Page
+    text: string
+    editorToOpen: string
+  }): Promise<void> {
+    return await po.fillContentOfDocument({ page, text, editorToOpen })
+  }
 }
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index f7edd5131d0..c2dfed55e18 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -102,6 +102,7 @@ const collaboraWelcomeModalIframe = '.iframe-welcome-modal'
 const onlyOfficeCanvasEditorSelector = '#id_viewer_overlay'
 const onlyOfficeCanvasCursorSelector = '#id_target_cursor'
 const collaboraCanvasEditorSelector = '.leaflet-layer'
+const textEditorTextArea = '#text-editor-input'
 
 export const clickResource = async ({
   page,
@@ -311,6 +312,23 @@ const createDocumentFile = async (
   }
 }
 
+export const fillContentOfDocument = async ({
+  page,
+  text,
+  editorToOpen
+}: {
+  page: Page
+  text: string
+  editorToOpen: string
+}): Promise<void> => {
+  switch (editorToOpen) {
+    case 'TextEditor':
+      await page.locator(textEditorTextArea).fill(text)
+      break
+    default:
+      throw new Error("Editor should be 'TextEditor' but found " + editorToOpen)
+  }
+}
 export const openAndGetContentOfDocument = async ({
   page,
   editorToOpen
@@ -637,6 +655,7 @@ export interface moveOrCopyResourceArgs {
   action: 'copy' | 'move'
   method: string
 }
+
 export const pasteResource = async (
   args: Omit<moveOrCopyResourceArgs, 'action' | 'method'>
 ): Promise<void> => {
diff --git a/tests/e2e/support/objects/app-files/utils/editor.ts b/tests/e2e/support/objects/app-files/utils/editor.ts
index eca2e588a03..181656be586 100644
--- a/tests/e2e/support/objects/app-files/utils/editor.ts
+++ b/tests/e2e/support/objects/app-files/utils/editor.ts
@@ -1,6 +1,7 @@
 import { Page } from 'playwright'
 
 const closeTextEditorOrViewerButton = '#app-top-bar-close'
+const saveTextEditorOrViewerButton = '#app-save-action'
 
 export const close = (page: Page): Promise<unknown> => {
   return Promise.all([
@@ -8,3 +9,10 @@ export const close = (page: Page): Promise<unknown> => {
     page.locator(closeTextEditorOrViewerButton).click()
   ])
 }
+
+export const save = async (page: Page): Promise<unknown> => {
+  return Promise.all([
+    page.waitForResponse((res) => res.request().method() === 'PUT' && res.status() === 204),
+    page.locator(saveTextEditorOrViewerButton).click()
+  ])
+}
diff --git a/tests/e2e/support/objects/runtime/application.ts b/tests/e2e/support/objects/runtime/application.ts
index afd14a780b1..450a62307d3 100644
--- a/tests/e2e/support/objects/runtime/application.ts
+++ b/tests/e2e/support/objects/runtime/application.ts
@@ -2,7 +2,7 @@ import { Page } from 'playwright'
 import util from 'util'
 
 const appSwitcherButton = '#_appSwitcherButton'
-const appSelector = `//ul[contains(@class, "applications-list")]//a[@href="#/%s" or @href="/%s"]`
+const appSelector = `//ul[contains(@class, "applications-list")]//*[@data-test-id="%s"]`
 const notificationsBell = `#oc-notifications-bell`
 const notificationsDrop = `#oc-notifications-drop`
 const notificationsLoading = `#oc-notifications-drop .oc-notifications-loading`
@@ -21,8 +21,9 @@ export class Application {
   }
 
   async open({ name }: { name: string }): Promise<void> {
+    await this.#page.waitForTimeout(1000)
     await this.#page.locator(appSwitcherButton).click()
-    await this.#page.locator(util.format(appSelector, name, name)).click()
+    await this.#page.locator(util.format(appSelector, name)).click()
   }
 
   async getNotificationMessages(): Promise<string[]> {