Merge pull request #4923 from FlowFuse/4727-nr-new-tab

Open Dashboard and Editor links in new tab by default
FlowFuse · Dec 17, 2024 · be3af14 · be3af14
2 parents 2c8fea7 + ac9b3cf
commit be3af14
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/frontend/src/composables/NavigationHelper.js b/frontend/src/composables/NavigationHelper.js
@@ -3,9 +3,9 @@ import { useRouter } from 'vue-router'
 export function useNavigationHelper () {
     const _router = useRouter()
 
-    const openInANewTab = (href) => {
+    const openInANewTab = (href, target = '_blank') => {
         return new Promise(resolve => {
-            window.open(href, '_blank')
+            window.open(href, target)
             resolve()
         })
     }

diff --git a/frontend/src/pages/instance/components/DashboardLink.vue b/frontend/src/pages/instance/components/DashboardLink.vue
@@ -3,12 +3,9 @@
         v-if="!hidden"
         kind="secondary"
         data-action="open-dashboard"
-        :to="dashboardURL"
-        :target="target"
         :disabled="buttonDisabled"
         class="whitespace-nowrap"
-        @click.stop.prevent
-        @mouseup.stop.prevent
+        @click="openDashboard"
     >
         <template v-if="showText" #icon-left>
             <ChartPieIcon />
@@ -23,11 +20,14 @@
 </template>
 
 <script>
-
 import { ChartPieIcon } from '@heroicons/vue/outline'
 
+import { useNavigationHelper } from '../../../composables/NavigationHelper.js'
+
 import { removeSlashes } from '../../../composables/String.js'
 
+const { openInANewTab } = useNavigationHelper()
+
 export default {
     name: 'DashboardLink',
     components: { ChartPieIcon },
@@ -67,6 +67,14 @@ export default {
         target () {
             return '_db2_' + (this.instance?.id || '')
         }
+    },
+    methods: {
+        openDashboard () {
+            if (this.buttonDisabled) {
+                return
+            }
+            openInANewTab(this.dashboardURL, this.target)
+        }
     }
 }
 </script>
diff --git a/frontend/src/pages/instance/components/EditorLink.vue b/frontend/src/pages/instance/components/EditorLink.vue
@@ -8,7 +8,6 @@
                 :disabled="buttonDisabled"
                 class="whitespace-nowrap"
                 :emit-instead-of-navigate="true"
-                @select="openEditor"
             >
                 <template v-if="showText" #icon-left>
                     <ProjectIcon />
@@ -96,16 +95,11 @@ export default {
                 return false
             }
 
-            switch (true) {
-            case !this.isImmersiveEditor:
-                return this.openInANewTab(this.editorURL)
-            case evt.ctrlKey || evt.metaKey || evt.button === 1:
-                // On Mac Keyboard, ⌘ + click opens in new tab (⌘ is `metaKey`)
-                // Otherwise Ctrl + click opens in new tab (Ctrl is `ctrlKey`)
-                // Middle mouse button click opens in a new tab (button === 1)
-                return this.openInANewTab(this.url)
-            default:
-                return this.$router.push(this.url)
+            const target = `_${this.instance.id}`
+            if (!this.isImmersiveEditor) {
+                return this.openInANewTab(this.editorURL, target)
+            } else {
+                return this.openInANewTab(this.url, target)
             }
         }
     }

diff --git a/test/e2e/frontend/cypress/tests/instances/editor.spec.js b/test/e2e/frontend/cypress/tests/instances/editor.spec.js
@@ -56,10 +56,13 @@ describe('FlowForge - Instance editor', () => {
             .children()
             .should('exist')
 
+        cy.window().then((win) => {
+            cy.stub(win, 'open').as('windowOpen')
+        })
+
         cy.get('[data-action="open-editor"]').click()
 
-        cy.get('[data-el="editor-iframe"]').should('exist')
-        cy.get('[data-el="tabs-drawer"]').should('exist')
+        cy.get('@windowOpen').should('be.calledWithMatch', /\/instance\/.*\/editor/)
     })
 
     it('has working drawer navigation tabs', () => {