From b834c1dc10cebf491260f349548c6ef6b1590c79 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 28 May 2024 16:04:06 +0100
Subject: [PATCH 1/3] Add E2E test coverage to check single page CSS loads
 correctly

---
 .../fixtures/flows/dashboard-templates.json   | 39 +++++++++++++++++++
 cypress/tests/widgets/template.spec.js        | 25 ++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/cypress/fixtures/flows/dashboard-templates.json b/cypress/fixtures/flows/dashboard-templates.json
index 58ea1fb80..386b3b6b1 100644
--- 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": [
+            []
+        ]
     }
 ]
\ No newline at end of file
diff --git a/cypress/tests/widgets/template.spec.js b/cypress/tests/widgets/template.spec.js
index 319d20a81..435081ffa 100644
--- 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.only('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)')
+    })
+})

From de8a4cac42eb341373c52f36c265d56dff9bf686 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 29 May 2024 13:35:47 +0100
Subject: [PATCH 2/3] Remove duplicate single page-scoped and UI-scoped
 template rendering

---
 ui/src/layouts/Baseline.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index ca14cb4ad..162b44a11 100644
--- 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" />

From 472d9bd8c05949607908d4ec47c665021e7b1db6 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 29 May 2024 13:50:36 +0100
Subject: [PATCH 3/3] Remove describe.only

---
 cypress/tests/widgets/template.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/tests/widgets/template.spec.js b/cypress/tests/widgets/template.spec.js
index 435081ffa..3acf1afdc 100644
--- a/cypress/tests/widgets/template.spec.js
+++ b/cypress/tests/widgets/template.spec.js
@@ -26,7 +26,7 @@ describe('Node-RED Dashboard 2.0 - Templates', () => {
     })
 })
 
-describe.only('Node-RED Dashboard 2.0 - Templates (Single Page CSS)', () => {
+describe('Node-RED Dashboard 2.0 - Templates (Single Page CSS)', () => {
     beforeEach(() => {
         cy.deployFixture('dashboard-templates')
     })