Change: Globally configurable extension new tab handling

Rebase and add linked issue to changelog

Fix E2E test that expects drawIO to open in new tab

changelog/unreleased/change-streamline-editor-new-tabs

@@ -0,0 +1,7 @@
+Change: Streamline new tab handling in extensions
+
+We have added a global configuration for opening extensions in new tabs.
+This will now be configured by the administrator and applies for all extensions in the same way. 
+
+https://github.com/owncloud/web/issues/6661
+https://github.com/owncloud/web/pull/8458

docs/getting-started.md

@@ -45,6 +45,7 @@ Depending on the backend you are using, there are sample config files provided i
 menu item. The user will not be jailed in that directory. It simply serves as a default location. You can either provide a static location, or you can use
 variables of the user object to come up with a user specific home path. This uses twig template variable style and allows you to pick a value or a
 substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}}` and `/{{substr 0 3 .Id}}/{{.Id}`.
+- `options.openAppsInTab` Configures whether apps and extensions generally should open in a new tab. Defaults to false.
 - `options.disablePreviews` Set this option to `true` to disable previews in all the different file listing views. The only list view that is not affected
   by this is the trash bin, as that doesn't allow showing previews at all.
 - `options.previewFileMimeTypes` Specifies which mimeTypes will be previewed in the ui. For example to only preview jpg and text files set this option to `["image/jpeg", "text/plain"]`.

packages/web-app-draw-io/src/index.ts

@@ -20,7 +20,6 @@ const appInfo = {
   extensions: [
     {
       extension: 'drawio',
-      newTab: true,
       routeName: 'draw-io',
       newFileMenu: {
         menuTitle($gettext) {
@@ -30,7 +29,6 @@ const appInfo = {
     },
     {
       extension: 'vsdx',
-      newTab: true,
       routeName: 'draw-io'
     }
   ]

packages/web-app-files/src/mixins/fileActions.ts

@@ -1,8 +1,13 @@
 import get from 'lodash-es/get'
+import kebabCase from 'lodash-es/kebabCase'
 import { mapGetters, mapState } from 'vuex'
+import { Resource } from 'web-client'
+import { SpaceResource } from 'web-client/src/helpers'
+import { ShareStatus } from 'web-client/src/helpers/share'
+import { routeToContextQuery } from 'web-pkg/src/composables/appDefaults'
+import { configurationManager } from 'web-pkg/src/configuration'
 
 import { isLocationSharesActive, isLocationTrashActive } from '../router'
-import { routeToContextQuery } from 'web-pkg/src/composables/appDefaults'
 import AcceptShare from './actions/acceptShare'
 import Copy from './actions/copy'
 import DeclineShare from './actions/declineShare'
@@ -15,12 +20,7 @@ import ShowEditTags from './actions/showEditTags'
 import Navigate from './actions/navigate'
 import Rename from './actions/rename'
 import Restore from './actions/restore'
-import kebabCase from 'lodash-es/kebabCase'
-import { ShareStatus } from 'web-client/src/helpers/share'
 import isSearchActive from './helpers/isSearchActive'
-import { Resource } from 'web-client'
-import { SpaceResource } from 'web-client/src/helpers'
-import { configurationManager } from 'web-pkg/src/configuration'
 
 const actionsMixins = [
   'navigate',
@@ -169,7 +169,7 @@ export default {
         shareId
       )
 
-      if (editor.newTab) {
+      if (this.configuration.options.openAppsInTab) {
         const path = this.$router.resolve(routeOpts).href
         const target = `${editor.routeName}-${filePath}`
         const win = window.open(path, target)

packages/web-app-files/tests/__fixtures__/fileActions.ts

@@ -35,7 +35,6 @@ const editors = [
     extension: 'drawio',
     handler: null,
     icon: null,
-    newTab: true,
     routeName: 'draw-io-edit',
     routes
   },
@@ -44,7 +43,6 @@ const editors = [
     extension: 'png',
     handler: null,
     icon: null,
-    newTab: false,
     routeName: 'preview-media',
     routes
   },
@@ -53,7 +51,6 @@ const editors = [
     extension: 'md',
     handler: null,
     icon: null,
-    newTab: false,
     routeName: 'text-editor',
     routes
   }

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

@@ -32,7 +32,6 @@ const fileHandlerMocks = [
     ext: 'txt',
     action: {
       app: 'text-editor',
-      newTab: false,
       extension: 'txt'
     },
     menuTitle: () => 'Plain text file'
@@ -41,7 +40,6 @@ const fileHandlerMocks = [
     ext: 'md',
     action: {
       app: 'text-editor',
-      newTab: false,
       extension: 'md'
     },
     menuTitle: () => 'Mark-down file'
@@ -50,7 +48,6 @@ const fileHandlerMocks = [
     ext: 'drawio',
     action: {
       app: 'draw-io',
-      newTab: true,
       routeName: 'draw-io-edit',
       extension: 'drawio'
     },

packages/web-runtime/src/store/apps.ts

@@ -23,7 +23,6 @@ const mutations = {
       app,
       icon: extension.icon,
       img: extension.img,
-      newTab: extension.newTab || false,
       routeName: extension.routeName,
       routes: extension.routes || [],
       extension: extension.extension,

packages/web-runtime/src/store/config.ts

@@ -37,6 +37,7 @@ const state = {
   options: {
     contextHelpers: true,
     defaultExtension: 'files',
+    openAppsInTab: false,
     editor: {
       autosaveEnabled: false,
       autosaveInterval: 120

tests/e2e/support/objects/app-files/resource/actions.ts

@@ -144,15 +144,16 @@ export const createNewFileOrFolder = async (args: createResourceArgs): Promise<v
       await page.locator(createNewDrawioFileButton).click()
       await page.locator(resourceNameInput).fill(name)
 
-      const [drawioTab] = await Promise.all([
-        page.waitForEvent('popup'),
-        page.waitForResponse((resp) => resp.status() === 201 && resp.request().method() === 'PUT'),
-        page.locator(util.format(actionConfirmationButton, 'Create')).click()
-      ])
-      await drawioTab.waitForLoadState()
-      await drawioTab.frameLocator(drawioIframe).locator(drawioSaveButton).click()
-      await drawioTab.waitForURL('**/draw-io/personal/**')
-      await drawioTab.close()
+      await page.locator(util.format(actionConfirmationButton, 'Create')).click()
+      await page.waitForResponse(
+        (resp) => resp.status() === 201 && resp.request().method() === 'PUT'
+      )
+      await page.waitForLoadState()
+      await page.frameLocator(drawioIframe).locator(drawioSaveButton).click()
+      await page.waitForURL('**/draw-io/personal/**')
+
+      // TODO: Update to use appTopBar once #8447 is merged
+      await page.goto(page.url())
       break
     }
   }