feat: [1679] Add multiple groups per tab

cypress/fixtures/flows/dashboard-layouts.json

@@ -64,6 +64,68 @@
             "groupOutline": "#cccccc"
         }
     },
+    {
+        "id": "dashboard-ui-page-tabs",
+        "type": "ui-page",
+        "name": "Layout: Tabs",
+        "ui": "dashboard-ui-base",
+        "path": "/tabs",
+        "icon": "",
+        "layout": "tabs",
+        "theme": "dashboard-ui-theme",
+        "tabs": [
+            {
+                "id": "tab-compose",
+                "name": "Compose"
+            },
+            {
+                "id": "tab-inbox",
+                "name": "Inbox"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-page-tabs-legacy",
+        "type": "ui-page",
+        "name": "Layout: Tabs (no page tabs)",
+        "ui": "dashboard-ui-base",
+        "path": "/tabs-legacy",
+        "icon": "",
+        "layout": "tabs",
+        "theme": "dashboard-ui-theme",
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-page-tabs-wizard",
+        "type": "ui-page",
+        "name": "Layout: Tabs (wizard)",
+        "ui": "dashboard-ui-base",
+        "path": "/tabs-wizard",
+        "icon": "",
+        "layout": "tabs",
+        "theme": "dashboard-ui-theme",
+        "tabs": [
+            {
+                "id": "tab-step1",
+                "name": "Step 1"
+            },
+            {
+                "id": "tab-step2",
+                "name": "Step 2"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
     {
         "id": "dashboard-ui-group-grid1",
         "type": "ui-group",
@@ -181,6 +243,142 @@
         "visible": "true",
         "disabled": "false"
     },
+    {
+        "id": "dashboard-ui-group-tabs-loose",
+        "type": "ui-group",
+        "name": "Loose",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-tabs-inbox",
+        "type": "ui-group",
+        "name": "Inbox List",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-inbox"
+    },
+    {
+        "id": "dashboard-ui-group-tabs-compose2",
+        "type": "ui-group",
+        "name": "Attachments",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-compose"
+    },
+    {
+        "id": "dashboard-ui-group-tabs-compose1",
+        "type": "ui-group",
+        "name": "Compose",
+        "page": "dashboard-ui-page-tabs",
+        "width": "6",
+        "height": "1",
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-compose"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-b",
+        "type": "ui-group",
+        "name": "Legacy B",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-a",
+        "type": "ui-group",
+        "name": "Legacy A",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 0,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-hidden",
+        "type": "ui-group",
+        "name": "Legacy Hidden",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": false,
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-group-legacy-dialog",
+        "type": "ui-group",
+        "name": "Legacy Dialog",
+        "page": "dashboard-ui-page-tabs-legacy",
+        "width": "6",
+        "height": "1",
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "dialog"
+    },
+    {
+        "id": "dashboard-ui-group-wizard-step1",
+        "type": "ui-group",
+        "name": "Step 1",
+        "page": "dashboard-ui-page-tabs-wizard",
+        "width": "6",
+        "height": "1",
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "tab": "tab-step1"
+    },
+    {
+        "id": "dashboard-ui-group-wizard-step2",
+        "type": "ui-group",
+        "name": "Step 2",
+        "page": "dashboard-ui-page-tabs-wizard",
+        "width": "6",
+        "height": "1",
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": false,
+        "disabled": "false",
+        "tab": "tab-step2"
+    },
     {
         "id": "dashboard-ui-button",
         "type": "ui-button",
@@ -246,5 +444,107 @@
         "x": 250,
         "y": 100,
         "wires": []
+    },
+    {
+        "id": "dashboard-ui-button-tabs-hide-inbox",
+        "type": "ui-button",
+        "z": "node-red-tab-layouts",
+        "group": "dashboard-ui-group-tabs-inbox",
+        "name": "",
+        "label": "Hide Inbox",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "{\"groups\":{\"hide\":[\"dashboard-ui-group-tabs-inbox\"]}}",
+        "payloadType": "json",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "enableClick": true,
+        "enablePointerdown": false,
+        "pointerdownPayload": "",
+        "pointerdownPayloadType": "str",
+        "enablePointerup": false,
+        "pointerupPayload": "",
+        "pointerupPayloadType": "str",
+        "x": 170,
+        "y": 300,
+        "wires": [
+            [
+                "dashboard-ui-control-tabs"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-inject-tabs-show-inbox",
+        "type": "inject",
+        "z": "node-red-tab-layouts",
+        "name": "Show Inbox",
+        "props": [
+            {
+                "p": "payload"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "{\"groups\":{\"show\":[\"dashboard-ui-group-tabs-inbox\"]}}",
+        "payloadType": "json",
+        "x": 170,
+        "y": 340,
+        "wires": [
+            [
+                "dashboard-ui-control-tabs"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-inject-tabs-wizard-next",
+        "type": "inject",
+        "z": "node-red-tab-layouts",
+        "name": "Wizard next",
+        "props": [
+            {
+                "p": "payload"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "{\"groups\":{\"hide\":[\"dashboard-ui-group-wizard-step1\"],\"show\":[\"dashboard-ui-group-wizard-step2\"]}}",
+        "payloadType": "json",
+        "x": 170,
+        "y": 380,
+        "wires": [
+            [
+                "dashboard-ui-control-tabs"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-ui-control-tabs",
+        "type": "ui-control",
+        "z": "node-red-tab-layouts",
+        "name": "",
+        "ui": "dashboard-ui-base",
+        "events": "all",
+        "x": 380,
+        "y": 300,
+        "wires": [
+            []
+        ]
     }
 ]

cypress/tests/config-nodes/tabs-sidebar.spec.js

@@ -0,0 +1,57 @@
+function openEditor () {
+    cy.intercept({ method: 'GET', pathname: '/settings' }, (req) => {
+        req.continue((res) => {
+            res.body.telemetryEnabled = false
+            res.body.editorTheme = { ...res.body.editorTheme, tours: false }
+        })
+    })
+    cy.loadFlows()
+    cy.window().its('RED.nodes').invoke('node', 'dashboard-ui-page-tabs').should('exist')
+}
+
+describe('Node-RED Dashboard 2.0 - Editor: Sidebar tabs', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-layouts')
+        openEditor()
+        cy.window().its('RED.sidebar').invoke('show', 'dashboard-2.0')
+    })
+
+    it('renders page tabs in order, followed by a No tab row holding untabbed groups', () => {
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', /^Layout: Tabs$/).closest('li').within(() => {
+            cy.get('.nrdb2-sb-tabs-list-header .nrdb2-sb-title').should((titles) => {
+                expect([...titles].map((t) => t.textContent)).to.deep.equal(['Compose', 'Inbox', 'No tab'])
+            })
+            cy.get('.nrdb2-sb-untabbed-groups .nrdb2-sb-groups-list-header .nrdb2-sb-title').should('have.text', 'Loose')
+        })
+    })
+
+    it('renders groups directly under pages without page tabs', () => {
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', 'Layout: Tabs (no page tabs)').closest('li').within(() => {
+            cy.get('.nrdb2-sb-tabs-list-header').should('not.exist')
+            cy.get('.nrdb2-sb-groups-list-header').should('have.length', 4)
+        })
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', 'Layout: Grid').closest('li').within(() => {
+            cy.get('.nrdb2-sb-tabs-list-header').should('not.exist')
+        })
+    })
+
+    it('adds a group under No tab without touching existing groups', () => {
+        cy.contains('.nrdb2-sb-pages-list-header .nrdb2-sb-title', /^Layout: Tabs$/).parent().find('a[title="Add Group"]').click({ force: true })
+        cy.get('#node-config-dialog-ok').click()
+        cy.get('#node-config-dialog-ok').should('not.exist')
+        cy.window().its('RED').should((RED) => {
+            const groups = []
+            RED.nodes.eachConfig((n) => {
+                if (n.type === 'ui-group' && n.page === 'dashboard-ui-page-tabs') {
+                    groups.push(n)
+                }
+            })
+            const added = groups.find((g) => !g.id.startsWith('dashboard-'))
+            expect(added.order).to.equal(5)
+            expect(added.tab || '').to.equal('')
+            expect(groups.filter((g) => g !== added && g.changed).map((g) => g.id)).to.deep.equal([])
+            const touchesAdded = (e) => (e.events || [e]).some((x) => x.node === added || (x.nodes || []).includes(added.id))
+            expect(RED.history.list().filter(touchesAdded)).to.have.length(2)
+        })
+    })
+})