Button group - show node status

[bartbutenaers]

Description

For quick troubleshooting in my flow editor, I wanted to show the current selection in the status of a ui-button-group node:

Here is an example flow:

[{"id":"37a1308de85c865a","type":"ui-button-group","z":"4aad778b57d4f47b","name":"","group":"1e2acdd1dfa22bf9","order":1,"width":6,"height":1,"label":"button group (boolean)","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"True","icon":"","value":"true","valueType":"bool","color":"#009933"},{"label":"False","icon":"","value":"false","valueType":"bool","color":"#999999"},{"label":"Some string","icon":"","value":"some_string","valueType":"str","color":"#ff6666"},{"label":"Five","icon":"","value":"5","valueType":"num","color":"#009999"},{"label":"Some obj","icon":"","value":"{\"value\": \"blabla\"}","valueType":"json","color":"#cccc00"}],"topic":"topic","topicType":"msg","x":800,"y":4300,"wires":[[]]},{"id":"ab545d899123c580","type":"inject","z":"4aad778b57d4f47b","name":"true","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":590,"y":4300,"wires":[["37a1308de85c865a"]]},{"id":"c1a781175b791bdd","type":"inject","z":"4aad778b57d4f47b","name":"false","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":590,"y":4340,"wires":[["37a1308de85c865a"]]},{"id":"8c42f8429f428304","type":"inject","z":"4aad778b57d4f47b","name":"some_string","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"some_string","payloadType":"str","x":570,"y":4380,"wires":[["37a1308de85c865a"]]},{"id":"ccd82a9e7d04ce23","type":"inject","z":"4aad778b57d4f47b","name":"5","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":590,"y":4420,"wires":[["37a1308de85c865a"]]},{"id":"2ca3f8c56f88bac2","type":"inject","z":"4aad778b57d4f47b","name":"{\"value\": \"blabla\"}","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"value\": \"blabla\"}","payloadType":"json","x":560,"y":4460,"wires":[["37a1308de85c865a"]]},{"id":"1e2acdd1dfa22bf9","type":"ui-group","name":"Experiments","page":"e06eacf47a88bb87","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"e06eacf47a88bb87","type":"ui-page","name":"Alarm","ui":"be29745a6e568f30","path":"/alarm","icon":"lock","layout":"grid","theme":"092547d34959327c","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":6,"className":"","visible":true,"disabled":false},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart","ui-text-input","ui-dropdown"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"092547d34959327c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

Remark: My first thought was to show the label and the corresponding value between round brackets. However when the value is an object, that becomes quite confusing. So I now only show the label, not the value.

Related Issue(s)

None

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[bartbutenaers]

Ah I hadn't seen any errors in my ´npm run build´ output. Must be getting nuts. Will fix it tomorrow. My time is up for today...

[bartbutenaers]

E2E test failure not related to my changes.
So this PR is ready for review.

[bartbutenaers]

@joepavitt,
Good catch, and thanks for the decent review!!

[joepavitt]

Thanks as always @bartbutenaers