Colon in group name prevents working of group visibility

[rucksman]

Current Behavior

I am injection the following JSON into a ui-control:

{
    "groups": {
        "hide": [
            "MyPage:My: Second Group"
        ]
    }
}

This throws an error:

No item with the name 'My' found

Tried different escape methods like quotes and backslash for the colon in my group name, but nothing worked.

Expected Behavior

Group name with a colon should be processed correctly.

Steps To Reproduce

Create a group with a colon in its name and try to show/hide it via ui-control.

Environment

No response

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[bartbutenaers]

@rucksman,
If you could share a very small example flow to reproduce this, then I will try to find some time to look at this. I haven't used the ui-control myself yet...

[rucksman]

Here you go ... You can basically ignore the text node, I only used it to create the page and group. Just inject hide group and you will see the error:

No item with the name 'This is' found

[
    {
        "id": "a663bb334b6ef130",
        "type": "tab",
        "label": "Bug ui-control",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "381db98ea173ca41",
        "type": "inject",
        "z": "a663bb334b6ef130",
        "name": "show group",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"groups\":{\"show\":[\"Test Page:This is: My Test Group\"]}}",
        "payloadType": "json",
        "x": 110,
        "y": 80,
        "wires": [
            [
                "0a32d04d05f5bdc5",
                "558baa9d92a21c55"
            ]
        ]
    },
    {
        "id": "0a32d04d05f5bdc5",
        "type": "debug",
        "z": "a663bb334b6ef130",
        "name": "debug show group",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 290,
        "y": 40,
        "wires": []
    },
    {
        "id": "4f8b8c9d230925dc",
        "type": "inject",
        "z": "a663bb334b6ef130",
        "name": "hide group",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"groups\":{\"hide\":[\"Test Page:This is: My Test Group\"]}}",
        "payloadType": "json",
        "x": 100,
        "y": 120,
        "wires": [
            [
                "b0d2e3d2f7ddb20b",
                "558baa9d92a21c55"
            ]
        ]
    },
    {
        "id": "b0d2e3d2f7ddb20b",
        "type": "debug",
        "z": "a663bb334b6ef130",
        "name": "debug hide group",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 290,
        "y": 160,
        "wires": []
    },
    {
        "id": "558baa9d92a21c55",
        "type": "ui-control",
        "z": "a663bb334b6ef130",
        "name": "",
        "ui": "41759c0910655159",
        "events": "all",
        "x": 280,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "d86b48828341464c",
        "type": "ui-text",
        "z": "a663bb334b6ef130",
        "group": "accb66f14a9ff4af",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "Test Node only for the page and group",
        "label": "Test",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "wrapText": false,
        "className": "",
        "x": 610,
        "y": 100,
        "wires": []
    },
    {
        "id": "41759c0910655159",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "accb66f14a9ff4af",
        "type": "ui-group",
        "name": "This is: My Test Group",
        "page": "0615b1846821cbdf",
        "width": 6,
        "height": 1,
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "0615b1846821cbdf",
        "type": "ui-page",
        "name": "Test Page",
        "ui": "41759c0910655159",
        "path": "/Test-Page",
        "icon": "home",
        "layout": "grid",
        "theme": "c049776195a75b90",
        "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": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c049776195a75b90",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

[bartbutenaers]

@rucksman,
Thanks for the simple example flow, which made it easy to reproduce the problem.
I have created a pull request to allow the colons to be escaped.
Hopefully that fits your needs...