Merge remote-tracking branch 'origin/main' into UI-Text-Fix

FlowFuse · Nov 11, 2024 · 6ca71bf · 6ca71bf
2 parents f23aba5 + 767baa6
commit 6ca71bf
Show file tree

Hide file tree

Showing 77 changed files with 2,321 additions and 299 deletions.
diff --git 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.37.0'
     with:
       node: '[
               {"version": "18", "tests": true, "lint": true},

diff --git 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.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.35.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.37.0'
     with:
       package_name: node-red-dashboard
       publish_package: true

diff --git 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/fixtures/flows/dashboard-spacer.json 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": [
+            []
+        ]
+    }
+]
diff --git 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')
     })
 })
diff --git a/cypress/tests/widgets/spacer.spec.js 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
+    })
+})
diff --git 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/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.
+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.
diff --git 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-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

diff --git 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
@@ -94,11 +94,20 @@ 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
 
-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 +126,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 = {

diff --git 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>

diff --git 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

diff --git 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.
@@ -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}

diff --git 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.*