From 8867de8397a567e4ce6c6df9e59a4743ec5b1401 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 27 Aug 2024 16:33:16 +0100
Subject: [PATCH 001/109] Layout WYSIWYG - Drag & Drop Ordering for Groups

---
 nodes/config/locales/en-US/ui_page.json |   1 +
 nodes/config/ui_page.html               |   1 +
 ui/src/api/node-red.js                  |  18 ++
 ui/src/layouts/WYSIWYG.vue              | 228 ++++++++++++++++++++++++
 ui/src/layouts/index.mjs                |   4 +-
 5 files changed, 251 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/api/node-red.js
 create mode 100644 ui/src/layouts/WYSIWYG.vue

diff --git a/nodes/config/locales/en-US/ui_page.json b/nodes/config/locales/en-US/ui_page.json
index 3214ea881..aacd528c1 100644
--- a/nodes/config/locales/en-US/ui_page.json
+++ b/nodes/config/locales/en-US/ui_page.json
@@ -7,6 +7,7 @@
             "icon": "Icon",
             "theme": "Theme",
             "layout": "Layout",
+            "wysiwyg": "Editor",
             "grid": "Grid",
             "fixed": "Fixed",
             "tabs": "Tabs",
diff --git a/nodes/config/ui_page.html b/nodes/config/ui_page.html
index 371eb9274..1f061f41d 100644
--- a/nodes/config/ui_page.html
+++ b/nodes/config/ui_page.html
@@ -51,6 +51,7 @@
                 types: [{
                     value: 'layout',
                     options: [
+                        { value: 'wysiwyg', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.wysiwyg') },
                         { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') },
                         { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') },
                         { value: 'tabs', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.tabs') },
diff --git a/ui/src/api/node-red.js b/ui/src/api/node-red.js
new file mode 100644
index 000000000..6103e7bb3
--- /dev/null
+++ b/ui/src/api/node-red.js
@@ -0,0 +1,18 @@
+export default {
+    deploy: function () {
+        console.log('deploy changes')
+        // return cy.request({
+        //     method: 'POST',
+        //     url: 'http://localhost:1881/flows',
+        //     headers: {
+        //         'Content-type': 'application/json',
+        //         'Node-RED-API-Version': 'v2',
+        //         'Node-RED-Deployment-Type': 'full'
+        //     },
+        //     body: {
+        //         rev,
+        //         flows
+        //     }
+        // })
+    }
+}
diff --git a/ui/src/layouts/WYSIWYG.vue b/ui/src/layouts/WYSIWYG.vue
new file mode 100644
index 000000000..45ffa271d
--- /dev/null
+++ b/ui/src/layouts/WYSIWYG.vue
@@ -0,0 +1,228 @@
+<template>
+    <BaselineLayout :page-title="$route.meta.title">
+        <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--wysiwyg nrdb-ui-page" :class="page?.className">
+            <div
+                v-for="(g, $index) in groups"
+                :id="'nrdb-ui-group-' + g.id"
+                :key="g.id"
+                class="nrdb-ui-group"
+                :disabled="g.disabled === true ? 'disabled' : null"
+                :class="getGroupClass(g)"
+                :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
+                draggable="true"
+                @dragstart="onDragStart($event, $index)"
+                @dragover="onDragOver($event, $index)"
+                @drop="onDrop($event, $index)"
+            >
+                <v-card variant="outlined" class="bg-group-background">
+                    <template #title>{{ g.name }} {{ g.order }}</template>
+                    <template #text>
+                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
+                    </template>
+                </v-card>
+            </div>
+        </div>
+        <!-- <div>
+            <component
+                :is="widget.component"
+                v-for="widget in pageWidgets"
+                :id="widget.id"
+                :key="widget.id"
+                :props="widget.props"
+                :state="widget.state"
+            />
+        </div> -->
+        <div class="nrdb-ui-editor-tray-container">
+            <div class="nrdb-ui-editor-tray">
+                <v-btn variant="outlined" @click="discard">Discard Changes</v-btn>
+                <v-btn variant="flat" @click="save">Save Changes</v-btn>
+            </div>
+        </div>
+    </BaselineLayout>
+</template>
+
+<script>
+import NodeREDAPI from '../api/node-red'
+
+import BaselineLayout from './Baseline.vue'
+import WidgetGroup from './Group.vue'
+
+// eslint-disable-next-line import/order, sort-imports
+import { mapState, mapGetters } from 'vuex'
+
+export default {
+    name: 'LayoutWYSIWYG',
+    components: {
+        BaselineLayout,
+        WidgetGroup
+    },
+    data () {
+        return {
+            groups: [],
+            dragging: {
+                index: -1
+            }
+        }
+    },
+    computed: {
+        ...mapState('ui', ['pages']),
+        ...mapState('data', ['properties']),
+        ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
+        orderedGroups: function () {
+            // get groups on this page
+            const groups = this.groupsByPage(this.$route.meta.id)
+                // only show hte groups that haven't had their "visible" property set to false
+                .filter((g) => {
+                    if ('visible' in g) {
+                        return g.visible
+                    }
+                    return true
+                })
+                .sort((a, b) => {
+                    return a.order - b.order
+                })
+            return groups
+        },
+        pageWidgets: function () {
+            return this.widgetsByPage(this.$route.meta.id)
+        },
+        page: function () {
+            return this.pages[this.$route.meta.id]
+        }
+    },
+    mounted () {
+        // get groups for this page
+        this.groups = this.loadGroupsFromStore()
+    },
+    methods: {
+        loadGroupsFromStore () {
+            const groups = this.groupsByPage(this.$route.meta.id)
+                // only show hte groups that haven't had their "visible" property set to false
+                .filter((g) => {
+                    if ('visible' in g) {
+                        return g.visible
+                    }
+                    return true
+                })
+                .sort((a, b) => {
+                    return a.order - b.order
+                })
+            return groups
+        },
+        save () {
+            // API call to NR to trigger a deploy
+            NodeREDAPI.deploy()
+        },
+        discard () {
+            // reload groups from store
+            this.groups = this.loadGroupsFromStore()
+        },
+        onDragStart (event, index) {
+            this.dragging.index = index
+            event.dataTransfer.effectAllowed = 'move'
+        },
+        onDragOver (event, index) {
+            event.preventDefault()
+            event.dataTransfer.dropEffect = 'move'
+            this.moveGroup(this.dragging.index, index)
+        },
+        onDrop (event, index) {
+            event.preventDefault()
+            if (this.dragging.index >= 0) {
+                this.moveGroup(this.dragging.index, index)
+                this.dragging.index = null
+            }
+        },
+        moveGroup (fromIndex, toIndex) {
+            const movedItem = this.groups.splice(fromIndex, 1)[0]
+            this.groups.splice(toIndex, 0, movedItem)
+            // update .order property of all groups
+            this.groups.forEach((group, index) => {
+                group.order = index + 1
+            })
+            this.dragging.index = toIndex
+        },
+        getWidgetClass (widget) {
+            const classes = []
+            // ensure each widget has a class for its type
+            classes.push(`nrdb-${widget.type}`)
+            if (widget.props.className) {
+                classes.push(widget.props.className)
+            }
+            if (widget.state.class) {
+                classes.push(widget.state.class)
+            }
+            return classes.join(' ')
+        },
+        getGroupClass (group) {
+            const classes = []
+            // add any class set in the group's properties
+            if (group.className) {
+                classes.push(group.className)
+            }
+            // add dynamically set class(es)
+            const properties = this.properties[group.id]
+            if (properties && properties.class) {
+                classes.push(properties.class)
+            }
+
+            // dragging interaction classes
+            const dragging = this.groups[this.dragging.index]
+            if (dragging?.id === group.id) {
+                classes.push('dragging')
+            }
+            return classes.join(' ')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.nrdb-ui-group.dragging {
+    border-style: dashed;
+}
+.nrdb-ui-editor-tray-container {
+    position: absolute;
+    bottom: 24px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.nrdb-ui-editor-tray {
+    background-color: white;
+    border: 1px solid #ccc;
+    box-shadow: 0px 0px 5px black;
+    padding: 8px;
+    border-radius: 4px;
+}
+
+/* Actual Layout Styling */
+.nrdb-layout--wysiwyg {
+    --layout-card-width: 320px;
+    --layout-gap: 12px;
+    --layout-columns: 12;
+    display: grid;
+    grid-template-columns: repeat(var(--layout-columns), 1fr);
+    flex-wrap: wrap;
+    padding: var(--page-padding);
+    gap: var(--group-gap);
+}
+
+@media only screen and (max-width: 1024px) {
+    .nrdb-layout--wysiwyg {
+        --layout-columns: 9;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .nrdb-layout--wysiwyg {
+        --layout-columns: 6;
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .nrdb-layout--wysiwyg {
+        --layout-columns: 3;
+    }
+}
+</style>
diff --git a/ui/src/layouts/index.mjs b/ui/src/layouts/index.mjs
index 74052a14e..19cc76c4a 100644
--- a/ui/src/layouts/index.mjs
+++ b/ui/src/layouts/index.mjs
@@ -2,10 +2,12 @@ import Flex from './Flex.vue'
 import Grid from './Grid.vue'
 import Notebook from './Notebook.vue'
 import Tabs from './Tabs.vue'
+import WYSIWYG from './WYSIWYG.vue'
 
 export default {
     flex: Flex,
     grid: Grid,
     tabs: Tabs,
-    notebook: Notebook
+    notebook: Notebook,
+    wysiwyg: WYSIWYG
 }

From a83345628be2b4898f1ccc0ea9581189b68df72a Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Thu, 19 Sep 2024 21:59:57 +0100
Subject: [PATCH 002/109] Working prototype of end-to-end API for deploy via
 Dashboard

---
 nodes/config/ui_base.js    | 40 ++++++++++++++++++++++++++++++++++++++
 package-lock.json          | 18 ++++++-----------
 package.json               |  1 +
 ui/src/api/node-red.js     | 27 +++++++++++++------------
 ui/src/layouts/WYSIWYG.vue | 16 +++++++++++----
 ui/src/store/ui.mjs        |  6 ++++++
 6 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index b12a048a7..e18911cc6 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1,5 +1,7 @@
 const path = require('path')
 
+const axios = require('axios')
+
 const v = require('../../package.json').version
 const datastore = require('../store/data.js')
 const statestore = require('../store/state.js')
@@ -1069,4 +1071,42 @@ module.exports = function (RED) {
     }
 
     RED.nodes.registerType('ui-base', UIBaseNode)
+
+    RED.httpAdmin.patch('/dashboard/:dashboardId', RED.auth.needsPermission('flows.write'), async function (req, res) {
+        const host = RED.settings.uiHost
+        const port = RED.settings.uiPort
+        const httpAdminRoot = RED.settings.httpAdminRoot
+        const url = 'http://' + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
+        console.log('url', url)
+        // get request body
+        const changes = req.body
+        console.log(changes)
+        // get the active Node-RED flows json via the GET /flows API
+        return axios.request({
+            method: 'GET',
+            url
+        }).then(response => {
+            const flows = response.data
+            // console.log('API Flows', flows)
+            // check groups for updates
+            if (changes.groups) {
+                for (const group of changes.groups) {
+                    const existingGroup = flows.find(n => n.id === group.id)
+                    if (existingGroup) {
+                        existingGroup.order = group.order
+                    }
+                }
+            }
+            return flows
+        }).then(flows => {
+            // update the flows with the new group order
+            return axios.request({
+                method: 'POST',
+                url,
+                data: flows
+            })
+        }).then(response => {
+            return res.status(200).json(response.data)
+        })
+    })
 }
diff --git a/package-lock.json b/package-lock.json
index 2f308cb7a..e97d7965a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
             "license": "Apache-2.0",
             "dependencies": {
                 "acorn": "^8.11.2",
+                "axios": "^1.7.7",
                 "chartjs-adapter-luxon": "^1.3.1",
                 "core-js": "^3.32.0",
                 "d3": "^7.8.5",
@@ -4696,8 +4697,7 @@
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-            "dev": true
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
         },
         "node_modules/at-least-node": {
             "version": "1.0.0",
@@ -4739,10 +4739,9 @@
             "dev": true
         },
         "node_modules/axios": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-            "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
-            "dev": true,
+            "version": "1.7.7",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+            "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
             "dependencies": {
                 "follow-redirects": "^1.15.6",
                 "form-data": "^4.0.0",
@@ -4753,7 +4752,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
             "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-            "dev": true,
             "dependencies": {
                 "asynckit": "^0.4.0",
                 "combined-stream": "^1.0.8",
@@ -4766,8 +4764,7 @@
         "node_modules/axios/node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-            "dev": true
+            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
         },
         "node_modules/b4a": {
             "version": "1.6.6",
@@ -5782,7 +5779,6 @@
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
             "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-            "dev": true,
             "dependencies": {
                 "delayed-stream": "~1.0.0"
             },
@@ -6878,7 +6874,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
             "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-            "dev": true,
             "engines": {
                 "node": ">=0.4.0"
             }
@@ -8379,7 +8374,6 @@
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
             "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-            "dev": true,
             "funding": [
                 {
                     "type": "individual",
diff --git a/package.json b/package.json
index bf7b80447..709cc38ad 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     },
     "dependencies": {
         "acorn": "^8.11.2",
+        "axios": "^1.7.7",
         "chartjs-adapter-luxon": "^1.3.1",
         "core-js": "^3.32.0",
         "d3": "^7.8.5",
diff --git a/ui/src/api/node-red.js b/ui/src/api/node-red.js
index 6103e7bb3..a61378628 100644
--- a/ui/src/api/node-red.js
+++ b/ui/src/api/node-red.js
@@ -1,18 +1,17 @@
+import axios from 'axios'
+
 export default {
-    deploy: function () {
+    deployChanges: function (dashboardId, changes) {
         console.log('deploy changes')
-        // return cy.request({
-        //     method: 'POST',
-        //     url: 'http://localhost:1881/flows',
-        //     headers: {
-        //         'Content-type': 'application/json',
-        //         'Node-RED-API-Version': 'v2',
-        //         'Node-RED-Deployment-Type': 'full'
-        //     },
-        //     body: {
-        //         rev,
-        //         flows
-        //     }
-        // })
+        return axios.request({
+            method: 'PATCH',
+            url: '/editor/dashboard/' + dashboardId,
+            headers: {
+                'Content-type': 'application/json',
+                'Node-RED-API-Version': 'v2',
+                'Node-RED-Deployment-Type': 'full'
+            },
+            data: changes
+        })
     }
 }
diff --git a/ui/src/layouts/WYSIWYG.vue b/ui/src/layouts/WYSIWYG.vue
index 45ffa271d..90492cc34 100644
--- a/ui/src/layouts/WYSIWYG.vue
+++ b/ui/src/layouts/WYSIWYG.vue
@@ -67,7 +67,7 @@ export default {
     computed: {
         ...mapState('ui', ['pages']),
         ...mapState('data', ['properties']),
-        ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
+        ...mapGetters('ui', ['id', 'groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
         orderedGroups: function () {
             // get groups on this page
             const groups = this.groupsByPage(this.$route.meta.id)
@@ -111,7 +111,9 @@ export default {
         },
         save () {
             // API call to NR to trigger a deploy
-            NodeREDAPI.deploy()
+            NodeREDAPI.deployChanges(this.id, {
+                groups: this.groups
+            })
         },
         discard () {
             // reload groups from store
@@ -177,7 +179,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .nrdb-ui-group.dragging {
     border-style: dashed;
 }
@@ -192,8 +194,14 @@ export default {
     background-color: white;
     border: 1px solid #ccc;
     box-shadow: 0px 0px 5px black;
-    padding: 8px;
+    padding: 12px;
     border-radius: 4px;
+    display: flex;
+    gap: 6px;
+    border-radius: 2rem;
+    .v-btn {
+        border-radius: 2rem;
+    }
 }
 
 /* Actual Layout Styling */
diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs
index 4da67d41e..0a08b0c11 100644
--- a/ui/src/store/ui.mjs
+++ b/ui/src/store/ui.mjs
@@ -9,6 +9,12 @@ const state = () => ({
 
 // getters
 const getters = {
+    id: (state) => {
+        // should only be one dashboard for now
+        console.log(state.dashboards)
+        const id = state.dashboards ? Object.keys(state.dashboards)[0] : null
+        return id
+    },
     dashboards (state) {
         return state.dashboards
     },

From 28b4a1f1d0938c3197910ac82ece3a27eefccdd7 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 23 Sep 2024 18:46:08 +0100
Subject: [PATCH 003/109] Add first iteration of group resizing in WYSIWYG

---
 nodes/config/ui_base.js       |   1 +
 ui/src/layouts/Group.vue      | 159 +++++++++++++++++++++++++++++++++-
 ui/src/layouts/WYSIWYG.vue    |  31 +++++--
 ui/src/stylesheets/common.css |   3 +-
 4 files changed, 186 insertions(+), 8 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index e18911cc6..41b128a77 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1093,6 +1093,7 @@ module.exports = function (RED) {
                 for (const group of changes.groups) {
                     const existingGroup = flows.find(n => n.id === group.id)
                     if (existingGroup) {
+                        existingGroup.width = group.width
                         existingGroup.order = group.order
                     }
                 }
diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 880be9cb6..f24050142 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -11,6 +11,19 @@
         >
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
         </div>
+        <div
+            v-if="resizable" ref="resize-view" class="nrdb-resizable" :class="{'active': dragging.active}"
+            :style="{'width': dragging.current.width ? `${dragging.current.width}px` : null }"
+        >
+            <div
+                draggable="true"
+                class="nrdb-resizable--handle nrdb-resizable--right"
+                @dragstart="onHandleDragStart($event, 'top', 'right')"
+                @drag="onHandleDrag($event, 'top', 'right')"
+                @dragend="onHandleDragEnd($event, 'top', 'right')"
+            />
+        </div>
+        <img ref="blank-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="">
     </div>
 </template>
 
@@ -23,14 +36,44 @@ export default {
             type: Object,
             required: true
         },
+        index: {
+            type: Number,
+            required: true
+        },
         widgets: {
             type: Array,
             required: true
+        },
+        resizable: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['resize'],
+    data () {
+        return {
+            dragging: {
+                active: false,
+                init: {
+                    x: 0,
+                    y: 0,
+                    columns: 0,
+                    rows: 0,
+                    width: 0,
+                    heigh: 0
+                },
+                current: {
+                    columns: 0,
+                    rows: 0,
+                    width: null
+                }
+            }
         }
     },
     computed: {
         columns () {
-            return this.group.width
+            const cols = this.dragging.current.columns > 0 ? this.dragging.current.columns : this.group.width
+            return cols
         }
     },
     methods: {
@@ -45,8 +88,122 @@ export default {
                 classes.push(widget.state.class)
             }
             return classes.join(' ')
+        },
+        onHandleDragStart (event, vertical, horizontal) {
+            this.dragging.active = true
+            this.dragging.init.columns = parseFloat(this.group.width)
+            this.dragging.init.rows = parseFloat(this.group.height)
+            // event.preventDefault()
+            event.stopPropagation()
+            // don't show image preview
+            const EMPTY_IMAGE = this.$refs['blank-img']
+            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
+
+            this.dragging.init.x = event.x
+            this.dragging.init.width = this.$refs['resize-view'].clientWidth
+            return false
+        },
+        onHandleDrag (event, vertical, horizontal) {
+            if (event.x > 0 && event.y > 0) {
+                // odd event fired on mouse up with x/y = 0
+                const stepX = this.$el.clientWidth / this.group.width
+                // const stepY = 50
+
+                const dx = event.x - this.dragging.init.x
+                // what change does this reflect in the grid?
+                const dw = dx < 0 ? Math.ceil(dx / stepX) : Math.floor(dx / stepX)
+
+                // const dh = Math.floor(event.offsetY / stepY)
+
+                this.dragging.current.width = this.dragging.init.width + dx
+
+                if (dw !== 0) {
+                    const width = this.dragging.init.columns + dw
+                    // const height = this.dragging.init.rows + dh
+
+                    if (width !== this.group.width) {
+                        this.dragging.current.columns = width
+                        this.$emit('resize', {
+                            index: this.index,
+                            width
+                        })
+                    }
+                }
+            }
+        },
+        onHandleDragEnd () {
+            this.dragging.active = false
+            const width = Math.max(this.dragging.current.columns, 1)
+            const height = Math.max(this.dragging.current.rows, 1)
+            this.resetDragState()
+            this.$emit('resize', { index: this.index, width, height })
+        },
+        resetDragState () {
+            this.dragging.current.width = null
+            this.dragging.current.columns = null
         }
     }
 
 }
 </script>
+
+<style scoped lang="scss">
+.nrdb-resizable {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    --handler-size: 12px;
+    &.active {
+        background-color: #ff00001f;
+        border: 1px dashed red;
+    }
+}
+.nrdb-resizable--handle {
+    position: absolute;
+    width: var(--handler-size);
+    height: var(--handler-size);
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 6px;
+    cursor: pointer;
+}
+.nrdb-resizable--top-right {
+    top: calc(-1 * var(--handler-size) / 2);
+    right: calc(-1 * var(--handler-size) / 2);
+}
+
+.nrdb-resizable--right {
+    height: calc(2 * var(--handler-size));
+    top: 50%;
+    margin-top: calc(-1 * var(--handler-size));
+    right: calc(-1 * var(--handler-size) / 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+        cursor: ew-resize;
+        background-color: #eee;
+    }
+}
+
+.nrdb-resizable--right:after {
+    content: '';
+    height: calc(0.75 * var(--handler-size));
+    width: 1px;
+    display: inline-block;
+    background-color: red;
+}
+
+.nrdb-resizable--bottom-left {
+    bottom: calc(-1 * var(--handler-size) / 2);
+    left: calc(-1 * var(--handler-size) / 2);
+}
+
+.nrdb-resizable--top-left {
+    top: calc(-1 * var(--handler-size) / 2);
+    left: calc(-1 * var(--handler-size) / 2);
+}
+
+</style>
diff --git a/ui/src/layouts/WYSIWYG.vue b/ui/src/layouts/WYSIWYG.vue
index 90492cc34..aa55ca17c 100644
--- a/ui/src/layouts/WYSIWYG.vue
+++ b/ui/src/layouts/WYSIWYG.vue
@@ -1,6 +1,15 @@
 <template>
     <BaselineLayout :page-title="$route.meta.title">
         <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--wysiwyg nrdb-ui-page" :class="page?.className">
+            <!-- <div
+                v-for="(g, $index) in groups"
+                :id="'nrdb-ui-group-' + g.id"
+                :key="g.id"
+                class="nrdb-ui-group"
+                :disabled="g.disabled === true ? 'disabled' : null"
+                :class="getGroupClass(g)"
+                :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
+            > -->
             <div
                 v-for="(g, $index) in groups"
                 :id="'nrdb-ui-group-' + g.id"
@@ -11,13 +20,14 @@
                 :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
                 draggable="true"
                 @dragstart="onDragStart($event, $index)"
+                @dragend="onDragEnd($event, $index)"
                 @dragover="onDragOver($event, $index)"
                 @drop="onDrop($event, $index)"
             >
                 <v-card variant="outlined" class="bg-group-background">
-                    <template #title>{{ g.name }} {{ g.order }}</template>
+                    <template #title>{{ g.name }} {{ g.order }} {{ g.width + 'x' + g.height }}</template>
                     <template #text>
-                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
+                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="true" @resize="onGroupResize" />
                     </template>
                 </v-card>
             </div>
@@ -124,17 +134,22 @@ export default {
             event.dataTransfer.effectAllowed = 'move'
         },
         onDragOver (event, index) {
-            event.preventDefault()
-            event.dataTransfer.dropEffect = 'move'
-            this.moveGroup(this.dragging.index, index)
+            if (this.dragging.index >= 0) {
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'move'
+                this.moveGroup(this.dragging.index, index)
+            }
         },
         onDrop (event, index) {
             event.preventDefault()
             if (this.dragging.index >= 0) {
                 this.moveGroup(this.dragging.index, index)
-                this.dragging.index = null
+                this.dragging.index = -1
             }
         },
+        onDragEnd (event, index) {
+            this.dragging.index = -1
+        },
         moveGroup (fromIndex, toIndex) {
             const movedItem = this.groups.splice(fromIndex, 1)[0]
             this.groups.splice(toIndex, 0, movedItem)
@@ -174,6 +189,10 @@ export default {
                 classes.push('dragging')
             }
             return classes.join(' ')
+        },
+        onGroupResize (opts) {
+            this.groups[opts.index].width = opts.width
+            // this.groups[opts.index].height = opts.height
         }
     }
 }
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
index 0d70ea255..ae3b01b16 100644
--- a/ui/src/stylesheets/common.css
+++ b/ui/src/stylesheets/common.css
@@ -131,7 +131,8 @@ main {
 }
 
 .nrdb-ui-group > .v-card {
-    border-radius: var(--group-border-radius)
+    border-radius: var(--group-border-radius);
+    overflow: visible;
 }
 
 /**

From 0ea0cdf6c6a81229cb10e1d6c06ab3e5faa3a20c Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 7 Oct 2024 16:18:06 +0100
Subject: [PATCH 004/109] Add "Discard" functionality & disable buttons with no
 changes

---
 ui/src/layouts/WYSIWYG.vue | 40 ++++++++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/ui/src/layouts/WYSIWYG.vue b/ui/src/layouts/WYSIWYG.vue
index aa55ca17c..6ba82c082 100644
--- a/ui/src/layouts/WYSIWYG.vue
+++ b/ui/src/layouts/WYSIWYG.vue
@@ -44,10 +44,25 @@
         </div> -->
         <div class="nrdb-ui-editor-tray-container">
             <div class="nrdb-ui-editor-tray">
-                <v-btn variant="outlined" @click="discard">Discard Changes</v-btn>
-                <v-btn variant="flat" @click="save">Save Changes</v-btn>
+                <v-tooltip text="Cancel Edit Mode">
+                    <template #activator>
+                        <v-btn variant="outlined" icon="mdi-close" color="warning" @click="cancel" />
+                    </template>
+                </v-tooltip>
+                <v-tooltip text="Discard Changes">
+                    <template #activator>
+                        <v-btn :disabled="!hasChanges" variant="outlined" icon="mdi-arrow-u-left-top" @click="discard" />
+                    </template>
+                </v-tooltip>
+                <v-tooltip text="Save Changes">
+                    <template #activator>
+                        <v-btn :disabled="!hasChanges" variant="flat" icon="mdi-content-save-outline" @click="save" />
+                    </template>
+                </v-tooltip>
             </div>
         </div>
+        {{ groups }}
+        {{ init.groups }}
     </BaselineLayout>
 </template>
 
@@ -71,6 +86,9 @@ export default {
             groups: [],
             dragging: {
                 index: -1
+            },
+            init: {
+                groups: []
             }
         }
     },
@@ -98,11 +116,17 @@ export default {
         },
         page: function () {
             return this.pages[this.$route.meta.id]
+        },
+        hasChanges () {
+            return JSON.stringify(this.groups) !== JSON.stringify(this.init.groups)
         }
     },
     mounted () {
         // get groups for this page
         this.groups = this.loadGroupsFromStore()
+
+        // clone to track changes
+        this.init.groups = JSON.parse(JSON.stringify(this.groups))
     },
     methods: {
         loadGroupsFromStore () {
@@ -123,11 +147,19 @@ export default {
             // API call to NR to trigger a deploy
             NodeREDAPI.deployChanges(this.id, {
                 groups: this.groups
+            }).then(() => {
+                // update saved state
+                this.init.groups = JSON.parse(JSON.stringify(this.groups))
+            }).catch((error) => {
+                console.error('Error saving changes', error)
             })
         },
         discard () {
             // reload groups from store
-            this.groups = this.loadGroupsFromStore()
+            this.groups = JSON.parse(JSON.stringify(this.init.groups))
+        },
+        cancel () {
+            console.log('cancel editing placeholder')
         },
         onDragStart (event, index) {
             this.dragging.index = index
@@ -212,7 +244,7 @@ export default {
 .nrdb-ui-editor-tray {
     background-color: white;
     border: 1px solid #ccc;
-    box-shadow: 0px 0px 5px black;
+    box-shadow: 0px 0px 5px #00000021;
     padding: 12px;
     border-radius: 4px;
     display: flex;

From 78d7c6a72b15129180636fa22b427d8dd2f7df20 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 8 Oct 2024 12:00:03 +0100
Subject: [PATCH 005/109] Componentise the WYSWIYG functinality

---
 ui/src/layouts/WYSIWYG.vue         | 39 ++------------------------
 ui/src/layouts/wysiwyg/index.js    | 44 ++++++++++++++++++++++++++++++
 ui/src/layouts/wysiwyg/sortable.js | 39 ++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 36 deletions(-)
 create mode 100644 ui/src/layouts/wysiwyg/index.js
 create mode 100644 ui/src/layouts/wysiwyg/sortable.js

diff --git a/ui/src/layouts/WYSIWYG.vue b/ui/src/layouts/WYSIWYG.vue
index 6ba82c082..34aae96af 100644
--- a/ui/src/layouts/WYSIWYG.vue
+++ b/ui/src/layouts/WYSIWYG.vue
@@ -61,8 +61,6 @@
                 </v-tooltip>
             </div>
         </div>
-        {{ groups }}
-        {{ init.groups }}
     </BaselineLayout>
 </template>
 
@@ -72,6 +70,8 @@ import NodeREDAPI from '../api/node-red'
 import BaselineLayout from './Baseline.vue'
 import WidgetGroup from './Group.vue'
 
+import WYSIWYG from './wysiwyg'
+
 // eslint-disable-next-line import/order, sort-imports
 import { mapState, mapGetters } from 'vuex'
 
@@ -81,6 +81,7 @@ export default {
         BaselineLayout,
         WidgetGroup
     },
+    mixins: [WYSIWYG],
     data () {
         return {
             groups: [],
@@ -161,36 +162,6 @@ export default {
         cancel () {
             console.log('cancel editing placeholder')
         },
-        onDragStart (event, index) {
-            this.dragging.index = index
-            event.dataTransfer.effectAllowed = 'move'
-        },
-        onDragOver (event, index) {
-            if (this.dragging.index >= 0) {
-                event.preventDefault()
-                event.dataTransfer.dropEffect = 'move'
-                this.moveGroup(this.dragging.index, index)
-            }
-        },
-        onDrop (event, index) {
-            event.preventDefault()
-            if (this.dragging.index >= 0) {
-                this.moveGroup(this.dragging.index, index)
-                this.dragging.index = -1
-            }
-        },
-        onDragEnd (event, index) {
-            this.dragging.index = -1
-        },
-        moveGroup (fromIndex, toIndex) {
-            const movedItem = this.groups.splice(fromIndex, 1)[0]
-            this.groups.splice(toIndex, 0, movedItem)
-            // update .order property of all groups
-            this.groups.forEach((group, index) => {
-                group.order = index + 1
-            })
-            this.dragging.index = toIndex
-        },
         getWidgetClass (widget) {
             const classes = []
             // ensure each widget has a class for its type
@@ -221,10 +192,6 @@ export default {
                 classes.push('dragging')
             }
             return classes.join(' ')
-        },
-        onGroupResize (opts) {
-            this.groups[opts.index].width = opts.width
-            // this.groups[opts.index].height = opts.height
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
new file mode 100644
index 000000000..1a66f4e45
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -0,0 +1,44 @@
+export default {
+    data () {
+        return {
+            dragging: {
+                index: -1
+            }
+        }
+    },
+    methods: {
+        onDragStart (event, index) {
+            this.dragging.index = index
+            event.dataTransfer.effectAllowed = 'move'
+        },
+        onDragOver (event, index) {
+            if (this.dragging.index >= 0) {
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'move'
+                this.moveGroup(this.dragging.index, index)
+            }
+        },
+        onDrop (event, index) {
+            event.preventDefault()
+            if (this.dragging.index >= 0) {
+                this.moveGroup(this.dragging.index, index)
+                this.dragging.index = -1
+            }
+        },
+        onDragEnd (event, index) {
+            this.dragging.index = -1
+        },
+        moveGroup (fromIndex, toIndex) {
+            const movedItem = this.groups.splice(fromIndex, 1)[0]
+            this.groups.splice(toIndex, 0, movedItem)
+            // update .order property of all groups
+            this.groups.forEach((group, index) => {
+                group.order = index + 1
+            })
+            this.dragging.index = toIndex
+        },
+        onGroupResize (opts) {
+            this.groups[opts.index].width = opts.width
+        }
+    }
+}
diff --git a/ui/src/layouts/wysiwyg/sortable.js b/ui/src/layouts/wysiwyg/sortable.js
new file mode 100644
index 000000000..96053b454
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/sortable.js
@@ -0,0 +1,39 @@
+const sortable = {
+    data () {
+
+    },
+    created: (el, binding) => {
+        console.log(binding.instance)
+        function onDragStart (event, index) {
+            this.dragging.index = index
+            event.dataTransfer.effectAllowed = 'move'
+        }
+
+        function onDragOver (event, index) {
+            if (this.dragging.index >= 0) {
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'move'
+                this.moveGroup(this.dragging.index, index)
+            }
+        }
+
+        function onDrop (event, index) {
+            event.preventDefault()
+            if (this.dragging.index >= 0) {
+                this.moveGroup(this.dragging.index, index)
+                this.dragging.index = -1
+            }
+        }
+
+        function onDragEnd (event, index) {
+            this.dragging.index = -1
+        }
+
+        el.addEventListener('dragstart', onDragStart)
+        el.addEventListener('dragover', onDragOver)
+        el.addEventListener('drop', onDrop)
+        el.addEventListener('dragend', onDragEnd)
+    }
+}
+
+export default sortable

From daafd72fe676311f542813017d2b630fc17fce2a Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:26:24 +0100
Subject: [PATCH 006/109] support enabling edit mode for a page from sidebar

---
 nodes/config/ui_base.js | 44 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index f9cb5996e..846cb7ca2 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -418,6 +418,7 @@ module.exports = function (RED) {
 
             // pass the connected UI the UI config
             socket.emit('ui-config', node.id, {
+                meta: node.ui.meta,
                 dashboards: Object.fromEntries(node.ui.dashboards),
                 heads: Object.fromEntries(node.ui.heads),
                 pages: Object.fromEntries(node.ui.pages),
@@ -758,6 +759,15 @@ module.exports = function (RED) {
          */
         // store ui config to be sent to UI
         node.ui = {
+            meta: {
+                wysiwyg: {
+                    enabled: false,
+                    timestamp: null,
+                    dashboard: null,
+                    page: null,
+                    editKey: null
+                }
+            },
             heads: new Map(),
             dashboards: new Map(),
             pages: new Map(),
@@ -1089,7 +1099,8 @@ module.exports = function (RED) {
 
     RED.nodes.registerType('ui-base', UIBaseNode)
 
-    RED.httpAdmin.patch('/dashboard/:dashboardId', RED.auth.needsPermission('flows.write'), async function (req, res) {
+    // PATCH: /dashboard/api/v1/:dashboardId/flows - deploy curated/controlled updates to the flows
+    RED.httpAdmin.patch('/dashboard/api/v1/:dashboardId/flows', RED.auth.needsPermission('flows.write'), async function (req, res) {
         const host = RED.settings.uiHost
         const port = RED.settings.uiPort
         const httpAdminRoot = RED.settings.httpAdminRoot
@@ -1126,5 +1137,36 @@ module.exports = function (RED) {
         }).then(response => {
             return res.status(200).json(response.data)
         })
+            console.error(error)
+            const status = error.response?.status || 500
+            return res.status(status).json({ error: error.message })
+        })
+    })
+
+    // PATCH: /dashboard/api/v1/:dashboardId/edit/:pageId - start editing a page
+    RED.httpAdmin.patch('/dashboard/api/v1/:dashboardId/edit/:pageId', RED.auth.needsPermission('flows.write'), async function (req, res) {
+        /** @type {UIBaseNode} */
+        const baseNode = RED.nodes.getNode(req.params.dashboardId)
+        if (!baseNode) {
+            return res.status(404).json({ error: 'Dashboard not found' })
+        }
+        const pageNode = baseNode.ui.pages.get(req.params.pageId)
+        if (!pageNode) {
+            return res.status(404).json({ error: 'Page not found' })
+        }
+        const editConfig = {
+            timestamp: Date.now(),
+            path: pageNode.path || '',
+            dashboard: baseNode.id,
+            page: pageNode.id,
+            editKey: Math.random().toString(36).substring(2)
+        }
+        baseNode.ui.meta.wysiwyg.enabled = true
+        baseNode.ui.meta.wysiwyg.timestamp = editConfig.timestamp
+        baseNode.ui.meta.wysiwyg.editKey = editConfig.editKey
+        baseNode.ui.meta.wysiwyg.dashboard = baseNode.id
+        baseNode.ui.meta.wysiwyg.page = pageNode.id
+
+        return res.status(200).json(editConfig)
     })
 }

From fda6848473f9f9fbf5484bbabad24dd679458c9a Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:28:53 +0100
Subject: [PATCH 007/109]  on-hover buttons for enabling edit mode on supported
 pages

---
 nodes/config/ui_base.html | 79 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 70 insertions(+), 9 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index aa3953925..d239578b5 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -288,6 +288,7 @@
 // #endregion
 
 (function () {
+    const supportedEditableLayouts = ['grid', 'flex']
     const sidebarContainer = '<div style="position: relative; height: 100%;"></div>'
     const sidebarContentTemplate = $('<div id="ff-node-red-dashboard"></div>').appendTo(sidebarContainer)
     const sidebar = $(sidebarContentTemplate)
@@ -824,14 +825,16 @@
         const configNodes = ['ui-base', 'ui-page', 'ui-link', 'ui-group', 'ui-theme']
         const btnGroup = $('<div>', { class: 'nrdb2-sb-list-header-button-group', id: item.id }).appendTo(parent)
         if (!configNodes.includes(item.type)) {
-            const focusButton = $('<a href="#" class="nr-db-sb-tab-focus-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-bullseye"></i> ' + c_('layout.focus') + '</a>').appendTo(btnGroup)
+            const focusButton = $(`<a href="#" class="nr-db-sb-tab-focus-button editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.focus')}"><i class="fa fa-bullseye"></i></a>`).appendTo(btnGroup)
             focusButton.on('click', function (evt) {
                 RED.view.reveal(item.id)
                 evt.stopPropagation()
                 evt.preventDefault()
             })
         }
-        const editButton = $('<a href="#" class="nr-db-sb-tab-edit-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> ' + c_('layout.edit') + '</a>').appendTo(btnGroup)
+
+        // button to edit node via node-red editor panel
+        const editButton = $(`<a href="#" class="nr-db-sb-tab-edit-button editor-button editor-button-small nr-db-sb-list-header-button" title=${c_('layout.edit')}><i class="fa fa-cog"></i></a>`).appendTo(btnGroup)
         editButton.on('click', function (evt) {
             if (configNodes.includes(item.type)) {
                 RED.editor.editConfig('', item.type, item.id)
@@ -841,14 +844,72 @@
             evt.stopPropagation()
             evt.preventDefault()
         })
-        if (item.type === 'ui-page') {
+
+        if (item.type === 'ui-page' && supportedEditableLayouts.includes(item.node.layout)) {
+            // button to edit group in wysiwyg layout editor
+            const layoutButton = $(`<a class="nr-db-sb-tab-layout-button editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.layoutEditor')}"><i class="fa fa-pencil-square-o"></i></a>`).appendTo(btnGroup)
+            layoutButton.on('click', async function (evt) {
+                evt.preventDefault()
+                evt.stopPropagation()
+
+                // call to httpadmin endpoint requesting layout editor mode for this group
+                const windowUrl = new URL(window.location.href)
+                const pageId = item.id
+                const baseId = item.node.ui
+                const base = RED.nodes.node(item.node.ui)
+                let basePath = base.path || '/dashboard'
+                if (basePath.endsWith('/')) {
+                    basePath = basePath.slice(0, -1)
+                }
+                if (!basePath.startsWith('/')) {
+                    basePath = `/${basePath}`
+                }
+                const authTokens = RED.settings.get('auth-tokens') || {}
+                const headers = {}
+                if (authTokens.access_token) {
+                    headers.Authorization = `${authTokens.token_type || 'Bearer'} ${authTokens.access_token}`
+                }
+
+                // promisify the ajax call so we can await it & return false after opening the popup
+                const ajax = () => {
+                    return new Promise((resolve, reject) => {
+                        $.ajax({
+                            url: `${base.path}/api/v1/${baseId}/edit/${pageId}`, // e.g. /dashboard/api/v1/123/edit/456
+                            type: 'PATCH',
+                            headers,
+                            data: {
+                                mode: 'edit',
+                                dashboard: baseId,
+                                page: pageId
+                            },
+                            success: function (data) {
+                                // open the dashboard on that page in a _blank window
+                                const _url = new URL(`${basePath}/${data.path}`.replace(/\/\//g, '/'), windowUrl.origin)
+                                _url.searchParams.set('edit-key', data.editKey)
+                                resolve(_url)
+                            },
+                            error: function (err) {
+                                reject(err)
+                            }
+                        })
+                    })
+                }
+                try {
+                    const url = await ajax()
+                    const target = `ff-dashboard-${baseId}` // try to reuse the same window per base
+                    window.open(url, target)
+                } catch (err) {
+                    console.error('layout mode error', err)
+                    RED.notify(base._('common.notification.error', { message: 'Unable to begin layout editor' }), 'error')
+                }
+                return false // return false to click event to prevent default
+            })
             // add the "+ group" button
-            $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> ' + c_('layout.group') + '</a>')
-                .click(function (evt) {
-                    list.editableList('addItem')
-                    evt.preventDefault()
-                })
-                .appendTo(btnGroup)
+            const groupEditButton = $(`<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.addGroup')}"><i class="fa fa-plus"></i></a>`).appendTo(btnGroup)
+            groupEditButton.on('click', function (evt) {
+                list.editableList('addItem')
+                evt.preventDefault()
+            })
         }
     }
 

From 88d0de9e2db2b69699b1badf746997b889efe6e4 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:29:19 +0100
Subject: [PATCH 008/109] consistent target (per base)

---
 nodes/config/ui_base.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index d239578b5..a306a7086 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -453,8 +453,8 @@
         editSettingsButton.on('click', function () {
             RED.editor.editConfig('', 'ui-base', id)
         })
-
-        const openDashboardButton = $(`<a id="open-dashboard" href="${fullPath}" target="nr-dashboard" class="editor-button editor-button-small nr-db-sb-list-header-button">` +
+        const target = `nr-dashboard-${id}` // try to reuse the same window per base
+        const openDashboardButton = $(`<a id="open-dashboard" href="${fullPath}" target="${target}" class="editor-button editor-button-small nr-db-sb-list-header-button">` +
             c_('label.openDashboard') + ' <i style="margin-left: 3px;" class="fa fa-external-link"></i></a>')
 
         label.appendTo(header)

From 35bbd8874ba4cfa4c3a4de97b0ca826dfad79626 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:30:06 +0100
Subject: [PATCH 009/109] update deploy endpoint to v2 and add error handling

---
 nodes/config/ui_base.js | 106 ++++++++++++++++++++++++++++++++++------
 1 file changed, 91 insertions(+), 15 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 846cb7ca2..21933fa97 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1107,36 +1107,112 @@ module.exports = function (RED) {
         const url = 'http://' + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
         console.log('url', url)
         // get request body
-        const changes = req.body
-        console.log(changes)
-        // get the active Node-RED flows json via the GET /flows API
+        const dashboardId = req.params.dashboardId
+        const pageId = req.body.page
+        const changes = req.body.changes || {}
+        const editKey = req.body.key
+        const groups = changes.groups || []
+        console.log(changes, editKey, dashboardId)
+        const baseNode = RED.nodes.getNode(dashboardId)
+
+        // validity checks
+        if (groups.length === 0) {
+            // this could be a 200 but since the group data might be missing due to
+            // a bug or regression, we'll return a 400 and let the user know
+            // there were no changes provided.
+            return res.status(400).json({ error: 'No changes to deploy' })
+        }
+        if (!baseNode) {
+            return res.status(404).json({ error: 'Dashboard not found' })
+        }
+        if (!baseNode.ui.meta.wysiwyg.enabled) {
+            return res.status(403).json({ error: 'Unauthorized' })
+        }
+        if (editKey !== baseNode.ui.meta.wysiwyg.editKey) {
+            return res.status(403).json({ error: 'Unauthorized' })
+        }
+        if (pageId !== baseNode.ui.meta.wysiwyg.page) {
+            return res.status(403).json({ error: 'Unauthorized' })
+        }
+        for (const modified of groups) {
+            if (modified.page !== baseNode.ui.meta.wysiwyg.page) {
+                return res.status(400).json({ error: 'Invalid page id' })
+            }
+        }
+
+        // Prepare headers for the requests
+        const getHeaders = {
+            'Node-RED-API-Version': 'v2',
+            Accept: 'application/json'
+        }
+        const postHeaders = {
+            'Node-RED-Deployment-Type': 'nodes', // only update the nodes (don't restart ALL nodes! Only those that have changed)
+            'Node-RED-API-Version': 'v2',
+            'Content-Type': 'application/json'
+        }
+        // apply headers from the incoming request
+        if (req.headers.cookie) {
+            getHeaders.cookie = req.headers.cookie
+            postHeaders.cookie = req.headers.cookie
+        }
+        if (req.headers.authorization) {
+            getHeaders.authorization = req.headers.authorization
+            postHeaders.authorization = req.headers.authorization
+        }
+        if (req.headers.referer) {
+            getHeaders.referer = req.headers.referer
+            postHeaders.referer = req.headers.referer
+        }
+
+        const applyIfDifferent = (node, nodeNew, propName) => {
+            const origValue = node[propName]
+            const newValue = nodeNew[propName]
+            if (origValue !== newValue) {
+                node[propName] = newValue
+                return true
+            }
+            return false
+        }
+        let rev = null
         return axios.request({
             method: 'GET',
+            headers: getHeaders,
             url
         }).then(response => {
-            const flows = response.data
-            // console.log('API Flows', flows)
-            // check groups for updates
-            if (changes.groups) {
-                for (const group of changes.groups) {
-                    const existingGroup = flows.find(n => n.id === group.id)
-                    if (existingGroup) {
-                        existingGroup.width = group.width
-                        existingGroup.order = group.order
-                    }
+            const flows = response.data?.flows || []
+            rev = response.data?.rev
+            const changeResult = []
+            for (const modified of groups) {
+                const current = flows.find(n => n.id === modified.id)
+                if (!current) {
+                    // group not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Group not found', code: 'GROUP_NOT_FOUND' })
+                }
+                if (modified.page !== current.page) {
+                    // integrity of data suspect! Has flow changed on the server?
+                    return res.status(400).json({ error: 'Invalid page id', code: 'INVALID_PAGE_ID' })
                 }
+                changeResult.push(applyIfDifferent(current, modified, 'width'))
+                changeResult.push(applyIfDifferent(current, modified, 'order'))
+            }
+            if (changeResult.length === 0 || !changeResult.includes(true)) {
+                return res.status(200).json({ message: 'No changes were' })
             }
             return flows
         }).then(flows => {
             // update the flows with the new group order
             return axios.request({
                 method: 'POST',
+                headers: postHeaders,
                 url,
-                data: flows
+                data: {
+                    flows,
+                    rev
+                }
             })
         }).then(response => {
             return res.status(200).json(response.data)
-        })
+        }).catch(error => {
             console.error(error)
             const status = error.response?.status || 500
             return res.status(status).json({ error: error.message })

From 6258104bdd1403e5d20284451755fbe12634b16d Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:30:37 +0100
Subject: [PATCH 010/109] add i18n messages fro edit buttons

---
 nodes/config/locales/en-US/ui_base.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json
index c9870ea12..614b615a4 100644
--- a/nodes/config/locales/en-US/ui_base.json
+++ b/nodes/config/locales/en-US/ui_base.json
@@ -37,7 +37,9 @@
             "page": "Page",
             "link": "Link",
             "group": "Group",
+            "addGroup": "Add Group",
             "edit": "Edit",
+            "layoutEditor": "Layout Editor",
             "focus": "Focus",
             "collapse": "Collapse",
             "expand": "Expand",

From ec476750216552694f3533b1f3ac094caf4b2779 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:33:10 +0100
Subject: [PATCH 011/109] put edit controls in own component

---
 ui/src/layouts/wysiwyg/EditControls.vue | 63 +++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 ui/src/layouts/wysiwyg/EditControls.vue

diff --git a/ui/src/layouts/wysiwyg/EditControls.vue b/ui/src/layouts/wysiwyg/EditControls.vue
new file mode 100644
index 000000000..47062cc6d
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/EditControls.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="nrdb-ui-editor-tray-container">
+        <div class="nrdb-ui-editor-tray">
+            <v-btn v-tooltip="'Leave Edit Mode'" :disabled="saveBusy" variant="outlined" icon="mdi-close" color="warning" @click="cancel" />
+            <v-btn v-tooltip="'Discard Changes'" :disabled="!dirty || saveBusy" variant="outlined" color="secondary" icon="mdi-arrow-u-left-top" @click="discard" />
+            <v-btn v-tooltip="'Save Changes'" :disabled="!dirty || saveBusy" variant="flat" icon="mdi-content-save-outline" color="success" :loading="saveBusy" @click="save" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'EditControls',
+    props: {
+        dirty: {
+            type: Boolean,
+            default: false
+        },
+        saveBusy: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['cancel', 'discard', 'save'],
+    methods: {
+        cancel () {
+            this.$emit('cancel')
+        },
+        discard () {
+            this.$emit('discard')
+        },
+        save () {
+            this.$emit('save')
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.nrdb-ui-editor-tray-container {
+    position: fixed;
+    bottom: 24px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.nrdb-ui-editor-tray {
+    background-color: white;
+    border: 1px solid #ccc;
+    box-shadow: 0px 0px 5px #00000021;
+    padding: 12px;
+    border-radius: 4px;
+    display: flex;
+    gap: 6px;
+    border-radius: 2rem;
+    .v-btn {
+        border-radius: 2rem;
+    }
+    button:disabled {
+        filter: grayscale(1);
+    }
+}
+</style>

From 25797d051fd2ce15083970ceef6dd3623985ce79 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:34:07 +0100
Subject: [PATCH 012/109] ensure query param edit-key is carried over upon
 forced refresh

---
 ui/src/main.mjs | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/src/main.mjs b/ui/src/main.mjs
index 5ea62b7fa..6fc0468cf 100644
--- a/ui/src/main.mjs
+++ b/ui/src/main.mjs
@@ -74,14 +74,19 @@ function forcePageReload (err) {
     console.log('redirecting to:', window.location.origin + '/dashboard')
 
     // Reloading dashboard without using cache by appending a cache-busting string to fully reload page to allow redirecting to auth
-    window.location.replace(window.location.origin + '/dashboard' + '?' + 'reloadTime=' + Date.now().toString() + Math.random()) // Seems to work on Edge and Chrome on Windows, Chromium and Firefox on Linux, and also on Chrome Android (and also as PWA App)
+    const url = new URL(window.location.origin + '/dashboard')
+    url.searchParams.set('reloadTime', Date.now().toString() + Math.random())
+    if (host.searchParams.has('edit-key')) {
+        url.searchParams.set('edit-key', host.searchParams.get('edit-key'))
+    }
+    window.location.replace(url)
 }
 
 /*
  * Configure SocketIO Client to Interact with Node-RED
  */
 
-// if our scoket disconnects, we should inform the user when it reconnects
+// if our socket disconnects, we should inform the user when it reconnects
 
 // GET our SocketIO Config from Node-RED & any other bits plugins have added to the _setup endpoint
 fetch('_setup')
@@ -93,10 +98,15 @@ fetch('_setup')
         case !response.ok:
             console.error('Failed to fetch setup data:', response)
             return
-        case host.origin !== new URL(response.url).origin:
+        case host.origin !== new URL(response.url).origin: {
             console.log('Following redirect:', response.url)
-            window.location.replace(response.url)
+            const url = new URL(response.url)
+            if (host.searchParams.has('edit-key')) {
+                url.searchParams.set('edit-key', host.searchParams.get('edit-key'))
+            }
+            window.location.replace(url)
             return
+        }
         default:
             break
         }

From b040f625d9138fefadfcb7f92c4c1f127ef2abfb Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:38:14 +0100
Subject: [PATCH 013/109] Add edit tracking for edit buffer and state

---
 ui/src/EditTracking.js | 57 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 ui/src/EditTracking.js

diff --git a/ui/src/EditTracking.js b/ui/src/EditTracking.js
new file mode 100644
index 000000000..59485eb83
--- /dev/null
+++ b/ui/src/EditTracking.js
@@ -0,0 +1,57 @@
+import { computed, reactive } from 'vue'
+
+// A simple non-vuex state store for edit tracking
+const state = reactive({
+    editKey: '',
+    editPage: '',
+    editMode: false,
+    isTrackingEdits: false,
+    originalGroups: []
+})
+
+// Methods
+
+/**
+ * Initialise the edit tracking state
+ * @param {String} editKey - The edit key provided by the server
+ * @param {String} editPage - The page id to edit (provided by the server)
+ */
+function initialise (editKey, editPage) {
+    state.editKey = editKey
+    state.editPage = editPage
+    state.editMode = !!editKey && !!editPage
+}
+
+/**
+ * Start tracking edits
+ */
+function startEditTracking (groups) {
+    state.isTrackingEdits = true
+    updateEditTracking(groups)
+}
+
+/**
+ * Stop tracking edits, clear editKey/editPage & exit edit mode
+ */
+function exitEditMode () {
+    state.editKey = ''
+    state.editPage = ''
+    state.initialised = false
+    state.originalGroups = []
+}
+
+/**
+ * Update the original groups with the current groups
+ */
+function updateEditTracking (groups) {
+    state.originalGroups = JSON.parse(JSON.stringify(groups))
+}
+
+// RO computed props
+const editKey = computed(() => state.editKey)
+const editPage = computed(() => state.editPage)
+const editMode = computed(() => !!state.editKey && !!state.editPage)
+const originalGroups = computed(() => state.originalGroups)
+const isTrackingEdits = computed(() => state.isTrackingEdits)
+
+export { editMode, editKey, editPage, originalGroups, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }

From 3e967b5f2d25bcde862caf87110018b9dcb0e759 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:39:22 +0100
Subject: [PATCH 014/109] Init edit mode when matching query and config are
 present

---
 ui/src/App.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index b8afbb0d9..041a5418e 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -20,6 +20,7 @@
 <script>
 import { mapState } from 'vuex'
 import { markRaw } from 'vue' // eslint-disable-line import/order
+import { initialise as initEditMode } from './EditTracking.js'
 
 import PWABadge from './components/PWABadge.vue'
 import DashboardLoading from './components/loading.vue'
@@ -140,6 +141,17 @@ export default {
                 })
             })
 
+            // Check for edit key in query and if it matches the edit key in the
+            // configs meta.wysiwyg object, we can enable WYSIWYG editing mode for the page.
+            // The initEditMode setup fn in EditTracking.js module stores this and it is used to enable
+            // the WYSIWYG edit tracking for the page in question.
+            const editKeyInUrl = new URLSearchParams(window.location.search).get('edit-key')
+            const pageIdOk = payload.meta?.wysiwyg?.page && !!payload.pages[payload.meta.wysiwyg.page] && editKeyInUrl === payload.meta.wysiwyg.editKey
+            const dashboardIdOk = payload.meta?.wysiwyg?.dashboard && !!payload.dashboards[payload.meta.wysiwyg.dashboard]
+            if (payload.meta?.wysiwyg?.enabled && editKeyInUrl && pageIdOk && dashboardIdOk) {
+                initEditMode(editKeyInUrl, payload.meta.wysiwyg.page)
+            }
+
             // loop over pages, add them to vue router
             Object.values(payload.pages).forEach(page => {
                 // check that the page's bound UI is also in our config
@@ -177,9 +189,12 @@ export default {
                 })
             }
 
-            // if this is the first time we load hte Dashboard, the router hasn't registered the current route properly,
+            // if this is the first time we load the Dashboard, the router hasn't registered the current route properly,
             // so best we just navigate to the existing URL to let router catch up
-            this.$router.push(this.$route.fullPath)
+            // ensure we remove the edit key from the URL
+            const url = new URL(window.location.href)
+            url.searchParams.delete('edit-key')
+            this.$router.push(url)
 
             // loop over the widgets defined in Node-RED,
             // map their respective Vue component for rendering on a page

From 609aad4e952993c63008dd58a2b67eeda8a35652 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:39:48 +0100
Subject: [PATCH 015/109] component name correction

---
 ui/src/layouts/Notebook.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/layouts/Notebook.vue b/ui/src/layouts/Notebook.vue
index ee70c2ce0..1c7d279cc 100644
--- a/ui/src/layouts/Notebook.vue
+++ b/ui/src/layouts/Notebook.vue
@@ -42,7 +42,7 @@ import BaselineLayout from './Baseline.vue'
 import WidgetGroup from './Group.vue'
 
 export default {
-    name: 'LayoutFlex',
+    name: 'LayoutNotebook',
     components: {
         BaselineLayout,
         WidgetGroup

From 36633a9a4fa22b4936fe65dbcfc772bdb5f27309 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:41:39 +0100
Subject: [PATCH 016/109] fix security for node-red deploy function

---
 ui/src/api/node-red.js | 54 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/ui/src/api/node-red.js b/ui/src/api/node-red.js
index a61378628..9fcfff1d1 100644
--- a/ui/src/api/node-red.js
+++ b/ui/src/api/node-red.js
@@ -1,17 +1,53 @@
 import axios from 'axios'
 
+function applyAuth (headers) {
+    let authTokens = localStorage.getItem('auth-tokens')
+    if (authTokens) {
+        authTokens = JSON.parse(authTokens)
+        const token = authTokens.access_token
+        const tokenType = authTokens.token_type ? authTokens.token_type : 'Bearer'
+        headers.Authorization = `${tokenType} ${token}`
+    }
+    return headers
+}
+
+/**
+ * Generates a full dashboard api url based off the current location and the dashboard id
+ * The path parts are appended to the url
+ * @example
+ * // returns a URL object for 'http://localhost:1880/dashboard/api/v1/my-dashboard/flows'
+ * const url = getDashboardApiUrl('my-dashboard', 'flows')
+ * @param {String} dashboardId - The dashboard id
+ * @param  {...any} path - 1 or more path parts to append to the url
+ * @returns {String} The full dashboard api url
+ */
+function getDashboardApiUrl (dashboardId, ...path) {
+    const url = new URL(window.location.href)
+    const urlBase = url.pathname.split('/').slice(0, -1).join('/') + '/api/v1/' // e.g 'http://localhost:1880/dashboard/api/v1/'
+    const pathParts = [urlBase, dashboardId, ...(path || [])].map(p => p.replace(/^\/|\/$/g, ''))
+    const result = new URL(url)
+    result.search = ''
+    result.pathname = pathParts.join('/')
+    return result
+}
+
 export default {
-    deployChanges: function (dashboardId, changes) {
-        console.log('deploy changes')
+    /**
+     * Deploy changes to the Node-RED instance via the dashboards httpAdmin endpoint
+     * @param {Object} options - The options to deploy changes via the http admin endpoint
+     * @param {string} options.dashboard - The dashboard id
+     * @param {string} options.page - The page id
+     * @param {string} options.key - The edit key for verification
+     * @param {Array<Object>} options.groups - The updated group objects to apply
+     * @returns the axios request
+     */
+    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, key }) {
+        const changes = { groups }
         return axios.request({
             method: 'PATCH',
-            url: '/editor/dashboard/' + dashboardId,
-            headers: {
-                'Content-type': 'application/json',
-                'Node-RED-API-Version': 'v2',
-                'Node-RED-Deployment-Type': 'full'
-            },
-            data: changes
+            url: getDashboardApiUrl(dashboard, 'flows'),
+            headers: applyAuth({ 'Content-type': 'application/json' }),
+            data: { dashboard, page, key, changes }
         })
     }
 }

From 78537a4dd131a385d3507d3b88ec65356c9dcec4 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:42:12 +0100
Subject: [PATCH 017/109] add reusable confirm dialog (for internal use)

---
 ui/src/components/ConfirmDialog.vue | 82 +++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 ui/src/components/ConfirmDialog.vue

diff --git a/ui/src/components/ConfirmDialog.vue b/ui/src/components/ConfirmDialog.vue
new file mode 100644
index 000000000..25f43d798
--- /dev/null
+++ b/ui/src/components/ConfirmDialog.vue
@@ -0,0 +1,82 @@
+<template>
+    <v-dialog v-model="visible" max-width="500">
+        <v-card :title="title" :text="message" :prepend-icon="icon">
+            <v-card-actions>
+                <v-btn v-if="cancelButton !== null" variant="flat" color="primary" @click="_cancel">{{ cancelButton }}</v-btn>
+                <v-btn v-if="okButton !== null" variant="flat" color="warning" @click="_confirm">{{ okButton }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    name: 'ConfirmDialog',
+    data: () => ({
+        visible: false,
+        title: undefined,
+        message: undefined,
+        okButton: undefined,
+        cancelButton: undefined,
+        closeOnOk: true,
+
+        // Private variables
+        resolvePromise: undefined,
+        rejectPromise: undefined
+    }),
+
+    methods: {
+        show (opts = {}) {
+            this.title = opts.title
+            this.icon = opts.icon ?? 'mdi-alert-circle-outline'
+            this.message = opts.message
+            this.cancelButton = opts.cancelButton
+            this.okButton = opts.okButton
+            this.closeOnOk = opts.closeOnOk ?? true
+            if (this.cancelButton === 'undefined') {
+                this.cancelButton = 'Cancel'
+            }
+            if (this.okButton === 'undefined') {
+                this.okButton = 'OK'
+            }
+            if (this.okButton === null && this.cancelButton === null) {
+                this.okButton = 'Close'
+            }
+            this.visible = true
+            // Return promise so the caller can get results
+            return new Promise((resolve, reject) => {
+                this.resolvePromise = resolve
+                this.rejectPromise = reject
+            })
+        },
+
+        close (resolveValue = false) {
+            this.visible = false
+            this.resolvePromise(resolveValue)
+        },
+
+        _confirm () {
+            if (this.closeOnOk) {
+                this.visible = false
+            }
+            this.resolvePromise(true)
+        },
+
+        _cancel () {
+            this.visible = false
+            this.resolvePromise(false) // resolve with false
+            // Or throw an error using: this.rejectPromise(new Error('User canceled the dialog'))
+        }
+    }
+}
+</script>
+
+<style scoped>
+button.v-btn {
+    /* consistent height and width regardless of theme settings */
+    min-height: unset !important;
+    height: 2.4em;
+    min-width: 6em;
+}
+</style>

From 7ad09387b8ddf31112dc4f46889613e90a5dc028 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:43:36 +0100
Subject: [PATCH 018/109] grab/move/resize pointers

---
 ui/src/layouts/Group.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index f24050142..2792a4f2d 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -155,7 +155,9 @@ export default {
     top: 0;
     left: 0;
     --handler-size: 12px;
+    cursor: grab;
     &.active {
+        cursor: grabbing !important;
         background-color: #ff00001f;
         border: 1px dashed red;
     }
@@ -167,7 +169,6 @@ export default {
     background-color: white;
     border: 1px solid black;
     border-radius: 6px;
-    cursor: pointer;
 }
 .nrdb-resizable--top-right {
     top: calc(-1 * var(--handler-size) / 2);
@@ -186,6 +187,9 @@ export default {
         cursor: ew-resize;
         background-color: #eee;
     }
+    &:active {
+        cursor: ew-resize !important;
+    }
 }
 
 .nrdb-resizable--right:after {

From 5737de60fa221d45b9c6fc3329a182b46cdb2cd5 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:44:49 +0100
Subject: [PATCH 019/109] typo

---
 ui/src/layouts/Group.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 2792a4f2d..5e4df710d 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -60,7 +60,7 @@ export default {
                     columns: 0,
                     rows: 0,
                     width: 0,
-                    heigh: 0
+                    height: 0
                 },
                 current: {
                     columns: 0,

From c2060eb1dd1a03f0b5fc50a826d7d664e42b57ba Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:45:13 +0100
Subject: [PATCH 020/109] fix jump to size 1 when releasing mouse

---
 ui/src/layouts/Group.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 5e4df710d..ea2c89def 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -63,8 +63,8 @@ export default {
                     height: 0
                 },
                 current: {
-                    columns: 0,
-                    rows: 0,
+                    columns: null,
+                    rows: null,
                     width: null
                 }
             }

From 6c29dca788ed8c9495c717a9af4307cbb7fc7709 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:45:39 +0100
Subject: [PATCH 021/109] cast columns to integer

---
 ui/src/layouts/Group.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index ea2c89def..e9452f6ea 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -72,8 +72,7 @@ export default {
     },
     computed: {
         columns () {
-            const cols = this.dragging.current.columns > 0 ? this.dragging.current.columns : this.group.width
-            return cols
+            return this.dragging.current.columns > 0 ? this.dragging.current.columns : +this.group.width
         }
     },
     methods: {

From 6ad445b0f3214b12447db51cac98b9c4748f1284 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:46:36 +0100
Subject: [PATCH 022/109] cast to integer with default of 1

---
 ui/src/layouts/Group.vue | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index e9452f6ea..3b73956e4 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -90,15 +90,8 @@ export default {
         },
         onHandleDragStart (event, vertical, horizontal) {
             this.dragging.active = true
-            this.dragging.init.columns = parseFloat(this.group.width)
-            this.dragging.init.rows = parseFloat(this.group.height)
-            // event.preventDefault()
-            event.stopPropagation()
-            // don't show image preview
-            const EMPTY_IMAGE = this.$refs['blank-img']
-            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
-
-            this.dragging.init.x = event.x
+            this.dragging.init.columns = +this.group.width || 1
+            this.dragging.init.rows = +this.group.height || 1
             this.dragging.init.width = this.$refs['resize-view'].clientWidth
             return false
         },

From ee305dbbba2fab0e7199d4ca3cf236db30fcbf27 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:47:28 +0100
Subject: [PATCH 023/109] code reorder

---
 ui/src/layouts/Group.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 3b73956e4..c2776b4a3 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -93,6 +93,11 @@ export default {
             this.dragging.init.columns = +this.group.width || 1
             this.dragging.init.rows = +this.group.height || 1
             this.dragging.init.width = this.$refs['resize-view'].clientWidth
+            this.dragging.init.x = event.x
+            const EMPTY_IMAGE = this.$refs['blank-img'] // don't show image preview
+            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
+            // prevent default drag behavior
+            event.stopPropagation()
             return false
         },
         onHandleDrag (event, vertical, horizontal) {

From 2c161e38ebefbc8b4f6ea3eb13adc70d43447f09 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:48:10 +0100
Subject: [PATCH 024/109] dont attempt resize if not dragging

---
 ui/src/layouts/Group.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index c2776b4a3..028dcdc7d 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -101,6 +101,7 @@ export default {
             return false
         },
         onHandleDrag (event, vertical, horizontal) {
+            if (this.dragging.active === false) { return }
             if (event.x > 0 && event.y > 0) {
                 // odd event fired on mouse up with x/y = 0
                 const stepX = this.$el.clientWidth / this.group.width

From ba54734944ea0c44c0a6cdf9441efff088d856f6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:49:12 +0100
Subject: [PATCH 025/109] prevent invalid values causing a resize

---
 ui/src/layouts/Group.vue | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 028dcdc7d..feab5a20a 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -103,29 +103,15 @@ export default {
         onHandleDrag (event, vertical, horizontal) {
             if (this.dragging.active === false) { return }
             if (event.x > 0 && event.y > 0) {
-                // odd event fired on mouse up with x/y = 0
-                const stepX = this.$el.clientWidth / this.group.width
-                // const stepY = 50
-
+                const stepX = this.$el.clientWidth / +this.group.width
                 const dx = event.x - this.dragging.init.x
-                // what change does this reflect in the grid?
                 const dw = dx < 0 ? Math.ceil(dx / stepX) : Math.floor(dx / stepX)
-
-                // const dh = Math.floor(event.offsetY / stepY)
-
                 this.dragging.current.width = this.dragging.init.width + dx
-
-                if (dw !== 0) {
-                    const width = this.dragging.init.columns + dw
-                    // const height = this.dragging.init.rows + dh
-
-                    if (width !== this.group.width) {
-                        this.dragging.current.columns = width
-                        this.$emit('resize', {
-                            index: this.index,
-                            width
-                        })
-                    }
+                const width = Math.max(this.dragging.init.columns + dw, 1)
+                if (width !== +this.group.width) {
+                    // console.log('drag handle drag: width', width, 'emitting resize')
+                    this.dragging.current.columns = width
+                    this.$emit('resize', { index: this.index, width })
                 }
             }
         },

From 6f3a45b5cf636908ff710dc40055d8d9f47295a8 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:49:37 +0100
Subject: [PATCH 026/109] add missing reset

---
 ui/src/layouts/Group.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index feab5a20a..6e1eec2d0 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -125,6 +125,7 @@ export default {
         resetDragState () {
             this.dragging.current.width = null
             this.dragging.current.columns = null
+            this.dragging.current.rows = null
         }
     }
 

From 1b8140fbd83fd4a1939375f10cfd4d45321b12d3 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:50:06 +0100
Subject: [PATCH 027/109] dont resize if not active

---
 ui/src/layouts/Group.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 6e1eec2d0..859ebe7de 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -115,7 +115,7 @@ export default {
                 }
             }
         },
-        onHandleDragEnd () {
+            if (this.dragging.active === false) { return }
             this.dragging.active = false
             const width = Math.max(this.dragging.current.columns, 1)
             const height = Math.max(this.dragging.current.rows, 1)

From cc1a33298224e400834b5a5772f79e66c0957c77 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:50:39 +0100
Subject: [PATCH 028/109] only apply resize if something changed

---
 ui/src/layouts/Group.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 859ebe7de..12fae7483 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -115,12 +115,21 @@ export default {
                 }
             }
         },
+        onHandleDragEnd (event) {
             if (this.dragging.active === false) { return }
             this.dragging.active = false
-            const width = Math.max(this.dragging.current.columns, 1)
-            const height = Math.max(this.dragging.current.rows, 1)
+            if (this.dragging.current.columns === null && this.dragging.current.rows === null) {
+                // console.log('drag handle end reset due to null columns or rows')
+                this.resetDragState()
+                return
+            }
+            const columns = Math.max(this.dragging.current.columns, 1)
+            const rows = Math.max(this.dragging.current.rows, 1)
+            const changed = this.dragging.init.columns !== columns || this.dragging.init.rows !== rows
             this.resetDragState()
-            this.$emit('resize', { index: this.index, width, height })
+            if (changed) {
+                this.$emit('resize', { index: this.index, width: columns, height: rows })
+            }
         },
         resetDragState () {
             this.dragging.current.width = null

From 08af2d51c8b526ab54e73b46ce299365a923b61b Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 10:52:12 +0100
Subject: [PATCH 029/109] move implementation from temp wysiwyg to supported
 page types

---
 ui/src/layouts/Flex.vue         | 110 ++++++++++++--
 ui/src/layouts/Grid.vue         | 116 +++++++++++++--
 ui/src/layouts/WYSIWYG.vue      | 254 --------------------------------
 ui/src/layouts/index.mjs        |   4 +-
 ui/src/layouts/wysiwyg/index.js |  98 +++++++++++-
 ui/src/stylesheets/common.css   |   5 +
 6 files changed, 297 insertions(+), 290 deletions(-)
 delete mode 100644 ui/src/layouts/WYSIWYG.vue

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 6ef255057..3edeacf18 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -1,24 +1,30 @@
 <template>
     <BaselineLayout :page-title="$route.meta.title">
-        <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--flex nrdb-ui-page" :class="page?.className">
+        <div v-if="pageGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--flex nrdb-ui-page" :class="page?.className">
             <div
-                v-for="g in orderedGroups"
+                v-for="(g, $index) in pageGroups"
                 :id="'nrdb-ui-group-' + g.id"
                 :key="g.id"
                 class="nrdb-ui-group"
                 :disabled="g.disabled === true ? 'disabled' : null"
                 :class="getGroupClass(g)"
                 :style="{'width': ((rowHeight * 2 * g.width) + 'px')}"
+                :draggable="editMode"
+                @dragstart="onDragStart($event, $index)"
+                @dragend="onDragEnd($event, $index)"
+                @dragover="onDragOver($event, $index)"
+                @drop="onDrop($event, $index)"
             >
                 <v-card variant="outlined" class="bg-group-background" :style="{'min-height': ((rowHeight * g.height) + 'px')}">
                     <template v-if="g.showTitle" #title>
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
+                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="editMode" @resize="onGroupResize" />
                     </template>
                 </v-card>
             </div>
+            <EditControls v-if="editMode" :dirty="dirty" :saveBusy="saving" @cancel="leaveEditMode" @discard="discardEdits" @save="saveEdits" />
         </div>
         <div>
             <!-- Render any widgets with a 'page' scope -->
@@ -32,31 +38,55 @@
             />
         </div>
     </BaselineLayout>
+    <ConfirmDialog ref="confirmDialog" />
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
 
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+
 import BaselineLayout from './Baseline.vue'
 import WidgetGroup from './Group.vue'
+import WYSIWYG from './wysiwyg'
+import EditControls from './wysiwyg/EditControls.vue'
 
 export default {
     name: 'LayoutFlex',
     components: {
         BaselineLayout,
+        ConfirmDialog,
+        EditControls,
         WidgetGroup
     },
+    mixins: [WYSIWYG],
     data () {
         const rowHeight = getComputedStyle(document.body).getPropertyValue('--widget-row-height')
         return {
+            pageGroups: [],
+            saving: false,
             rowHeight: parseFloat(rowHeight)
         }
     },
     computed: {
-        ...mapState('ui', ['groups', 'widgets', 'pages']),
+        ...mapState('ui', ['groups', 'widgets', 'pages', 'edits']),
         ...mapState('data', ['properties']),
         ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
-        orderedGroups: function () {
+        pageWidgets: function () {
+            return this.widgetsByPage(this.$route.meta.id)
+        },
+        page: function () {
+            return this.pages[this.$route.meta.id]
+        }
+    },
+    mounted () {
+        this.pageGroups = this.getPageGroups()
+        if (this.editMode) { // mixin property
+            this.initializeEditTracking() // Mixin method
+        }
+    },
+    methods: {
+        getPageGroups () {
             // get groups on this page
             const groups = this.groupsByPage(this.$route.meta.id)
                 // only show hte groups that haven't had their "visible" property set to false
@@ -71,14 +101,6 @@ export default {
                 })
             return groups
         },
-        pageWidgets: function () {
-            return this.widgetsByPage(this.$route.meta.id)
-        },
-        page: function () {
-            return this.pages[this.$route.meta.id]
-        }
-    },
-    methods: {
         getWidgetClass (widget) {
             const classes = []
             // ensure each widget has a class for its type
@@ -102,7 +124,69 @@ export default {
             if (properties && properties.class) {
                 classes.push(properties.class)
             }
+            // dragging interaction classes
+            if (this.isDragging(group)) { // Mixin method
+                classes.push('dragging')
+            }
             return classes.join(' ')
+        },
+
+        // WYSIWYG Edit Control Methods
+        async saveEdits () {
+            if (!this.dirty) { // Mixin property
+                return
+            }
+            // show a confirmation dialog
+            const doSave = await this.$refs.confirmDialog.show({
+                title: 'Save Changes',
+                icon: 'mdi-content-save-edit-outline',
+                message: 'This will deploy your changes to the Node-RED runtime. Are you sure?',
+                cancelButton: 'No',
+                okButton: 'Yes'
+            })
+            if (!doSave) { return }
+            this.saving = true
+            this.deployChanges({
+                dashboard: this.page.ui,
+                page: this.page.id,
+                groups: this.pageGroups
+            }).then(() => {
+                this.acceptChanges() // Mixin method
+            }).catch((error) => {
+                console.error('Error saving changes', error)
+                this.$refs.confirmDialog.show({
+                    title: 'Error saving changes',
+                    icon: 'mdi-alert-circle-outline',
+                    message: error.message || 'An error occurred while saving your changes.',
+                    okButton: 'Close',
+                    cancelButton: null
+                })
+            }).finally(() => {
+                this.saving = false
+            })
+        },
+        discardEdits () {
+            this.revertEdits() // Mixin method
+        },
+        async leaveEditMode () {
+            let leave = true
+            if (this.dirty) {
+                // show a confirmation dialog
+                leave = await this.$refs.confirmDialog.show({
+                    title: 'Leave Edit Mode',
+                    icon: 'mdi-help-circle-outline',
+                    message: 'There are unsaved changes that will be discarded if you leave edit mode. Are you sure?',
+                    cancelButton: 'No',
+                    okButton: 'Yes'
+                })
+            }
+            if (!leave) {
+                return
+            }
+            if (this.dirty) {
+                this.discardEdits()
+            }
+            this.exitEditMode() // Mixin method
         }
     }
 }
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index caf3c3b1e..e3fc062e4 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -1,24 +1,30 @@
 <template>
     <BaselineLayout :page-title="$route.meta.title">
-        <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--grid nrdb-ui-page" :class="page?.className">
+        <div v-if="pageGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--grid nrdb-ui-page" :class="page?.className">
             <div
-                v-for="g in orderedGroups"
+                v-for="(g, $index) in pageGroups"
                 :id="'nrdb-ui-group-' + g.id"
                 :key="g.id"
                 class="nrdb-ui-group"
                 :disabled="g.disabled === true ? 'disabled' : null"
                 :class="getGroupClass(g)"
                 :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
+                :draggable="editMode"
+                @dragstart="onDragStart($event, $index)"
+                @dragend="onDragEnd($event, $index)"
+                @dragover="onDragOver($event, $index)"
+                @drop="onDrop($event, $index)"
             >
                 <v-card variant="outlined" class="bg-group-background">
                     <template v-if="g.showTitle" #title>
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :widgets="widgetsByGroup(g.id)" />
+                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="editMode" @resize="onGroupResize" />
                     </template>
                 </v-card>
             </div>
+            <EditControls v-if="editMode" :dirty="dirty" :saveBusy="saving" @cancel="leaveEditMode" @discard="discardEdits" @save="saveEdits" />
         </div>
         <div>
             <!-- Render any widgets with a 'page' scope -->
@@ -32,13 +38,17 @@
             />
         </div>
     </BaselineLayout>
+    <ConfirmDialog ref="confirmDialog" />
 </template>
 
 <script>
+import ConfirmDialog from '../components/ConfirmDialog.vue'
 import Responsiveness from '../mixins/responsiveness.js'
 
 import BaselineLayout from './Baseline.vue'
 import WidgetGroup from './Group.vue'
+import WYSIWYG from './wysiwyg'
+import EditControls from './wysiwyg/EditControls.vue'
 
 // eslint-disable-next-line import/order, sort-imports
 import { mapState, mapGetters } from 'vuex'
@@ -47,14 +57,36 @@ export default {
     name: 'LayoutGrid',
     components: {
         BaselineLayout,
+        ConfirmDialog,
+        EditControls,
         WidgetGroup
     },
-    mixins: [Responsiveness],
+    mixins: [Responsiveness, WYSIWYG],
+    data () {
+        return {
+            pageGroups: [],
+            saving: false
+        }
+    },
     computed: {
-        ...mapState('ui', ['groups', 'widgets', 'pages']),
+        ...mapState('ui', ['groups', 'widgets', 'pages', 'edits']),
         ...mapState('data', ['properties']),
-        ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
-        orderedGroups: function () {
+        ...mapGetters('ui', ['groupsByPage', 'widgetsByGroup', 'widgetsByPage', 'editedGroups']),
+        pageWidgets: function () {
+            return this.widgetsByPage(this.$route.meta.id)
+        },
+        page: function () {
+            return this.pages[this.$route.meta.id]
+        }
+    },
+    mounted () {
+        this.pageGroups = this.getPageGroups()
+        if (this.editMode) { // mixin property
+            this.initializeEditTracking() // Mixin method
+        }
+    },
+    methods: {
+        getPageGroups () {
             // get groups on this page
             const groups = this.groupsByPage(this.$route.meta.id)
                 // only show hte groups that haven't had their "visible" property set to false
@@ -69,14 +101,6 @@ export default {
                 })
             return groups
         },
-        pageWidgets: function () {
-            return this.widgetsByPage(this.$route.meta.id)
-        },
-        page: function () {
-            return this.pages[this.$route.meta.id]
-        }
-    },
-    methods: {
         getWidgetClass (widget) {
             const classes = []
             // ensure each widget has a class for its type
@@ -100,7 +124,69 @@ export default {
             if (properties && properties.class) {
                 classes.push(properties.class)
             }
+            // dragging interaction classes
+            if (this.isDragging(group)) { // Mixin method
+                classes.push('dragging')
+            }
             return classes.join(' ')
+        },
+
+        // WYSIWYG Edit Control Methods
+        async saveEdits () {
+            if (!this.dirty) { // Mixin property
+                return
+            }
+            // show a confirmation dialog
+            const doSave = await this.$refs.confirmDialog.show({
+                title: 'Save Changes',
+                icon: 'mdi-content-save-edit-outline',
+                message: 'This will deploy your changes to the Node-RED runtime. Are you sure?',
+                cancelButton: 'No',
+                okButton: 'Yes'
+            })
+            if (!doSave) { return }
+            this.saving = true
+            this.deployChanges({
+                dashboard: this.page.ui,
+                page: this.page.id,
+                groups: this.pageGroups
+            }).then(() => {
+                this.acceptChanges() // Mixin method
+            }).catch((error) => {
+                console.error('Error saving changes', error)
+                this.$refs.confirmDialog.show({
+                    title: 'Error saving changes',
+                    icon: 'mdi-alert-circle-outline',
+                    message: error.message || 'An error occurred while saving your changes.',
+                    okButton: 'Close',
+                    cancelButton: null
+                })
+            }).finally(() => {
+                this.saving = false
+            })
+        },
+        discardEdits () {
+            this.revertEdits() // Mixin method
+        },
+        async leaveEditMode () {
+            let leave = true
+            if (this.dirty) {
+                // show a confirmation dialog
+                leave = await this.$refs.confirmDialog.show({
+                    title: 'Leave Edit Mode',
+                    icon: 'mdi-help-circle-outline',
+                    message: 'There are unsaved changes that will be discarded if you leave edit mode. Are you sure?',
+                    cancelButton: 'No',
+                    okButton: 'Yes'
+                })
+            }
+            if (!leave) {
+                return
+            }
+            if (this.dirty) {
+                this.discardEdits()
+            }
+            this.exitEditMode() // Mixin method
         }
     }
 }
diff --git a/ui/src/layouts/WYSIWYG.vue b/ui/src/layouts/WYSIWYG.vue
deleted file mode 100644
index 34aae96af..000000000
--- a/ui/src/layouts/WYSIWYG.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<template>
-    <BaselineLayout :page-title="$route.meta.title">
-        <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--wysiwyg nrdb-ui-page" :class="page?.className">
-            <!-- <div
-                v-for="(g, $index) in groups"
-                :id="'nrdb-ui-group-' + g.id"
-                :key="g.id"
-                class="nrdb-ui-group"
-                :disabled="g.disabled === true ? 'disabled' : null"
-                :class="getGroupClass(g)"
-                :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
-            > -->
-            <div
-                v-for="(g, $index) in groups"
-                :id="'nrdb-ui-group-' + g.id"
-                :key="g.id"
-                class="nrdb-ui-group"
-                :disabled="g.disabled === true ? 'disabled' : null"
-                :class="getGroupClass(g)"
-                :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
-                draggable="true"
-                @dragstart="onDragStart($event, $index)"
-                @dragend="onDragEnd($event, $index)"
-                @dragover="onDragOver($event, $index)"
-                @drop="onDrop($event, $index)"
-            >
-                <v-card variant="outlined" class="bg-group-background">
-                    <template #title>{{ g.name }} {{ g.order }} {{ g.width + 'x' + g.height }}</template>
-                    <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="true" @resize="onGroupResize" />
-                    </template>
-                </v-card>
-            </div>
-        </div>
-        <!-- <div>
-            <component
-                :is="widget.component"
-                v-for="widget in pageWidgets"
-                :id="widget.id"
-                :key="widget.id"
-                :props="widget.props"
-                :state="widget.state"
-            />
-        </div> -->
-        <div class="nrdb-ui-editor-tray-container">
-            <div class="nrdb-ui-editor-tray">
-                <v-tooltip text="Cancel Edit Mode">
-                    <template #activator>
-                        <v-btn variant="outlined" icon="mdi-close" color="warning" @click="cancel" />
-                    </template>
-                </v-tooltip>
-                <v-tooltip text="Discard Changes">
-                    <template #activator>
-                        <v-btn :disabled="!hasChanges" variant="outlined" icon="mdi-arrow-u-left-top" @click="discard" />
-                    </template>
-                </v-tooltip>
-                <v-tooltip text="Save Changes">
-                    <template #activator>
-                        <v-btn :disabled="!hasChanges" variant="flat" icon="mdi-content-save-outline" @click="save" />
-                    </template>
-                </v-tooltip>
-            </div>
-        </div>
-    </BaselineLayout>
-</template>
-
-<script>
-import NodeREDAPI from '../api/node-red'
-
-import BaselineLayout from './Baseline.vue'
-import WidgetGroup from './Group.vue'
-
-import WYSIWYG from './wysiwyg'
-
-// eslint-disable-next-line import/order, sort-imports
-import { mapState, mapGetters } from 'vuex'
-
-export default {
-    name: 'LayoutWYSIWYG',
-    components: {
-        BaselineLayout,
-        WidgetGroup
-    },
-    mixins: [WYSIWYG],
-    data () {
-        return {
-            groups: [],
-            dragging: {
-                index: -1
-            },
-            init: {
-                groups: []
-            }
-        }
-    },
-    computed: {
-        ...mapState('ui', ['pages']),
-        ...mapState('data', ['properties']),
-        ...mapGetters('ui', ['id', 'groupsByPage', 'widgetsByGroup', 'widgetsByPage']),
-        orderedGroups: function () {
-            // get groups on this page
-            const groups = this.groupsByPage(this.$route.meta.id)
-                // only show hte groups that haven't had their "visible" property set to false
-                .filter((g) => {
-                    if ('visible' in g) {
-                        return g.visible
-                    }
-                    return true
-                })
-                .sort((a, b) => {
-                    return a.order - b.order
-                })
-            return groups
-        },
-        pageWidgets: function () {
-            return this.widgetsByPage(this.$route.meta.id)
-        },
-        page: function () {
-            return this.pages[this.$route.meta.id]
-        },
-        hasChanges () {
-            return JSON.stringify(this.groups) !== JSON.stringify(this.init.groups)
-        }
-    },
-    mounted () {
-        // get groups for this page
-        this.groups = this.loadGroupsFromStore()
-
-        // clone to track changes
-        this.init.groups = JSON.parse(JSON.stringify(this.groups))
-    },
-    methods: {
-        loadGroupsFromStore () {
-            const groups = this.groupsByPage(this.$route.meta.id)
-                // only show hte groups that haven't had their "visible" property set to false
-                .filter((g) => {
-                    if ('visible' in g) {
-                        return g.visible
-                    }
-                    return true
-                })
-                .sort((a, b) => {
-                    return a.order - b.order
-                })
-            return groups
-        },
-        save () {
-            // API call to NR to trigger a deploy
-            NodeREDAPI.deployChanges(this.id, {
-                groups: this.groups
-            }).then(() => {
-                // update saved state
-                this.init.groups = JSON.parse(JSON.stringify(this.groups))
-            }).catch((error) => {
-                console.error('Error saving changes', error)
-            })
-        },
-        discard () {
-            // reload groups from store
-            this.groups = JSON.parse(JSON.stringify(this.init.groups))
-        },
-        cancel () {
-            console.log('cancel editing placeholder')
-        },
-        getWidgetClass (widget) {
-            const classes = []
-            // ensure each widget has a class for its type
-            classes.push(`nrdb-${widget.type}`)
-            if (widget.props.className) {
-                classes.push(widget.props.className)
-            }
-            if (widget.state.class) {
-                classes.push(widget.state.class)
-            }
-            return classes.join(' ')
-        },
-        getGroupClass (group) {
-            const classes = []
-            // add any class set in the group's properties
-            if (group.className) {
-                classes.push(group.className)
-            }
-            // add dynamically set class(es)
-            const properties = this.properties[group.id]
-            if (properties && properties.class) {
-                classes.push(properties.class)
-            }
-
-            // dragging interaction classes
-            const dragging = this.groups[this.dragging.index]
-            if (dragging?.id === group.id) {
-                classes.push('dragging')
-            }
-            return classes.join(' ')
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.nrdb-ui-group.dragging {
-    border-style: dashed;
-}
-.nrdb-ui-editor-tray-container {
-    position: absolute;
-    bottom: 24px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-}
-.nrdb-ui-editor-tray {
-    background-color: white;
-    border: 1px solid #ccc;
-    box-shadow: 0px 0px 5px #00000021;
-    padding: 12px;
-    border-radius: 4px;
-    display: flex;
-    gap: 6px;
-    border-radius: 2rem;
-    .v-btn {
-        border-radius: 2rem;
-    }
-}
-
-/* Actual Layout Styling */
-.nrdb-layout--wysiwyg {
-    --layout-card-width: 320px;
-    --layout-gap: 12px;
-    --layout-columns: 12;
-    display: grid;
-    grid-template-columns: repeat(var(--layout-columns), 1fr);
-    flex-wrap: wrap;
-    padding: var(--page-padding);
-    gap: var(--group-gap);
-}
-
-@media only screen and (max-width: 1024px) {
-    .nrdb-layout--wysiwyg {
-        --layout-columns: 9;
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .nrdb-layout--wysiwyg {
-        --layout-columns: 6;
-    }
-}
-
-@media only screen and (max-width: 576px) {
-    .nrdb-layout--wysiwyg {
-        --layout-columns: 3;
-    }
-}
-</style>
diff --git a/ui/src/layouts/index.mjs b/ui/src/layouts/index.mjs
index 19cc76c4a..74052a14e 100644
--- a/ui/src/layouts/index.mjs
+++ b/ui/src/layouts/index.mjs
@@ -2,12 +2,10 @@ import Flex from './Flex.vue'
 import Grid from './Grid.vue'
 import Notebook from './Notebook.vue'
 import Tabs from './Tabs.vue'
-import WYSIWYG from './WYSIWYG.vue'
 
 export default {
     flex: Flex,
     grid: Grid,
     tabs: Tabs,
-    notebook: Notebook,
-    wysiwyg: WYSIWYG
+    notebook: Notebook
 }
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index 1a66f4e45..3b627fbc7 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -1,20 +1,90 @@
+import { editKey, editMode, editPage, exitEditMode, isTrackingEdits, originalGroups, startEditTracking, updateEditTracking } from '../../EditTracking.js'
+import NodeRedApi from '../../api/node-red'
+
 export default {
     data () {
         return {
+            pageGroups: [],
             dragging: {
                 index: -1
             }
         }
     },
+    computed: {
+        dirty () {
+            if (!this.editMode || !isTrackingEdits.value) {
+                return false
+            }
+            return JSON.stringify(this.pageGroups) !== JSON.stringify(originalGroups.value)
+        },
+        editMode: function () {
+            return editMode.value && editPage.value === this.$route.meta.id
+        }
+    },
     methods: {
+        initializeEditTracking () {
+            if (this.editMode && !isTrackingEdits.value) {
+                startEditTracking(this.pageGroups)
+            }
+        },
+        acceptChanges () {
+            updateEditTracking(this.pageGroups)
+        },
+        exitEditMode () {
+            const url = new URL(window.location.href)
+            url.searchParams.delete('edit-key')
+            const query = { ...this.$route.query }
+            delete query['edit-key']
+            this.$router.replace({ query })
+            window.history.replaceState({}, document.title, url)
+            exitEditMode() // EditTracking method
+        },
+        revertEdits () {
+            this.pageGroups = JSON.parse(JSON.stringify(originalGroups.value))
+        },
+        deployChanges ({ dashboard, page, groups }) {
+            return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value })
+        },
+        /**
+         * Event handler for dragstart event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
         onDragStart (event, index) {
             this.dragging.index = index
             event.dataTransfer.effectAllowed = 'move'
         },
+        /**
+         * Event handler for dragover event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
         onDragOver (event, index) {
+            // ensure the mouse is over a different group
+            if (this.dragging.index === index || this.dragging.index < 0) {
+                return
+            }
+            // ensure the mouse is within the bounds of the source group size
+            // to avoid flip-flop when the target group is larger than the source group
+            const sourceGroup = this.pageGroups[this.dragging.index]
+            const sourceId = `nrdb-ui-group-${sourceGroup.id}`
+            const sourceEl = document.getElementById(sourceId)
+            const sourceBounds = sourceEl.getBoundingClientRect()
+            const targetGroup = this.pageGroups[index]
+            const targetId = `nrdb-ui-group-${targetGroup.id}`
+            const targetEl = document.getElementById(targetId)
+            const targetBounds = targetEl.getBoundingClientRect()
+            const hitBoundX1 = targetBounds.left
+            const hitBoundX2 = targetBounds.left + sourceBounds.width
+            const hitBoundY1 = targetBounds.top
+            const hitBoundY2 = targetBounds.top + sourceBounds.height
+            if (event.clientX < hitBoundX1 || event.clientX > hitBoundX2 || event.clientY < hitBoundY1 || event.clientY > hitBoundY2) {
+                return
+            }
+
             if (this.dragging.index >= 0) {
                 event.preventDefault()
-                event.dataTransfer.dropEffect = 'move'
+                event.dataTransfer.dropEffect = 'drop'
                 this.moveGroup(this.dragging.index, index)
             }
         },
@@ -29,16 +99,34 @@ export default {
             this.dragging.index = -1
         },
         moveGroup (fromIndex, toIndex) {
-            const movedItem = this.groups.splice(fromIndex, 1)[0]
-            this.groups.splice(toIndex, 0, movedItem)
+            const movedItem = this.pageGroups.splice(fromIndex, 1)[0]
+            this.pageGroups.splice(toIndex, 0, movedItem)
             // update .order property of all groups
-            this.groups.forEach((group, index) => {
+            this.pageGroups.forEach((group, index) => {
                 group.order = index + 1
             })
             this.dragging.index = toIndex
         },
         onGroupResize (opts) {
-            this.groups[opts.index].width = opts.width
+            // ensure opts.width is a number and is greater than 0
+            if (typeof opts.width !== 'number' || opts.width < 1) {
+                return
+            }
+            this.pageGroups[opts.index].width = opts.width
+        },
+        isDragging (group) {
+            const dragging = this.pageGroups[this.dragging.index]
+            if (dragging?.id === group?.id) {
+                return true
+            }
+            return false
+        },
+        getElementBounds (id) {
+            const sourceGroup = this.pageGroups[this.dragging.index]
+            const sourceId = `nrdb-ui-group-${sourceGroup.id}`
+            const sourceEl = document.getElementById(sourceId)
+            const sourceBounds = sourceEl.getBoundingClientRect()
+            return sourceBounds
         }
     }
 }
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
index e7b5f0439..23ec9a864 100644
--- a/ui/src/stylesheets/common.css
+++ b/ui/src/stylesheets/common.css
@@ -484,4 +484,9 @@ NB! supresses the gridarea for messages, but those are not in use*/
 .v-btn.v-btn--density-comfortable {
     height: auto;
     min-height: var(--widget-row-height);
+}
+
+/* WYSIWYG styling */
+.nrdb-ui-group.dragging {
+    border-style: dashed;
 }
\ No newline at end of file

From 45e96005b17dba762b18633c511931ba3908adbb Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 14:21:19 +0100
Subject: [PATCH 030/109] remove dead code

---
 ui/src/layouts/wysiwyg/sortable.js | 39 ------------------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 ui/src/layouts/wysiwyg/sortable.js

diff --git a/ui/src/layouts/wysiwyg/sortable.js b/ui/src/layouts/wysiwyg/sortable.js
deleted file mode 100644
index 96053b454..000000000
--- a/ui/src/layouts/wysiwyg/sortable.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const sortable = {
-    data () {
-
-    },
-    created: (el, binding) => {
-        console.log(binding.instance)
-        function onDragStart (event, index) {
-            this.dragging.index = index
-            event.dataTransfer.effectAllowed = 'move'
-        }
-
-        function onDragOver (event, index) {
-            if (this.dragging.index >= 0) {
-                event.preventDefault()
-                event.dataTransfer.dropEffect = 'move'
-                this.moveGroup(this.dragging.index, index)
-            }
-        }
-
-        function onDrop (event, index) {
-            event.preventDefault()
-            if (this.dragging.index >= 0) {
-                this.moveGroup(this.dragging.index, index)
-                this.dragging.index = -1
-            }
-        }
-
-        function onDragEnd (event, index) {
-            this.dragging.index = -1
-        }
-
-        el.addEventListener('dragstart', onDragStart)
-        el.addEventListener('dragover', onDragOver)
-        el.addEventListener('drop', onDrop)
-        el.addEventListener('dragend', onDragEnd)
-    }
-}
-
-export default sortable

From 3f5cdcc7cb5a5d57bfa3e83eaeaca974e069cc4e Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 18:24:18 +0100
Subject: [PATCH 031/109] Add pill indicator and draw indicator when in edit
 mode

---
 ui/src/layouts/Baseline.vue | 39 +++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index 354016f50..2fc124336 100644
--- a/ui/src/layouts/Baseline.vue
+++ b/ui/src/layouts/Baseline.vue
@@ -7,6 +7,9 @@
             <v-app-bar-title>
                 <template v-if="dashboard.showPageTitle === true || dashboard.showPageTitle === undefined">
                     {{ pageTitle }}
+                    <v-chip v-if="showEditingIconInAppBar" v-tooltip="`${currentEditPage.name} is in edit mode`" color="warning" :to="currentEditPage.type === 'ui-page' ? { name: currentEditPage.route.name } : null">
+                        <v-icon>mdi-pencil</v-icon>
+                    </v-chip>
                 </template>
                 <div id="app-bar-title" />
             </v-app-bar-title>
@@ -37,7 +40,11 @@
                         :to="page.type === 'ui-page' ? { name: page.route.name } : null"
                         :data-nav="page.id"
                         @click="closeNavigationDrawer()"
-                    />
+                    >
+                        <template #append>
+                            <v-icon v-if="page.editMode" class="mdi-pencil mdi item-edit-mode-icon" />
+                        </template>
+                    </v-list-item>
                 </v-list>
             </v-navigation-drawer>
             <slot class="nrdb-layout" />
@@ -65,6 +72,8 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 
+import { editMode, editPage } from '../EditTracking.js'
+
 import Alerts from '../services/alerts'
 import UINotification from '../widgets/ui-notification/UINotification.vue'
 
@@ -131,7 +140,7 @@ export default {
             }
         },
         orderedPages: function () {
-            return Object.values(this.pages)
+            const pages = Object.values(this.pages)
                 .filter((p) => {
                     if ('visible' in p && !p.visible) {
                         return false
@@ -139,6 +148,15 @@ export default {
                     return true
                 })
                 .sort((a, b) => a.order - b.order)
+            if (editMode.value) {
+                return pages.map((p) => {
+                    return {
+                        ...p,
+                        editMode: p.id === editPage.value
+                    }
+                })
+            }
+            return pages
         },
         uiWidgets: function () {
             // get widgets scoped to the UI, not a group/page
@@ -170,6 +188,16 @@ export default {
         },
         density: function () {
             return this.theme?.sizes.density || 'default'
+        },
+        currentEditPage: function () {
+            if (editMode.value && this.orderedPages?.length) {
+                return this.orderedPages.find(p => p.id === editPage.value)
+            }
+            return null
+        },
+        showEditingIconInAppBar: function () {
+            // show the edit icon in the app bar if the page is in edit mode and the drawer is closed
+            return !!(this.currentEditPage && (this.drawer === false || this.rail === true))
         }
     },
     watch: {
@@ -300,3 +328,10 @@ export default {
     }
 }
 </script>
+
+<style scoped>
+.item-edit-mode-icon {
+    color: rgb(var(--v-theme-warning)) !important;
+    font-size: 1.25rem;
+}
+</style>

From 97b74d8c822dc6ae21d36f4469bc374d5d8d9bc8 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 18:49:34 +0100
Subject: [PATCH 032/109] lint fixes

---
 nodes/widgets/ui_dropdown.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nodes/widgets/ui_dropdown.html b/nodes/widgets/ui_dropdown.html
index f40cc2ed2..75c662d47 100644
--- a/nodes/widgets/ui_dropdown.html
+++ b/nodes/widgets/ui_dropdown.html
@@ -54,13 +54,13 @@
                 }
                 if (this.chips === undefined) {
                     $('#node-input-chips').prop('checked', false)
-                }    
+                }
                 if (this.clearable === undefined) {
                     $('#node-input-clearable').prop('checked', false)
-                }  
+                }
                 if (this.typeIsComboBox === undefined) {
                     $('#node-input-typeIsComboBox').prop('checked', true)
-                }                            
+                }
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                 if (RED.nodes.subflow(this.z)) {

From ba0cb2635bbe86bb5c6dbbc2740aaf3a9baa3dcd Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 14 Oct 2024 19:21:03 +0100
Subject: [PATCH 033/109] allow widget width to be larger than group width

---
 nodes/widgets/ui_button.html       | 2 +-
 nodes/widgets/ui_button_group.html | 2 +-
 nodes/widgets/ui_chart.html        | 2 +-
 nodes/widgets/ui_dropdown.html     | 2 +-
 nodes/widgets/ui_file_input.html   | 2 +-
 nodes/widgets/ui_form.html         | 2 +-
 nodes/widgets/ui_gauge.html        | 2 +-
 nodes/widgets/ui_number_input.html | 2 +-
 nodes/widgets/ui_radio_group.html  | 2 +-
 nodes/widgets/ui_slider.html       | 2 +-
 nodes/widgets/ui_switch.html       | 2 +-
 nodes/widgets/ui_table.html        | 2 +-
 nodes/widgets/ui_template.html     | 6 +++---
 nodes/widgets/ui_text.html         | 2 +-
 nodes/widgets/ui_text_input.html   | 2 +-
 15 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/nodes/widgets/ui_button.html b/nodes/widgets/ui_button.html
index e965f70af..925e3d4c9 100644
--- a/nodes/widgets/ui_button.html
+++ b/nodes/widgets/ui_button.html
@@ -17,7 +17,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_button_group.html b/nodes/widgets/ui_button_group.html
index 1254a1284..94ca11fae 100644
--- a/nodes/widgets/ui_button_group.html
+++ b/nodes/widgets/ui_button_group.html
@@ -15,7 +15,7 @@
                     const width = v || 0
                     const currentGroup = $('#node-input-group').val() || this.group
                     const groupNode = RED.nodes.node(currentGroup)
-                    const valid = !groupNode || +width <= +groupNode.width
+                    const valid = !groupNode || +width >= 0
                     $('#node-input-size').toggleClass('input-error', !valid)
                     return valid
                 }
diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
index 8512ded08..d5b745a3a 100644
--- a/nodes/widgets/ui_chart.html
+++ b/nodes/widgets/ui_chart.html
@@ -134,7 +134,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_dropdown.html b/nodes/widgets/ui_dropdown.html
index 75c662d47..5c06df3fd 100644
--- a/nodes/widgets/ui_dropdown.html
+++ b/nodes/widgets/ui_dropdown.html
@@ -18,7 +18,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_file_input.html b/nodes/widgets/ui_file_input.html
index 8fe5763be..4130b98ae 100644
--- a/nodes/widgets/ui_file_input.html
+++ b/nodes/widgets/ui_file_input.html
@@ -16,7 +16,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_form.html b/nodes/widgets/ui_form.html
index 441211da9..b2bfa318a 100644
--- a/nodes/widgets/ui_form.html
+++ b/nodes/widgets/ui_form.html
@@ -21,7 +21,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_gauge.html b/nodes/widgets/ui_gauge.html
index b1d680672..85c49a635 100644
--- a/nodes/widgets/ui_gauge.html
+++ b/nodes/widgets/ui_gauge.html
@@ -129,7 +129,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_number_input.html b/nodes/widgets/ui_number_input.html
index b7a4bc8b5..7ff748ab8 100644
--- a/nodes/widgets/ui_number_input.html
+++ b/nodes/widgets/ui_number_input.html
@@ -17,7 +17,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_radio_group.html b/nodes/widgets/ui_radio_group.html
index 97a40ab36..fab4fa481 100644
--- a/nodes/widgets/ui_radio_group.html
+++ b/nodes/widgets/ui_radio_group.html
@@ -17,7 +17,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_slider.html b/nodes/widgets/ui_slider.html
index 6658e9a25..db5440b17 100644
--- a/nodes/widgets/ui_slider.html
+++ b/nodes/widgets/ui_slider.html
@@ -18,7 +18,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_switch.html b/nodes/widgets/ui_switch.html
index ecd9c120f..e447e8839 100644
--- a/nodes/widgets/ui_switch.html
+++ b/nodes/widgets/ui_switch.html
@@ -18,7 +18,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
index 2bc40eab0..90a2858ab 100644
--- a/nodes/widgets/ui_table.html
+++ b/nodes/widgets/ui_table.html
@@ -72,7 +72,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_template.html b/nodes/widgets/ui_template.html
index 058e15659..7953e274d 100644
--- a/nodes/widgets/ui_template.html
+++ b/nodes/widgets/ui_template.html
@@ -135,15 +135,15 @@
                 width: {
                     value: 0,
                     validate: function (v) {
-                        let valid = true
                         if (this.templateScope !== 'global') {
                             const width = v || 0
                             const currentGroup = $('#node-input-group').val() || this.group
                             const groupNode = RED.nodes.node(currentGroup)
-                            valid = !groupNode || +width <= +groupNode.width
+                            const valid = !groupNode || +width >= 0
                             $('#node-input-size').toggleClass('input-error', !valid)
+                            return valid
                         }
-                        return valid
+                        return true
                     }
                 },
                 height: { value: 0 },
diff --git a/nodes/widgets/ui_text.html b/nodes/widgets/ui_text.html
index 55a8f2fbb..8e05630ce 100644
--- a/nodes/widgets/ui_text.html
+++ b/nodes/widgets/ui_text.html
@@ -83,7 +83,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }
diff --git a/nodes/widgets/ui_text_input.html b/nodes/widgets/ui_text_input.html
index c010be80b..5029f5044 100644
--- a/nodes/widgets/ui_text_input.html
+++ b/nodes/widgets/ui_text_input.html
@@ -17,7 +17,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }

From ce4f5d64c7adfa7e9f50abf0cef4178442177b93 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 15 Oct 2024 10:52:05 +0100
Subject: [PATCH 034/109] revert url query param clean up code (fix e2e tests)

---
 ui/src/App.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 041a5418e..6b3aee749 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -191,10 +191,7 @@ export default {
 
             // if this is the first time we load the Dashboard, the router hasn't registered the current route properly,
             // so best we just navigate to the existing URL to let router catch up
-            // ensure we remove the edit key from the URL
-            const url = new URL(window.location.href)
-            url.searchParams.delete('edit-key')
-            this.$router.push(url)
+            this.$router.push(this.$route.fullPath)
 
             // loop over the widgets defined in Node-RED,
             // map their respective Vue component for rendering on a page

From 529be18957e9ffcfcd340c03f9a1b7ff4fe4906c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 15 Oct 2024 17:25:24 +0100
Subject: [PATCH 035/109] fix resize and drag pointers and placement

---
 ui/src/layouts/Flex.vue         | 13 ++++--
 ui/src/layouts/Grid.vue         | 13 ++++--
 ui/src/layouts/Group.vue        | 83 +++++++++++++++++++++------------
 ui/src/layouts/wysiwyg/index.js | 77 +++++++++++++++++-------------
 ui/src/stylesheets/common.css   | 16 ++++++-
 5 files changed, 128 insertions(+), 74 deletions(-)

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 47dffab79..770e1c49a 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -11,9 +11,11 @@
                 :style="{'width': ((rowHeight * 2 * g.width) + 'px')}"
                 :draggable="editMode"
                 @dragstart="onDragStart($event, $index)"
-                @dragend="onDragEnd($event, $index)"
-                @dragover="onDragOver($event, $index)"
-                @drop="onDrop($event, $index)"
+                @dragend="onDragEnd($event, $index, g)"
+                @dragover="onDragOver($event, $index, g)"
+                @drop="onDrop($event, $index, g)"
+                @dragleave="onDragLeave($event, $index, g)"
+                @dragenter.prevent
             >
                 <v-card variant="outlined" class="bg-group-background" :style="{'min-height': ((rowHeight * g.height) + 'px')}">
                     <template v-if="g.showTitle" #title>
@@ -146,8 +148,9 @@ export default {
                 classes.push(properties.class)
             }
             // dragging interaction classes
-            if (this.isDragging(group)) { // Mixin method
-                classes.push('dragging')
+            const dragDropClass = this.getDragDropClass(group) // Mixin method
+            if (dragDropClass) {
+                classes.push(dragDropClass)
             }
             return classes.join(' ')
         },
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index 407782f4e..403d059f6 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -11,9 +11,11 @@
                 :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
                 :draggable="editMode"
                 @dragstart="onDragStart($event, $index)"
-                @dragend="onDragEnd($event, $index)"
-                @dragover="onDragOver($event, $index)"
-                @drop="onDrop($event, $index)"
+                @dragend="onDragEnd($event, $index, g)"
+                @dragover="onDragOver($event, $index, g)"
+                @drop="onDrop($event, $index, g)"
+                @dragleave="onDragLeave($event, $index, g)"
+                @dragenter.prevent
             >
                 <v-card variant="outlined" class="bg-group-background">
                     <template v-if="g.showTitle" #title>
@@ -146,8 +148,9 @@ export default {
                 classes.push(properties.class)
             }
             // dragging interaction classes
-            if (this.isDragging(group)) { // Mixin method
-                classes.push('dragging')
+            const dragDropClass = this.getDragDropClass(group) // Mixin method
+            if (dragDropClass) {
+                classes.push(dragDropClass)
             }
             return classes.join(' ')
         },
diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 12fae7483..2685d494b 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -12,8 +12,8 @@
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
         </div>
         <div
-            v-if="resizable" ref="resize-view" class="nrdb-resizable" :class="{'active': dragging.active}"
-            :style="{'width': dragging.current.width ? `${dragging.current.width}px` : null }"
+            v-if="resizable" ref="resize-view" class="nrdb-resizable" :class="{'resizing': resizing.active}"
+            :style="{'width': resizing.current.width ? `${resizing.current.width}px` : null }"
         >
             <div
                 draggable="true"
@@ -21,6 +21,8 @@
                 @dragstart="onHandleDragStart($event, 'top', 'right')"
                 @drag="onHandleDrag($event, 'top', 'right')"
                 @dragend="onHandleDragEnd($event, 'top', 'right')"
+                @dragover="onHandleOver($event, 'top', 'right')"
+                @dragenter.prevent
             />
         </div>
         <img ref="blank-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="">
@@ -52,7 +54,7 @@ export default {
     emits: ['resize'],
     data () {
         return {
-            dragging: {
+            resizing: {
                 active: false,
                 init: {
                     x: 0,
@@ -72,7 +74,15 @@ export default {
     },
     computed: {
         columns () {
-            return this.dragging.current.columns > 0 ? this.dragging.current.columns : +this.group.width
+            return this.resizing.current.columns > 0 ? this.resizing.current.columns : +this.group.width
+        }
+    },
+    watch: {
+        'resizing.active' (active) {
+            // add class 'resize-active' to parent group v-card
+            // that class is solely to raise the z-index of the group while resizing
+            // the associated resize-active CSS is in `common.css`
+            this.$el.parentElement.closest('.nrdb-ui-group > .v-card')?.classList.toggle('resize-active', active)
         }
     },
     methods: {
@@ -88,53 +98,61 @@ export default {
             }
             return classes.join(' ')
         },
-        onHandleDragStart (event, vertical, horizontal) {
-            this.dragging.active = true
-            this.dragging.init.columns = +this.group.width || 1
-            this.dragging.init.rows = +this.group.height || 1
-            this.dragging.init.width = this.$refs['resize-view'].clientWidth
-            this.dragging.init.x = event.x
+        onHandleDragStart (/** @type {DragEvent} */ event, vertical, horizontal) {
+            this.resizing.active = true
+            this.resizing.init.columns = +this.group.width || 1
+            this.resizing.init.rows = +this.group.height || 1
+            this.resizing.init.width = this.$refs['resize-view'].clientWidth
+            this.resizing.init.x = event.x
             const EMPTY_IMAGE = this.$refs['blank-img'] // don't show image preview
             event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
-            // prevent default drag behavior
+            event.dataTransfer.effectAllowed = 'all'
+            event.dataTransfer.dropEffect = 'move'
             event.stopPropagation()
             return false
         },
-        onHandleDrag (event, vertical, horizontal) {
-            if (this.dragging.active === false) { return }
+        onHandleOver (/** @type {DragEvent} */ event, vertical, horizontal) {
+            if (this.resizing.active === false) { return }
+            console.log('onHandleOver', event)
+            event.dataTransfer.dropEffect = 'move'
+            event.preventDefault()
+        },
+        onHandleDrag (/** @type {DragEvent} */ event, vertical, horizontal) {
+            if (this.resizing.active === false) { return }
+            console.log('onHandleDrag', event)
+            event.dataTransfer.dropEffect = 'move'
             if (event.x > 0 && event.y > 0) {
                 const stepX = this.$el.clientWidth / +this.group.width
-                const dx = event.x - this.dragging.init.x
+                const dx = event.x - this.resizing.init.x
                 const dw = dx < 0 ? Math.ceil(dx / stepX) : Math.floor(dx / stepX)
-                this.dragging.current.width = this.dragging.init.width + dx
-                const width = Math.max(this.dragging.init.columns + dw, 1)
+                this.resizing.current.width = this.resizing.init.width + dx
+                const width = Math.max(this.resizing.init.columns + dw, 1)
                 if (width !== +this.group.width) {
-                    // console.log('drag handle drag: width', width, 'emitting resize')
-                    this.dragging.current.columns = width
+                    this.resizing.current.columns = width
                     this.$emit('resize', { index: this.index, width })
                 }
             }
         },
-        onHandleDragEnd (event) {
-            if (this.dragging.active === false) { return }
-            this.dragging.active = false
-            if (this.dragging.current.columns === null && this.dragging.current.rows === null) {
-                // console.log('drag handle end reset due to null columns or rows')
+        onHandleDragEnd (/** @type {DragEvent} */ event) {
+            if (this.resizing.active === false) { return }
+            this.resizing.active = false
+            if (this.resizing.current.columns === null && this.resizing.current.rows === null) {
                 this.resetDragState()
                 return
             }
-            const columns = Math.max(this.dragging.current.columns, 1)
-            const rows = Math.max(this.dragging.current.rows, 1)
-            const changed = this.dragging.init.columns !== columns || this.dragging.init.rows !== rows
+            const columns = Math.max(this.resizing.current.columns, 1)
+            const rows = Math.max(this.resizing.current.rows, 1)
+            const changed = this.resizing.init.columns !== columns || this.resizing.init.rows !== rows
             this.resetDragState()
             if (changed) {
                 this.$emit('resize', { index: this.index, width: columns, height: rows })
             }
         },
         resetDragState () {
-            this.dragging.current.width = null
-            this.dragging.current.columns = null
-            this.dragging.current.rows = null
+            this.resizing.active = false
+            this.resizing.current.width = null
+            this.resizing.current.columns = null
+            this.resizing.current.rows = null
         }
     }
 
@@ -150,8 +168,7 @@ export default {
     left: 0;
     --handler-size: 12px;
     cursor: grab;
-    &.active {
-        cursor: grabbing !important;
+    &.resizing {
         background-color: #ff00001f;
         border: 1px dashed red;
     }
@@ -163,6 +180,10 @@ export default {
     background-color: white;
     border: 1px solid black;
     border-radius: 6px;
+    cursor: ew-resize;
+    &:active {
+        cursor: ew-resize !important;
+    }
 }
 .nrdb-resizable--top-right {
     top: calc(-1 * var(--handler-size) / 2);
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index 3b627fbc7..cf77e9c09 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -6,7 +6,9 @@ export default {
         return {
             pageGroups: [],
             dragging: {
-                index: -1
+                active: false,
+                index: -1,
+                dropIndex: -1
             }
         }
     },
@@ -51,52 +53,54 @@ export default {
          * @param {Number} index - The index of the group
          */
         onDragStart (event, index) {
+            this.dragging.active = true
             this.dragging.index = index
-            event.dataTransfer.effectAllowed = 'move'
+            this.dragging.dropIndex = index
+            event.dataTransfer.effectAllowed = 'all'
+            event.dataTransfer.dropEffect = 'move'
+            event.stopPropagation()
+            return false
         },
         /**
          * Event handler for dragover event
          * @param {DragEvent} event - The drag event
          * @param {Number} index - The index of the group
          */
-        onDragOver (event, index) {
+        onDragOver (event, index, group) {
+            if (this.dragging.active === false) { return }
             // ensure the mouse is over a different group
-            if (this.dragging.index === index || this.dragging.index < 0) {
-                return
+            if (index !== this.dragging.index) {
+                this.dragging.dropIndex = index
             }
-            // ensure the mouse is within the bounds of the source group size
-            // to avoid flip-flop when the target group is larger than the source group
-            const sourceGroup = this.pageGroups[this.dragging.index]
-            const sourceId = `nrdb-ui-group-${sourceGroup.id}`
-            const sourceEl = document.getElementById(sourceId)
-            const sourceBounds = sourceEl.getBoundingClientRect()
-            const targetGroup = this.pageGroups[index]
-            const targetId = `nrdb-ui-group-${targetGroup.id}`
-            const targetEl = document.getElementById(targetId)
-            const targetBounds = targetEl.getBoundingClientRect()
-            const hitBoundX1 = targetBounds.left
-            const hitBoundX2 = targetBounds.left + sourceBounds.width
-            const hitBoundY1 = targetBounds.top
-            const hitBoundY2 = targetBounds.top + sourceBounds.height
-            if (event.clientX < hitBoundX1 || event.clientX > hitBoundX2 || event.clientY < hitBoundY1 || event.clientY > hitBoundY2) {
+            if (this.dragging.index === index || this.dragging.index < 0) {
+                event.dataTransfer.dropEffect = 'none'
                 return
             }
-
+            console.log('onDragOver index', index, 'group', group)
+            event.dataTransfer.dropEffect = 'move'
             if (this.dragging.index >= 0) {
                 event.preventDefault()
                 event.dataTransfer.dropEffect = 'drop'
-                this.moveGroup(this.dragging.index, index)
             }
         },
-        onDrop (event, index) {
+        onDrop (event, index, group) {
+            if (this.dragging.active === false) { return }
+            this.dragging.dropIndex = index
             event.preventDefault()
             if (this.dragging.index >= 0) {
-                this.moveGroup(this.dragging.index, index)
+                this.moveGroup(this.dragging.index, this.dragging.dropIndex)
+                this.dragging.active = false
                 this.dragging.index = -1
+                this.dragging.dropIndex = -1
             }
         },
-        onDragEnd (event, index) {
+        onDragLeave (event, index, group) {
+            this.dragging.dropIndex = -1
+        },
+        onDragEnd (event, index, group) {
+            this.dragging.active = false
             this.dragging.index = -1
+            this.dragging.dropIndex = -1
         },
         moveGroup (fromIndex, toIndex) {
             const movedItem = this.pageGroups.splice(fromIndex, 1)[0]
@@ -114,19 +118,28 @@ export default {
             }
             this.pageGroups[opts.index].width = opts.width
         },
+        getDragDropClass (group) {
+            if (this.isDragging(group)) {
+                console.log('getDragDropClass returning drag-start')
+                return 'drag-start'
+            }
+            const targetGroup = this.pageGroups[this.dragging.dropIndex]
+            if (targetGroup?.id === group?.id) {
+                console.log('getDragDropClass returning drag-over')
+                return 'drag-over'
+            }
+            console.log('getDragDropClass returning ""')
+            return ''
+        },
         isDragging (group) {
+            if (!this.dragging.active) {
+                return false
+            }
             const dragging = this.pageGroups[this.dragging.index]
             if (dragging?.id === group?.id) {
                 return true
             }
             return false
-        },
-        getElementBounds (id) {
-            const sourceGroup = this.pageGroups[this.dragging.index]
-            const sourceId = `nrdb-ui-group-${sourceGroup.id}`
-            const sourceEl = document.getElementById(sourceId)
-            const sourceBounds = sourceEl.getBoundingClientRect()
-            return sourceBounds
         }
     }
 }
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
index 23ec9a864..6b45b9713 100644
--- a/ui/src/stylesheets/common.css
+++ b/ui/src/stylesheets/common.css
@@ -489,4 +489,18 @@ NB! supresses the gridarea for messages, but those are not in use*/
 /* WYSIWYG styling */
 .nrdb-ui-group.dragging {
     border-style: dashed;
-}
\ No newline at end of file
+}
+.nrdb-ui-group.drag-start {
+    opacity: 0.5;
+}
+.nrdb-ui-group.drag-over {
+    outline: 2px dashed black;
+}
+.nrdb-ui-page > .nrdb-ui-group[draggable="true"] > .v-card.resize-active {
+     /*
+        ensure card is on top while being actively resized
+        this is important to ensure the resize handles are visible
+        above sibling cards
+     */
+    z-index: 1000 !important;
+}

From 352a4cc995b7f9bbe9d7aca4ed481ad3fa493ea8 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 16 Oct 2024 08:38:35 +0100
Subject: [PATCH 036/109] fix untranslated RED notification

---
 nodes/config/ui_base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index fc5a2006c..c8ea32d7a 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -908,7 +908,7 @@
                     window.open(url, target)
                 } catch (err) {
                     console.error('layout mode error', err)
-                    RED.notify(base._('common.notification.error', { message: 'Unable to begin layout editor' }), 'error')
+                    RED.notify('Unable to begin layout editor', 'error')
                 }
                 return false // return false to click event to prevent default
             })

From f62ea3b107f65e6d81cdd3b5bf399f916a12aaa3 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 16 Oct 2024 08:42:13 +0100
Subject: [PATCH 037/109] add handshake to ws so only original edit-key holder
 can edit.

---
 nodes/config/ui_base.js | 8 ++++++--
 ui/src/main.mjs         | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 67dda30f6..cefc42341 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -437,10 +437,14 @@ module.exports = function (RED) {
                     node.ui.groups.set(id, { ...group, ...state })
                 }
             }
-
+            const handshakeEditKey = socket.handshake.query?.editKey
+            const meta = { ...node.ui.meta }
+            if (!node.ui.meta?.wysiwyg?.editKey || handshakeEditKey !== node.ui.meta.wysiwyg.editKey) {
+                delete meta.wysiwyg
+            }
             // pass the connected UI the UI config
             socket.emit('ui-config', node.id, {
-                meta: node.ui.meta,
+                meta,
                 dashboards: Object.fromEntries(node.ui.dashboards),
                 heads: Object.fromEntries(node.ui.heads),
                 pages: Object.fromEntries(node.ui.pages),
diff --git a/ui/src/main.mjs b/ui/src/main.mjs
index 6fc0468cf..7b0dc0f35 100644
--- a/ui/src/main.mjs
+++ b/ui/src/main.mjs
@@ -132,10 +132,11 @@ fetch('_setup')
 
         let reconnectTO = null
         const MAX_RETRIES = 22 // 4 at 2.5 seconds, 10 at 5 secs then 8 at 30 seconds
-
+        const editKey = host.searchParams.get('edit-key')
         const socket = io({
             ...setup.socketio,
-            reconnection: false
+            reconnection: false,
+            query: editKey ? { editKey } : undefined // include handshake data so that only original edit-key holder can edit
         })
 
         // handle final disconnection

From 622d26213d0d5e63618ed250f5b8e2a1149d8083 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 16 Oct 2024 08:42:23 +0100
Subject: [PATCH 038/109] remove console.logs

---
 ui/src/layouts/wysiwyg/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index cf77e9c09..234f2523b 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -120,15 +120,12 @@ export default {
         },
         getDragDropClass (group) {
             if (this.isDragging(group)) {
-                console.log('getDragDropClass returning drag-start')
                 return 'drag-start'
             }
             const targetGroup = this.pageGroups[this.dragging.dropIndex]
             if (targetGroup?.id === group?.id) {
-                console.log('getDragDropClass returning drag-over')
                 return 'drag-over'
             }
-            console.log('getDragDropClass returning ""')
             return ''
         },
         isDragging (group) {

From 6c52a4d373ed266212fd398b123e71be5a687e3d Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Sat, 19 Oct 2024 14:42:25 +0100
Subject: [PATCH 039/109] Revert drop on move, fixes drag cursor, improves
 sizing accuracy + refactor

---
 ui/src/layouts/Flex.vue               |   6 +-
 ui/src/layouts/Grid.vue               |   6 +-
 ui/src/layouts/Group.vue              | 156 +-------------------------
 ui/src/layouts/wysiwyg/draggable.js   | 102 +++++++++++++++++
 ui/src/layouts/wysiwyg/index.js       | 102 +----------------
 ui/src/layouts/wysiwyg/resizable.js   | 100 +++++++++++++++++
 ui/src/layouts/wysiwyg/resizable.scss |  64 +++++++++++
 ui/src/stylesheets/common.css         |   6 +-
 8 files changed, 284 insertions(+), 258 deletions(-)
 create mode 100644 ui/src/layouts/wysiwyg/draggable.js
 create mode 100644 ui/src/layouts/wysiwyg/resizable.js
 create mode 100644 ui/src/layouts/wysiwyg/resizable.scss

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 770e1c49a..16c9229ca 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -11,10 +11,10 @@
                 :style="{'width': ((rowHeight * 2 * g.width) + 'px')}"
                 :draggable="editMode"
                 @dragstart="onDragStart($event, $index)"
-                @dragend="onDragEnd($event, $index, g)"
                 @dragover="onDragOver($event, $index, g)"
-                @drop="onDrop($event, $index, g)"
+                @dragend="onDragEnd($event, $index, g)"
                 @dragleave="onDragLeave($event, $index, g)"
+                @drop.prevent
                 @dragenter.prevent
             >
                 <v-card variant="outlined" class="bg-group-background" :style="{'min-height': ((rowHeight * g.height) + 'px')}">
@@ -66,8 +66,8 @@ import ConfirmDialog from '../components/ConfirmDialog.vue'
 import BaselineLayout from './Baseline.vue'
 import DialogGroup from './DialogGroup.vue'
 import WidgetGroup from './Group.vue'
-import WYSIWYG from './wysiwyg'
 import EditControls from './wysiwyg/EditControls.vue'
+import WYSIWYG from './wysiwyg/index.js'
 
 export default {
     name: 'LayoutFlex',
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index 403d059f6..852093716 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -11,10 +11,10 @@
                 :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
                 :draggable="editMode"
                 @dragstart="onDragStart($event, $index)"
-                @dragend="onDragEnd($event, $index, g)"
                 @dragover="onDragOver($event, $index, g)"
-                @drop="onDrop($event, $index, g)"
+                @dragend="onDragEnd($event, $index, g)"
                 @dragleave="onDragLeave($event, $index, g)"
+                @drop.prevent
                 @dragenter.prevent
             >
                 <v-card variant="outlined" class="bg-group-background">
@@ -65,8 +65,8 @@ import Responsiveness from '../mixins/responsiveness.js'
 import BaselineLayout from './Baseline.vue'
 import DialogGroup from './DialogGroup.vue'
 import WidgetGroup from './Group.vue'
-import WYSIWYG from './wysiwyg'
 import EditControls from './wysiwyg/EditControls.vue'
+import WYSIWYG from './wysiwyg/index.js'
 
 // eslint-disable-next-line import/order, sort-imports
 import { mapState, mapGetters } from 'vuex'
diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 2685d494b..a7972c9a4 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -20,8 +20,8 @@
                 class="nrdb-resizable--handle nrdb-resizable--right"
                 @dragstart="onHandleDragStart($event, 'top', 'right')"
                 @drag="onHandleDrag($event, 'top', 'right')"
-                @dragend="onHandleDragEnd($event, 'top', 'right')"
                 @dragover="onHandleOver($event, 'top', 'right')"
+                @dragend="onHandleDragEnd($event, 'top', 'right')"
                 @dragenter.prevent
             />
         </div>
@@ -30,9 +30,10 @@
 </template>
 
 <script>
-
+import WYSIWYG from './wysiwyg/index.js'
 export default {
     name: 'WidgetGroup',
+    mixins: [WYSIWYG],
     props: {
         group: {
             type: Object,
@@ -52,39 +53,11 @@ export default {
         }
     },
     emits: ['resize'],
-    data () {
-        return {
-            resizing: {
-                active: false,
-                init: {
-                    x: 0,
-                    y: 0,
-                    columns: 0,
-                    rows: 0,
-                    width: 0,
-                    height: 0
-                },
-                current: {
-                    columns: null,
-                    rows: null,
-                    width: null
-                }
-            }
-        }
-    },
     computed: {
         columns () {
             return this.resizing.current.columns > 0 ? this.resizing.current.columns : +this.group.width
         }
     },
-    watch: {
-        'resizing.active' (active) {
-            // add class 'resize-active' to parent group v-card
-            // that class is solely to raise the z-index of the group while resizing
-            // the associated resize-active CSS is in `common.css`
-            this.$el.parentElement.closest('.nrdb-ui-group > .v-card')?.classList.toggle('resize-active', active)
-        }
-    },
     methods: {
         getWidgetClass (widget) {
             const classes = []
@@ -97,132 +70,11 @@ export default {
                 classes.push(widget.state.class)
             }
             return classes.join(' ')
-        },
-        onHandleDragStart (/** @type {DragEvent} */ event, vertical, horizontal) {
-            this.resizing.active = true
-            this.resizing.init.columns = +this.group.width || 1
-            this.resizing.init.rows = +this.group.height || 1
-            this.resizing.init.width = this.$refs['resize-view'].clientWidth
-            this.resizing.init.x = event.x
-            const EMPTY_IMAGE = this.$refs['blank-img'] // don't show image preview
-            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
-            event.dataTransfer.effectAllowed = 'all'
-            event.dataTransfer.dropEffect = 'move'
-            event.stopPropagation()
-            return false
-        },
-        onHandleOver (/** @type {DragEvent} */ event, vertical, horizontal) {
-            if (this.resizing.active === false) { return }
-            console.log('onHandleOver', event)
-            event.dataTransfer.dropEffect = 'move'
-            event.preventDefault()
-        },
-        onHandleDrag (/** @type {DragEvent} */ event, vertical, horizontal) {
-            if (this.resizing.active === false) { return }
-            console.log('onHandleDrag', event)
-            event.dataTransfer.dropEffect = 'move'
-            if (event.x > 0 && event.y > 0) {
-                const stepX = this.$el.clientWidth / +this.group.width
-                const dx = event.x - this.resizing.init.x
-                const dw = dx < 0 ? Math.ceil(dx / stepX) : Math.floor(dx / stepX)
-                this.resizing.current.width = this.resizing.init.width + dx
-                const width = Math.max(this.resizing.init.columns + dw, 1)
-                if (width !== +this.group.width) {
-                    this.resizing.current.columns = width
-                    this.$emit('resize', { index: this.index, width })
-                }
-            }
-        },
-        onHandleDragEnd (/** @type {DragEvent} */ event) {
-            if (this.resizing.active === false) { return }
-            this.resizing.active = false
-            if (this.resizing.current.columns === null && this.resizing.current.rows === null) {
-                this.resetDragState()
-                return
-            }
-            const columns = Math.max(this.resizing.current.columns, 1)
-            const rows = Math.max(this.resizing.current.rows, 1)
-            const changed = this.resizing.init.columns !== columns || this.resizing.init.rows !== rows
-            this.resetDragState()
-            if (changed) {
-                this.$emit('resize', { index: this.index, width: columns, height: rows })
-            }
-        },
-        resetDragState () {
-            this.resizing.active = false
-            this.resizing.current.width = null
-            this.resizing.current.columns = null
-            this.resizing.current.rows = null
         }
     }
-
 }
 </script>
 
 <style scoped lang="scss">
-.nrdb-resizable {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    --handler-size: 12px;
-    cursor: grab;
-    &.resizing {
-        background-color: #ff00001f;
-        border: 1px dashed red;
-    }
-}
-.nrdb-resizable--handle {
-    position: absolute;
-    width: var(--handler-size);
-    height: var(--handler-size);
-    background-color: white;
-    border: 1px solid black;
-    border-radius: 6px;
-    cursor: ew-resize;
-    &:active {
-        cursor: ew-resize !important;
-    }
-}
-.nrdb-resizable--top-right {
-    top: calc(-1 * var(--handler-size) / 2);
-    right: calc(-1 * var(--handler-size) / 2);
-}
-
-.nrdb-resizable--right {
-    height: calc(2 * var(--handler-size));
-    top: 50%;
-    margin-top: calc(-1 * var(--handler-size));
-    right: calc(-1 * var(--handler-size) / 2);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &:hover {
-        cursor: ew-resize;
-        background-color: #eee;
-    }
-    &:active {
-        cursor: ew-resize !important;
-    }
-}
-
-.nrdb-resizable--right:after {
-    content: '';
-    height: calc(0.75 * var(--handler-size));
-    width: 1px;
-    display: inline-block;
-    background-color: red;
-}
-
-.nrdb-resizable--bottom-left {
-    bottom: calc(-1 * var(--handler-size) / 2);
-    left: calc(-1 * var(--handler-size) / 2);
-}
-
-.nrdb-resizable--top-left {
-    top: calc(-1 * var(--handler-size) / 2);
-    left: calc(-1 * var(--handler-size) / 2);
-}
-
+@import './wysiwyg/resizable.scss';
 </style>
diff --git a/ui/src/layouts/wysiwyg/draggable.js b/ui/src/layouts/wysiwyg/draggable.js
new file mode 100644
index 000000000..136542528
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/draggable.js
@@ -0,0 +1,102 @@
+export default {
+    data () {
+        return {
+            pageGroups: [],
+            dragging: {
+                active: false,
+                index: -1,
+                dropIndex: -1
+            }
+        }
+    },
+    methods: {
+        // Drag and Drop placement methods
+        /**
+         * Event handler for dragstart event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
+        onDragStart (event, index) {
+            this.dragging.active = true
+            this.dragging.index = index
+            this.dragging.dropIndex = index
+            event.dataTransfer.effectAllowed = 'move'
+            event.dataTransfer.dropEffect = 'move'
+            event.stopPropagation()
+            return false
+        },
+        /**
+         * Event handler for dragover event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
+        onDragOver (event, index, group) {
+            event.preventDefault()
+            if (this.dragging.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+            // update drop index
+            if (index !== this.dragging.index) {
+                this.dragging.dropIndex = index
+            }
+            // ensure the mouse is over a different group
+            if (this.dragging.index === index || this.dragging.index < 0) {
+                return
+            }
+
+            // ensure the mouse is within the bounds of the source group size
+            // to avoid flip-flop when the target group is larger than the source group
+            const sourceGroup = this.pageGroups[this.dragging.index]
+            const sourceId = `nrdb-ui-group-${sourceGroup.id}`
+            const sourceEl = document.getElementById(sourceId)
+            const sourceBounds = sourceEl.getBoundingClientRect()
+            const targetGroup = this.pageGroups[index]
+            const targetId = `nrdb-ui-group-${targetGroup.id}`
+            const targetEl = document.getElementById(targetId)
+            const targetBounds = targetEl.getBoundingClientRect()
+            const hitBoundX1 = targetBounds.left
+            const hitBoundX2 = targetBounds.left + sourceBounds.width
+            const hitBoundY1 = targetBounds.top
+            const hitBoundY2 = targetBounds.top + sourceBounds.height
+            if (event.clientX < hitBoundX1 || event.clientX > hitBoundX2 || event.clientY < hitBoundY1 || event.clientY > hitBoundY2) {
+                return
+            }
+
+            if (this.dragging.index >= 0) {
+                this.moveGroup(this.dragging.index, index)
+            }
+        },
+        onDragLeave (event, index, group) {
+            this.dragging.dropIndex = -1
+        },
+        onDragEnd (event, index, group) {
+            this.dragging.active = false
+            this.dragging.index = -1
+            this.dragging.dropIndex = -1
+        },
+        moveGroup (fromIndex, toIndex) {
+            const movedItem = this.pageGroups.splice(fromIndex, 1)[0]
+            this.pageGroups.splice(toIndex, 0, movedItem)
+            // update .order property of all groups
+            this.pageGroups.forEach((group, index) => {
+                group.order = index + 1
+            })
+            this.dragging.index = toIndex
+        },
+        getDragDropClass (group) {
+            if (this.isDragging(group)) {
+                return 'drag-start'
+            }
+            return ''
+        },
+        isDragging (group) {
+            if (!this.dragging.active) {
+                return false
+            }
+            const dragging = this.pageGroups[this.dragging.index]
+            if (dragging?.id === group?.id) {
+                return true
+            }
+            return false
+        }
+    }
+}
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index 234f2523b..59643b97f 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -1,15 +1,14 @@
 import { editKey, editMode, editPage, exitEditMode, isTrackingEdits, originalGroups, startEditTracking, updateEditTracking } from '../../EditTracking.js'
 import NodeRedApi from '../../api/node-red'
 
+import DraggableMixin from './draggable.js'
+import ResizableMixin from './resizable.js'
+
 export default {
+    mixins: [DraggableMixin, ResizableMixin],
     data () {
         return {
-            pageGroups: [],
-            dragging: {
-                active: false,
-                index: -1,
-                dropIndex: -1
-            }
+            pageGroups: []
         }
     },
     computed: {
@@ -46,97 +45,6 @@ export default {
         },
         deployChanges ({ dashboard, page, groups }) {
             return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value })
-        },
-        /**
-         * Event handler for dragstart event
-         * @param {DragEvent} event - The drag event
-         * @param {Number} index - The index of the group
-         */
-        onDragStart (event, index) {
-            this.dragging.active = true
-            this.dragging.index = index
-            this.dragging.dropIndex = index
-            event.dataTransfer.effectAllowed = 'all'
-            event.dataTransfer.dropEffect = 'move'
-            event.stopPropagation()
-            return false
-        },
-        /**
-         * Event handler for dragover event
-         * @param {DragEvent} event - The drag event
-         * @param {Number} index - The index of the group
-         */
-        onDragOver (event, index, group) {
-            if (this.dragging.active === false) { return }
-            // ensure the mouse is over a different group
-            if (index !== this.dragging.index) {
-                this.dragging.dropIndex = index
-            }
-            if (this.dragging.index === index || this.dragging.index < 0) {
-                event.dataTransfer.dropEffect = 'none'
-                return
-            }
-            console.log('onDragOver index', index, 'group', group)
-            event.dataTransfer.dropEffect = 'move'
-            if (this.dragging.index >= 0) {
-                event.preventDefault()
-                event.dataTransfer.dropEffect = 'drop'
-            }
-        },
-        onDrop (event, index, group) {
-            if (this.dragging.active === false) { return }
-            this.dragging.dropIndex = index
-            event.preventDefault()
-            if (this.dragging.index >= 0) {
-                this.moveGroup(this.dragging.index, this.dragging.dropIndex)
-                this.dragging.active = false
-                this.dragging.index = -1
-                this.dragging.dropIndex = -1
-            }
-        },
-        onDragLeave (event, index, group) {
-            this.dragging.dropIndex = -1
-        },
-        onDragEnd (event, index, group) {
-            this.dragging.active = false
-            this.dragging.index = -1
-            this.dragging.dropIndex = -1
-        },
-        moveGroup (fromIndex, toIndex) {
-            const movedItem = this.pageGroups.splice(fromIndex, 1)[0]
-            this.pageGroups.splice(toIndex, 0, movedItem)
-            // update .order property of all groups
-            this.pageGroups.forEach((group, index) => {
-                group.order = index + 1
-            })
-            this.dragging.index = toIndex
-        },
-        onGroupResize (opts) {
-            // ensure opts.width is a number and is greater than 0
-            if (typeof opts.width !== 'number' || opts.width < 1) {
-                return
-            }
-            this.pageGroups[opts.index].width = opts.width
-        },
-        getDragDropClass (group) {
-            if (this.isDragging(group)) {
-                return 'drag-start'
-            }
-            const targetGroup = this.pageGroups[this.dragging.dropIndex]
-            if (targetGroup?.id === group?.id) {
-                return 'drag-over'
-            }
-            return ''
-        },
-        isDragging (group) {
-            if (!this.dragging.active) {
-                return false
-            }
-            const dragging = this.pageGroups[this.dragging.index]
-            if (dragging?.id === group?.id) {
-                return true
-            }
-            return false
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/resizable.js b/ui/src/layouts/wysiwyg/resizable.js
new file mode 100644
index 000000000..896414897
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/resizable.js
@@ -0,0 +1,100 @@
+export default {
+    data () {
+        return {
+            pageGroups: [],
+            resizing: {
+                active: false,
+                init: {
+                    x: 0,
+                    y: 0,
+                    columns: 0,
+                    rows: 0,
+                    width: 0,
+                    height: 0
+                },
+                current: {
+                    columns: null,
+                    rows: null,
+                    width: null
+                }
+            }
+        }
+    },
+    watch: {
+        'resizing.active' (active) {
+            // add class 'resize-active' to parent group v-card
+            // that class is solely to raise the z-index of the group while resizing
+            // the associated resize-active CSS is in `common.css`
+            this.$el.parentElement.closest('.nrdb-ui-group > .v-card')?.classList.toggle('resize-active', active)
+        }
+    },
+    methods: {
+        onHandleDragStart (/** @type {DragEvent} */ event, vertical, horizontal) {
+            this.resizing.parent = this.$el.parentElement.closest('.nrdb-ui-group > .v-card')
+            this.resizing.init.columns = +this.group.width || 1
+            this.resizing.init.rows = +this.group.height || 1
+            this.resizing.init.width = this.$refs['resize-view'].clientWidth
+            this.resizing.init.x = event.x
+            this.resizing.active = true
+            const EMPTY_IMAGE = this.$refs['blank-img'] // don't show image preview
+            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
+            event.dataTransfer.effectAllowed = 'move'
+            event.dataTransfer.dropEffect = 'move'
+            event.stopPropagation()
+            return false
+        },
+        onHandleOver (/** @type {DragEvent} */ event, vertical, horizontal) {
+            event.preventDefault() // required to allow dropEffect
+            if (this.resizing.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+        },
+        onHandleDrag (/** @type {DragEvent} */ event, vertical, horizontal) {
+            event.preventDefault() // required to allow drop and show dropEffect
+            if (this.resizing.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+            if (event.x > 0 && event.y > 0) {
+                const dx = event.x - this.resizing.init.x
+                this.resizing.current.width = this.resizing.init.width + dx
+                const stepX = this.resizing.parent.clientWidth / +this.group.width
+                const dw = Math.round(this.resizing.current.width / stepX) - this.resizing.init.columns
+                const newColumns = Math.max(this.resizing.init.columns + dw, 1)
+
+                let allowIncrease = false
+                let allowDecrease = false
+                const stepSnapAt = stepX * 0.85
+                if (this.resizing.current.width > this.resizing.parent.clientWidth) {
+                    const diff = this.resizing.current.width - this.resizing.parent.clientWidth
+                    allowIncrease = diff > stepSnapAt
+                } else if (this.resizing.current.width < this.resizing.parent.clientWidth) {
+                    const diff = this.resizing.parent.clientWidth - this.resizing.current.width
+                    allowDecrease = diff > stepSnapAt
+                }
+                if (allowIncrease && newColumns > +this.group.width) {
+                    this.resizing.current.columns = newColumns
+                    this.$emit('resize', { index: this.index, width: newColumns })
+                } else if (allowDecrease && newColumns < +this.group.width) {
+                    this.resizing.current.columns = newColumns
+                    this.$emit('resize', { index: this.index, width: newColumns })
+                }
+            }
+        },
+        onHandleDragEnd (/** @type {DragEvent} */ event) {
+            if (this.resizing.active === false) { return }
+            this.resetDragState()
+        },
+        resetDragState () {
+            this.resizing.active = false
+            this.resizing.parent = null
+            this.resizing.current.width = null
+            this.resizing.current.columns = null
+            this.resizing.current.rows = null
+        },
+        onGroupResize (opts) {
+            // ensure opts.width is a number and is greater than 0
+            if (typeof opts.width !== 'number' || opts.width < 1) {
+                return
+            }
+            this.pageGroups[opts.index].width = opts.width
+        }
+    }
+}
diff --git a/ui/src/layouts/wysiwyg/resizable.scss b/ui/src/layouts/wysiwyg/resizable.scss
new file mode 100644
index 000000000..a5c365956
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/resizable.scss
@@ -0,0 +1,64 @@
+.nrdb-resizable {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    --handler-size: 12px;
+    cursor: grab;
+    &.resizing {
+        background-color: #ff00001f;
+        border: 1px dashed red;
+    }
+}
+.nrdb-resizable--handle {
+    position: absolute;
+    width: var(--handler-size);
+    height: var(--handler-size);
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 6px;
+    cursor: ew-resize;
+    &:active {
+        cursor: ew-resize !important;
+    }
+}
+.nrdb-resizable--top-right {
+    top: calc(-1 * var(--handler-size) / 2);
+    right: calc(-1 * var(--handler-size) / 2);
+}
+
+.nrdb-resizable--right {
+    height: calc(2 * var(--handler-size));
+    top: 50%;
+    margin-top: calc(-1 * var(--handler-size));
+    right: calc(-1 * var(--handler-size) / 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+        cursor: ew-resize;
+        background-color: #eee;
+    }
+    &:active {
+        cursor: ew-resize !important;
+    }
+}
+
+.nrdb-resizable--right:after {
+    content: '';
+    height: calc(0.75 * var(--handler-size));
+    width: 1px;
+    display: inline-block;
+    background-color: red;
+}
+
+.nrdb-resizable--bottom-left {
+    bottom: calc(-1 * var(--handler-size) / 2);
+    left: calc(-1 * var(--handler-size) / 2);
+}
+
+.nrdb-resizable--top-left {
+    top: calc(-1 * var(--handler-size) / 2);
+    left: calc(-1 * var(--handler-size) / 2);
+}
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
index 6b45b9713..29e569ecb 100644
--- a/ui/src/stylesheets/common.css
+++ b/ui/src/stylesheets/common.css
@@ -490,12 +490,12 @@ NB! supresses the gridarea for messages, but those are not in use*/
 .nrdb-ui-group.dragging {
     border-style: dashed;
 }
+
 .nrdb-ui-group.drag-start {
-    opacity: 0.5;
-}
-.nrdb-ui-group.drag-over {
+    opacity: 0.8;
     outline: 2px dashed black;
 }
+
 .nrdb-ui-page > .nrdb-ui-group[draggable="true"] > .v-card.resize-active {
      /*
         ensure card is on top while being actively resized

From ebb0191835165627dcda2a45bb343c667e0fb304 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Sun, 20 Oct 2024 17:16:49 +0100
Subject: [PATCH 040/109] fixed sizing for consistent toolbar regardless of
 user theme

---
 ui/src/layouts/wysiwyg/EditControls.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/layouts/wysiwyg/EditControls.vue b/ui/src/layouts/wysiwyg/EditControls.vue
index 47062cc6d..aa71f1eb3 100644
--- a/ui/src/layouts/wysiwyg/EditControls.vue
+++ b/ui/src/layouts/wysiwyg/EditControls.vue
@@ -54,7 +54,12 @@ export default {
     gap: 6px;
     border-radius: 2rem;
     .v-btn {
-        border-radius: 2rem;
+        border-radius: 2.6rem;
+        // override theme for consistent button size
+        width: 2.6rem;
+        height: 2.6rem;
+        min-width: 2.6rem;
+        min-height: 2.6rem;
     }
     button:disabled {
         filter: grayscale(1);

From dcaa316cbd5ec48730ee66bd4433f9ed6a20402c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 21 Oct 2024 11:01:33 +0000
Subject: [PATCH 041/109] Bump flowfuse/github-actions-workflows from 0.35.0 to
 0.36.0

Bumps [flowfuse/github-actions-workflows](https://github.com/flowfuse/github-actions-workflows) from 0.35.0 to 0.36.0.
- [Commits](https://github.com/flowfuse/github-actions-workflows/compare/v0.35.0...v0.36.0)

---
updated-dependencies:
- dependency-name: flowfuse/github-actions-workflows
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/build-and-test.yml  | 2 +-
 .github/workflows/publish-private.yml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
index 0bb8dd07f..c5503650f 100644
--- a/.github/workflows/build-and-test.yml
+++ b/.github/workflows/build-and-test.yml
@@ -3,7 +3,7 @@ on:
   pull_request:
 jobs:
   build:
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.35.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.36.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},
diff --git a/.github/workflows/publish-private.yml b/.github/workflows/publish-private.yml
index 738261f8f..ded82489e 100644
--- a/.github/workflows/publish-private.yml
+++ b/.github/workflows/publish-private.yml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   build:
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.35.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.36.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},
@@ -16,7 +16,7 @@ jobs:
     needs: build
     if: |
       github.ref == 'refs/heads/main'
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.35.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.36.0'
     with:
       package_name: node-red-dashboard
       publish_package: true

From d65ea8351c6061c45ac8fd8c00ef943e86f15b28 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Thu, 24 Oct 2024 07:05:52 +0100
Subject: [PATCH 042/109] images in ui-table

---
 docs/nodes/widgets/ui-table.md            | 3 ++-
 nodes/widgets/locales/en-US/ui_table.html | 8 +++++++-
 nodes/widgets/ui_table.html               | 3 ++-
 ui/src/widgets/ui-table/UITableCell.vue   | 3 +++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
index 1c96e4bf2..af4f900cb 100644
--- a/docs/nodes/widgets/ui-table.md
+++ b/docs/nodes/widgets/ui-table.md
@@ -139,6 +139,7 @@ _An example of a ui-table displaying various of the cell types available_
 - **Sparkline - Bar**: Renders the cell as a small bar chart without axes. The `Value` field should contain an array of numbers to be plotted.
 - **Button**: Renders a clickable button in the cell. The label of the button will be either the `row[key]` or the fixed string entered on the manual column configuration.
 - **Row Number**: Renders the row number into the cell.
+- **Image**: Renders the cell as an image. The "Image" value provided should be a valid URL.  A data url is also supported for base64 encoded images. When an invalid url is specified, an empty space will appear.
 
 #### Interaction: Buttons
 
@@ -200,4 +201,4 @@ If you want to hide the pagination ("Items per page") options, then you can set
 
 ## Custom Styling & Content
 
-If you're looking to add more customisation to how your data is rendered, you can do so by building your own data table inside a `ui-template`. Check out [this example](../../user/template-examples.md#custom-tables) for more details.
\ No newline at end of file
+If you're looking to add more customisation to how your data is rendered, you can do so by building your own data table inside a `ui-template`. Check out [this example](../../user/template-examples.md#custom-tables) for more details.
diff --git a/nodes/widgets/locales/en-US/ui_table.html b/nodes/widgets/locales/en-US/ui_table.html
index 82a056af4..07c2790be 100644
--- a/nodes/widgets/locales/en-US/ui_table.html
+++ b/nodes/widgets/locales/en-US/ui_table.html
@@ -65,5 +65,11 @@ <h3>Cell Types</h3>
         <dd>Renders an interactive button in the cell. Will emit a <code>msg.action</code> of "button_click" and <code>msg.column</code> of the corresponding key</dd>
         <dt>Row Number <span class="property-type">number</span></dt>
         <dd>Requires no "key" to be provided as this will just render the row number (1 -> n).</dd>
+        <dt>Image <span class="property-type">url</span></dt>
+        <dd>
+            Renders the cell as an image. The "Image" value provided should be a valid URL.
+            A data url is also supported for base64 encoded images.
+            When an invalid url is specified, an empty space will appear.
+        </dd>
     </dl>
-</script>
\ No newline at end of file
+</script>
diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
index 2bc40eab0..0fe4e3776 100644
--- a/nodes/widgets/ui_table.html
+++ b/nodes/widgets/ui_table.html
@@ -56,7 +56,8 @@
             { value: 'sparkline-trend', label: 'Sparkline - Trend (Array)' },
             { value: 'sparkline-bar', label: 'Sparkline - Bar (Array)' },
             { value: 'button', label: 'Button' },
-            { value: 'row', label: 'Row Number' }
+            { value: 'row', label: 'Row Number' },
+            { value: 'image', label: 'Image (https://...)' }
         ]
         RED.nodes.registerType('ui-table', {
             category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
diff --git a/ui/src/widgets/ui-table/UITableCell.vue b/ui/src/widgets/ui-table/UITableCell.vue
index b96ce799d..74e3932b7 100644
--- a/ui/src/widgets/ui-table/UITableCell.vue
+++ b/ui/src/widgets/ui-table/UITableCell.vue
@@ -29,6 +29,9 @@
     <template v-else-if="type === 'button'">
         <v-btn color="primary" variant="flat" @click="onButtonClick($event, item)">{{ value }}</v-btn>
     </template>
+    <template v-else-if="type === 'image'">
+        <v-img :src="value" />
+    </template>
     <template v-else>
         {{ value }}
     </template>

From e0035e8ad77d8431d36d52271475b6fd27d2e73d Mon Sep 17 00:00:00 2001
From: Ben Hardill <b.hardill@gmail.com>
Date: Mon, 28 Oct 2024 12:05:05 +0000
Subject: [PATCH 043/109] fix typo

---
 docs/nodes/config/ui-link.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/config/ui-link.md b/docs/nodes/config/ui-link.md
index b1b24c105..5d0221081 100644
--- a/docs/nodes/config/ui-link.md
+++ b/docs/nodes/config/ui-link.md
@@ -4,7 +4,7 @@ props:
     UI: The UI (<code>ui-base</code>) that this page will be added to. 
     Path: The URL to navigate to when a user selects this link
     Icon: Which <a href="https://pictogrammers.com/library/mdi/">Material Designs Icon</a> to use for the page. No need to include the <code>mdi-</code> prefix.
-    Default State: <ul><li><b>Visibility</b> - Defines the default visibility of this page in hte side navigation menu.</li><li><b>Interactivity</b> - Controls whether the item is disabled/enabled in the side navigation menu.</li></ul><p>Both of these can be overridden by the user at runtime using a <code>ui-control</code> node.</p>
+    Default State: <ul><li><b>Visibility</b> - Defines the default visibility of this page in the side navigation menu.</li><li><b>Interactivity</b> - Controls whether the item is disabled/enabled in the side navigation menu.</li></ul><p>Both of these can be overridden by the user at runtime using a <code>ui-control</code> node.</p>
 ---
 
 <script setup>
@@ -20,4 +20,4 @@ If you want to link to external resources from your Dashboard, you can do so wit
 
 ## Adding Links
 
-To add a link to your Dashboard, you can use the Dashboard 2.0 side panel in the Node-RED editor. Click the `+ Link` button to add a new item to the list. You can then configure the link with the relevant properties.
\ No newline at end of file
+To add a link to your Dashboard, you can use the Dashboard 2.0 side panel in the Node-RED editor. Click the `+ Link` button to add a new item to the list. You can then configure the link with the relevant properties.

From e50c72db92b51e1f412cf6751460ab8b26bc9a0b Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 28 Oct 2024 14:37:26 +0000
Subject: [PATCH 044/109] Only delete items when that item is de-registering

---
 nodes/config/ui_base.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index cefc42341..035b14d75 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1099,19 +1099,16 @@ module.exports = function (RED) {
                 }
                 node.ui.widgets.delete(widgetNode.id)
                 changes = true
-            }
-
-            // if there are no more widgets on this group, remove the group from our UI config
-            if (group && [...node.ui.widgets].filter(w => w.props?.group === group.id).length === 0) {
+            } else if (group) {
+                // remove group from our UI config
                 node.ui.groups.delete(group.id)
                 changes = true
-            }
-
-            // if there are no more groups on this page, remove the page from our UI config
-            if (page && [...node.ui.groups].filter(g => g.page === page.id).length === 0) {
+            } else if (page) {
+                // remove page from our UI config
                 node.ui.pages.delete(page.id)
                 changes = true
             }
+
             if (changes) {
                 node.requestEmitConfig()
             }

From 46d1622f1463e5f4f5fbfbcc56f494a40dc160c5 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 28 Oct 2024 14:39:23 +0000
Subject: [PATCH 045/109] fix node/flows deploy types

---
 ui/src/layouts/Flex.vue | 10 ++++++++--
 ui/src/layouts/Grid.vue | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 16c9229ca..0b299f3bd 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -1,8 +1,8 @@
 <template>
     <BaselineLayout :page-title="$route.meta.title">
-        <div v-if="pageGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--flex nrdb-ui-page" :class="page?.className">
+        <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--flex nrdb-ui-page" :class="page?.className">
             <div
-                v-for="(g, $index) in pageGroups"
+                v-for="(g, $index) in orderedGroups"
                 :id="'nrdb-ui-group-' + g.id"
                 :key="g.id"
                 class="nrdb-ui-group"
@@ -100,6 +100,12 @@ export default {
         },
         page: function () {
             return this.pages[this.$route.meta.id]
+        },
+        orderedGroups: function () {
+            if (this.editMode) { // mixin property
+                return this.pageGroups
+            }
+            return this.getPageGroups()
         }
     },
     mounted () {
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index 852093716..ca23763ac 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -1,8 +1,8 @@
 <template>
     <BaselineLayout :page-title="$route.meta.title">
-        <div v-if="pageGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--grid nrdb-ui-page" :class="page?.className">
+        <div v-if="orderedGroups" :id="'nrdb-page-' + $route.meta.id" class="nrdb-layout--grid nrdb-ui-page" :class="page?.className">
             <div
-                v-for="(g, $index) in pageGroups"
+                v-for="(g, $index) in orderedGroups"
                 :id="'nrdb-ui-group-' + g.id"
                 :key="g.id"
                 class="nrdb-ui-group"
@@ -100,6 +100,12 @@ export default {
         },
         page: function () {
             return this.pages[this.$route.meta.id]
+        },
+        orderedGroups: function () {
+            if (this.editMode) { // mixin property
+                return this.pageGroups
+            }
+            return this.getPageGroups()
         }
     },
     mounted () {

From 68ddf8a6b58b9f246b3f0723db4047c952d068f1 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 28 Oct 2024 14:49:14 +0000
Subject: [PATCH 046/109] Guard against missing handshake in socket

---
 nodes/config/ui_base.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 035b14d75..9d3bffe4a 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -437,9 +437,12 @@ module.exports = function (RED) {
                     node.ui.groups.set(id, { ...group, ...state })
                 }
             }
-            const handshakeEditKey = socket.handshake.query?.editKey
+            // if the socket has an editKey & it matches the editKey in the meta, then we will
+            // send the wysiwyg meta to the client. Otherwise, we will remove it from the meta
+            // before sending it to the client
+            const handshakeEditKey = socket.handshake?.query?.editKey
             const meta = { ...node.ui.meta }
-            if (!node.ui.meta?.wysiwyg?.editKey || handshakeEditKey !== node.ui.meta.wysiwyg.editKey) {
+            if (!handshakeEditKey || !meta?.wysiwyg?.editKey || handshakeEditKey !== meta.wysiwyg.editKey) {
                 delete meta.wysiwyg
             }
             // pass the connected UI the UI config

From 3e58e819a4f3ad2d97ddf3a544c0a060cdd86eda Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 29 Oct 2024 12:52:25 +0000
Subject: [PATCH 047/109] Don't add to xLabels for non-categorical charts

---
 ui/src/widgets/ui-chart/UIChart.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
index 518134ba2..6503480e4 100644
--- a/ui/src/widgets/ui-chart/UIChart.vue
+++ b/ui/src/widgets/ui-chart/UIChart.vue
@@ -487,8 +487,6 @@ export default {
                 // ChartsJS doesn't like undefined data points
                 const data = Array(xLabels.length).fill({})
                 if (xIndex === -1) {
-                    // Add the new x-value to xLabels
-                    xLabels.push(datapoint.x)
                     // Add data to the end of the array
                     data.push(datapoint)
                 } else {

From acd6a9c56a8ef2971f73849d6ed19a1a635f5834 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 29 Oct 2024 15:45:13 +0000
Subject: [PATCH 048/109] Refactor adding of ui nodes  to ensure valid
 configuration

closes #1401
---
 nodes/config/ui_base.html | 534 +++++++++++++++++++++++++++++---------
 1 file changed, 407 insertions(+), 127 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 3896ecf87..8aa5f13ad 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -542,12 +542,26 @@
         }
     }
 
+    function createEditHistoryEvent (node, changes) {
+        const wasDirty = node.dirty
+        const wasChanged = node.changed
+        node.changed = true
+        node.dirty = true
+        return {
+            t: 'edit',
+            node,
+            changed: wasChanged,
+            dirty: wasDirty,
+            changes
+        }
+    }
+
     // Utility function to store events in NR history, trigger a redraw, and detect if a re-deploy is necessary
-    function recordEvents (events) {
+    function recordEvents (events, wasDirty) {
         if (events.length === 0) { return } // nothing to record
 
         // note the state of the editor before pushing to history
-        const isDirty = RED.nodes.dirty()
+        const isDirty = wasDirty ?? RED.nodes.dirty()
         if (RED._db2debug) { console.log('dashboard 2: recordEvents ()', isDirty, events) }
 
         // add our changes to NR history and trigger whether or not we need to redeploy
@@ -596,19 +610,41 @@
         }
     }
 
-    function addConfigNode (node) {
+    function getDefaultBase () {
+        const existingBases = getConfigNodesByType(['ui-base']) || []
+        if (existingBases.length === 0) {
+            return null
+        }
+        return existingBases[0]
+    }
+
+    function getDefaultTheme () {
+        const existingThemes = getConfigNodesByType(['ui-theme']) || []
+        if (existingThemes.length === 0) {
+            return null
+        }
+        return existingThemes[0]
+    }
+
+    function addConfigNode (node, history) {
+        if (RED._db2debug) { console.log('addConfigNode', node) }
         if (!node.users) {
             node.users = []
         }
         node.dirty = true
+        node.changed = true
         RED.nodes.add(node)
         RED.editor.validateNode(node)
-        RED.history.push({
+        const hev = {
             t: 'add',
             nodes: [node.id],
             dirty: RED.nodes.dirty()
-        })
-        RED.nodes.dirty(true)
+        }
+        if (history) {
+            history.push(hev)
+        } else {
+            RED.history.push(hev)
+        }
     }
 
     function mapDefaults (defaults) {
@@ -636,74 +672,274 @@
         return nodes
     }
 
-    function addDefaultPage (baseId, themeId) {
-        const page = RED.nodes.getType('ui-page')
-        // get all pages
-        const entries = getConfigNodesByType(['ui-page', 'ui-link'])
-        const pageNumber = entries.length + 1
-        const pageNode = {
-            _def: page,
+    function createBaseNode ({ name = 'My Dashboard' } = {}) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createBaseNode', name) }
+        const base = RED.nodes.getType('ui-base')
+        const baseNode = {
+            _def: base,
             id: RED.nodes.id(),
-            type: 'ui-page',
-            ...mapDefaults(page.defaults),
-            path: `/page${pageNumber}`, // TODO: generate a unique path
-            name: `Page ${pageNumber}`,
-            ui: baseId,
-            theme: themeId,
-            layout: 'grid',
-            order: pageNumber
+            type: 'ui-base',
+            ...mapDefaults(base.defaults),
+            name: name || 'My Dashboard'
         }
+        return baseNode
+    }
 
-        addConfigNode(pageNode)
-        return pageNode
+    function createGroupNode ({ name, order } = {}) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createGroupNode', name) }
+        const group = RED.nodes.getType('ui-group')
+        let groupName = name
+        const existingGroups = getConfigNodesByType(['ui-group']) || []
+        let counter = existingGroups.length + 1
+        if (!groupName) {
+            groupName = `Group ${counter}`
+            while (existingGroups.find(e => e.name === groupName)) {
+                counter++
+                groupName = `Group ${counter}`
+            }
+        }
+        const groupNode = {
+            _def: group,
+            id: RED.nodes.id(),
+            type: 'ui-group',
+            ...mapDefaults(group.defaults),
+            name: groupName || 'My Group',
+            page: null
+        }
+        if (order) {
+            groupNode.order = order
+        } else {
+            groupNode.order = counter
+        }
+        return groupNode
     }
 
-    function addDefaultLink (baseId) {
+    function createLinkNode ({ name, order, path } = {}) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createLinkNode', name, path) }
         const link = RED.nodes.getType('ui-link')
+        let linkName = name
+        if (!linkName) {
+            // get all links and determine the next link number
+            const existingLinks = getConfigNodesByType(['ui-link']) || []
+            let counter = 1
+            linkName = `Link ${counter}`
+            while (existingLinks.find(e => e.name === linkName)) {
+                counter++
+                linkName = `Link ${counter}`
+            }
+        }
+        const nextOrder = order ?? ((getConfigNodesByType(['ui-page', 'ui-link']) || []).length || 0) + 1
         const linkNode = {
             _def: link,
             id: RED.nodes.id(),
             type: 'ui-link',
             ...mapDefaults(link.defaults),
-            path: '/',
-            name: 'Link',
-            ui: baseId
+            path: path || '/',
+            name: linkName,
+            ui: null,
+            order: nextOrder
         }
-
-        addConfigNode(linkNode)
         return linkNode
     }
-
-    function addDefaultGroup (pageId) {
-        const group = RED.nodes.getType('ui-group')
-        const groupNode = {
-            _def: group,
+    function createPageNode ({ name, order, layout = 'grid' } = {}) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createPageNode', name, layout) }
+        const page = RED.nodes.getType('ui-page')
+        let pageName = name
+        let pagePath = pageName ? pageName.toLowerCase().replace(/\s/g, '-') : 'page'
+        if (!pageName) {
+            // get all pages & links and determine the next page number
+            const existingPages = getConfigNodesByType(['ui-page']) || []
+            let counter = existingPages.length + 1
+            pageName = `Page ${counter}`
+            pagePath = `/page${counter}`
+            while (existingPages.find(e => e.path === pagePath)) {
+                counter++
+                pageName = `Page ${counter}`
+                pagePath = `/page${counter}`
+            }
+        }
+        const nextOrder = order ?? ((getConfigNodesByType(['ui-page', 'ui-link']) || []).length || 0) + 1
+        const pageNode = {
+            _def: page,
             id: RED.nodes.id(),
-            type: 'ui-group',
-            ...mapDefaults(group.defaults),
-            name: 'My Group',
-            page: pageId
+            type: 'ui-page',
+            ...mapDefaults(page.defaults),
+            path: pagePath,
+            name: pageName,
+            ui: null,
+            theme: null,
+            layout: layout || 'grid',
+            order: nextOrder
         }
-
-        addConfigNode(groupNode)
-        return groupNode
+        return pageNode
     }
 
-    function addDefaultTheme () {
+    function createThemeNode ({ name } = {}) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createThemeNode', name) }
         const theme = RED.nodes.getType('ui-theme')
+        let themeName = name
+        if (!themeName) {
+            // get all themes and determine the next theme number
+            const entries = getConfigNodesByType(['ui-theme']) || []
+            let counter = entries.length + 1
+            themeName = counter === 1 ? 'Default Theme' : `Theme ${counter}`
+            while (entries.find(e => e.name === themeName)) {
+                counter++
+                themeName = `Theme ${counter}`
+            }
+        }
         const themeNode = {
             _def: theme,
             id: RED.nodes.id(),
             type: 'ui-theme',
             ...mapDefaults(theme.defaults),
-            name: 'Default Theme'
+            name: themeName || 'Default Theme'
         }
-
-        addConfigNode(themeNode)
         return themeNode
     }
 
+    function assignBase (node, base, history) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: assignBase', node, base) }
+        if (base?.type !== 'ui-base') {
+            console.error('assignBase: base is not a ui-base node')
+            return
+        }
+        const addHistory = !node.ui || node.ui !== base.id
+        base.users = base.users || []
+        node.ui = base.id
+        const existing = base.users.find(u => u.id === node.id)
+        if (!existing) {
+            base.users.push(node)
+        }
+        if (addHistory) {
+            const historyEvent = createEditHistoryEvent(node, { ui: node.ui })
+            if (history) {
+                history.push(historyEvent)
+            } else {
+                RED.history.push(historyEvent)
+            }
+        }
+        RED.editor.validateNode(node)
+    }
+
+    function assignTheme (page, theme, history) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: assignTheme', page, theme) }
+        if (page?.type !== 'ui-page') {
+            console.error('assignTheme: page is not a ui-page node')
+            return
+        }
+        if (theme?.type !== 'ui-theme') {
+            console.error('assignTheme: theme is not a ui-theme node')
+            return
+        }
+        const addHistory = !page.theme || page.theme !== theme.id
+
+        // if the page has a theme value but it is different, we need to remove it from the old themes users array
+        if (page.theme && page.theme !== theme.id) {
+            const oldTheme = RED.nodes.node(page.theme)
+            if (oldTheme && oldTheme.users) {
+                const oldThemeIndex = oldTheme.users.findIndex(u => u?.id === page.id)
+                if (oldThemeIndex > -1) {
+                    oldTheme.users.splice(oldThemeIndex, 1)
+                }
+            }
+        }
+
+        page.theme = theme.id
+        theme.users = theme.users || []
+
+        const existing = theme.users.find(u => u.id === page.id)
+        if (!existing) {
+            theme.users.push(page)
+        }
+
+        if (addHistory) {
+            const historyEvent = createEditHistoryEvent(page, { theme: page.theme })
+            if (history) {
+                history.push(historyEvent)
+            } else {
+                RED.history.push(historyEvent)
+            }
+        }
+        RED.editor.validateNode(page)
+    }
+
+    function assignPage (node, page, history) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: assignPage', node, page) }
+        if (page?.type !== 'ui-page') {
+            console.error('assignPage: page is not a ui-page node')
+            return
+        }
+        const addHistory = !node.page || node.page !== page.id
+
+        // if the node has a page value but it is different, we need to remove it from the old pages users array
+        if (node.page && node.page !== page.id) {
+            const oldPage = RED.nodes.node(node.page)
+            if (oldPage && oldPage.users) {
+                const oldPageIndex = oldPage.users.findIndex(u => u?.id === node.id)
+                if (oldPageIndex > -1) {
+                    oldPage.users.splice(oldPageIndex, 1)
+                }
+            }
+        }
+
+        node.page = page.id
+        page.users = page.users || []
+        const existingUser = page.users.find(u => u.id === node.id)
+        if (!existingUser) {
+            page.users.push(node)
+        }
+
+        if (addHistory) {
+            const historyEvent = createEditHistoryEvent(node, { page: node.page })
+            if (history) {
+                history.push(historyEvent)
+            } else {
+                RED.history.push(historyEvent)
+            }
+        }
+        RED.editor.validateNode(node)
+    }
+
+    function assignGroup (node, group, history) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: assignGroup', node, group) }
+        if (group?.type !== 'ui-group') {
+            console.error('assignGroup: group is not a ui-group node')
+            return
+        }
+        const addHistory = !node.group || node.group !== group.id
+
+        // if the widget has a group value but it is different, we need to remove it from the old groups users array
+        if (node.group && node.group !== group.id) {
+            const oldGroup = RED.nodes.node(node.group)
+            if (oldGroup && oldGroup.users) {
+                const oldGroupIndex = oldGroup.users.findIndex(u => u?.id === node.id)
+                if (oldGroupIndex > -1) {
+                    oldGroup.users.splice(oldGroupIndex, 1)
+                }
+            }
+        }
+
+        node.group = group.id
+        group.users = group.users || []
+        const existingUser = group.users.find(u => u.id === node.id)
+        if (!existingUser) {
+            group.users.push(node)
+        }
+
+        if (addHistory) {
+            const historyEvent = createEditHistoryEvent(node, { group: node.group })
+            if (history) {
+                history.push(historyEvent)
+            } else {
+                RED.history.push(historyEvent)
+            }
+        }
+        RED.editor.validateNode(node)
+    }
+
     function addLayoutsDefaults () {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: addLayoutsDefaults') }
         const cNodes = ['ui-base', 'ui-page', 'ui-group', 'ui-theme']
         let exists = false
         RED.nodes.eachConfig((n) => {
@@ -714,21 +950,25 @@
 
         // check if we haven't got any of these yet
         if (!exists) {
-            // Add Single Base Node
-            const base = RED.nodes.getType('ui-base')
-            const baseNode = {
-                _def: base,
-                id: RED.nodes.id(),
-                type: 'ui-base',
-                ...mapDefaults(base.defaults),
-                name: 'My Dashboard'
-            }
-
-            addConfigNode(baseNode)
-
-            const theme = addDefaultTheme()
-            const page = addDefaultPage(baseNode.id, theme.id)
-            const group = addDefaultGroup(page.id)
+            const history = []
+            const wasDirty = RED.nodes.dirty()
+
+            // create nodes
+            const baseNode = createBaseNode()
+            const theme = createThemeNode()
+            const page = createPageNode()
+            const group = createGroupNode()
+
+            // add them to the editor & capture the history
+            addConfigNode(baseNode, history)
+            addConfigNode(theme, history)
+            addConfigNode(page, history)
+            addConfigNode(group, history)
+
+            // hook them up to each other & capture the history
+            assignBase(page, baseNode, history)
+            assignTheme(page, theme, history)
+            assignPage(group, page, history)
 
             // update existing `ui-` nodes to use the new base/page/theme/group
             RED.nodes.eachNode((node) => {
@@ -736,20 +976,21 @@
                     // if node has a group property
                     if (hasProperty(node._def.defaults, 'group') && !node.group) {
                         // group-scoped widgets - which is most of them
-                        node.group = group.id
+                        assignGroup(node, group, history)
                     } else if (hasProperty(node._def.defaults, 'page') && !node.page) {
                         // page-scoped widgets
-                        node.page = page.id
+                        assignPage(node, page, history)
                     } else if (hasProperty(node._def.defaults, 'ui') && !node.ui) {
                         // base-scoped widgets, e.g. ui-notification/control
-                        node.ui = baseNode.id
+                        assignBase(node, baseNode, history)
                     }
                     RED.editor.validateNode(node)
                 }
             })
 
-            RED.view.redraw()
+            recordEvents(history, wasDirty)
             RED.sidebar.config.refresh()
+            reloadSidebarContent()
         }
     }
 
@@ -976,6 +1217,12 @@
         // sort groups by order
         groups.sort((a, b) => a.order - b.order)
 
+        const page = RED.nodes.node(pageId)
+        if (!page) {
+            console.error('addGroupOrderingList: page not found', pageId)
+            return
+        }
+
         // ordered list of groups to live within a container (e.g. page list item)
         const groupsOL = $('<ol>', { class: 'nrdb2-sb-group-list' }).appendTo(container).editableList({
             sortable: '.nrdb2-sb-groups-list-header',
@@ -984,9 +1231,14 @@
             connectWith: '.nrdb2-sb-group-list',
             addItem: function (container, i, group) {
                 if (!group || !group.id) {
-                    // this is a new page that's been added and we need to setup the basics
-                    group = addDefaultGroup(pageId)
-                    RED.editor.editConfig('', group.type, group.id)
+                    // this is a new group that's been added and we need to setup the basics
+                    const history = []
+                    const newGroup = createGroupNode({ order: i + 1 })
+                    addConfigNode(newGroup, history)
+                    assignPage(newGroup, page, history)
+                    recordEvents(history)
+                    RED.editor.editConfig('', newGroup.type, newGroup.id)
+                    group = toDashboardItem(newGroup)
                 }
 
                 const widgets = widgetsByGroup[group.id] || []
@@ -1331,9 +1583,16 @@
                 if (item && item.type === 'ui-link') {
                     // want to create a new link
                     if (!item || !item.id) {
-                        // create a default link
-                        item = addDefaultLink()
-                        RED.editor.editConfig('', item.type, item.id)
+                        const history = []
+                        const newItem = createLinkNode({ order: i + 1 })
+                        addConfigNode(newItem, history)
+                        const defaultBase = getDefaultBase()
+                        if (defaultBase) {
+                            assignBase(newItem, defaultBase, history)
+                        }
+                        recordEvents(history)
+                        RED.editor.editConfig('', newItem.type, newItem.id)
+                        item = toDashboardItem(newItem)
                     }
                     // add it to the list of pages/links
                     container.addClass('nrdb2-sb-pages-list-item')
@@ -1355,9 +1614,21 @@
                 } else {
                     // is a page, with groups and widgets inside
                     if (!item || !item.id) {
+                        const history = []
                         // this is a new page that's been added and we need to setup the basics
-                        item = addDefaultPage()
-                        RED.editor.editConfig('', item.type, item.id)
+                        const newItem = createPageNode({ order: i + 1 })
+                        addConfigNode(newItem, history)
+                        const defaultBase = getDefaultBase()
+                        if (defaultBase) {
+                            assignBase(newItem, defaultBase, history)
+                        }
+                        const defaultTheme = getDefaultTheme()
+                        if (defaultTheme) {
+                            assignTheme(newItem, defaultTheme, history)
+                        }
+                        recordEvents(history)
+                        RED.editor.editConfig('', newItem.type, newItem.id)
+                        item = toDashboardItem(newItem)
                     }
                     const groups = groupsByPage[item.id] || []
 
@@ -1433,9 +1704,10 @@
                 addButton: false,
                 addItem: function (container, i, group) {
                     if (!group || !group.id) {
-                        // this is a new group that's been added and we need to setup the basics
-                        group = addDefaultGroup()
-                        RED.editor.editConfig('', group.type, group.id)
+                        const newGroup = createGroupNode()
+                        addConfigNode(newGroup)
+                        RED.editor.editConfig('', newGroup.type, newGroup.id)
+                        group = toDashboardItem(newGroup)
                     }
                     container.addClass('nrdb2-sb-unattached-groups-list-item')
 
@@ -1495,8 +1767,8 @@
             addButton: false,
             addItem: function (container, i, theme) {
                 if (!theme || !theme.id) {
-                    // this is a new theme that's been added and we need to setup the basics
-                    theme = addDefaultTheme()
+                    theme = createThemeNode()
+                    addConfigNode(theme)
                     RED.editor.editConfig('', theme.type, theme.id)
                 }
                 container.addClass('nrdb2-sb-pages-list-item')
@@ -1724,62 +1996,70 @@
             iconClass: 'fa fa-bar-chart',
             action: '@flowfuse/node-red-dashboard:show-dashboard-2.0-tab',
             onchange: () => {
-                sidebar.empty()
-
-                // UI Base Header
-                RED.nodes.eachConfig(function (n) {
-                    if (n.type === 'ui-base') {
-                        const base = n
-                        sidebar.append(dashboardLink(base.id, base.name, base.path))
-                        const divTab = $('<div class="red-ui-tabs">').appendTo(sidebar)
-
-                        const ulDashboardTabs = $('<ul id="dashboard-tabs-list"></ul>').appendTo(divTab)
-
-                        // Add in Tabs
-                        // Tab - Pages
-                        const pagesContent = addSidebarTab(c_('label.layout'), 'pages', ulDashboardTabs, sidebar)
-                        const themesContent = addSidebarTab(c_('label.theming'), 'themes', ulDashboardTabs, sidebar)
-                        const cConstraintsContent = addSidebarTab(c_('label.constraints'), 'client-constraints', ulDashboardTabs, sidebar)
-
-                        // check for any third-party tab definitions
-                        RED.plugins.getPluginsByType('node-red-dashboard-2').forEach(plugin => {
-                            if (plugin.tabs) {
-                                plugin.tabs.forEach(tab => {
-                                    // add tab to sidebar
-                                    const container = addSidebarTab(tab.label, tab.id, ulDashboardTabs, sidebar)
-                                    container.hide()
-                                    tab.init(base, container)
-                                })
-                            }
-                        })
-
-                        // on tab click, show the tab content, and hide the others
-                        ulDashboardTabs.children().on('click', function (evt) {
-                            const tab = $(this)
-                            const tabContent = $('#' + tab.attr('id').replace('-tab', ''))
-                            ulDashboardTabs.children().removeClass('active')
-                            tab.addClass('active')
-                            $('.red-ui-tab-content').hide()
-                            tabContent.show()
-                            evt.preventDefault()
-                        })
+                reloadSidebarContent()
+            }
+        })
+        RED.actions.add('@flowfuse/node-red-dashboard:show-dashboard-2.0-tab', function () {
+            RED.sidebar.show('flowfuse-nr-tools')
+        })
+    }
 
-                        // default to first tab
-                        ulDashboardTabs.children().first().trigger('click')
+    function reloadSidebarContent () {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: reloadSidebar ()') }
+        if (refreshBusy) {
+            return
+        }
+        sidebar.empty()
 
-                        // add page/layout editor
-                        buildLayoutOrderEditor(pagesContent)
-                        // add Themes View
-                        buildThemesEditor(themesContent)
-                        // add Themes View
-                        buildClientConstraintsEditor(base, cConstraintsContent)
+        // UI Base Header
+        RED.nodes.eachConfig(function (n) {
+            if (n.type === 'ui-base') {
+                const base = n
+                sidebar.append(dashboardLink(base.id, base.name, base.path))
+                const divTab = $('<div class="red-ui-tabs">').appendTo(sidebar)
+
+                const ulDashboardTabs = $('<ul id="dashboard-tabs-list"></ul>').appendTo(divTab)
+
+                // Add in Tabs
+                // Tab - Pages
+                const pagesContent = addSidebarTab(c_('label.layout'), 'pages', ulDashboardTabs, sidebar)
+                const themesContent = addSidebarTab(c_('label.theming'), 'themes', ulDashboardTabs, sidebar)
+                const cConstraintsContent = addSidebarTab(c_('label.constraints'), 'client-constraints', ulDashboardTabs, sidebar)
+
+                // check for any third-party tab definitions
+                RED.plugins.getPluginsByType('node-red-dashboard-2').forEach(plugin => {
+                    if (plugin.tabs) {
+                        plugin.tabs.forEach(tab => {
+                            // add tab to sidebar
+                            const container = addSidebarTab(tab.label, tab.id, ulDashboardTabs, sidebar)
+                            container.hide()
+                            tab.init(base, container)
+                        })
                     }
                 })
+
+                // on tab click, show the tab content, and hide the others
+                ulDashboardTabs.children().on('click', function (evt) {
+                    const tab = $(this)
+                    const tabContent = $('#' + tab.attr('id').replace('-tab', ''))
+                    ulDashboardTabs.children().removeClass('active')
+                    tab.addClass('active')
+                    $('.red-ui-tab-content').hide()
+                    tabContent.show()
+                    evt.preventDefault()
+                })
+
+                // default to first tab
+                ulDashboardTabs.children().first().trigger('click')
+
+                // add page/layout editor
+                buildLayoutOrderEditor(pagesContent)
+                // add Themes View
+                buildThemesEditor(themesContent)
+                // add Themes View
+                buildClientConstraintsEditor(base, cConstraintsContent)
             }
         })
-        RED.actions.add('@flowfuse/node-red-dashboard:show-dashboard-2.0-tab', function () {
-            RED.sidebar.show('flowfuse-nr-tools')
-        })
     }
 
     /**

From 5e6695fbfea38818aaffca01362323b3101fd49c Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 29 Oct 2024 15:46:41 +0000
Subject: [PATCH 049/109] Text: Add text truncation/wrap option

---
 nodes/widgets/locales/en-US/ui_text.json | 3 ++-
 nodes/widgets/ui_text.html               | 5 +++++
 ui/src/widgets/ui-text/UIText.vue        | 8 +++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/nodes/widgets/locales/en-US/ui_text.json b/nodes/widgets/locales/en-US/ui_text.json
index fd276d25b..7c1a79e9d 100644
--- a/nodes/widgets/locales/en-US/ui_text.json
+++ b/nodes/widgets/locales/en-US/ui_text.json
@@ -14,7 +14,8 @@
             "font": "Font",
             "textSize": "Text Size",
             "textColor": "Text Color",
-            "enterSampleHere": "Enter Sample Here"
+            "enterSampleHere": "Enter Sample Here",
+            "wrapText": "Wrap Text"
         }
     }
 }
\ No newline at end of file
diff --git a/nodes/widgets/ui_text.html b/nodes/widgets/ui_text.html
index 55a8f2fbb..e1bb46ce0 100644
--- a/nodes/widgets/ui_text.html
+++ b/nodes/widgets/ui_text.html
@@ -97,6 +97,7 @@
                 font: { value: 'Helvetica' },
                 fontSize: { value: 16 },
                 color: { value: '#717171' },
+                wrapText: { value: false },
                 className: { value: '' }
             },
             inputs: 1,
@@ -259,6 +260,10 @@
         <label for="node-input-format"><i class="fa fa-i-cursor"></i> Value format</label>
         <input type="text" id="node-input-format" placeholder="{{msg.payload}}">
     </div>-->
+    <div class="form-row">
+        <label for="node-input-wrapText"><i class="fa fa-ellipsis-h"></i> <span data-i18n="ui-text.label.wrapText"></label>
+        <input type="checkbox" id="node-input-wrapText" style="width: auto">
+    </div>
     <div class="form-row">
         <label style="vertical-align: top"><i class="fa fa-th-large"></i> <span data-i18n="ui-text.label.layout"></label>
         <div style="display:inline-block">
diff --git a/ui/src/widgets/ui-text/UIText.vue b/ui/src/widgets/ui-text/UIText.vue
index 5feb71928..4ac61c583 100644
--- a/ui/src/widgets/ui-text/UIText.vue
+++ b/ui/src/widgets/ui-text/UIText.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="nrdb-ui-text" :class="'nrdb-ui-text--' + layout" :style="style">
+    <div class="nrdb-ui-text" :class="['nrdb-ui-text--' + layout, wrapText ? 'nrdb-ui-text--wrap' : '']" :style="style">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <label class="nrdb-ui-text-label" v-html="label" />
         <!-- eslint-disable-next-line vue/no-v-html -->
@@ -36,6 +36,9 @@ export default {
         layout () {
             return this.getProperty('layout')
         },
+        wrapText () {
+            return this.getProperty('wrapText')
+        },
         style () {
             if (this.props.style) {
                 return {
@@ -86,6 +89,9 @@ export default {
     text-overflow: ellipsis;
     line-height: initial;
 }
+.nrdb-ui-text.nrdb-ui-text--wrap .nrdb-ui-text-value {
+    white-space: normal;
+}
 
 /* Layouts */
 .nrdb-ui-text--row-left {

From 65dcbeb32a72b6194717fedfa75b9fdd768c1fe2 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 29 Oct 2024 16:55:01 +0000
Subject: [PATCH 050/109] Drive app name via Base's "Name" field

---
 docs/user/pwa.md        | 6 ++++++
 nodes/config/ui_base.js | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/user/pwa.md b/docs/user/pwa.md
index 1a96d3771..5ad8d3989 100644
--- a/docs/user/pwa.md
+++ b/docs/user/pwa.md
@@ -35,6 +35,12 @@ You'll then be prompted to name your application:
 
 ## Customization
 
+### Name
+
+You can personalize your application's name to enhance branding and make it easily recognizable. 
+
+To customize the name, select "Edit Settings" in the Dashboard 2.0 sidebar. Then modify the "Name" field. You may need to restart Node-RED in order for the change to take effect in the application when installed.
+
 ### Icon
 
 You can personalize your Dashboard's App Icon to enhance branding and make it easily recognizable. To customize the icon, simply add a URL to the image in the App Icon field under the ui-base configuration. For detailed instructions, visit the [UI Base documentation](/nodes/config/ui-base.html#application-icon).
diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 2f2c3bbfd..f314fc803 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -142,14 +142,14 @@ module.exports = function (RED) {
             uiShared.app.get('/dashboard/manifest.webmanifest', (req, res) => {
                 const hasAppIcon = (config.appIcon && config.appIcon.trim() !== '')
                 const manifest = {
-                    name: 'Node-RED Dashboard 2.0',
-                    short_name: 'Dashboard',
+                    name: config.name,
+                    short_name: config.name,
                     start_url: './',
                     display: 'standalone',
                     background_color: '#ffffff',
                     lang: 'en',
                     scope: './',
-                    description: 'Node-RED Dashboard 2.0',
+                    description: config.name,
                     theme_color: '#ffffff',
                     icons: [
                         { src: hasAppIcon ? config.appIcon : 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },

From 99deb4808e32d88557cb49302661254a0cbfe9d6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 11:00:13 +0000
Subject: [PATCH 051/109] Ad ui-spacer node

---
 nodes/widgets/ui_spacer.html          | 96 +++++++++++++++++++++++++++
 nodes/widgets/ui_spacer.js            | 13 ++++
 ui/src/widgets/ui-spacer/UISpacer.vue | 19 ++++++
 3 files changed, 128 insertions(+)
 create mode 100644 nodes/widgets/ui_spacer.html
 create mode 100644 nodes/widgets/ui_spacer.js
 create mode 100644 ui/src/widgets/ui-spacer/UISpacer.vue

diff --git a/nodes/widgets/ui_spacer.html b/nodes/widgets/ui_spacer.html
new file mode 100644
index 000000000..8692ab2f4
--- /dev/null
+++ b/nodes/widgets/ui_spacer.html
@@ -0,0 +1,96 @@
+<script type="text/javascript">
+    (function () {
+        RED.nodes.registerType('ui-spacer', {
+            category: 'config',
+            color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { value: 'spacer' },
+                tooltip: { value: '' },
+                order: { value: 0 },
+                width: {
+                    value: 1,
+                    validate: function (v) {
+                        const width = v || 0
+                        const currentGroup = $('#node-input-group').val() || this.group
+                        const groupNode = RED.nodes.node(currentGroup)
+                        const valid = !groupNode || +width <= +groupNode.width
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 1 },
+                className: { value: '' }
+            },
+            inputs: 0,
+            outputs: 0,
+            hasUsers: false,
+            icon: 'font-awesome/fa-arrows-h',
+            paletteLabel: 'spacer',
+            label: function () { return this.name + ' ' + this.width + 'x' + this.height },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
+                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
+                if (RED.nodes.subflow(this.z)) {
+                    // change inputs from hidden to text & display them
+                    $('#node-input-width').attr('type', 'text')
+                    $('#node-input-height').attr('type', 'text')
+                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
+                    $('div.form-row.nr-db-ui-manual-size-row').show()
+                } else {
+                    // not in a subflow, use the elementSizer
+                    $('div.form-row.nr-db-ui-element-sizer-row').show()
+                    $('div.form-row.nr-db-ui-manual-size-row').hide()
+                    $('#node-input-size').elementSizer({
+                        width: '#node-input-width',
+                        height: '#node-input-height',
+                        group: '#node-input-group'
+                    })
+                }
+            },
+            oneditsave: function () {
+                this.width = $('#node-input-width').val()
+                this.height = $('#node-input-height').val()
+                this.className = $('#node-input-className').val()
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-spacer">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row nr-db-ui-element-sizer-row">
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-spacer.label.size">Size</label>
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row nr-db-ui-manual-size-row">
+        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-spacer.label.width">Width</label>
+        <input type="hidden" id="node-input-width">
+    </div>
+    <div class="form-row nr-db-ui-manual-size-row">
+        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-spacer.label.height">Height</label>
+        <input type="hidden" id="node-input-height">
+    </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+</script>
diff --git a/nodes/widgets/ui_spacer.js b/nodes/widgets/ui_spacer.js
new file mode 100644
index 000000000..5a1456d15
--- /dev/null
+++ b/nodes/widgets/ui_spacer.js
@@ -0,0 +1,13 @@
+module.exports = function (RED) {
+    function SpacerNode (config) {
+        RED.nodes.createNode(this, config)
+        const node = this
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config)
+    }
+    RED.nodes.registerType('ui-spacer', SpacerNode)
+}
diff --git a/ui/src/widgets/ui-spacer/UISpacer.vue b/ui/src/widgets/ui-spacer/UISpacer.vue
new file mode 100644
index 000000000..db016029a
--- /dev/null
+++ b/ui/src/widgets/ui-spacer/UISpacer.vue
@@ -0,0 +1,19 @@
+<template>
+    <v-spacer class="nrdb-spacer" />
+</template>
+
+<script>
+
+export default {
+    name: 'DBUISpacer',
+    inject: ['$socket', '$dataTracker'],
+    props: {
+        id: { type: String, required: true },
+        props: { type: Object, default: () => ({}) },
+        state: { type: Object, default: () => ({}) }
+    },
+    created () {
+        this.$socket.emit('widget-load', this.id)
+    }
+}
+</script>

From edd604bef922306e5d9a4e145d4a94e8509c706e Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 11:01:11 +0000
Subject: [PATCH 052/109] integrate new spacer node

---
 docs/.vitepress/config.js | 1 +
 package.json              | 1 +
 ui/src/widgets/index.mjs  | 3 +++
 3 files changed, 5 insertions(+)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 51b030288..323b392cd 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -144,6 +144,7 @@ export default ({ mode }) => {
                 { text: 'ui-number-input', link: '/nodes/widgets/ui-number-input' },
                 { text: 'ui-radio-group', link: '/nodes/widgets/ui-radio-group' },
                 { text: 'ui-slider', link: '/nodes/widgets/ui-slider' },
+                { text: 'ui-spacer', link: '/nodes/widgets/ui-spacer' },
                 { text: 'ui-switch', link: '/nodes/widgets/ui-switch' },
                 { text: 'ui-table', link: '/nodes/widgets/ui-table' },
                 { text: 'ui-template', link: '/nodes/widgets/ui-template' },
diff --git a/package.json b/package.json
index b82f89a6e..5aec5163f 100644
--- a/package.json
+++ b/package.json
@@ -131,6 +131,7 @@
             "ui-dropdown": "nodes/widgets/ui_dropdown.js",
             "ui-radio-group": "nodes/widgets/ui_radio_group.js",
             "ui-slider": "nodes/widgets/ui_slider.js",
+            "ui-spacer": "nodes/widgets/ui_spacer.js",
             "ui-switch": "nodes/widgets/ui_switch.js",
             "ui-text": "nodes/widgets/ui_text.js",
             "ui-table": "nodes/widgets/ui_table.js",
diff --git a/ui/src/widgets/index.mjs b/ui/src/widgets/index.mjs
index 261972dc0..47d494616 100644
--- a/ui/src/widgets/index.mjs
+++ b/ui/src/widgets/index.mjs
@@ -12,6 +12,7 @@ import UINotification from './ui-notification/UINotification.vue'
 import UINumberInput from './ui-number-input/UINumberInput.vue'
 import UIRadioGroup from './ui-radio-group/UIRadioGroup.vue'
 import UISlider from './ui-slider/UISlider.vue'
+import UISpacer from './ui-spacer/UISpacer.vue'
 import UISwitch from './ui-switch/UISwitch.vue'
 import UITable from './ui-table/UITable.vue'
 import UITemplate from './ui-template/UITemplate.vue'
@@ -34,6 +35,7 @@ export {
     UINumberInput,
     UIRadioGroup,
     UISlider,
+    UISpacer,
     UISwitch,
     UITable,
     UITemplate,
@@ -60,6 +62,7 @@ export default {
     'ui-number-input': UINumberInput,
     'ui-radio-group': UIRadioGroup,
     'ui-slider': UISlider,
+    'ui-spacer': UISpacer,
     'ui-switch': UISwitch,
     'ui-table': UITable,
     'ui-template': UITemplate,

From 967fd078d2078bac297b41cccb1c81213032c7dd Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 11:02:04 +0000
Subject: [PATCH 053/109] add i18n for spacer

---
 nodes/config/locales/en-US/ui_base.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json
index 688ebbc87..a41ba907b 100644
--- a/nodes/config/locales/en-US/ui_base.json
+++ b/nodes/config/locales/en-US/ui_base.json
@@ -42,6 +42,8 @@
             "focus": "Focus",
             "collapse": "Collapse",
             "expand": "Expand",
+            "delete": "Delete",
+            "spacer": "Spacer",
             "unattachedGroups": "Unattached Groups"
         },
         "themes": {

From 3e82c6b4899c681ae5bf2e0b5e6745662b81e160 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 11:02:26 +0000
Subject: [PATCH 054/109] add missing annotation

---
 nodes/config/ui_base.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 3896ecf87..f6bcb6e82 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -827,6 +827,7 @@
      * Add group of actions to the right-side of a row in the sidebar editable list.
      * @param {Object} parent - jQuery object to add this button group as a child element to
      * @param {DashboardItem} item - The page/group/widget that these actions are bound to
+     * @param {Object} list - The editableList instance associated with this item
      */
     function addRowActions (parent, item, list) {
         const configNodes = ['ui-base', 'ui-page', 'ui-link', 'ui-group', 'ui-theme']

From 046402d3f827281fb692575b98f11caf7f92d3f9 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 11:04:04 +0000
Subject: [PATCH 055/109] fix erroring item (items should be wrapped objects)

---
 nodes/config/ui_base.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index f6bcb6e82..54f0239fc 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1335,6 +1335,7 @@
                         // create a default link
                         item = addDefaultLink()
                         RED.editor.editConfig('', item.type, item.id)
+                        item = toDashboardItem(item)
                     }
                     // add it to the list of pages/links
                     container.addClass('nrdb2-sb-pages-list-item')

From 92d11ff08f601215851c8b51a987684e502d34b2 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 11:05:09 +0000
Subject: [PATCH 056/109] support ui-spacer

---
 nodes/config/ui_base.html | 70 +++++++++++++++++++++++++++++++++------
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 54f0239fc..5e8cdc1c9 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -829,10 +829,10 @@
      * @param {DashboardItem} item - The page/group/widget that these actions are bound to
      * @param {Object} list - The editableList instance associated with this item
      */
-    function addRowActions (parent, item, list) {
+    function addRowActions (parent, item, list, other) {
         const configNodes = ['ui-base', 'ui-page', 'ui-link', 'ui-group', 'ui-theme']
         const btnGroup = $('<div>', { class: 'nrdb2-sb-list-header-button-group', id: item.id }).appendTo(parent)
-        if (!configNodes.includes(item.type)) {
+        if (!configNodes.includes(item.type) && item.type !== 'ui-spacer') {
             const focusButton = $('<a href="#" class="nr-db-sb-tab-focus-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-bullseye"></i> ' + c_('layout.focus') + '</a>').appendTo(btnGroup)
             focusButton.on('click', function (evt) {
                 RED.view.reveal(item.id)
@@ -854,7 +854,40 @@
             // add the "+ group" button
             $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> ' + c_('layout.group') + '</a>')
                 .click(function (evt) {
-                    list.editableList('addItem')
+                    list.editableList('addItem', { type: 'ui-group', page: item.id })
+                    evt.preventDefault()
+                })
+                .appendTo(btnGroup)
+        }
+        // if this is a group & it is not an unattached group, add the "_ spacer" button
+        if (item.type === 'ui-group' && !!item.page) {
+            // add the "+ spacer" button
+            $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-arrows-h"></i> ' + c_('layout.spacer') + '</a>')
+                .click(function (evt) {
+                    // TODO: refactor this into createSpacer when #1401 is merged', parent, list
+                    const spacer = RED.nodes.getType('ui-spacer')
+                    const spacerNode = {
+                        _def: spacer,
+                        id: RED.nodes.id(),
+                        type: 'ui-spacer',
+                        ...mapDefaults(spacer.defaults),
+                        users: [],
+                        name: 'spacer',
+                        order: list.editableList('items').length + 1,
+                        group: item.id
+                    }
+                    spacerNode.dirty = true
+                    const n = RED.nodes.add(spacerNode)
+                    RED.editor.validateNode(spacerNode)
+                    RED.history.push({
+                        t: 'add',
+                        nodes: [spacerNode.id],
+                        dirty: RED.nodes.dirty()
+                    })
+                    RED.nodes.dirty(true)
+                    const widget = toDashboardItem(spacerNode)
+                    list.editableList('addItem', widget)
+                    RED.editor.edit(n)
                     evt.preventDefault()
                 })
                 .appendTo(btnGroup)
@@ -1004,8 +1037,6 @@
                 $('<span>', { class: 'nrdb2-sb-info' }).text(`${widgets.length} Widgets`).appendTo(titleRow)
 
                 const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
-                addRowActions(actions, group)
-                addRowStateOptions(actions, group)
 
                 // adds widgets within this group
                 const widgetsList = $('<div>', { class: 'nrdb2-sb-widget-list-container' }).appendTo(container)
@@ -1013,7 +1044,10 @@
                 // add chevron/list toggle
                 titleRow.click(titleToggle(group.id, widgetsList, chevron))
 
-                addWidgetToList(group.id, widgetsList, widgets)
+                const widgetsOL = addWidgetToList(group.id, widgetsList, widgets)
+
+                addRowActions(actions, group, widgetsOL)
+                addRowStateOptions(actions, group)
 
                 const events = []
                 updateItemOrder(groupsOL.editableList('items'), events)
@@ -1080,9 +1114,14 @@
 
                 // Set the icon
                 const ico = $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon' }).appendTo(titleRow)
-                let widgetIcon = RED.utils.getNodeIcon(widget.node?._def, widget.node) || 'fa-question'
-                if (widgetIcon.startsWith('font-awesome/')) {
-                    widgetIcon = widgetIcon.replace(/^font-awesome\//, 'fa ')
+                let widgetIcon
+                if (widget.type === 'ui-spacer') {
+                    widgetIcon = 'fa fa-arrows-h'
+                } else {
+                    widgetIcon = RED.utils.getNodeIcon(widget.node?._def, widget.node) || 'fa-question'
+                    if (widgetIcon.startsWith('font-awesome/')) {
+                        widgetIcon = widgetIcon.replace(/^font-awesome\//, 'fa ')
+                    }
                 }
                 if (widget.isSubflowInstance) {
                     // In this MVP, subflow instances are constrained to stay within own group.
@@ -1099,7 +1138,7 @@
 
                 $('<span>', { class: 'nrdb2-sb-title' }).text(widget.label?.trim() || widget.id).appendTo(titleRow)
                 const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
-                addRowActions(actions, widget)
+                addRowActions(actions, widget, widgetsOL)
 
                 const events = []
                 updateItemOrder(widgetsOL.editableList('items'), events)
@@ -1142,6 +1181,8 @@
         widgets.forEach(function (w) {
             widgetsOL.editableList('addItem', w)
         })
+
+        return widgetsOL
     }
 
     // expand / collapse buttons
@@ -1286,6 +1327,15 @@
                 }
             }
         })
+        // get ui-spacers too (they are config nodes so as not to be displayed in the editor node palette)
+        RED.nodes.eachConfig(function (n) {
+            if (n.type === 'ui-spacer' && n.group) {
+                if (!widgetsByGroup[n.group]) {
+                    widgetsByGroup[n.group] = []
+                }
+                widgetsByGroup[n.group].push(toDashboardItem(n))
+            }
+        })
 
         // update `widgetsByGroup` for subflow instances where its env has an entry which
         // is a ui-group

From 93972d71b0d0af19992ab72e37d71939e0d285d3 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 12:05:48 +0000
Subject: [PATCH 057/109] Add unit tests

---
 test/nodes/widgets/ui_spacer.spec.js | 83 ++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 test/nodes/widgets/ui_spacer.spec.js

diff --git a/test/nodes/widgets/ui_spacer.spec.js b/test/nodes/widgets/ui_spacer.spec.js
new file mode 100644
index 000000000..72b843fd2
--- /dev/null
+++ b/test/nodes/widgets/ui_spacer.spec.js
@@ -0,0 +1,83 @@
+const helper = require('node-red-node-test-helper')
+const should = require('should') // eslint-disable-line no-unused-vars
+
+// load test 1 standard test data (base, page, group, theme, button)
+const { testData1 } = require('../fixtures/index.js')
+const { verifyFlowLoaded } = require('../utils.js')
+const testFlow1 = testData1.flows
+const nodeImports = testData1.getImports(null, ['ui_spacer', 'ui_button'])
+
+helper.init(require.resolve('node-red'))
+
+describe('ui-spacer node', function () {
+    beforeEach(function (done) {
+        helper.startServer(done)
+    })
+
+    afterEach(function (done) {
+        helper.unload()
+        helper.stopServer(done)
+    })
+    // add a basic button and a spacer
+    const flow = [
+        {
+            id: 'config-ui-spacer',
+            type: 'ui-spacer',
+            group: 'config-ui-group',
+            name: 'Spacer 1',
+            order: 1,
+            width: '3',
+            height: '3'
+        },
+        {
+            id: 'node-ui-button',
+            type: 'ui-button',
+            order: 2,
+            z: 'tab-id',
+            group: 'config-ui-group'
+        },
+        ...testFlow1
+    ]
+    it('should be loaded', async function () {
+        await helper.load(nodeImports, flow)
+        // debugPrintLoadedNodes(this, helper) // uncomment to check nodes loaded
+        verifyFlowLoaded(helper, flow)
+        const testItem = helper.getNode('config-ui-spacer')
+        should(testItem).be.an.Object()
+    })
+
+    it('should be registered with the ui-base widgets', async function () {
+        // although the ui-spacer is a config node (in Node-RED terms), it is a widget in the dashboard
+        await helper.load(nodeImports, flow)
+        // debugPrintLoadedNodes(this, helper) // uncomment to check nodes loaded
+        verifyFlowLoaded(helper, flow)
+        const base = helper.getNode('config-ui-base')
+        should(base).be.an.Object()
+        base.should.have.property('ui')
+        base.ui.should.have.property('widgets')
+        base.ui.widgets.has('config-ui-spacer').should.be.true()
+    })
+
+    it('should be have correct properties', async function () {
+        await helper.load(nodeImports, flow)
+        // debugPrintLoadedNodes(this, helper) // uncomment to check nodes loaded
+        verifyFlowLoaded(helper, flow)
+        const base = helper.getNode('config-ui-base')
+        should(base).be.an.Object()
+        base.should.have.property('ui')
+        base.ui.should.have.property('widgets')
+        const group = base.ui.groups.get('config-ui-group')
+        const spacer = base.ui.widgets.get('config-ui-spacer')
+        should(spacer).be.an.Object()
+        spacer.should.have.property('props').and.be.an.Object()
+        spacer.props.should.have.property('group', group.id)
+        spacer.props.should.have.property('name', 'Spacer 1')
+        spacer.props.should.have.property('order', 1)
+        spacer.props.should.have.property('width', '3')
+        spacer.props.should.have.property('height', '3')
+        spacer.should.have.property('layout').and.be.an.Object()
+        spacer.layout.should.have.property('order', 1)
+        spacer.layout.should.have.property('width', '3')
+        spacer.layout.should.have.property('height', '3')
+    })
+})

From 24c4b2a3af987a72cfedf6bcd1f846bfe26f1a45 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 12:32:18 +0000
Subject: [PATCH 058/109] add e2e tests

---
 cypress/fixtures/flows/dashboard-spacer.json | 108 +++++++++++++++++++
 cypress/tests/widgets/spacer.spec.js         |  31 ++++++
 2 files changed, 139 insertions(+)
 create mode 100644 cypress/fixtures/flows/dashboard-spacer.json
 create mode 100644 cypress/tests/widgets/spacer.spec.js

diff --git a/cypress/fixtures/flows/dashboard-spacer.json b/cypress/fixtures/flows/dashboard-spacer.json
new file mode 100644
index 000000000..07ef5fb75
--- /dev/null
+++ b/cypress/fixtures/flows/dashboard-spacer.json
@@ -0,0 +1,108 @@
+[
+    {
+        "id": "node-red-tab-text",
+        "type": "tab",
+        "label": "UI Text",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "dashboard-ui-base",
+        "type": "ui-base",
+        "name": "UI Name",
+        "path": "/dashboard",
+        "includeClientData": true,
+        "acceptsClientConfig": [
+            "ui-notification",
+            "ui-control"
+        ]
+    },
+    {
+        "id": "dashboard-ui-group",
+        "type": "ui-group",
+        "name": "Group 1",
+        "page": "dashboard-ui-page-1",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "dashboard-ui-page-1",
+        "type": "ui-page",
+        "name": "Page 1",
+        "ui": "dashboard-ui-base",
+        "path": "/page1",
+        "icon": "",
+        "layout": "grid",
+        "theme": "dashboard-ui-theme",
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-theme",
+        "type": "ui-theme",
+        "name": "Theme Name",
+        "colors": {
+            "surface": "#ffffff",
+            "primary": "#0094ce",
+            "bgPage": "#eeeeee",
+            "groupBg": "#ffffff",
+            "groupOutline": "#cccccc"
+        }
+    },
+    {
+        "id": "dashboard-ui-spacer",
+        "type": "ui-spacer",
+        "group": "dashboard-ui-group",
+        "name": "spacer",
+        "order": 1,
+        "width": "3",
+        "height": "3",
+        "className": "class1 class2"
+    },
+    {
+        "id": "2a04f859315b5a00",
+        "type": "ui-button",
+        "z": "node-red-tab-text",
+        "group": "dashboard-ui-group",
+        "name": "",
+        "label": "button",
+        "order": 2,
+        "width": "3",
+        "height": "3",
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "",
+        "payloadType": "str",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "enableClick": true,
+        "enablePointerdown": false,
+        "pointerdownPayload": "",
+        "pointerdownPayloadType": "str",
+        "enablePointerup": false,
+        "pointerupPayload": "",
+        "pointerupPayloadType": "str",
+        "x": 110,
+        "y": 100,
+        "wires": [
+            []
+        ]
+    }
+]
\ No newline at end of file
diff --git a/cypress/tests/widgets/spacer.spec.js b/cypress/tests/widgets/spacer.spec.js
new file mode 100644
index 000000000..50dc54ad7
--- /dev/null
+++ b/cypress/tests/widgets/spacer.spec.js
@@ -0,0 +1,31 @@
+describe('Node-RED Dashboard 2.0 - Spacer', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-spacer')
+        cy.visit('/dashboard/page1')
+    })
+
+    it('Is rendered', () => {
+        // should have one child
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().should('have.length', 1)
+        // and that child should be a div
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().eq(0).should('have.prop', 'tagName', 'DIV')
+
+        // inner div should have no content and no children
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().eq(0).should('not.have.text')
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer > div').children().should('not.exist')
+    })
+
+    it('Has correct class names and styling', () => {
+        // default classes are applied to main widget
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'nrdb-ui-widget')
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'nrdb-ui-spacer')
+        // custom classes .class1 and .class2 are applied to main widget div
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'class1')
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').should('have.class', 'class2')
+        // check widget styling
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer').children().eq(0).should('have.css', 'grid-row-end', 'span 3')
+        // check inner div classes
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer > div').should('have.class', 'nrdb-spacer')
+        cy.get('#nrdb-ui-widget-dashboard-ui-spacer > div').should('have.class', 'v-spacer') // vuetify class
+    })
+})

From 903af094dd3c1d4844725df0a5b31e6cee5797eb Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 14:45:56 +0000
Subject: [PATCH 059/109] add docs

---
 docs/nodes/widgets.md           |  4 ++++
 docs/nodes/widgets/ui-spacer.md | 34 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 docs/nodes/widgets/ui-spacer.md

diff --git a/docs/nodes/widgets.md b/docs/nodes/widgets.md
index 6f13892f1..0cba85fa5 100644
--- a/docs/nodes/widgets.md
+++ b/docs/nodes/widgets.md
@@ -32,6 +32,10 @@ description: Explore the wide range of widgets available in Node-RED Dashboard 2
         widget: 'ui-text',
         image: '/images/node-examples/ui-text.png',
         description: 'Displays a non-editable text field on your dashboard.'
+    }, {
+        name: 'Spacer',
+        widget: 'ui-spacer',
+        description: 'Adds a simple spacer to your group.'
     }]
 
     const form = [{
diff --git a/docs/nodes/widgets/ui-spacer.md b/docs/nodes/widgets/ui-spacer.md
new file mode 100644
index 000000000..9a0925756
--- /dev/null
+++ b/docs/nodes/widgets/ui-spacer.md
@@ -0,0 +1,34 @@
+---
+description: The Spacer widget is a simple spacer to aid with element layout.
+props:
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Size: Controls the width and height of the spacer with respect to the parent group. Maximum value is the width of the group.
+---
+
+<script setup>
+    import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue";
+</script>
+
+<TryDemo href="spacer">
+
+# Spacer `ui-spacer` <AddedIn version="1.9.0" />
+
+</TryDemo>
+
+This widget allows users to add a simple spacer to their dashboard groups, aiding with element layout.
+
+## Properties
+
+<PropsTable/>
+
+
+## Current Limitations
+
+_Currently_
+* the spacer widgets belong to the global flow and are not exported along with the group unless the entire flow is exported. This means that if you want to export a group with spacer widgets, you will need to either export the entire flow or add the spacer widgets manually after importing the group.
+* Editing a spacer is only possible on the Dashboard 2.0 sidbar and not from the the Node-RED config sidebar.
+
+## Using the Spacer Widget
+
+From the Dashboard 2.0 sidebar, hover over the group you want to add the spacer to and click the `↔ spacer` button. This will add a spacer to the group that you can then drag to the desired location. Opening the spacer's edit dialog will allow you to set the size of the spacer.
\ No newline at end of file

From 5e1c230cff070740d6841aad7a1057b91d68eff2 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 15:29:16 +0000
Subject: [PATCH 060/109] lose unsightly v scroll

---
 nodes/config/ui_base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 8aa5f13ad..4e83f3af1 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1979,7 +1979,7 @@
         $(`<li id="dashboard-2-tab-${id}" class="red-ui-tab" style="min-width: 90px; width: fit-content"><a class="red-ui-tab-label" style="padding-inline: 12px" title="Layout"><span>${label}</span></a></li>`).appendTo(tabs)
 
         // Add in Tab Content
-        const content = $(`<div id="dashboard-2-${id}" class="red-ui-tab-content" style="height: calc(100% - 72px);"></div>`).appendTo(sidebar)
+        const content = $(`<div id="dashboard-2-${id}" class="red-ui-tab-content" style="height: calc(100% - 88px);"></div>`).appendTo(sidebar)
         return content
     }
 

From ad8df0a07747d77e92dfcc70e38d6fa3288df099 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 15:30:17 +0000
Subject: [PATCH 061/109] fix adding ui-link toast warning

---
 nodes/config/ui_base.html | 28 +++++++++++++++-------------
 nodes/config/ui_link.html |  3 ++-
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 4e83f3af1..75f9b73fb 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -626,9 +626,10 @@
         return existingThemes[0]
     }
 
-    function addConfigNode (node, history) {
+    function addNode (node, history) {
         if (RED._db2debug) { console.log('addConfigNode', node) }
-        if (!node.users) {
+        const configTypes = ['ui-base', 'ui-group', 'ui-link', 'ui-page', 'ui-theme']
+        if (!node.users && configTypes.indexOf(node.type) > -1) {
             node.users = []
         }
         node.dirty = true
@@ -721,7 +722,7 @@
         if (!linkName) {
             // get all links and determine the next link number
             const existingLinks = getConfigNodesByType(['ui-link']) || []
-            let counter = 1
+            let counter = existingLinks.length + 1
             linkName = `Link ${counter}`
             while (existingLinks.find(e => e.name === linkName)) {
                 counter++
@@ -737,7 +738,8 @@
             path: path || '/',
             name: linkName,
             ui: null,
-            order: nextOrder
+            order: nextOrder,
+            hasUsers: false
         }
         return linkNode
     }
@@ -960,10 +962,10 @@
             const group = createGroupNode()
 
             // add them to the editor & capture the history
-            addConfigNode(baseNode, history)
-            addConfigNode(theme, history)
-            addConfigNode(page, history)
-            addConfigNode(group, history)
+            addNode(baseNode, history)
+            addNode(theme, history)
+            addNode(page, history)
+            addNode(group, history)
 
             // hook them up to each other & capture the history
             assignBase(page, baseNode, history)
@@ -1234,7 +1236,7 @@
                     // this is a new group that's been added and we need to setup the basics
                     const history = []
                     const newGroup = createGroupNode({ order: i + 1 })
-                    addConfigNode(newGroup, history)
+                    addNode(newGroup, history)
                     assignPage(newGroup, page, history)
                     recordEvents(history)
                     RED.editor.editConfig('', newGroup.type, newGroup.id)
@@ -1585,7 +1587,7 @@
                     if (!item || !item.id) {
                         const history = []
                         const newItem = createLinkNode({ order: i + 1 })
-                        addConfigNode(newItem, history)
+                        addNode(newItem, history)
                         const defaultBase = getDefaultBase()
                         if (defaultBase) {
                             assignBase(newItem, defaultBase, history)
@@ -1617,7 +1619,7 @@
                         const history = []
                         // this is a new page that's been added and we need to setup the basics
                         const newItem = createPageNode({ order: i + 1 })
-                        addConfigNode(newItem, history)
+                        addNode(newItem, history)
                         const defaultBase = getDefaultBase()
                         if (defaultBase) {
                             assignBase(newItem, defaultBase, history)
@@ -1705,7 +1707,7 @@
                 addItem: function (container, i, group) {
                     if (!group || !group.id) {
                         const newGroup = createGroupNode()
-                        addConfigNode(newGroup)
+                        addNode(newGroup)
                         RED.editor.editConfig('', newGroup.type, newGroup.id)
                         group = toDashboardItem(newGroup)
                     }
@@ -1768,7 +1770,7 @@
             addItem: function (container, i, theme) {
                 if (!theme || !theme.id) {
                     theme = createThemeNode()
-                    addConfigNode(theme)
+                    addNode(theme)
                     RED.editor.editConfig('', theme.type, theme.id)
                 }
                 container.addClass('nrdb2-sb-pages-list-item')
diff --git a/nodes/config/ui_link.html b/nodes/config/ui_link.html
index c2e30e29e..6168a2170 100644
--- a/nodes/config/ui_link.html
+++ b/nodes/config/ui_link.html
@@ -63,7 +63,8 @@
         label: function () {
             const path = this.path || ''
             return `${this.name} [${path}]` || 'UI Link'
-        }
+        },
+        hasUsers: false
     })
 </script>
 

From 51f993ee825a9c14a21b5f161d247b317c83f19c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 18:01:46 +0000
Subject: [PATCH 062/109] add className to node edit panel

---
 nodes/widgets/ui_button_group.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/nodes/widgets/ui_button_group.html b/nodes/widgets/ui_button_group.html
index 1254a1284..16be50d01 100644
--- a/nodes/widgets/ui_button_group.html
+++ b/nodes/widgets/ui_button_group.html
@@ -22,6 +22,7 @@
             },
             height: { value: 1 },
             label: { value: 'button group' },
+            className: { value: '' },
             rounded: { value: true },
             useThemeColors: { value: true },
             passthru: { value: false },
@@ -238,6 +239,19 @@
         <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-button-group.label.label"></span></label>
         <input type="text" id="node-input-label">
     </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-button-group.label.className"></label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-button-group.label.classNamePlaceholder" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
     <div class='form-row'>
         <label for='node-input-rounded'><i class='fa fa-gear'></i> <span data-i18n="ui-button-group.label.appearance"></span></label>        
         <span id="appearance-square" style="opacity:1; border:1px solid; padding: 3px 20px 2px 5px; "><i class="fa fa-square"></i></span>

From 682c8fde421c141d9260f69b2ad780e0f3e6c416 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 18:02:07 +0000
Subject: [PATCH 063/109] add className and placeholder in i18n

---
 nodes/widgets/locales/en-US/ui_button_group.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/nodes/widgets/locales/en-US/ui_button_group.json b/nodes/widgets/locales/en-US/ui_button_group.json
index 1424d25d1..b11d6c9b1 100644
--- a/nodes/widgets/locales/en-US/ui_button_group.json
+++ b/nodes/widgets/locales/en-US/ui_button_group.json
@@ -8,7 +8,9 @@
             "colors": "Colors",
             "options": "Options",
             "appearance": "Appearance",
-            "tcolors": "Use theme colors"
+            "tcolors": "Use theme colors",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s)"
         }
     }
 }
\ No newline at end of file

From e9b04bdbcbab68685a8914ca2a3409329af85920 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 18:02:20 +0000
Subject: [PATCH 064/109] e2e tests for button group className

---
 .../flows/dashboard-button-groups.json        |  8 ++++++++
 cypress/tests/widgets/button-group.spec.js    | 20 +++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/cypress/fixtures/flows/dashboard-button-groups.json b/cypress/fixtures/flows/dashboard-button-groups.json
index f184a2668..ba7c5b4d6 100644
--- a/cypress/fixtures/flows/dashboard-button-groups.json
+++ b/cypress/fixtures/flows/dashboard-button-groups.json
@@ -72,6 +72,7 @@
         "width": 6,
         "height": 1,
         "label": "Default",
+        "className": "class1 class2",
         "rounded": true,
         "useThemeColors": true,
         "passthru": false,
@@ -402,6 +403,13 @@
                 "t": "delete",
                 "p": "topic",
                 "pt": "msg"
+            },
+            {
+                "t": "set",
+                "p": "ui_update.class",
+                "pt": "msg",
+                "to": "dynamic-class",
+                "tot": "str"
             }
         ],
         "action": "",
diff --git a/cypress/tests/widgets/button-group.spec.js b/cypress/tests/widgets/button-group.spec.js
index a1fafb2ec..27c713bfd 100644
--- a/cypress/tests/widgets/button-group.spec.js
+++ b/cypress/tests/widgets/button-group.spec.js
@@ -4,6 +4,21 @@ describe('Node-RED Dashboard 2.0 - Button Groups', () => {
         cy.visit('/dashboard/page1')
     })
 
+    it('Loads with expected elements', () => {
+        // #nrdb-ui-widget-dashboard-ui-button-group-1 is a button group with 4 buttons
+        // labelled Option 1, Option 2, Option 3, Option 4
+        // with the botton widget having classes class1 and class2
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').should('exist')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').should('have.class', 'class1') // static class entered in node flow
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').should('have.class', 'class2') // static class entered in node flow
+        // should be 4 buttons
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1').find('button').should('have.length', 4)
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 1')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 2')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 3')
+        cy.get('#nrdb-ui-widget-dashboard-ui-button-group-1 button').contains('Option 4')
+    })
+
     it('can be clicked and emit a string value representing the option', () => {
         // Emitting strings
         cy.clickAndWait(cy.get('button').contains('Option 3'))
@@ -40,13 +55,14 @@ describe('Node-RED Dashboard 2.0 - Button Groups', () => {
         cy.visit('/dashboard/page1')
     })
 
-    it('supports "options" and "label" as a dynamic property', () => {
-        // Emitting strings
+    it('supports "options", "label" and "class" as a dynamic property', () => {
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Static 1')
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Static 2')
+        cy.get('#nrdb-ui-widget-ui-button-group-dynamic').should('not.have.class', 'dynamic-class')
         cy.clickAndWait(cy.get('button').contains('Dynamic Options & Label'))
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Dynamic Label')
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Dynamic 1')
         cy.get('#nrdb-ui-widget-ui-button-group-dynamic').contains('Dynamic 2')
+        cy.get('#nrdb-ui-widget-ui-button-group-dynamic').should('have.class', 'dynamic-class')
     })
 })

From 648f5165db454c0a2de32a9f3d9bb123005825f2 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 31 Oct 2024 18:02:39 +0000
Subject: [PATCH 065/109] update doc for className

---
 docs/nodes/widgets/ui-button-group.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/nodes/widgets/ui-button-group.md b/docs/nodes/widgets/ui-button-group.md
index 2de52911a..caaec8b5c 100644
--- a/docs/nodes/widgets/ui-button-group.md
+++ b/docs/nodes/widgets/ui-button-group.md
@@ -13,6 +13,9 @@ props:
         dynamic: true
     Topic: The text that needs to be send in the msg.topic field.
     Passthrough: Specify whether input messages should be passed through as output messages.
+    Class:
+        payload: msg.ui_update.class
+        structure: ["String"]
 controls:
     enabled:
         example: true | false

From 5db69d2ec485ea37818b0a9132c6b0c178d149d3 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 16:23:37 +0000
Subject: [PATCH 066/109] ensure different editor path is supported

---
 nodes/config/ui_base.html       | 18 ++++++++----------
 ui/src/App.vue                  |  4 +++-
 ui/src/EditTracking.js          |  9 +++++++--
 ui/src/api/node-red.js          | 25 ++++++++++++++++++-------
 ui/src/layouts/wysiwyg/index.js |  4 ++--
 5 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index c8ea32d7a..3b16e4ab9 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -865,13 +865,7 @@
                 const pageId = item.id
                 const baseId = item.node.ui
                 const base = RED.nodes.node(item.node.ui)
-                let basePath = base.path || '/dashboard'
-                if (basePath.endsWith('/')) {
-                    basePath = basePath.slice(0, -1)
-                }
-                if (!basePath.startsWith('/')) {
-                    basePath = `/${basePath}`
-                }
+                const dashboardBasePath = (base.path || 'dashboard').replace(/\/$/, '').replace(/^\/+/, '')
                 const authTokens = RED.settings.get('auth-tokens') || {}
                 const headers = {}
                 if (authTokens.access_token) {
@@ -882,7 +876,7 @@
                 const ajax = () => {
                     return new Promise((resolve, reject) => {
                         $.ajax({
-                            url: `${base.path}/api/v1/${baseId}/edit/${pageId}`, // e.g. /dashboard/api/v1/123/edit/456
+                            url: `${dashboardBasePath}/api/v1/${baseId}/edit/${pageId}`, // e.g. /dashboard/api/v1/123/edit/456
                             type: 'PATCH',
                             headers,
                             data: {
@@ -891,9 +885,13 @@
                                 page: pageId
                             },
                             success: function (data) {
-                                // open the dashboard on that page in a _blank window
-                                const _url = new URL(`${basePath}/${data.path}`.replace(/\/\//g, '/'), windowUrl.origin)
+                                // construct the url to open the layout editor
+                                const _url = new URL(`${dashboardBasePath}/${data.path}`.replace(/\/\//g, '/'), windowUrl.origin)
                                 _url.searchParams.set('edit-key', data.editKey)
+                                const editorPath = windowUrl.pathname?.replace(/\/$/, '').replace(/^\/+/, '') || ''
+                                if (editorPath) {
+                                    _url.searchParams.set('editor-path', editorPath)
+                                }
                                 resolve(_url)
                             },
                             error: function (err) {
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 6b3aee749..bc45c2252 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -146,10 +146,12 @@ export default {
             // The initEditMode setup fn in EditTracking.js module stores this and it is used to enable
             // the WYSIWYG edit tracking for the page in question.
             const editKeyInUrl = new URLSearchParams(window.location.search).get('edit-key')
+            const editorPath = new URLSearchParams(window.location.search).get('editor-path')
+
             const pageIdOk = payload.meta?.wysiwyg?.page && !!payload.pages[payload.meta.wysiwyg.page] && editKeyInUrl === payload.meta.wysiwyg.editKey
             const dashboardIdOk = payload.meta?.wysiwyg?.dashboard && !!payload.dashboards[payload.meta.wysiwyg.dashboard]
             if (payload.meta?.wysiwyg?.enabled && editKeyInUrl && pageIdOk && dashboardIdOk) {
-                initEditMode(editKeyInUrl, payload.meta.wysiwyg.page)
+                initEditMode(editKeyInUrl, payload.meta.wysiwyg.page, editorPath)
             }
 
             // loop over pages, add them to vue router
diff --git a/ui/src/EditTracking.js b/ui/src/EditTracking.js
index 59485eb83..d3114b82a 100644
--- a/ui/src/EditTracking.js
+++ b/ui/src/EditTracking.js
@@ -5,6 +5,7 @@ const state = reactive({
     editKey: '',
     editPage: '',
     editMode: false,
+    editorPath: '', // the custom httpAdminRoot path for the NR editor
     isTrackingEdits: false,
     originalGroups: []
 })
@@ -16,10 +17,11 @@ const state = reactive({
  * @param {String} editKey - The edit key provided by the server
  * @param {String} editPage - The page id to edit (provided by the server)
  */
-function initialise (editKey, editPage) {
+function initialise (editKey, editPage, editorPath) {
     state.editKey = editKey
     state.editPage = editPage
     state.editMode = !!editKey && !!editPage
+    state.editorPath = editorPath || ''
 }
 
 /**
@@ -36,6 +38,8 @@ function startEditTracking (groups) {
 function exitEditMode () {
     state.editKey = ''
     state.editPage = ''
+    state.editMode = false
+    state.isTrackingEdits = false
     state.initialised = false
     state.originalGroups = []
 }
@@ -51,7 +55,8 @@ function updateEditTracking (groups) {
 const editKey = computed(() => state.editKey)
 const editPage = computed(() => state.editPage)
 const editMode = computed(() => !!state.editKey && !!state.editPage)
+const editorPath = computed(() => state.editorPath)
 const originalGroups = computed(() => state.originalGroups)
 const isTrackingEdits = computed(() => state.isTrackingEdits)
 
-export { editMode, editKey, editPage, originalGroups, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }
+export { editKey, editMode, editPage, editorPath, originalGroups, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }
diff --git a/ui/src/api/node-red.js b/ui/src/api/node-red.js
index 9fcfff1d1..5f4b19f0e 100644
--- a/ui/src/api/node-red.js
+++ b/ui/src/api/node-red.js
@@ -1,7 +1,14 @@
 import axios from 'axios'
 
-function applyAuth (headers) {
-    let authTokens = localStorage.getItem('auth-tokens')
+function applyAuth (headers, editorPath) {
+    let itemName = 'auth-tokens'
+    if (editorPath) {
+        itemName += `-${editorPath.replace(/\//g, '-')}`
+    }
+    let authTokens = localStorage.getItem(itemName)
+    if (!authTokens) {
+        authTokens = localStorage.getItem('auth-tokens')
+    }
     if (authTokens) {
         authTokens = JSON.parse(authTokens)
         const token = authTokens.access_token
@@ -16,15 +23,19 @@ function applyAuth (headers) {
  * The path parts are appended to the url
  * @example
  * // returns a URL object for 'http://localhost:1880/dashboard/api/v1/my-dashboard/flows'
- * const url = getDashboardApiUrl('my-dashboard', 'flows')
+ * const url = getDashboardApiUrl('', 'my-dashboard', 'flows')
+ * @param {String} editorPath - The node-red editor path as provided by httpAdminRoot (e.g. 'editor') (can be empty)
  * @param {String} dashboardId - The dashboard id
  * @param  {...any} path - 1 or more path parts to append to the url
  * @returns {String} The full dashboard api url
  */
-function getDashboardApiUrl (dashboardId, ...path) {
+function getDashboardApiUrl (editorPath, dashboardId, ...path) {
     const url = new URL(window.location.href)
     const urlBase = url.pathname.split('/').slice(0, -1).join('/') + '/api/v1/' // e.g 'http://localhost:1880/dashboard/api/v1/'
     const pathParts = [urlBase, dashboardId, ...(path || [])].map(p => p.replace(/^\/|\/$/g, ''))
+    if (editorPath) {
+        pathParts.unshift(editorPath.replace(/\/$/, '').replace(/^\/+/, ''))
+    }
     const result = new URL(url)
     result.search = ''
     result.pathname = pathParts.join('/')
@@ -41,12 +52,12 @@ export default {
      * @param {Array<Object>} options.groups - The updated group objects to apply
      * @returns the axios request
      */
-    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, key }) {
+    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, key, editorPath }) {
         const changes = { groups }
         return axios.request({
             method: 'PATCH',
-            url: getDashboardApiUrl(dashboard, 'flows'),
-            headers: applyAuth({ 'Content-type': 'application/json' }),
+            url: getDashboardApiUrl(editorPath || '', dashboard, 'flows'),
+            headers: applyAuth({ 'Content-type': 'application/json' }, editorPath),
             data: { dashboard, page, key, changes }
         })
     }
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index 59643b97f..0485aabf3 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -1,4 +1,4 @@
-import { editKey, editMode, editPage, exitEditMode, isTrackingEdits, originalGroups, startEditTracking, updateEditTracking } from '../../EditTracking.js'
+import { editKey, editMode, editPage, editorPath, exitEditMode, isTrackingEdits, originalGroups, startEditTracking, updateEditTracking } from '../../EditTracking.js'
 import NodeRedApi from '../../api/node-red'
 
 import DraggableMixin from './draggable.js'
@@ -44,7 +44,7 @@ export default {
             this.pageGroups = JSON.parse(JSON.stringify(originalGroups.value))
         },
         deployChanges ({ dashboard, page, groups }) {
-            return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value })
+            return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value, editorPath: editorPath.value })
         }
     }
 }

From 2f77c4fe64383931ab56b07f519cc32fbfb82b20 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 1 Nov 2024 18:45:12 +0000
Subject: [PATCH 067/109] Remove new line in Page name

---
 ui/src/layouts/Baseline.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index 2fc124336..220089737 100644
--- a/ui/src/layouts/Baseline.vue
+++ b/ui/src/layouts/Baseline.vue
@@ -6,8 +6,7 @@
             </template>
             <v-app-bar-title>
                 <template v-if="dashboard.showPageTitle === true || dashboard.showPageTitle === undefined">
-                    {{ pageTitle }}
-                    <v-chip v-if="showEditingIconInAppBar" v-tooltip="`${currentEditPage.name} is in edit mode`" color="warning" :to="currentEditPage.type === 'ui-page' ? { name: currentEditPage.route.name } : null">
+                    {{ pageTitle }}<v-chip v-if="showEditingIconInAppBar" v-tooltip="`${currentEditPage.name} is in edit mode`" color="warning" :to="currentEditPage.type === 'ui-page' ? { name: currentEditPage.route.name } : null">
                         <v-icon>mdi-pencil</v-icon>
                     </v-chip>
                 </template>

From ab881dd99fa506e3040f6cb9903c6e5812e6b401 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:15:01 +0000
Subject: [PATCH 068/109] improve i18n

---
 nodes/config/locales/en-US/ui_base.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json
index 5a4acf83a..11279bc31 100644
--- a/nodes/config/locales/en-US/ui_base.json
+++ b/nodes/config/locales/en-US/ui_base.json
@@ -45,7 +45,7 @@
             "collapse": "Collapse",
             "expand": "Expand",
             "delete": "Delete",
-            "spacer": "Spacer",
+            "spacer": "Add Spacer",
             "unattachedGroups": "Unattached Groups"
         },
         "themes": {

From eca44ed5a7f81cf5da6a3d2054f1fd2879079188 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:15:23 +0000
Subject: [PATCH 069/109] init tooltip popover

---
 nodes/widgets/ui_spacer.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/nodes/widgets/ui_spacer.html b/nodes/widgets/ui_spacer.html
index 8692ab2f4..c4b875497 100644
--- a/nodes/widgets/ui_spacer.html
+++ b/nodes/widgets/ui_spacer.html
@@ -48,6 +48,13 @@
                         group: '#node-input-group'
                     })
                 }
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
             },
             oneditsave: function () {
                 this.width = $('#node-input-width').val()

From eff6fd36922c791249ce3d01f98429b53f9fa883 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:15:45 +0000
Subject: [PATCH 070/109] remove sizing error now layout editor is merged

---
 nodes/widgets/ui_spacer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/widgets/ui_spacer.html b/nodes/widgets/ui_spacer.html
index c4b875497..50b969cd2 100644
--- a/nodes/widgets/ui_spacer.html
+++ b/nodes/widgets/ui_spacer.html
@@ -14,7 +14,7 @@
                         const width = v || 0
                         const currentGroup = $('#node-input-group').val() || this.group
                         const groupNode = RED.nodes.node(currentGroup)
-                        const valid = !groupNode || +width <= +groupNode.width
+                        const valid = !groupNode || +width >= 0
                         $('#node-input-size').toggleClass('input-error', !valid)
                         return valid
                     }

From 64c1a540e5ce0d5ae3766a6d641c65c5ad3dd9d7 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:16:10 +0000
Subject: [PATCH 071/109] add missing quotes

---
 nodes/config/ui_base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index dc5202d83..d7b79a3e6 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1086,7 +1086,7 @@
         }
 
         // button to edit node via node-red editor panel
-        const editButton = $(`<a href="#" class="nr-db-sb-tab-edit-button editor-button editor-button-small nr-db-sb-list-header-button" title=${c_('layout.edit')}><i class="fa fa-cog"></i></a>`).appendTo(btnGroup)
+        const editButton = $(`<a href="#" class="nr-db-sb-tab-edit-button editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.edit')}"><i class="fa fa-cog"></i></a>`).appendTo(btnGroup)
         editButton.on('click', function (evt) {
             if (configNodes.includes(item.type)) {
                 RED.editor.editConfig('', item.type, item.id)

From fcd9968c8bcc9ade92d4e926f82d7e51e44945b2 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:16:22 +0000
Subject: [PATCH 072/109] remove unused param

---
 nodes/config/ui_base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index d7b79a3e6..7d879802d 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1073,7 +1073,7 @@
      * @param {DashboardItem} item - The page/group/widget that these actions are bound to
      * @param {Object} list - The editableList instance associated with this item
      */
-    function addRowActions (parent, item, list, other) {
+    function addRowActions (parent, item, list) {
         const configNodes = ['ui-base', 'ui-page', 'ui-link', 'ui-group', 'ui-theme']
         const btnGroup = $('<div>', { class: 'nrdb2-sb-list-header-button-group', id: item.id }).appendTo(parent)
         if (!configNodes.includes(item.type) && item.type !== 'ui-spacer') {

From 84f9f0f7518dad1543f2f8e45f86b704c16b104a Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:16:54 +0000
Subject: [PATCH 073/109] use newer node create/add pattern

---
 nodes/config/ui_base.html | 70 +++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index 7d879802d..fe3e7d236 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -744,6 +744,25 @@
         }
         return linkNode
     }
+
+    function createSpacerNode ({ name, order, group } = {}) {
+        if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createSpacerNode', name, group) }
+        const spacer = RED.nodes.getType('ui-spacer')
+        const spacerNode = {
+            _def: spacer,
+            id: RED.nodes.id(),
+            type: 'ui-spacer',
+            ...mapDefaults(spacer.defaults),
+            users: [],
+            name: name ?? 'spacer',
+            group: group || null,
+            order: order ?? 0,
+            hasUsers: false,
+            dirty: true
+        }
+        return spacerNode
+    }
+
     function createPageNode ({ name, order, layout = 'grid' } = {}) {
         if (RED._db2debug) { console.log('dashboard 2: ui_base.html: createPageNode', name, layout) }
         const page = RED.nodes.getType('ui-page')
@@ -1160,39 +1179,24 @@
                 list.editableList('addItem')
                 evt.preventDefault()
             })
-            // if this is a group & it is not an unattached group, add the "_ spacer" button
-            if (item.type === 'ui-group' && !!item.page) {
-                // add the "+ spacer" button
-                $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-arrows-h"></i> ' + c_('layout.spacer') + '</a>')
-                    .click(function (evt) {
-                        // TODO: refactor this into createSpacer when #1401 is merged', parent, list
-                        const spacer = RED.nodes.getType('ui-spacer')
-                        const spacerNode = {
-                            _def: spacer,
-                            id: RED.nodes.id(),
-                            type: 'ui-spacer',
-                            ...mapDefaults(spacer.defaults),
-                            users: [],
-                            name: 'spacer',
-                            order: list.editableList('items').length + 1,
-                            group: item.id
-                        }
-                        spacerNode.dirty = true
-                        const n = RED.nodes.add(spacerNode)
-                        RED.editor.validateNode(spacerNode)
-                        RED.history.push({
-                            t: 'add',
-                            nodes: [spacerNode.id],
-                            dirty: RED.nodes.dirty()
-                        })
-                        RED.nodes.dirty(true)
-                        const widget = toDashboardItem(spacerNode)
-                        list.editableList('addItem', widget)
-                        RED.editor.edit(n)
-                        evt.preventDefault()
-                    })
-                    .appendTo(btnGroup)
-            }
+        }
+
+        // if this is a group & it is not an unattached group, add the "_ spacer" button
+        if (item.type === 'ui-group' && !!item.page) {
+            // add the "+ spacer" button
+            $(`<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.spacer')}"><i class="fa fa-plus"></i></a>`)
+                .on(function (evt) {
+                    const spacerNode = createSpacerNode({ name: 'spacer', group: item.id, order: list.editableList('items').length + 1 })
+                    const history = []
+                    addNode(spacerNode, history)
+                    assignGroup(spacerNode, item.node, history)
+                    recordEvents(history)
+                    evt.preventDefault()
+                    const widget = toDashboardItem(spacerNode)
+                    list.editableList('addItem', widget)
+                    RED.editor.edit(widget.node)
+                })
+                .appendTo(btnGroup)
         }
     }
 

From 4ff3aae3777b0fe5733f40677171cb054300f71b Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 1 Nov 2024 23:37:15 +0000
Subject: [PATCH 074/109] fix add spacer button

---
 nodes/config/ui_base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index fe3e7d236..fbb039a05 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1185,7 +1185,7 @@
         if (item.type === 'ui-group' && !!item.page) {
             // add the "+ spacer" button
             $(`<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button" title="${c_('layout.spacer')}"><i class="fa fa-plus"></i></a>`)
-                .on(function (evt) {
+                .on('click', function (evt) {
                     const spacerNode = createSpacerNode({ name: 'spacer', group: item.id, order: list.editableList('items').length + 1 })
                     const history = []
                     addNode(spacerNode, history)

From 2eef950bc70fbbef14d908de46e10a2d607a6d7b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 10:20:43 +0000
Subject: [PATCH 075/109] Bump flowfuse/github-actions-workflows from 0.36.0 to
 0.37.0

Bumps [flowfuse/github-actions-workflows](https://github.com/flowfuse/github-actions-workflows) from 0.36.0 to 0.37.0.
- [Commits](https://github.com/flowfuse/github-actions-workflows/compare/v0.36.0...v0.37.0)

---
updated-dependencies:
- dependency-name: flowfuse/github-actions-workflows
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/build-and-test.yml  | 2 +-
 .github/workflows/publish-private.yml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
index c5503650f..50f7e8e25 100644
--- a/.github/workflows/build-and-test.yml
+++ b/.github/workflows/build-and-test.yml
@@ -3,7 +3,7 @@ on:
   pull_request:
 jobs:
   build:
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.36.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.37.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},
diff --git a/.github/workflows/publish-private.yml b/.github/workflows/publish-private.yml
index ded82489e..11702cc93 100644
--- a/.github/workflows/publish-private.yml
+++ b/.github/workflows/publish-private.yml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   build:
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.36.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.37.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},
@@ -16,7 +16,7 @@ jobs:
     needs: build
     if: |
       github.ref == 'refs/heads/main'
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.36.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.37.0'
     with:
       package_name: node-red-dashboard
       publish_package: true

From b7a0341ec2df0d639eb46c3c9e6495a521fa6f78 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 11:17:24 +0000
Subject: [PATCH 076/109] WYSIWYG: Tidy up styling/positioning of the Edit
 Controls

---
 ui/src/components/ConfirmDialog.vue     |  4 +--
 ui/src/layouts/Baseline.vue             |  8 +-----
 ui/src/layouts/wysiwyg/EditControls.vue | 34 ++++++++++++++++++-------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/ConfirmDialog.vue b/ui/src/components/ConfirmDialog.vue
index 25f43d798..04a788219 100644
--- a/ui/src/components/ConfirmDialog.vue
+++ b/ui/src/components/ConfirmDialog.vue
@@ -2,8 +2,8 @@
     <v-dialog v-model="visible" max-width="500">
         <v-card :title="title" :text="message" :prepend-icon="icon">
             <v-card-actions>
-                <v-btn v-if="cancelButton !== null" variant="flat" color="primary" @click="_cancel">{{ cancelButton }}</v-btn>
-                <v-btn v-if="okButton !== null" variant="flat" color="warning" @click="_confirm">{{ okButton }}</v-btn>
+                <v-btn v-if="cancelButton !== null" variant="outlined" color="red" @click="_cancel">{{ cancelButton }}</v-btn>
+                <v-btn v-if="okButton !== null" variant="outlined" color="green-darken-2" @click="_confirm">{{ okButton }}</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index 220089737..280dbb6cb 100644
--- a/ui/src/layouts/Baseline.vue
+++ b/ui/src/layouts/Baseline.vue
@@ -6,9 +6,7 @@
             </template>
             <v-app-bar-title>
                 <template v-if="dashboard.showPageTitle === true || dashboard.showPageTitle === undefined">
-                    {{ pageTitle }}<v-chip v-if="showEditingIconInAppBar" v-tooltip="`${currentEditPage.name} is in edit mode`" color="warning" :to="currentEditPage.type === 'ui-page' ? { name: currentEditPage.route.name } : null">
-                        <v-icon>mdi-pencil</v-icon>
-                    </v-chip>
+                    {{ pageTitle }}
                 </template>
                 <div id="app-bar-title" />
             </v-app-bar-title>
@@ -193,10 +191,6 @@ export default {
                 return this.orderedPages.find(p => p.id === editPage.value)
             }
             return null
-        },
-        showEditingIconInAppBar: function () {
-            // show the edit icon in the app bar if the page is in edit mode and the drawer is closed
-            return !!(this.currentEditPage && (this.drawer === false || this.rail === true))
         }
     },
     watch: {
diff --git a/ui/src/layouts/wysiwyg/EditControls.vue b/ui/src/layouts/wysiwyg/EditControls.vue
index aa71f1eb3..21c2868db 100644
--- a/ui/src/layouts/wysiwyg/EditControls.vue
+++ b/ui/src/layouts/wysiwyg/EditControls.vue
@@ -1,10 +1,11 @@
 <template>
     <div class="nrdb-ui-editor-tray-container">
         <div class="nrdb-ui-editor-tray">
-            <v-btn v-tooltip="'Leave Edit Mode'" :disabled="saveBusy" variant="outlined" icon="mdi-close" color="warning" @click="cancel" />
-            <v-btn v-tooltip="'Discard Changes'" :disabled="!dirty || saveBusy" variant="outlined" color="secondary" icon="mdi-arrow-u-left-top" @click="discard" />
-            <v-btn v-tooltip="'Save Changes'" :disabled="!dirty || saveBusy" variant="flat" icon="mdi-content-save-outline" color="success" :loading="saveBusy" @click="save" />
+            <v-btn v-tooltip="'Leave Edit Mode'" :disabled="saveBusy" variant="outlined" icon="mdi-close" color="red-darken-1" @click="cancel" />
+            <v-btn v-tooltip="'Discard Changes'" :disabled="!dirty || saveBusy" variant="outlined" color="blue" icon="mdi-arrow-u-left-top" @click="discard" />
+            <v-btn v-tooltip="'Save Changes'" :disabled="!dirty || saveBusy" variant="outlined" icon="mdi-content-save-outline" color="green" :loading="saveBusy" @click="save" />
         </div>
+        <div class="nrdb-edit-mode--message">In Edit Mode</div>
     </div>
 </template>
 
@@ -39,20 +40,26 @@ export default {
 <style scoped lang="scss">
 .nrdb-ui-editor-tray-container {
     position: fixed;
-    bottom: 24px;
+    top: 0;
+    left: 0;
+    z-index: 1000;
     width: 100%;
     display: flex;
     justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    --shadow: 0px 0px 5px #000000de;
 }
 .nrdb-ui-editor-tray {
     background-color: white;
     border: 1px solid #ccc;
-    box-shadow: 0px 0px 5px #00000021;
-    padding: 12px;
-    border-radius: 4px;
+    padding: 6px 12px;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
     display: flex;
-    gap: 6px;
-    border-radius: 2rem;
+    gap: 12px;
+    box-shadow: var(--shadow);
+    z-index: 2;
     .v-btn {
         border-radius: 2.6rem;
         // override theme for consistent button size
@@ -65,4 +72,13 @@ export default {
         filter: grayscale(1);
     }
 }
+.nrdb-edit-mode--message {
+    padding: 3px 9px;
+    font-size: 0.875rem;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    background-color: rgb(var(--v-theme-navigation-background));
+    color: rgba(var(--v-theme-on-navigation-background),var(--v-high-emphasis-opacity));
+    box-shadow: var(--shadow);
+}
 </style>

From 0088af4e38c48084d4a7d1dccdff69457b94326a Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 11:41:41 +0000
Subject: [PATCH 077/109] ~WYSIWYG: Fix edit controls taking full width fo the
 page

---
 ui/src/layouts/Grid.vue                 | 5 -----
 ui/src/layouts/wysiwyg/EditControls.vue | 4 ++++
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index ca23763ac..9e3efc1da 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -239,11 +239,6 @@ export default {
     gap: var(--group-gap);
 }
 
-.nrdb-layout--grid > div {
-    width: 100%;
-    /* max-width: 100%; */
-}
-
 .v-card {
     width: 100%;
 }
diff --git a/ui/src/layouts/wysiwyg/EditControls.vue b/ui/src/layouts/wysiwyg/EditControls.vue
index 21c2868db..b3e9c014b 100644
--- a/ui/src/layouts/wysiwyg/EditControls.vue
+++ b/ui/src/layouts/wysiwyg/EditControls.vue
@@ -49,6 +49,10 @@ export default {
     flex-direction: column;
     align-items: center;
     --shadow: 0px 0px 5px #000000de;
+    width: fit-content;
+    left: 50%;
+    right: 50%;
+    transform: translate(-50%);
 }
 .nrdb-ui-editor-tray {
     background-color: white;

From df7609f952c89133b9e3485fcec9dbe81bf19c93 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 11:47:28 +0000
Subject: [PATCH 078/109] Remov unnecessary left declaration

---
 ui/src/layouts/wysiwyg/EditControls.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/layouts/wysiwyg/EditControls.vue b/ui/src/layouts/wysiwyg/EditControls.vue
index b3e9c014b..3dba92489 100644
--- a/ui/src/layouts/wysiwyg/EditControls.vue
+++ b/ui/src/layouts/wysiwyg/EditControls.vue
@@ -41,7 +41,6 @@ export default {
 .nrdb-ui-editor-tray-container {
     position: fixed;
     top: 0;
-    left: 0;
     z-index: 1000;
     width: 100%;
     display: flex;

From 01cfafe8478736c6460d49bf7bf6563caf642ba0 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 11:48:01 +0000
Subject: [PATCH 079/109] Remove unnecessary width declaration

---
 ui/src/layouts/wysiwyg/EditControls.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/layouts/wysiwyg/EditControls.vue b/ui/src/layouts/wysiwyg/EditControls.vue
index 3dba92489..12d32b718 100644
--- a/ui/src/layouts/wysiwyg/EditControls.vue
+++ b/ui/src/layouts/wysiwyg/EditControls.vue
@@ -42,7 +42,6 @@ export default {
     position: fixed;
     top: 0;
     z-index: 1000;
-    width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;

From 663a479452927555f6b8982e95f4beb010fa64d6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 4 Nov 2024 11:54:36 +0000
Subject: [PATCH 080/109] remove Editor as a layout choice

---
 nodes/config/ui_page.html   |  1 -
 nodes/widgets/ui_control.js | 14 ++++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/nodes/config/ui_page.html b/nodes/config/ui_page.html
index b4bdff3a9..8d8fbbfb7 100644
--- a/nodes/config/ui_page.html
+++ b/nodes/config/ui_page.html
@@ -97,7 +97,6 @@
                     types: [{
                         value: 'layout',
                         options: [
-                            { value: 'wysiwyg', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.wysiwyg') },
                             { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') },
                             { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') },
                             { value: 'tabs', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.tabs') },
diff --git a/nodes/widgets/ui_control.js b/nodes/widgets/ui_control.js
index a62d08df4..1f068b80a 100644
--- a/nodes/widgets/ui_control.js
+++ b/nodes/widgets/ui_control.js
@@ -177,13 +177,15 @@ module.exports = function (RED) {
                         // this message was sent by this particular node
                         if (evt === 'change') {
                             const wNode = RED.nodes.getNode(node.id)
-                            let msg = {
-                                payload: 'change',
-                                tab: payload.page, // index of tab
-                                name: payload.name // page name
+                            if (wNode && payload && wNode.send) {
+                                let msg = {
+                                    payload: 'change',
+                                    tab: payload.page, // index of tab
+                                    name: payload.name // page name
+                                }
+                                msg = addConnectionCredentials(RED, msg, conn, ui)
+                                wNode.send(msg)
                             }
-                            msg = addConnectionCredentials(RED, msg, conn, ui)
-                            wNode.send(msg)
                         }
                     }
                 }

From 0a0970a7378958f4f7c9e8dc105ddd0fa0d8753c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 4 Nov 2024 12:45:30 +0000
Subject: [PATCH 081/109] remove temp dev i18n

---
 nodes/config/locales/en-US/ui_page.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/nodes/config/locales/en-US/ui_page.json b/nodes/config/locales/en-US/ui_page.json
index 0465ae0bb..fed5b28f8 100644
--- a/nodes/config/locales/en-US/ui_page.json
+++ b/nodes/config/locales/en-US/ui_page.json
@@ -7,7 +7,6 @@
             "icon": "Icon",
             "theme": "Theme",
             "layout": "Layout",
-            "wysiwyg": "Editor",
             "grid": "Grid",
             "fixed": "Fixed",
             "tabs": "Tabs",

From fc3bde91febb050d079f81f6f8f222658929ceb1 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 4 Nov 2024 13:32:59 +0000
Subject: [PATCH 082/109] fix edit revert

---
 ui/src/layouts/Flex.vue         |  3 ++-
 ui/src/layouts/Grid.vue         |  3 ++-
 ui/src/layouts/wysiwyg/index.js | 16 +++++++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 0b299f3bd..2d4b4e954 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -109,8 +109,8 @@ export default {
         }
     },
     mounted () {
-        this.pageGroups = this.getPageGroups()
         if (this.editMode) { // mixin property
+            this.pageGroups = this.getPageGroups()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -197,6 +197,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
+            this.pageGroups = this.getPageGroups()
         },
         async leaveEditMode () {
             let leave = true
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index 9e3efc1da..e6afc56ad 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -109,8 +109,8 @@ export default {
         }
     },
     mounted () {
-        this.pageGroups = this.getPageGroups()
         if (this.editMode) { // mixin property
+            this.pageGroups = this.getPageGroups()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -197,6 +197,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
+            this.pageGroups = this.getPageGroups()
         },
         async leaveEditMode () {
             let leave = true
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index 0485aabf3..ace1421f3 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -41,7 +41,21 @@ export default {
             exitEditMode() // EditTracking method
         },
         revertEdits () {
-            this.pageGroups = JSON.parse(JSON.stringify(originalGroups.value))
+            const originals = originalGroups.value || []
+            // scan through each group and revert changes
+            const propertiesOfInterest = ['width', 'height', 'order']
+            originals.forEach((originalGroup, index) => {
+                const pageGroup = this.pageGroups?.find(group => group.id === originalGroup.id)
+                if (!pageGroup) {
+                    console.warn('Group not found in pageGroups - as we do not currently support adding/removing groups, this should not happen!')
+                    return
+                }
+                propertiesOfInterest.forEach(property => {
+                    if (originalGroup[property] !== pageGroup[property]) {
+                        pageGroup[property] = originalGroup[property]
+                    }
+                })
+            })
         },
         deployChanges ({ dashboard, page, groups }) {
             return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value, editorPath: editorPath.value })

From de76e2ea605808b39ad865371d260aa87e36990e Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 15:19:44 +0000
Subject: [PATCH 083/109] Fix column sizing issue for widgets

---
 ui/src/layouts/Group.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index a7972c9a4..d0aca8a0a 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -7,7 +7,7 @@
             class="nrdb-ui-widget"
             :class="getWidgetClass(w)"
             style="display: grid"
-            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ w.props.width || columns }, var(--layout-columns))`"
+            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ getWidgetWidth(w.props.width) }, var(--layout-columns))`"
         >
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
         </div>
@@ -70,6 +70,13 @@ export default {
                 classes.push(widget.state.class)
             }
             return classes.join(' ')
+        },
+        getWidgetWidth (width) {
+            if (width) {
+                return Math.min(width, this.columns)
+            } else {
+                return this.columns
+            }
         }
     }
 }

From 29c52a9f0650c8b938b115e58732f43b7899b339 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 4 Nov 2024 15:47:57 +0000
Subject: [PATCH 084/109] persist name

---
 nodes/widgets/ui_spacer.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nodes/widgets/ui_spacer.html b/nodes/widgets/ui_spacer.html
index 50b969cd2..dd9d4f02a 100644
--- a/nodes/widgets/ui_spacer.html
+++ b/nodes/widgets/ui_spacer.html
@@ -27,7 +27,7 @@
             hasUsers: false,
             icon: 'font-awesome/fa-arrows-h',
             paletteLabel: 'spacer',
-            label: function () { return this.name + ' ' + this.width + 'x' + this.height },
+            label: function () { return `${this.name || 'Spacer'} ${this.width} x ${this.height}` },
             labelStyle: function () { return this.name ? 'node_label_italic' : '' },
             oneditprepare: function () {
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
@@ -57,6 +57,7 @@
                 })
             },
             oneditsave: function () {
+                this.name = $('#node-input-name').val()
                 this.width = $('#node-input-width').val()
                 this.height = $('#node-input-height').val()
                 this.className = $('#node-input-className').val()

From b2d7e2adff60a1655eecb2e3f8ad995d7e108284 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 16:34:07 +0000
Subject: [PATCH 085/109] Add edit-mode styling for the spacers

---
 ui/src/layouts/Baseline.vue           |  5 ++++-
 ui/src/widgets/ui-spacer/UISpacer.vue | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index 280dbb6cb..6d0a17879 100644
--- a/ui/src/layouts/Baseline.vue
+++ b/ui/src/layouts/Baseline.vue
@@ -15,7 +15,7 @@
             </template>
         </v-app-bar>
 
-        <v-main>
+        <v-main :class="{'nrdb-edit-mode': editMode}">
             <v-navigation-drawer
                 v-if="navigationStyle !== 'hidden'"
                 v-model="drawer"
@@ -191,6 +191,9 @@ export default {
                 return this.orderedPages.find(p => p.id === editPage.value)
             }
             return null
+        },
+        editMode: function () {
+            return editMode.value
         }
     },
     watch: {
diff --git a/ui/src/widgets/ui-spacer/UISpacer.vue b/ui/src/widgets/ui-spacer/UISpacer.vue
index db016029a..38ee36920 100644
--- a/ui/src/widgets/ui-spacer/UISpacer.vue
+++ b/ui/src/widgets/ui-spacer/UISpacer.vue
@@ -17,3 +17,21 @@ export default {
     }
 }
 </script>
+
+<style>
+.nrdb-edit-mode .nrdb-spacer {
+    background-color: #007cff12;
+    border: 1px dashed #71aafc;
+    border-radius: 4px;
+}
+
+.nrdb-edit-mode .nrdb-spacer:before {
+    content: "spacer";
+    font-style: italic;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #0049ff75;
+}
+</style>

From 07f379789456e179d5984f523249eef0290a7739 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 16:34:21 +0000
Subject: [PATCH 086/109] Remove odd <img> that was adding an extra row to
 every widget

---
 ui/src/layouts/Group.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index a7972c9a4..238d9d0e8 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -25,7 +25,6 @@
                 @dragenter.prevent
             />
         </div>
-        <img ref="blank-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="">
     </div>
 </template>
 

From 9bdabe32943a1f3cc562038b024c672c2e499156 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Mon, 4 Nov 2024 16:43:32 +0000
Subject: [PATCH 087/109] Include spacer dimensions in the holding text

---
 ui/src/widgets/ui-spacer/UISpacer.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/widgets/ui-spacer/UISpacer.vue b/ui/src/widgets/ui-spacer/UISpacer.vue
index 38ee36920..53903c480 100644
--- a/ui/src/widgets/ui-spacer/UISpacer.vue
+++ b/ui/src/widgets/ui-spacer/UISpacer.vue
@@ -12,6 +12,11 @@ export default {
         props: { type: Object, default: () => ({}) },
         state: { type: Object, default: () => ({}) }
     },
+    computed: {
+        placeholderText () {
+            return `"spacer (${this.props.width}x${this.props.height})"`
+        }
+    },
     created () {
         this.$socket.emit('widget-load', this.id)
     }
@@ -26,7 +31,7 @@ export default {
 }
 
 .nrdb-edit-mode .nrdb-spacer:before {
-    content: "spacer";
+    content: v-bind(placeholderText);
     font-style: italic;
     display: flex;
     justify-content: center;

From d5e6613c67ff5eaae67e0beb13a70a8c3c90c423 Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:56:25 +0000
Subject: [PATCH 088/109] Update nodes/widgets/ui_spacer.html

---
 nodes/widgets/ui_spacer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nodes/widgets/ui_spacer.html b/nodes/widgets/ui_spacer.html
index dd9d4f02a..22c73f5ac 100644
--- a/nodes/widgets/ui_spacer.html
+++ b/nodes/widgets/ui_spacer.html
@@ -27,7 +27,7 @@
             hasUsers: false,
             icon: 'font-awesome/fa-arrows-h',
             paletteLabel: 'spacer',
-            label: function () { return `${this.name || 'Spacer'} ${this.width} x ${this.height}` },
+            label: function () { return `${this.name || 'spacer'} (${this.width}x${this.height})` },
             labelStyle: function () { return this.name ? 'node_label_italic' : '' },
             oneditprepare: function () {
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up

From 9d3f123e051d0aecefe48a946da9415f91620bfd Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 4 Nov 2024 21:03:35 +0000
Subject: [PATCH 089/109] Bump for release 1.19.1

---
 package-lock.json | 4 ++--
 package.json      | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 21d616a09..15a70f9c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.18.1",
+    "version": "1.19.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@flowfuse/node-red-dashboard",
-            "version": "1.18.1",
+            "version": "1.19.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "acorn": "^8.11.2",
diff --git a/package.json b/package.json
index 58dfb40e0..0eff9d197 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.18.1",
+    "version": "1.19.0",
     "description": "Dashboard 2.0 - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"
@@ -20,6 +20,10 @@
             "name": "Pez Cuckow",
             "url": "https://github.com/pezmc"
         },
+        {
+            "name": "Steve McLaughlin",
+            "url": "https://github.com/Steve-Mcl"
+        },
         {
             "name": "FlowFuse",
             "url": "https://flowfuse.com"

From d61d028dbdd3f50e0a916f7a1dcde475857416d5 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:45:53 -0600
Subject: [PATCH 090/109] Fix notification docs for msg.show

---
 docs/nodes/widgets/ui-notification.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/nodes/widgets/ui-notification.md b/docs/nodes/widgets/ui-notification.md
index db03921a1..b37002458 100644
--- a/docs/nodes/widgets/ui-notification.md
+++ b/docs/nodes/widgets/ui-notification.md
@@ -43,12 +43,13 @@ dynamic:
     Accept raw html:
         payload: msg.ui_update.raw
         structure: ["Boolean"]
-    Show:
-        payload: msg.ui_update.show
-        structure: ["Boolean"]
     Show countdown bar:
         payload: msg.ui_update.showCountdown
         structure: ["Boolean"]
+controls:
+    show:
+        example: true | false
+        description: Allow control over whether or not the notification is visible.
 ---
 
 <script setup>
@@ -72,6 +73,10 @@ If you want to have the notification show indefinitely, you can set `timeout` to
 
 <DynamicPropsTable/>
 
+## Controls
+
+<ControlsTable/>
+
 ## Example
 
 ![Example of rendered Notification](/images/node-examples/ui-notification.png "Example of rendered Notification"){data-zoomable}

From f97ea353dd3e5cee05d3f7a506b0b6794fc1b8ab Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:03:14 -0600
Subject: [PATCH 091/109] UI-Text Docs Fixes

---
 docs/nodes/widgets/ui-text.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/widgets/ui-text.md b/docs/nodes/widgets/ui-text.md
index cf2f0657c..f19fe5b87 100644
--- a/docs/nodes/widgets/ui-text.md
+++ b/docs/nodes/widgets/ui-text.md
@@ -4,7 +4,7 @@ props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
     Label: The text shown within the button.  Html content is allowed.
-    Layout: Choose how to layout your label (if deifned) & value.
+    Layout: Choose how to layout your label (if defined) & value.
     Style: Checkbox to define whether or not to include custom styling for the text. Enabling this will then show the below options.
     Font: If "style" is enabled, this will define the font of the text.
     Text Size: If "style" is enabled, this will define the size of the text.
@@ -58,7 +58,7 @@ Displays a non-editable text field on the user interface. Each received `msg.pay
 
 ## Adding Prefixes & Suffixes
 
-In Dashboard 1.0 an option existed called `valueFormat` which allowed you to add a prefix or suffix to a `ui-text` widget witin the node's configuration. Whilst valuable, this had a lot of security vulnerabilities, so with Dashboard 2.0 we made the decision to remove it..
+In Dashboard 1.0 an option existed called `valueFormat` which allowed you to add a prefix or suffix to a `ui-text` widget within the node's configuration. Whilst valuable, this had a lot of security vulnerabilities, so with Dashboard 2.0 we made the decision to remove it..
 
 Instead, we take a different approach, and use Node-RED's built-in "template" node:
 

From 93e4b9a747c00a0d64dc3f3ccbf0038f88b2baf5 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:03:34 -0600
Subject: [PATCH 092/109] UI-Text-Input Docs Fixes

---
 docs/nodes/widgets/ui-text-input.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/widgets/ui-text-input.md b/docs/nodes/widgets/ui-text-input.md
index 1ebd24e99..fce8901c6 100644
--- a/docs/nodes/widgets/ui-text-input.md
+++ b/docs/nodes/widgets/ui-text-input.md
@@ -23,7 +23,7 @@ props:
     Send On "Delay": If true, then a msg will be emitted will be sent after the delay specified in "Delay (ms)".
     Delay: If "Send on Delay" is true, then the value in the text input will be send after this (ms) delay.
     Clear selection with button:
-        description: If true, a clear icon/button appears on the rigth side to clear the text input
+        description: If true, a clear icon/button appears on the right side to clear the text input
         dynamic: true
     Send On "Focus Leave": Sends a msg when the text input loses focus. Will always send, even if the value has not changed.
     Send On "Press Enter": Sends a msg when the user presses the enter key. Will always send, even if the value has not changed.
@@ -86,4 +86,4 @@ Adds a single text input row to your dashboard, with a configurable "type" (text
 ## Example
 
 ![Example of Text Inputs Types](/images/node-examples/ui-text-input.png "Example of Text Inputs Types"){data-zoomable}
-*Example of severall Text Inputs Types rendered in a Dashboard.*
+*Example of several Text Inputs Types rendered in a Dashboard.*

From 767d4261961908eefa679fc113b42aeb5fa8cdf9 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:03:58 -0600
Subject: [PATCH 093/109] UI-Template Docs Fixes

---
 docs/nodes/widgets/ui-template.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 773abf833..77857a147 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -2,7 +2,7 @@
 description: Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts.
 props:
     Group: Defines which group of the UI Dashboard this widget will render in.
-    Scope: "Template nodes can be used  for 3 purposes/scopes: <ul><li><b>Widget (Group-Scoped):</b>A standard HTML/Vue widget rendered in a group in the Dashboard.</li><li><b>Widget (Page-Scoped):</b>A HTML/Vue widget that will render on a page, outside of any existing groups. Note that these widgets will render after any Groups. An example use case for this would be if you wanted to have a fixed footer on a given page.</li><li><b>Widget (UI-Scoped):</b>A HTML/Vue widget rendered on every page of the Dashboard. Most commonly used in conjuction with <a href=\"#teleports\">Teleports</a></li><li><b>CSS (All Pages):</b>Define custom CSS classes/styling that applies to the entire Dashboard.</li><li><b>CSS (Single Page):</b>Define custom CSS classes/styling that applies just a single page of your Dashboard.</li></ul>"
+    Scope: "Template nodes can be used  for 3 purposes/scopes: <ul><li><b>Widget (Group-Scoped):</b>A standard HTML/Vue widget rendered in a group in the Dashboard.</li><li><b>Widget (Page-Scoped):</b>A HTML/Vue widget that will render on a page, outside of any existing groups. Note that these widgets will render after any Groups. An example use case for this would be if you wanted to have a fixed footer on a given page.</li><li><b>Widget (UI-Scoped):</b>A HTML/Vue widget rendered on every page of the Dashboard. Most commonly used in conjunction with <a href=\"#teleports\">Teleports</a></li><li><b>CSS (All Pages):</b>Define custom CSS classes/styling that applies to the entire Dashboard.</li><li><b>CSS (Single Page):</b>Define custom CSS classes/styling that applies just a single page of your Dashboard.</li></ul>"
     Class: Appends CSS classes to the widget
     Template: The content of the widget or CSS &lt;style&gt;. If using this for CSS, you do not need to include any &lt;style&gt; tags, as these will be automatically added.
 ---
@@ -89,7 +89,7 @@ You have access to a number of built-in variables in your `ui-template` node:
 
 When accessing the `msg` variable inside a `<script />` tag, you need to prefix the variable name with `this.` (e.g. `this.msg.payload`) so that it knows you're accessing the component-bound `msg` variable.
 
-***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested property will throw an error. Using the **optional chaining** (?.) operator, e.g. `msg.payload?.nested?.property` will prevent these errors occuring.
+***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested property will throw an error. Using the **optional chaining** (?.) operator, e.g. `msg.payload?.nested?.property` will prevent these errors occurring.
 
 #### Accessing Node-RED Global/Flow Context
 
@@ -436,7 +436,7 @@ Whenever a `ui-template` receives a `msg` in Node-RED, that is automatically ass
 Two exposed methods, `send` and `submit`, allow you to send messages from the Dashboard to the Node-RED flow. 
 
 - `send` - Outputs a message (defined by the input to this function call) from this node in the Node-RED flow. 
-- `submit` - Send a `FormData` object when attached to a `<form>` element. The created object will consnist of the `name` attributes for each form element, corresponding to their respective `value` attributes.
+- `submit` - Send a `FormData` object when attached to a `<form>` element. The created object will consist of the `name` attributes for each form element, corresponding to their respective `value` attributes.
 
 #### Sending on Click
 Here, we call it when someone clicks our "Send Hello World" button:

From 3ba52ff4f666a4748f146a771b1eea763f708d63 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:04:12 -0600
Subject: [PATCH 094/109] UI-Table Docs Fixes

---
 docs/nodes/widgets/ui-table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
index af4f900cb..7550ca807 100644
--- a/docs/nodes/widgets/ui-table.md
+++ b/docs/nodes/widgets/ui-table.md
@@ -53,7 +53,7 @@ Renders a set of data in a tabular format. Expects an input (`msg.payload`) in t
 }]
 ```
 
-The table will be rendered with colums `colA`, `colB` and `colC`, unless "Columns" are explicitely defined on the node, with "Auto Columns" toggled off.
+The table will be rendered with columns `colA`, `colB` and `colC`, unless "Columns" are explicitly defined on the node, with "Auto Columns" toggled off.
 
 You can also send a single piece of data to append to the existing table, in this case, the `ui-table` expects an input (`msg.payload`) in the format of:
 

From 268589ab4f6329a036ebd97d13be1e78cb75a8d4 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:04:25 -0600
Subject: [PATCH 095/109] UI-Spacer Docs Fixes

---
 docs/nodes/widgets/ui-spacer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-spacer.md b/docs/nodes/widgets/ui-spacer.md
index 9a0925756..e27ba8c7e 100644
--- a/docs/nodes/widgets/ui-spacer.md
+++ b/docs/nodes/widgets/ui-spacer.md
@@ -27,7 +27,7 @@ This widget allows users to add a simple spacer to their dashboard groups, aidin
 
 _Currently_
 * the spacer widgets belong to the global flow and are not exported along with the group unless the entire flow is exported. This means that if you want to export a group with spacer widgets, you will need to either export the entire flow or add the spacer widgets manually after importing the group.
-* Editing a spacer is only possible on the Dashboard 2.0 sidbar and not from the the Node-RED config sidebar.
+* Editing a spacer is only possible on the Dashboard 2.0 sidebar and not from the the Node-RED config sidebar.
 
 ## Using the Spacer Widget
 

From 0f76bb0f4ae0fbb033756dc79e868b2dedc0b23e Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:04:47 -0600
Subject: [PATCH 096/109] UI-Radio-Group Docs Fixes

---
 docs/nodes/widgets/ui-radio-group.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/widgets/ui-radio-group.md b/docs/nodes/widgets/ui-radio-group.md
index 61ec64821..3e9715a77 100644
--- a/docs/nodes/widgets/ui-radio-group.md
+++ b/docs/nodes/widgets/ui-radio-group.md
@@ -6,10 +6,10 @@ props:
         description: The text shown above the radio group to inform the user of what options are available.  Html content is allowed.
         dynamic: true
     Options:
-        description: A list of the options available in the radio group. Each row defines a `label` (shown alongisde each radio button) and `value` (emitted on selection) property.
+        description: A list of the options available in the radio group. Each row defines a `label` (shown alongside each radio button) and `value` (emitted on selection) property.
         dynamic: true
     Columns:
-        description: The number of grid columns within which to render the radio group. This is useful for when you want to render the options horizontally, or if you have many ptions and want to save vertical space.
+        description: The number of grid columns within which to render the radio group. This is useful for when you want to render the options horizontally, or if you have many options and want to save vertical space.
         dynamic: true
     Topic: The `msg.topic` that will be included in any emitted values
 dynamic:

From 52b80118198042f12e5a21770fd40e891d39ef5c Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:05:06 -0600
Subject: [PATCH 097/109] UI-Number-Input Docs Fixes

---
 docs/nodes/widgets/ui-number-input.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/widgets/ui-number-input.md b/docs/nodes/widgets/ui-number-input.md
index 58f2ec49d..45263e9a2 100644
--- a/docs/nodes/widgets/ui-number-input.md
+++ b/docs/nodes/widgets/ui-number-input.md
@@ -31,7 +31,7 @@ props:
         description: The number shown when hovering over the number input field.
     Passthrough: If this node receives a msg in Node-RED, should it be passed through to the output as if a new value was inserted to the input?
     Clear selection with button:
-        description: If true, a clear icon/button appears on the rigth side to clear the number input.
+        description: If true, a clear icon/button appears on the right side to clear the number input.
         dynamic: true
     Send On "Clear Button": Send a msg when the user clear the number input using the clear button, the "Clear Selection" button must be enabled.
 controls:
@@ -102,4 +102,4 @@ Adds a single number input row to your dashboard.
 ## Example
 
 ![Example of Number Inputs Types](/images/node-examples/ui-number-input.png "Example of Number Inputs Types"){data-zoomable}
-*Example of severall Number Inputs Types rendered in a Dashboard.*
+*Example of several Number Inputs Types rendered in a Dashboard.*

From 370da40a65ca76937534d26fe2034696bca0ec59 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:05:22 -0600
Subject: [PATCH 098/109] UI-Notification Docs Fixes

---
 docs/nodes/widgets/ui-notification.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-notification.md b/docs/nodes/widgets/ui-notification.md
index db03921a1..18031999d 100644
--- a/docs/nodes/widgets/ui-notification.md
+++ b/docs/nodes/widgets/ui-notification.md
@@ -2,7 +2,7 @@
 description: Notify users of important updates and alerts with ui-notification in Node-RED Dashboard 2.0.
 props:
     UI: Unlike most widgets, notifications are owned by a "UI", not Group. This allows for notifications to be displayed across all pages.
-    Position: The position on the screen whethere the notification will appear.
+    Position: The position on the screen where the the notification will appear.
     Color: The color that should be used for the notification border.
     Timeout: Number of seconds before the notification will automatically close.
     Show Countdown Bar: Whether or not to show a reducing progress bar to indicate the time remaining before the notification will close.

From 5e7ab31400afbe7a644896b901a5e8a65da3b67c Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:05:37 -0600
Subject: [PATCH 099/109] UI-Markdown Docs Fixes

---
 docs/nodes/widgets/ui-markdown.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-markdown.md b/docs/nodes/widgets/ui-markdown.md
index e0d7e87fc..81d73ca4c 100644
--- a/docs/nodes/widgets/ui-markdown.md
+++ b/docs/nodes/widgets/ui-markdown.md
@@ -106,7 +106,7 @@ graph TD;
 
 ### Dynamic Mermaid Charts
 
-It is also possible to inject `msg` values into the mermaid chart definition using mustache templating as with the standard Makrdown definition, e.g:
+It is also possible to inject `msg` values into the mermaid chart definition using mustache templating as with the standard Markdown definition, e.g:
 
 ````md
 # Here is some Markdown

From e3073970879fe31adbb67b427ee4c557975ea4bd Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:06:04 -0600
Subject: [PATCH 100/109] UI-Event Docs Fixes

---
 docs/nodes/widgets/ui-event.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nodes/widgets/ui-event.md b/docs/nodes/widgets/ui-event.md
index 78c7eff66..5544878ab 100644
--- a/docs/nodes/widgets/ui-event.md
+++ b/docs/nodes/widgets/ui-event.md
@@ -60,7 +60,7 @@ msg = {
 
 ## Custom Events
 
-In your own `ui-template` nodes, you can emit custom events that will get captured by any `ui-event` node calling the embeded `$socket` operator directly. 
+In your own `ui-template` nodes, you can emit custom events that will get captured by any `ui-event` node calling the embedded `$socket` operator directly. 
 
 The `$socket.emit` function takes in 3 arguments:
 
@@ -74,7 +74,7 @@ So in the case where we want to send to a specific `ui-event` node:
 <v-btn @click="$socket.emit('ui-event', 'ui-event-node-id', msg)">Send Custom Event</v-btn>
 ```
 
-Or, in the case where we brodcast to _all_ `ui-event` nodes:
+Or, in the case where we broadcast to _all_ `ui-event` nodes:
 
 ```vue
 <v-btn @click="$socket.emit('ui-event', 'all', msg)">Send Custom Event</v-btn>

From b00450f31e2531668d9e1eea158b767486be708d Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 16:06:17 -0600
Subject: [PATCH 101/109] UI-Control Docs Fixes

---
 docs/nodes/widgets/ui-control.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/nodes/widgets/ui-control.md b/docs/nodes/widgets/ui-control.md
index 0e6e28efd..92b2bec56 100644
--- a/docs/nodes/widgets/ui-control.md
+++ b/docs/nodes/widgets/ui-control.md
@@ -37,11 +37,11 @@ Currently, we support the following controls:
 
 ### Navigation
 
-You can programmaticaly force navigation with the following payloads with `ui-control`:
+You can programmatically force navigation with the following payloads with `ui-control`:
 
 #### Change Page
 
-Explicitely choose the page you want to navigate to:
+Explicitly choose the page you want to navigate to:
 
 ```js
 // String
@@ -98,7 +98,7 @@ msg.payload = {
 
 ### Show/Hide
 
-You can programmaticaly show/hide groups and pages with the following payload into `ui-control`:
+You can programmatically show/hide groups and pages with the following payload into `ui-control`:
 
 ```js
 msg.payload = {
@@ -117,7 +117,7 @@ _Note:_ `pages` can be subbed with `tabs` as per Dashboard 1.0 and `groups` can
 
 ### Enable/Disable
 
-You can programmaticaly disable/enable groups and pages with the following payload into `ui-control`:
+You can programmatically disable/enable groups and pages with the following payload into `ui-control`:
 
 ```js
 msg.payload = {

From b6e3595635672b7db5dc289c7772cab7ee1b9918 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:45:22 -0600
Subject: [PATCH 102/109] Add ui-table title using config label

---
 nodes/widgets/locales/en-US/ui_table.json | 1 +
 nodes/widgets/ui_table.html               | 8 ++++++--
 ui/src/widgets/ui-table/UITable.vue       | 8 ++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/nodes/widgets/locales/en-US/ui_table.json b/nodes/widgets/locales/en-US/ui_table.json
index bf2978df8..9ca04b9a1 100644
--- a/nodes/widgets/locales/en-US/ui_table.json
+++ b/nodes/widgets/locales/en-US/ui_table.json
@@ -9,6 +9,7 @@
             "key": "key:",
             "value": "Value",
             "label": "Label",
+            "optionalTableTitle": "optional label",
             "type": "Type",
             "width": "Width",
             "align": "Align",
diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
index 055a2bd98..570d1a9cf 100644
--- a/nodes/widgets/ui_table.html
+++ b/nodes/widgets/ui_table.html
@@ -65,7 +65,7 @@
             defaults: {
                 group: { type: 'ui-group', required: true },
                 name: { value: '' },
-                label: { value: 'text' },
+                label: { value: '' },
                 order: { value: 0 },
                 width: {
                     value: 0,
@@ -97,7 +97,7 @@
             icon: 'font-awesome/fa-table',
             paletteLabel: 'table',
             label: function () {
-                return this.name || 'table'
+                return this.name || this.label || 'table'
             },
             oneditprepare: function () {
                 // handle backward compatibility
@@ -332,6 +332,10 @@
         <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-table.label.height">Height</label>
         <input type="hidden" id="node-input-height">
     </div>
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-table.label.label"></span></label>
+        <input type="text" id="node-input-label" data-i18n="[placeholder]ui-table.label.optionalTableTitle">
+    </div>
     <div class="form-row">
         <label for="node-input-maxrows"><i class="fa fa-tag"></i> <span data-i18n="ui-table.label.maxRows"></label>
         <input type="number" id="node-input-maxrows">
diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index a22d64986..afd3ce367 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -1,4 +1,5 @@
 <template>
+    <label v-if="props.label" ref="title" class="nrdb-ui-table-title">{{ props.label }}</label>
     <v-text-field
         v-if="props.showSearch"
         v-model="search"
@@ -325,4 +326,11 @@ export default {
     --mobile-border-opacity: calc(var(--v-border-opacity) * 0.5);
     border-bottom: thin solid rgba(var(--v-border-color), var(--mobile-border-opacity)) !important;
 }
+.nrdb-ui-table-title {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1rem;
+    padding-bottom: 4px;
+}
 </style>

From ebbf9eb09cd888b609aa61ea2c2f9e3c6ad931ec Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:50:48 -0600
Subject: [PATCH 103/109] Update ui-table docs concerning label

---
 docs/nodes/widgets/ui-table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
index af4f900cb..c9af4bcdb 100644
--- a/docs/nodes/widgets/ui-table.md
+++ b/docs/nodes/widgets/ui-table.md
@@ -3,7 +3,7 @@ description: Display and manage complex datasets with ease using the ui-table wi
 props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
-    Label: The text shown within the button.
+    Label: The text shown above the table, labelling what the table is showing.
     Max Rows: Defines the maximum number of data-rows to render in the table. Excess rows will be available through pagination control. Set to "0" for no pagination.
     Breakpoint: Controls when a table will render, instead, as a card, with each column from a row rendering as a row in a larger, contain a row, for a single entry.The breakpoint is measured based on the <b>width of the table</b>, not the width of the screen.
     Selection: Provides three options for table interaction - "None", "Click" and "Checkbox"

From 203ce4335afed8f3e91903fd81731c65ad666702 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 20:35:04 -0600
Subject: [PATCH 104/109] Fix "unmounted" spelling

---
 ui/src/widgets/ui-table/UITable.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index afd3ce367..85e817ef9 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -156,6 +156,9 @@ export default {
         this.updateIsMobile()
         window.addEventListener('resize', this.updateIsMobile)
     },
+    unmounted () {
+        window.removeEventListener('resize', this.updateIsMobile)
+    },
     methods: {
         formatPayload (value) {
             if (value !== null && typeof value !== 'undefined') {
@@ -255,9 +258,6 @@ export default {
             }
             return true
         }
-    },
-    unounted () {
-        window.removeEventListener('resize', this.updateIsMobile)
     }
 }
 </script>

From 44d11bed33f5a43e8dd05285a7823edbf7358e9c Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 21:11:11 -0600
Subject: [PATCH 105/109] Allow specifying target for opening external URLs in
 new tab

---
 ui/src/widgets/ui-control/UIControl.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/widgets/ui-control/UIControl.vue b/ui/src/widgets/ui-control/UIControl.vue
index b435c7622..d2b03f090 100644
--- a/ui/src/widgets/ui-control/UIControl.vue
+++ b/ui/src/widgets/ui-control/UIControl.vue
@@ -216,8 +216,13 @@ export default {
             }
 
             if ('url' in payload) {
-                // we are setting the url
-                window.location.href = payload.url
+                if ('target' in payload) {
+                    // Open the link in a new browser window or tab
+                    window.open(payload.url, payload.target)
+                } else {
+                    // Open the link in the same window
+                    window.location.href = payload.url
+                }
             }
         })
     },

From b2f1f0a05187986a9f2b909181cacd2f07846408 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 21:12:35 -0600
Subject: [PATCH 106/109] Update ui-control docs for specifying target

---
 docs/nodes/widgets/ui-control.md            | 9 +++++++++
 nodes/widgets/locales/en-US/ui_control.html | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/docs/nodes/widgets/ui-control.md b/docs/nodes/widgets/ui-control.md
index 0e6e28efd..f832ade7f 100644
--- a/docs/nodes/widgets/ui-control.md
+++ b/docs/nodes/widgets/ui-control.md
@@ -94,6 +94,15 @@ If you want to trigger navigation to an external resource or website, you can do
 msg.payload = {
     url: 'https://nodered.org'
 }
+```
+
+ You can also specify a `target` property to open the website in a new browser window or tab.
+ 
+```js
+msg.payload = {
+    url: 'https://nodered.org',
+    target: '_blank'
+}
 ```
 
 ### Show/Hide
diff --git a/nodes/widgets/locales/en-US/ui_control.html b/nodes/widgets/locales/en-US/ui_control.html
index 13d50cc8b..fe435bf2e 100644
--- a/nodes/widgets/locales/en-US/ui_control.html
+++ b/nodes/widgets/locales/en-US/ui_control.html
@@ -48,6 +48,11 @@ <h4>External URL</h4>
     <p>It is possible to trigger navigation to an external site, away from your Dashboard by passing in a URL string.</p>
     <pre>msg.payload = {
     url: 'https://url.goes.here'
+}</pre>
+    <p>You can also specify a target to open the link in a new browser window or tab.</p>
+    <pre>msg.payload = {
+    url: 'https://url.goes.here',
+    target: '_blank'
 }</pre>
     <h3>Events List</h3>
     <p>When any browser client connects or loses connection, changes tab, or expands or collapses a group this node will emit a <code>msg</code> containing:</p>

From 59311ab780e52768c743492b95733cce42ef0db8 Mon Sep 17 00:00:00 2001
From: cgjgh <160297365+cgjgh@users.noreply.github.com>
Date: Mon, 4 Nov 2024 21:13:10 -0600
Subject: [PATCH 107/109] Fix ui-control placeholder name in config

---
 nodes/widgets/ui_control.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nodes/widgets/ui_control.html b/nodes/widgets/ui_control.html
index 99763559b..8e4105249 100644
--- a/nodes/widgets/ui_control.html
+++ b/nodes/widgets/ui_control.html
@@ -36,8 +36,8 @@
 
 <script type="text/html" data-template-name="ui-control">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui-control.label.name"></span></label>
-        <input type="text" id="node-input-name" data-i18n="[placeholder]ui-control.placeholder.name">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
+        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
         <label for="node-input-ui"><i class="fa fa-bookmark"></i> UI</label>

From 0a11665d8f5fe04548f96a41ddb38eba2bd7fbb2 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 6 Nov 2024 15:54:42 +0000
Subject: [PATCH 108/109] WYSIWYG - Add in empty img for dragging functionality

---
 ui/src/layouts/Group.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index a901ac300..f9e147813 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -25,6 +25,7 @@
                 @dragenter.prevent
             />
         </div>
+        <img ref="blank-img" style="position: absolute;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="">
     </div>
 </template>
 

From 58b1b573ded80c3ed753eae34376e18ac3cec2dd Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Wed, 6 Nov 2024 16:08:51 +0000
Subject: [PATCH 109/109] v1.19.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 15a70f9c1..6e3a3fd17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.19.0",
+    "version": "1.19.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@flowfuse/node-red-dashboard",
-            "version": "1.19.0",
+            "version": "1.19.1",
             "license": "Apache-2.0",
             "dependencies": {
                 "acorn": "^8.11.2",
diff --git a/package.json b/package.json
index 0eff9d197..356b68a34 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.19.0",
+    "version": "1.19.1",
     "description": "Dashboard 2.0 - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"