Update to 1.0.22 of dashboard-2

.github/ISSUE_TEMPLATE/bug.yml

@@ -37,11 +37,11 @@ body:
   id: estimation
   attributes:
     label: Have you provided an initial effort estimate for this issue?
-    description: See our [handbook](https://flowfuse.com/handbook/development/releases/planning/#effort-estimation) for more details.
+    description: See our [handbook](https://flowfuse.com/handbook/development/project-management/#sizing-issues) for more details.
     multiple: false
     options:
       - I have provided an initial effort estimate
       - I am not a FlowFuse team member
       - I can not provide an initial effort estimate
   validations:
-      required: true
+      required: true

.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.37.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.38.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},

.github/workflows/publish-private.yml

@@ -4,9 +4,13 @@ on:
     branches:
       - main
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.37.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/build_node_package.yml@v0.38.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},
@@ -16,7 +20,7 @@ jobs:
     needs: build
     if: |
       github.ref == 'refs/heads/main'
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.37.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.38.0'
     with:
       package_name: node-red-dashboard
       publish_package: true

cypress/fixtures/flows/dashboard-slider.json

@@ -329,5 +329,149 @@
                 "dashboard-ui-slider"
             ]
         ]
+    },
+    {
+        "id": "dashboard-ui-button-dynamic-textfield",
+        "type": "ui-button",
+        "z": "node-red-tab-slider",
+        "group": "dashboard-ui-group",
+        "name": "Show Text Field",
+        "label": "Show Text Field",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "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": 180,
+        "y": 280,
+        "wires": [
+            [
+                "dashboard-ui-set-property-textfield"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-ui-set-property-textfield",
+        "type": "change",
+        "z": "node-red-tab-slider",
+        "name": "",
+        "rules": [
+            {
+                "t": "delete",
+                "p": "payload",
+                "pt": "msg"
+            },
+            {
+                "t": "delete",
+                "p": "topic",
+                "pt": "msg"
+            },
+            {
+                "t": "set",
+                "p": "ui_update.showTextField",
+                "pt": "msg",
+                "to": "true",
+                "tot": "bool"
+            }
+        ],
+        "action": "",
+        "property": "",
+        "from": "",
+        "to": "",
+        "reg": false,
+        "x": 380,
+        "y": 280,
+        "wires": [
+            [
+                "dashboard-ui-slider"
+            ]
+        ]
+    },
+    {
+      "id": "dashboard-ui-set-property-step",
+      "type": "change",
+      "z": "node-red-tab-slider",
+      "name": "",
+      "rules": [
+        {
+          "t": "delete",
+          "p": "payload",
+          "pt": "msg"
+        },
+        {
+          "t": "delete",
+          "p": "topic",
+          "pt": "msg"
+        },
+        {
+          "t": "set",
+          "p": "msg.ui_update.step",
+          "pt": "msg",
+          "to": "2",
+          "tot": "num"
+        }
+      ],
+      "action": "",
+      "property": "",
+      "from": "",
+      "to": "",
+      "reg": false,
+      "x": 380,
+      "y": 320,
+      "wires": [["dashboard-ui-slider"]]
+    },
+    {
+      "id": "dashboard-ui-button-dynamic-step",
+      "type": "ui-button",
+      "z": "node-red-tab-slider",
+      "group": "dashboard-ui-group",
+      "name": "Set Step",
+      "label": "Set Step",
+      "order": 0,
+      "width": 0,
+      "height": 0,
+      "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": 160,
+      "y": 320,
+      "wires": [["dashboard-ui-set-property-step"]]
     }
 ]

cypress/tests/widgets/slider.spec.js

@@ -47,4 +47,63 @@ describe('Node-RED Dashboard 2.0 - Slider (Dynamic Properties)', () => {
         // check the min value is updated
         cy.get('#nrdb-ui-widget-dashboard-ui-slider').find('.v-slider-thumb').should('have.attr', 'aria-valuemax', '50')
     })
+    it('include "showTextField"', () => {
+        // First, check that the text field does not exist
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider').within(() => { cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('not.exist') })
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-dynamic-textfield'))
+        // Check if the text field is present when showTextField is true
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider').within(() => { cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('exist') })
+    })
+})
+
+describe('Node-RED Dashboard 2.0 - Slider (Text Field Input)', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-slider')
+        cy.visit('/dashboard/page1')
+    })
+
+    it('text field emits a value on blur', () => {
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field'), 200)
+        // then we can type into the input
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').type('{selectall}{del}40')
+        cy.focused().blur()
+        cy.checkOutput('msg.payload', 40)
+    })
+
+    it('text field validation for max value', () => {
+        // Extract the max value from the slider thumb and store it in a variable
+        // eslint-disable-next-line promise/always-return, promise/catch-or-return
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').invoke('attr', 'max').then((maxValue) => {
+            const greaterThanMaxValue = parseInt(maxValue) + 10
+            cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field'), 200)
+            // then we can type into the input
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').type(`{selectall}{del}${greaterThanMaxValue}`)
+            cy.focused().blur()
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('have.value', maxValue)
+        })
+    })
+    it('text field validation for min value', () => {
+        // Extract the min value from the slider thumb and store it in a variable
+        // eslint-disable-next-line promise/catch-or-return, promise/always-return
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').invoke('attr', 'min').then((minValue) => {
+            const lessThanMinValue = parseInt(minValue) - 20
+            cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field'), 200)
+            // then we can type into the input
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').type(`{selectall}{del}${lessThanMinValue}`)
+            cy.focused().blur()
+            cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('have.value', minValue)
+        })
+    })
+
+    it('text field rounds input to nearest step', () => {
+        // eslint-disable-next-line promise/catch-or-return, promise/always-return
+
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-dynamic-step'))
+
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field'), 200)
+        // then we can type into the input
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').type('{selectall}{del}27')
+        cy.focused().blur()
+        cy.get('#nrdb-ui-widget-dashboard-ui-slider-text-field').should('have.value', 28)
+    })
 })

docs/.vitepress/config.js

@@ -130,6 +130,7 @@ export default ({ mode }) => {
               text: 'Widgets',
               collapsed: false,
               items: [
+                { text: 'ui-audio', link: '/nodes/widgets/ui-audio' },
                 { text: 'ui-button', link: '/nodes/widgets/ui-button' },
                 { text: 'ui-button-group', link: '/nodes/widgets/ui-button-group' },
                 { text: 'ui-control', link: '/nodes/widgets/ui-control' },

docs/contributing/guides/events.md

@@ -54,6 +54,14 @@ Some examples of events that are emitted from the Dashboard to Node-RED include:
 - `widget-action` - When a user interacts with a widget, and state of the widget is not important, e.g. a button click
 - `widget-send` - Used by `ui-template` to send a custom `msg` object, e.g. `send(msg)`, which will be stored in the server-side data store.
 
+#### Syncing Widgets
+
+The `widget-change` event is used to emit input from the server, and represents a change of state for that widget, e.g. a switch can be on/off by a user clicking it. In this case, if you have multiple clients connected to the same Node-RED instance, Dashboard will ensure that clients are in-sync when values change. 
+
+For Example if you move a slider on one instance of the Dashboard, all sliders connected will also auto-update.
+
+To disable this "single source of truth" design pattern, you can check the widget type in the ["Client Data"](../../user/multi-tenancy#configuring-client-data) tab of the Dashboard settings.
+
 ## Events List
 
 This is a comprehensive list of all events that are sent between Node-RED and the Dashboard via socket.io.
@@ -100,6 +108,11 @@ and the `widget-change` received a new value of `40`, then the newly emitted mes
 
 Any value received here will also be stored against the widget in the datastore.
 
+### `widget-sync`
+- Payload: `<msg>`
+
+Triggered from the server-side `onChange` handler. This send a message out to all connected clients and informs relevant widgets of state/value changes. For example, when a slider is moved, the `widget-sync` message will ensure all connected clients, and their respective slider, are updated with the new value.
+
 ### `widget-action`
 - ID: `<node-id>`
 - Payload: `<msg>`

docs/contributing/guides/registration.md

@@ -100,7 +100,8 @@ Similar to `onAction`, when used as a boolean, this flag will trigger the defaul
 2. Appends any `msg.topic` defined on the node config
 3. Runs `evts.beforeSend()` _(if provided)_
 4. Store the most recent message on the widget under the `._msg` property which will contain the latest state/value of the widget
-5. Sends the `msg` onwards to any connected nodes
+5. Pushes a `widget-sync` event to synchronize the widgets in all clients.
+6. Sends the `msg` onwards to any connected nodes
 
 #### Custom `onChange` Handler
 
@@ -111,8 +112,10 @@ Alternatively, you can override this default behaviour by providing a custom `on
  * Handle the input from the widget
  * @param {object} msg - the last known msg received (prior to this new value)
  * @param {boolean} value - the updated value sent by the widget
+ * @param {Socket} conn - socket.io socket connecting to the server
+ * @param {String} id - widget id sending the action
  */
-onChange: async function (msg, value) {
+onChange: async function (msg, value, conn, id) {
     // ensure we have latest instance of the widget's node
     const wNode = RED.nodes.getNode(node.id)
 
@@ -127,6 +130,10 @@ onChange: async function (msg, value) {
     const off = RED.util.evaluateNodeProperty(config.offvalue, config.offvalueType, wNode)
     msg.payload = value ? on : off
 
+    // sync this change to all clients with the same widget
+    const exclude = [conn.id] 
+    base.emit('widget-sync:' + id, msg, node, exclude)
+
     // simulate Node-RED node receiving an input
     wNode.send(msg)
 }

docs/contributing/index.md

@@ -56,6 +56,8 @@ A [VitePress](https://vitepress.dev/) documentation site that is used to generat
     ```bash
     npm run build
     ```
+   Alternatively, use `npm run build:dev` to build a developer version or use `npm run dev` to build a developer version and watch for changes (hot reload)
+
 
 ### Install into Node-RED
 

docs/examples/chart-bar-election-grouped.json

@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]

docs/examples/chart-bar-finance-grouped.json

@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]

docs/examples/chart-bar-sw-characters.json

@@ -207,7 +207,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -229,4 +229,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]