Merge pull request #3769 from FlowFuse/3760-add-editor-dashboard-button

Add "Open Dashboard" button to Immersive Editor
FlowFuse · Apr 26, 2024 · 5022efd · 5022efd
2 parents 94f923f + bd4bcb5
commit 5022efd
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 5 deletions.
diff --git a/frontend/src/pages/instance/Editor/index.vue b/frontend/src/pages/instance/Editor/index.vue
@@ -37,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" />
@@ -73,6 +74,7 @@ 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'
@@ -82,6 +84,7 @@ import ResizeBar from './components/drawer/ResizeBar.vue'
 export default {
     name: 'InstanceEditor',
     components: {
+        DashboardLink,
         MiddleCloseButton,
         DrawerTrigger,
         FfTabs,
@@ -269,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;

diff --git a/test/e2e/frontend/cypress/tests/instances/editor.spec.js b/test/e2e/frontend/cypress/tests/instances/editor.spec.js
@@ -85,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`)
             })
 
@@ -136,4 +135,68 @@ describe('FlowForge - Instance editor', () => {
         cy.get('@tabs-wrapper').get('.logo').click()
         cy.get('[data-el="page-name"]').contains('instance-1-1')
     })
+
+    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-drawer"]').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-drawer"]').within(() => {
+                cy.get('[data-action="open-dashboard"]').should('exist')
+            })
+        })
+    })
 })