Reset table selection (when loading new records)

[bartbutenaers]

Description

In this Discourse discussion, weird behaviour has been reported related to selected items in a ui-table.

This is the example flow from that discussion:

[{"id":"a0299ef1e4246bc6","type":"ui-table","z":"49d091cd63383185","group":"04ea239d7dc473d9","name":"","label":"text","order":3,"width":0,"height":0,"maxrows":"10","passthru":false,"autocols":true,"showSearch":true,"selectionType":"checkbox","columns":[],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"replace","x":650,"y":540,"wires":[["3373efdd4859fedd"]]},{"id":"ebf5762287704b0b","type":"ui-button","z":"49d091cd63383185","group":"04ea239d7dc473d9","name":"reset","label":"Reset","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":150,"y":540,"wires":[["e01cde4b284cba50"]]},{"id":"e01cde4b284cba50","type":"change","z":"49d091cd63383185","name":"","rules":[{"t":"set","p":"painters","pt":"flow","to":"[{\"id\":1,\"name\":\"Rembrandt van Rijn\",\"birth_year\":1606,\"famous_for\":\"The Night Watch, Self-Portraits\"},{\"id\":2,\"name\":\"Vincent van Gogh\",\"birth_year\":1853,\"famous_for\":\"Starry Night, Sunflowers, Self-Portraits\"},{\"id\":3,\"name\":\"Johannes Vermeer\",\"birth_year\":1632,\"famous_for\":\"Girl with a Pearl Earring, The Milkmaid\"},{\"id\":4,\"name\":\"Frans Hals\",\"birth_year\":1582,\"famous_for\":\"The Laughing Cavalier, Portraits\"},{\"id\":5,\"name\":\"Piet Mondrian\",\"birth_year\":1872,\"famous_for\":\"Composition with Red, Blue, and Yellow, Abstract Art\"},{\"id\":6,\"name\":\"Hieronymus Bosch\",\"birth_year\":1450,\"famous_for\":\"The Garden of Earthly Delights, The Haywain Triptych\"},{\"id\":7,\"name\":\"Jan Steen\",\"birth_year\":1626,\"famous_for\":\"The Merry Family, The Feast of Saint Nicholas\"},{\"id\":8,\"name\":\"Gerrit Dou\",\"birth_year\":1613,\"famous_for\":\"The Glass of Water, Old Woman with a Glove\"},{\"id\":9,\"name\":\"Karel Appel\",\"birth_year\":1921,\"famous_for\":\"Abstract Expressionism, the CoBrA movement\"},{\"id\":10,\"name\":\"Anton Mauve\",\"birth_year\":1838,\"famous_for\":\"Landscapes, Rural Scenes, and Pastoral Life\"}]","tot":"json"},{"t":"set","p":"payload","pt":"msg","to":"painters","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":540,"wires":[["a0299ef1e4246bc6"]]},{"id":"5518cc5c37b37e01","type":"ui-button","z":"49d091cd63383185","group":"04ea239d7dc473d9","name":"delete","label":"","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"delete","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":150,"y":600,"wires":[["bbb0408a642697bb"]]},{"id":"3373efdd4859fedd","type":"change","z":"49d091cd63383185","name":"","rules":[{"t":"set","p":"selected","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":800,"y":540,"wires":[["78d72d0dfbe7b510"]]},{"id":"bbb0408a642697bb","type":"change","z":"49d091cd63383185","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"selected","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":600,"wires":[["5e54195972e417e1"]]},{"id":"78d72d0dfbe7b510","type":"debug","z":"49d091cd63383185","name":"debug 273","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":970,"y":540,"wires":[]},{"id":"5e54195972e417e1","type":"function","z":"49d091cd63383185","name":"delete entries","func":"const selected = msg.payload\nconst selectedIds = selected.map(painter => painter.id);\n\nlet painters = flow.get('painters')\n\nconst removePaintersByIds = (painters, selectedIds) => {\n    return painters.filter(painter => !selectedIds.includes(painter.id));\n};\n\nconst updatedPainters = removePaintersByIds(painters, selectedIds);\n\nflow.set('painters',updatedPainters)\n\nmsg.payload = flow.get('painters')\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":600,"wires":[["a0299ef1e4246bc6"]]},{"id":"8ee80be53d8cc74b","type":"comment","z":"49d091cd63383185","name":"Painters","info":"","x":160,"y":500,"wires":[]},{"id":"04ea239d7dc473d9","type":"ui-group","name":"Group 2","page":"ac93a3ab7d1a425c","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ac93a3ab7d1a425c","type":"ui-page","name":"Painters","ui":"f728a7a2258a7a5d","path":"/page2","icon":"brush","layout":"grid","theme":"7ceb0649e7d1666c","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":"f728a7a2258a7a5d","type":"ui-base","name":"OL Connect Automate","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"7ceb0649e7d1666c","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"}}]

And the steps to reproduce the problem:

1. Select 2 rows in the table, by clicking their checkbox. In the Debug panel you will see a message appearing, containing the 2 selected items.
2. Hit the delete button (garbage icon). The two selected rows are deleted from the table.
3. Select 1 item in the table. In the Debug panel you will see a message appearing, contain 3 items (instead of only the 1 selected item).

The problem is that they inject a complete new list, which overrides the content of the old list. Which means the old selection (of the old list) should also be cleared automatically, which was not the case.

Clearing the old selection seems to fix it:

Related Issue(s)

Probably this also solves issue 1470

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]

Please squash the commit history, because a series of commits have been added because I somehow mixed up two of my feature request branches...