Containers used to group widgets in Taranta

The ability to group/ungroup a set of widgets would greatly improve usability of the WebJive editor. Without this feature, users have to copy-paste the set, and then tweak each of the duplicated widgets so that they are properly displayed in the z-axis (aka layers). But at the moment:

• each widget in the dashboard is a “layer” by itself, so there might be dozens or hundreds of “layers”
• the newly created copies of the widgets are put at the bottom of the z-axis (hence they might be covered by other widgets)
• I can use 2 up/down buttons (on the side of the “layer”) to move the widget one layer up or down; these buttons need to be clicked with the mouse (no keyboard use that could make this action faster); in addition the buttons are not always vertically aligned (which means that I need to move my mouse in a zig-zag trajectory, which slows me down)
• there is no capability to drag-and-drop a layer to change its position in the z-axis
• the copy-paste action done on a set is not mirrored in the layer list, in the sense that I cannot act on the set that I previously selected: I need to work on each single widget.

All this makes the development of complex dashboards really painful, time consuming and error prone.

I suggest that:

• dashboard designers can add a "box container" in the dashboard (which is a widget)
• the box can be dragged and positioned as any other widget; this can be done because the box, while editing a dashboard, has clearly visible handles and perhaps a tooltip.
• the user can drag other widgets (including other boxes) into the box; by doing this the user is adding the widget to a group of widgets, those already in the box
• by dragging a widget out of a box, the widget is removed from the group
• In the layer list a group appears as a single unit, which could be moved up/down on the z-axis. It has a name such as group-3. When duplicating it or creating a new group, the newly created group would have a unique name like group-4. See the attached mockup.
• When a user groups a set of widgets, those widgets disappear from the layer list and are replaced by the group.
• Inside a box, its widgets keep the relative z-rank.
• The z-rank of the group is the highest z-rank of its widgets. When the group is ungrouped, its widgets appear in the layer list with a z-rank that is the z-rank of the destroyed group + the relative z-rank that they had inside the group.
• the last added widget to the dashboard appears at the top of the list of layers.
• When resizing a group, all its widgets are resized proportionally on x and y axes.
• Visually, in a running dashboard, a box container can have a colored background, an outline, a title text (similar to the FIELDSET html tag). See some examples in the mockups attached below (CSP-before/CSP-after - thank you @Valentina for the mockups).

See the revised ACs below in my comment: https://jira.skatelescope.org/browse/SP-1406?focusedCommentId=88285&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-88285

 The feature has been presented in the OMC ART System Demo 12.6
https://skatelescope.zoom.us/rec/share/ojDbDKbK5qNycqjv9DOX39L6byA_rA5w2Gr4r1EdATXl4evjljCnQYiQILZLFBN7.d41iZTl_y0Yfoxrf

Documentation is available in the following link: https://taranta.readthedocs.io/en/sp-1406/box.html

Merge request is available here: https://gitlab.com/tango-controls/web/taranta/-/merge_requests/256