UI Group not loading

[aitor-develop]

Current Behavior

After selecting the page using the left-side toolbar group is not loading.

If the group "TAB" is manually selected, then it displays correctly:

The used layout is TABs.

Expected Behavior

I expected to see the page with all its widgets loaded correctly when I select in the left-side toolbar.

Steps To Reproduce

1. Select the page
   

2. Move to another group in the same page that is not the first one
   

3. Select a new page with the same display "TAB" from a group that is not the first one

4. Wait to open it and see there is nothing.
   

5. Click on the group name to see content.
   

Environment

• Dashboard version: 1.20.0
• Node-RED version: 4.0.2
• Platform/OS: Dockerized NodeRED
• Browser: Brave v1.73.97

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[Steve-Mcl]

Can you please provide a minimal flow that demonstrates this issue?

[aitor-develop]

Here I provide a flow to test the issue:

To test it just:

1. Open TAB 1, DATA 2 group.
2. Jump using leftside menu to TAB2
3. See how the group does not load.

The flow:

[ { "id": "9d928694919d83b0", "type": "tab", "label": "DASH BUG", "disabled": false, "info": "", "env": [] }, { "id": "99b0f7213609f95f", "type": "ui-base", "name": "MyDashboard", "path": "/dashboard", "appIcon": "", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control" ], "showPathInSidebar": true, "showPageTitle": false, "navigationStyle": "icon", "titleBarStyle": "hidden", "showReconnectNotification": false, "notificationDisplayTime": "5", "showDisconnectNotification": true }, { "id": "7595dc06ddd9d219", "type": "ui-theme", "name": "My_Theme", "colors": { "surface": "#bababa", "primary": "#27b48a", "bgPage": "#111111", "groupBg": "#3c3c3b", "groupOutline": "#3c3c3b" }, "sizes": { "density": "default", "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px" } }, { "id": "ebe225b7d50d4bed", "type": "ui-page", "name": "TAB1", "ui": "99b0f7213609f95f", "path": "/tab1", "icon": "database-search", "layout": "tabs", "theme": "7595dc06ddd9d219", "breakpoints": [ { "name": "Default", "px": "0", "cols": "12" }, { "name": "Tablet", "px": "576", "cols": "6" }, { "name": "Small Desktop", "px": "768", "cols": "9" }, { "name": "Desktop", "px": "1024", "cols": "12" } ], "order": 1, "className": "", "visible": "true", "disabled": "false" }, { "id": "bf386946cdf23e66", "type": "ui-group", "name": "Data 1", "page": "ebe225b7d50d4bed", "width": "24", "height": "1", "order": 1, "showTitle": false, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "29c2c35c777180a0", "type": "ui-group", "name": "Data 2", "page": "ebe225b7d50d4bed", "width": "12", "height": "6", "order": 2, "showTitle": false, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "8bdac04f0bd4f4e9", "type": "ui-page", "name": "TAB2", "ui": "99b0f7213609f95f", "path": "/page4", "icon": "", "layout": "tabs", "theme": "7595dc06ddd9d219", "breakpoints": [ { "name": "Default", "px": "0", "cols": "3" }, { "name": "Tablet", "px": "576", "cols": "6" }, { "name": "Small Desktop", "px": "768", "cols": "9" }, { "name": "Desktop", "px": "1024", "cols": "12" } ], "order": 2, "className": "", "visible": "true", "disabled": "false" }, { "id": "6a64012f3007d9e4", "type": "ui-group", "name": "Data3", "page": "8bdac04f0bd4f4e9", "width": "12", "height": "1", "order": 2, "showTitle": false, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "9b86c2c0c10177ec", "type": "ui-group", "name": "Jump here from TAB1 Data2 to se issue", "page": "8bdac04f0bd4f4e9", "width": "12", "height": "1", "order": 1, "showTitle": false, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "c9918b40426b4128", "type": "ui-template", "z": "9d928694919d83b0", "group": "bf386946cdf23e66", "page": "", "ui": "", "name": "This is a title", "order": 1, "width": "12", "height": "1", "head": "", "format": "<template>\n <section class=\"centered-box\">\n <p>This is a title</p>\n </section>\n</template>\n\n<style>\n .centered-box {\n display: flex;\n justify-content: left; /* Align content to the left horizontally */\n align-items: center; /* Vertically center the content */\n height: auto;\n width: auto;\n border: 0px solid #000;\n font-size: 18px;\n font-weight: bold;\n }\n</style>\n", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 90, "y": 72, "wires": [ [] ], "icon": "font-awesome/fa-text-width" }, { "id": "3ad3472bd9151d99", "type": "ui-template", "z": "9d928694919d83b0", "group": "29c2c35c777180a0", "page": "", "ui": "", "name": "This is a title", "order": 1, "width": "12", "height": "1", "head": "", "format": "<template>\n <section class=\"centered-box\">\n <p>This is a title</p>\n </section>\n</template>\n\n<style>\n .centered-box {\n display: flex;\n justify-content: left; /* Align content to the left horizontally */\n align-items: center; /* Vertically center the content */\n height: auto;\n width: auto;\n border: 0px solid #000;\n font-size: 18px;\n font-weight: bold;\n }\n</style>\n", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 90, "y": 112, "wires": [ [] ], "icon": "font-awesome/fa-text-width" }, { "id": "220a2dbf5f5ff80d", "type": "ui-template", "z": "9d928694919d83b0", "group": "9b86c2c0c10177ec", "page": "", "ui": "", "name": "This is a title", "order": 1, "width": "12", "height": "1", "head": "", "format": "<template>\n <section class=\"centered-box\">\n <p>This is a title</p>\n </section>\n</template>\n\n<style>\n .centered-box {\n display: flex;\n justify-content: left; /* Align content to the left horizontally */\n align-items: center; /* Vertically center the content */\n height: auto;\n width: auto;\n border: 0px solid #000;\n font-size: 18px;\n font-weight: bold;\n }\n</style>\n", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 90, "y": 152, "wires": [ [] ], "icon": "font-awesome/fa-text-width" }, { "id": "51ca2d6e7419e0dd", "type": "ui-template", "z": "9d928694919d83b0", "group": "6a64012f3007d9e4", "page": "", "ui": "", "name": "This is a title", "order": 1, "width": "12", "height": "1", "head": "", "format": "<template>\n <section class=\"centered-box\">\n <p>This is a title</p>\n </section>\n</template>\n\n<style>\n .centered-box {\n display: flex;\n justify-content: left; /* Align content to the left horizontally */\n align-items: center; /* Vertically center the content */\n height: auto;\n width: auto;\n border: 0px solid #000;\n font-size: 18px;\n font-weight: bold;\n }\n</style>\n", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 90, "y": 192, "wires": [ [] ], "icon": "font-awesome/fa-text-width" }, { "id": "b0d8d4d26accccbc", "type": "comment", "z": "9d928694919d83b0", "name": "BUG TESTING INFO", "info": "Open TAB 1, DATA 2\nJump using leftside menu to TAB2\n\nSee how it is not automatically loaded the group. Afeter manual selection everything is ok.", "x": 116, "y": 32, "wires": [] } ]

[bartbutenaers]

@Steve-Mcl ,
You can assign this one to me. Will try to have a look tonight...
Bart

[Steve-Mcl]

@Steve-Mcl , You can assign this one to me. Will try to have a look tonight... Bart

Your wish is my command 😉

[bartbutenaers]

@aitor-develop
Thanks a lot for the (very) extensive description and example flow.
Being able to reproduce the problem fast, really helps to be able to help.
You were lucky that the wife and kids were still asleep, so I could have a look at it 😄

See pull request