Add "Open Dashboard" button to Immersive Editor

frontend/src/pages/instance/Editor/index.vue

@@ -6,6 +6,7 @@
             class="tabs-wrapper drawer"
             :class="{'open': drawer.open, resizing: drawer.resizing}"
             :style="{ height: drawer.height + 'px' }"
+            data-el="tabs-wrapper"
         >
             <resize-bar
                 :is-handle-visible="drawer.open"
@@ -36,6 +37,7 @@
                 </div>
                 <ff-tabs :tabs="navigation" class="tabs" />
                 <div class="side-actions">
+                    <DashboardLink v-if="instance.settings?.dashboard2UI" :instance="instance" />
                     <DropdownMenu v-if="hasPermission('project:change-status')" buttonClass="ff-btn ff-btn--primary" :options="actionsDropdownOptions">Actions</DropdownMenu>
                     <a :href="instance.url">
                         <ExternalLinkIcon class="ff-btn--icon" />
@@ -70,7 +72,9 @@ import InstanceStatusPolling from '../../../components/InstanceStatusPolling.vue
 
 import FfPage from '../../../layouts/Page.vue'
 import instanceMixin from '../../../mixins/Instance.js'
+import FfTabs from '../../../ui-components/components/tabs/Tabs.vue'
 import ConfirmInstanceDeleteDialog from '../Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
+import DashboardLink from '../components/DashboardLink.vue'
 
 import EditorWrapper from './components/EditorWrapper.vue'
 import DrawerTrigger from './components/drawer/DrawerTrigger.vue'
@@ -80,6 +84,8 @@ import ResizeBar from './components/drawer/ResizeBar.vue'
 export default {
     name: 'InstanceEditor',
     components: {
+        DashboardLink,
+        FfTabs,
         MiddleCloseButton,
         DrawerTrigger,
         EditorWrapper,
@@ -266,13 +272,10 @@ export default {
       .side-actions {
         display: flex;
         justify-content: flex-end;
+        gap: 10px;
         align-items: center;
         color: $ff-grey-500;
 
-        .ff-btn--icon {
-          margin-left: 10px;
-        }
-
         .close-drawer {
           &:hover {
             cursor: pointer;

test/e2e/frontend/cypress/tests/instances/editor.spec.js

@@ -11,12 +11,11 @@ describe('FlowForge - Instance editor', () => {
                 const instance = response.body.projects.find(
                     (project) => project.name === instanceName
                 )
-                instance.name = 'qweqwe'
                 cy.visit(`/instance/${instance.id}/`)
             })
     }
 
-    it('Preserves the initial behavior if uses an unsupported launcher version', () => {
+    it.only('Preserves the initial behavior if uses an unsupported launcher version', () => {
         cy.intercept(
             'GET',
             '/api/*/projects/*',
@@ -86,7 +85,6 @@ describe('FlowForge - Instance editor', () => {
                 const instance = response.body.projects.find(
                     (project) => project.name === 'instance-1-1'
                 )
-                instance.name = 'qweqwe'
                 cy.visit(`/instance/${instance.id}/editor`)
             })
 
@@ -137,4 +135,68 @@ describe('FlowForge - Instance editor', () => {
         cy.get('@tabs-wrapper').get('.logo').click()
         cy.get('body').contains('Application')
     })
+
+    describe('The Immersive editor', () => {
+        it('doesn\'t display the dashboard button if there isn\'t a configured dashboard', () => {
+            cy.intercept(
+                'GET',
+                '/api/*/projects/*',
+                (req) => req.reply(res => {
+                    res.body = { ...res.body, ...{ meta: { versions: { launcher: '2.3.1' } } } }
+                    return res
+                })).as('getProjects')
+
+            cy.login('bob', 'bbPassword')
+            cy.home()
+
+            cy.request('GET', '/api/v1/user/teams')
+                .then((response) => {
+                    const team = response.body.teams.find(
+                        (team) => team.name === 'ATeam'
+                    )
+                    return cy.request('GET', `/api/v1/teams/${team.id}/projects`)
+                })
+                .then((response) => {
+                    const instance = response.body.projects.find(
+                        (project) => project.name === 'instance-1-1'
+                    )
+                    cy.visit(`/instance/${instance.id}/editor`)
+                })
+
+            cy.get('[data-el="tabs-wrapper"]').within(() => {
+                cy.get('[data-action="open-dashboard"]').should('not.exist')
+            })
+        })
+
+        it('displays the dashboard button if there\'s a configured dashboard available', () => {
+            cy.intercept(
+                'GET',
+                '/api/*/projects/*',
+                (req) => req.reply(res => {
+                    res.body = { ...res.body, ...{ meta: { versions: { launcher: '2.3.1' } }, settings: { dashboard2UI: '/dashboard' } } }
+                    return res
+                })).as('getProjects')
+
+            cy.login('bob', 'bbPassword')
+            cy.home()
+
+            cy.request('GET', '/api/v1/user/teams')
+                .then((response) => {
+                    const team = response.body.teams.find(
+                        (team) => team.name === 'ATeam'
+                    )
+                    return cy.request('GET', `/api/v1/teams/${team.id}/projects`)
+                })
+                .then((response) => {
+                    const instance = response.body.projects.find(
+                        (project) => project.name === 'instance-1-1'
+                    )
+                    cy.visit(`/instance/${instance.id}/editor`)
+                })
+
+            cy.get('[data-el="tabs-wrapper"]').within(() => {
+                cy.get('[data-action="open-dashboard"]').should('exist')
+            })
+        })
+    })
 })