fix(web-pkg): hide sidebar editor action when the editor is already opened

When an editor is already opened and the user clicks on the Open in ... action, it pushes the same editor route into the history causing a bug where the user needs to click twice on the close button to actually close the editor. This change hides the editor action if an editor with matching route name is already opened which prevents this behaviour.

Author: LukasHirt

changelog/unreleased/enhancement-hide-active-editor-action.md

@@ -0,0 +1,6 @@
+Enhancement: Hide active editor action
+
+We've hidden the sidebar file action of a currently opened editor. This prevents confusion where user might try to re-open the current editor.
+
+https://github.com/owncloud/web/pull/12110
+https://github.com/owncloud/web/issues/12108

packages/web-pkg/src/composables/actions/files/useFileActions.ts

@@ -40,6 +40,7 @@ import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { storeToRefs } from 'pinia'
 import { useEmbedMode } from '../../embedMode'
 import { RouteRecordName } from 'vue-router'
+import { isLocationActive } from '../../../router/utils'
 
 export const EDITOR_MODE_EDIT = 'edit'
 export const EDITOR_MODE_CREATE = 'create'
@@ -155,6 +156,10 @@ export const useFileActions = () => {
               return false
             }
 
+            if (isLocationActive(router, { name: fileExtension.routeName })) {
+              return false
+            }
+
             if (resources[0].extension && fileExtension.extension) {
               return resources[0].extension.toLowerCase() === fileExtension.extension.toLowerCase()
             }

packages/web-pkg/tests/unit/composables/actions/files/useFileActions.spec.ts

@@ -1,13 +1,13 @@
 import { mock } from 'vitest-mock-extended'
-import { useFileActions } from '../../../../../src/composables/actions'
+import { Action, FileActionOptions, useFileActions } from '../../../../../src/composables/actions'
 import {
   defaultComponentMocks,
   RouteLocation,
   getComposableWrapper
 } from '@ownclouders/web-test-helpers'
 import { computed, unref } from 'vue'
 import { describe } from 'vitest'
-import { Resource } from '@ownclouders/web-client'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 
 const mockUseEmbedMode = vi.fn().mockReturnValue({ isEnabled: computed(() => false) })
 vi.mock('../../../../../src/composables/embedMode', () => ({
@@ -33,6 +33,29 @@ describe('fileActions', () => {
         }
       })
     })
+
+    it('should hide action when editor with matching routeName is opened', () => {
+      getWrapper({
+        currentRoute: mock<RouteLocation>({ name: 'text-editor' }),
+        setup: ({ editorActions }) => {
+          const [textEditor] = unref(editorActions)
+
+          expect(
+            (textEditor as Action<FileActionOptions>).isVisible({
+              space: mock<SpaceResource>(),
+              resources: [
+                mock<Resource>({
+                  id: '2',
+                  extension: 'txt',
+                  mimeType: 'text/txt',
+                  canDownload: () => true
+                })
+              ]
+            })
+          ).toStrictEqual(false)
+        }
+      })
+    })
   })
   describe('secure view context', () => {
     describe('computed property "editorActions"', () => {
@@ -60,10 +83,16 @@ describe('fileActions', () => {
   })
 })
 
-function getWrapper({ setup }: { setup: (instance: ReturnType<typeof useFileActions>) => void }) {
+function getWrapper({
+  setup,
+  currentRoute = mock<RouteLocation>({ name: 'files-spaces-generic' })
+}: {
+  setup: (instance: ReturnType<typeof useFileActions>) => void
+  currentRoute?: RouteLocation
+}) {
   const mocks = {
     ...defaultComponentMocks({
-      currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+      currentRoute
     })
   }
   return {
@@ -103,7 +132,8 @@ function getWrapper({ setup }: { setup: (instance: ReturnType<typeof useFileActi
                 {
                   app: 'text-editor',
                   extension: 'txt',
-                  hasPriority: false
+                  hasPriority: false,
+                  routeName: 'text-editor'
                 },
                 {
                   app: 'external',