fix: handle adding/removing tiles (widgets)

[filipgutica]

Summary

https://konghq.atlassian.net/browse/MA-3668
https://konghq.atlassian.net/browse/MA-3622
https://konghq.atlassian.net/browse/MA-3621

• Tiles passed into the gridstack grid layout component inform the initial state of the dashboard.
• Use a copy of the passed in tiles in order to prevent circular event loops
• Gridstack responsible for all things related to position and dimensions of tiles. On the appropriate gridstack events, regenerate tile definitions with updated layout and emit them so the host app can update the dashboard definition
• Watch for changes to provided tile's length to handle adding new tiles. Wait for the dom to be updated await nextTick() then use makeWidget to make the newly added tile into a gridstack widget.
• Watch for changes to the provided tile's metadata and update the appropriate tile (to handle changes to content) eg query, chart title, chart type etc
• Use a single can-edit prop
• Add new sandbox page for editable dashboard, remove changes to "static" dashboard sandbox
• Track unique IDs by allowing dashboard schema tiles to provide unique ids to the grid layout

[adorack]

I'd like to review.

[adorack]

Mostly a note for later: I think we should combine this and draggable into one editable prop -- or possibly even just check if the event listeners are defined rather than having separate props.

[filipgutica]

I just combined them to a can-edit prop

[adorack]

A handful of minor comments -- looking at the other preview.

[adorack]

Ahhh, this is to make sure the test IDs stay consistent?

[filipgutica]

Yeah, the ids became random uuids since they aren't provided, manually set them to 0, 1, 2... in order to keep the test sane.