Merge pull request FlowFuse#907 from FlowFuse/901-single-page-css

Ensure correct scoping for Single Page CSS templates
bartbutenaers · May 29, 2024 · 52e10e0 · 52e10e0
2 parents 8a109ff + 472d9bd
commit 52e10e0
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 8 deletions.
diff --git a/cypress/fixtures/flows/dashboard-templates.json b/cypress/fixtures/flows/dashboard-templates.json
@@ -12,6 +12,7 @@
         "type": "ui-base",
         "name": "UI Name",
         "path": "/dashboard",
+        "navigationStyle": "fixed",
         "includeClientData": true,
         "acceptsClientConfig": [
             "ui-notification",
@@ -32,6 +33,20 @@
         "visible": "true",
         "disabled": false
     },
+    {
+        "id": "dashboard-ui-page-2",
+        "type": "ui-page",
+        "name": "Page 2",
+        "ui": "dashboard-ui-base",
+        "path": "/page2",
+        "icon": "",
+        "layout": "grid",
+        "theme": "dashboard-ui-theme",
+        "order": -1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
     {
         "id": "dashboard-ui-theme",
         "type": "ui-theme",
@@ -234,5 +249,29 @@
                 "test-helper"
             ]
         ]
+    },
+    {
+        "id": "dashboard-ui-template-page-css",
+        "type": "ui-template",
+        "z": "node-red-tab-templates",
+        "group": "",
+        "page": "dashboard-ui-page-1",
+        "ui": "",
+        "name": "Single Page CSS",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "body { background-color: black; }",
+        "storeOutMessages": true,
+        "passthru": false,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 60,
+        "y": 240,
+        "wires": [
+            []
+        ]
     }
 ]
diff --git a/cypress/tests/widgets/template.spec.js b/cypress/tests/widgets/template.spec.js
@@ -25,3 +25,28 @@ describe('Node-RED Dashboard 2.0 - Templates', () => {
         cy.checkOutput('msg.payload', 30)
     })
 })
+
+describe('Node-RED Dashboard 2.0 - Templates (Single Page CSS)', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-templates')
+    })
+
+    it('loads on the correctly configured page', () => {
+        cy.visit('/dashboard/page1')
+        cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)')
+    })
+
+    it('does not persist in SPA navigation', () => {
+        cy.visit('/dashboard/page1')
+        cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)')
+
+        cy.clickAndWait(cy.get('[data-nav="dashboard-ui-page-2"]'))
+        cy.url().should('include', '/dashboard/page2')
+        cy.get('body').should('not.have.css', 'background-color', 'rgb(0, 0, 0)')
+    })
+
+    it('does not load the CSS on other pages if we navigate directly', () => {
+        cy.visit('/dashboard/page2')
+        cy.get('body').should('not.have.css', 'background-color', 'rgb(0, 0, 0)')
+    })
+})
diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
@@ -1,13 +1,5 @@
 <template>
     <v-app class="nrdb-app nrdb-app--baseline" :style="customThemeDefinitions">
-        <div v-for="siteTemplate in siteTemplates($route.meta.dashboard)" :key="siteTemplate.id" style="display: none">
-            Loaded site template '{{ siteTemplate.id }}'
-            <component :is="siteTemplate.component" :id="siteTemplate.id" :props="siteTemplate.props" :state="siteTemplate.state" />
-        </div>
-        <div v-for="pageTemplate in pageTemplates($route.meta.id)" :key="pageTemplate.id" style="display: none">
-            Loaded site template '{{ pageTemplate.id }}'
-            <component :is="pageTemplate.component" :id="pageTemplate.id" :props="pageTemplate.props" :state="pageTemplate.state" />
-        </div>
         <v-app-bar v-if="appBarStyle !== 'hidden'" :style="{'position': navPosition}" :elevation="1">
             <template v-if="!['none', 'fixed', 'hidden'].includes(navigationStyle)" #prepend>
                 <v-app-bar-nav-icon @click="handleNavigationClick" />