Merge pull request #633 from FlowFuse/ui-control-group-hide

UI Control: Ensure better error reporting for ui-control when group/pages not found & update tests
FlowFuse · Mar 6, 2024 · 824985c · 824985c
2 parents fe49b1b + 6af128d
commit 824985c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 35 deletions.
diff --git a/cypress/fixtures/flows/dashboard-controls.json b/cypress/fixtures/flows/dashboard-controls.json
@@ -12,6 +12,7 @@
         "type": "ui-base",
         "name": "UI Name",
         "path": "/dashboard",
+        "navigationStyle": "fixed",
         "includeClientData": true,
         "acceptsClientConfig": [
             "ui-notification",
@@ -29,7 +30,7 @@
         "theme": "dashboard-ui-theme",
         "order": -1,
         "className": "",
-        "visible": "true",
+        "visible": true,
         "disabled": false
     },
     {
@@ -43,7 +44,7 @@
         "theme": "dashboard-ui-theme",
         "order": -1,
         "className": "",
-        "visible": "true",
+        "visible": true,
         "disabled": false
     },
     {
@@ -57,7 +58,7 @@
         "theme": "dashboard-ui-theme",
         "order": -1,
         "className": "",
-        "visible": "true",
+        "visible": true,
         "disabled": false
     },
     {
@@ -364,7 +365,7 @@
         "bgcolor": "",
         "className": "",
         "icon": "",
-        "payload": "{\"pages\":{\"hide\":[\"Page 2\"]}}",
+        "payload": "{\"pages\":{\"show\":[\"Page 1\"]}}",
         "payloadType": "json",
         "topic": "topic",
         "topicType": "msg",

diff --git a/cypress/tests/widgets/control.spec.js b/cypress/tests/widgets/control.spec.js
@@ -63,34 +63,26 @@ describe('Node-RED Dashboard 2.0 - Control - Show/Hide', () => {
 
     // skipping due to unreliable nature of Vuetify's Nav Draw with Cypress
     // will re-implement once we have option to render a fixed navigation drawer
-    it.skip('can hide and show a particular page from the navigation options', () => {
+    it('can hide and show a particular page from the navigation options', () => {
         cy.reloadDashboard()
-        // open navigation
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
+
         cy.get('[data-el="nav-drawer"]').should('be.visible')
+
         // check length
         cy.get('.v-list.v-list--nav').find('a').should('have.length', 3)
         cy.get('[data-nav="dashboard-ui-page-controls"]').should('be.visible')
         cy.get('[data-nav="dashboard-ui-page-1"]').should('be.visible')
         cy.get('[data-nav="dashboard-ui-page-2"]').should('be.visible')
-        // close drawer
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
 
         // hide page
         cy.get('#nrdb-ui-widget-dashboard-ui-button-vis-page-hide').click()
 
-        // open navigation
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
         // check length
         cy.get('.v-list.v-list--nav').find('a').should('have.length', 2)
-        // close drawer
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
 
         // show page again
         cy.get('#nrdb-ui-widget-dashboard-ui-button-vis-page-show').click()
 
-        // open navigation
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
         cy.get('[data-el="nav-drawer"]').should('be.visible')
         // check length
         cy.get('.v-list.v-list--nav').find('a').should('have.length', 3)
@@ -116,9 +108,7 @@ describe('Node-RED Dashboard 2.0 - Control - Enable/Disable', () => {
 
     // skipping due to unreliable nature of Vuetify's Nav Draw with Cypress
     // will re-implement once we have option to render a fixed navigation drawer
-    it.skip('can enable/disable a particular page from the navigation options', () => {
-        // open navigation
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
+    it('can enable/disable a particular page from the navigation options', () => {
         cy.get('[data-el="nav-drawer"]').should('be.visible')
 
         // check length
@@ -129,29 +119,18 @@ describe('Node-RED Dashboard 2.0 - Control - Enable/Disable', () => {
         cy.get('[data-nav="dashboard-ui-page-1"]').should('not.have.class', 'v-list-item--disabled')
         cy.get('[data-nav="dashboard-ui-page-2"]').should('not.have.class', 'v-list-item--disabled')
 
-        // close drawer
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
-
         // disable an entry
         cy.get('#nrdb-ui-widget-dashboard-ui-button-int-page-disable').click()
 
-        // open navigation
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
         // check length
         cy.get('.v-list.v-list--nav').find('a').should('have.length', 3)
         cy.get('[data-nav="dashboard-ui-page-1"]').should('have.class', 'v-list-item--disabled')
         cy.get('[data-nav="dashboard-ui-page-controls"]').should('not.have.class', 'v-list-item--disabled')
         cy.get('[data-nav="dashboard-ui-page-2"]').should('not.have.class', 'v-list-item--disabled')
 
-        // check enable works
-        // close drawer
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
-
         // enable an entry
         cy.get('#nrdb-ui-widget-dashboard-ui-button-int-page-enable').click()
 
-        // open navigation
-        cy.clickAndWait(cy.get('.v-app-bar-nav-icon'))
         // check length
         cy.get('.v-list.v-list--nav').find('a').should('have.length', 3)
         cy.get('[data-nav="dashboard-ui-page-controls"]').should('not.have.class', 'v-list-item--disabled')

diff --git a/nodes/widgets/ui_control.js b/nodes/widgets/ui_control.js
@@ -13,8 +13,12 @@ module.exports = function (RED) {
         function updateStore (all, items, msg, prop, value) {
             items.forEach(function (item) {
                 const i = all[item]
-                // update the state store for each page
-                statestore.set(ui, i, msg, prop, value)
+                if (i) {
+                    // update the state store for each page
+                    statestore.set(ui, i, msg, prop, value)
+                } else {
+                    node.error("No item with the name '" + item + "' found", msg)
+                }
             })
         }
 
@@ -110,28 +114,28 @@ module.exports = function (RED) {
                             const levels = g.split(':')
                             return levels.length > 1 ? levels[1] : g
                         })
-                        updateStore(allGroups, gs, 'visible', true)
+                        updateStore(allGroups, gs, msg, 'visible', true)
                     }
                     if ('hide' in groups) {
                         const gh = groups.hide.map((g) => {
                             const levels = g.split(':')
                             return levels.length > 1 ? levels[1] : g
                         })
-                        updateStore(allGroups, gh, 'visible', false)
+                        updateStore(allGroups, gh, msg, 'visible', false)
                     }
                     if ('enable' in groups) {
                         const ge = groups.enable.map((g) => {
                             const levels = g.split(':')
                             return levels.length > 1 ? levels[1] : g
                         })
-                        updateStore(allGroups, ge, 'disabled', false)
+                        updateStore(allGroups, ge, msg, 'disabled', false)
                     }
                     if ('disable' in groups) {
                         const gd = groups.disable.map((g) => {
                             const levels = g.split(':')
                             return levels.length > 1 ? levels[1] : g
                         })
-                        updateStore(allGroups, gd, 'disabled', true)
+                        updateStore(allGroups, gd, msg, 'disabled', true)
                     }
                     // ensure consistency in payload format
                     msg.payload.groups = groups