Selecting multiple components

Overview

1. It should be possible to select multiple components
2. It must be possible to create “Sections” by selecting multiple components and saving them as a single Section.
3. It must be possible to Copy/Paste multiple components simultaneously
4. It must be possible to Drag and drop multiple components simultaneously

This issue is to address the first of those 4 requirements

Multi select of components is needed for different purposes. Once you have selected a group you may want to copy/paste, dragging/rearrange them, or save them as a "Section".

Proposed resolution

First step is to come up with a plan on how we can achieve changing the "Selected" component to be an array of selected components. Both from a how do we do that in the code but also what does that user interaction feel like and what does it look like - how do we show it in the UI etc.

Currently the selected component is defined in the React Router url as a UUID. This might prove technically challenging to change to being an array of selected components.

The right hand panel will show a new UI when multiple components are selected. The design screenshot below shows a suggestion from the design team on what we should show.

I propose we introduce a way of distinguishing between different types of multi-selections:
a) One or more consecutive sibling components.
b) Non-consecutive siblings (e.g., a random set of components from across the page).

There is a third type, that I think we need to prevent (c) being allowed/avoid being able to do.

c) Complex nested selections e.g. Selecting a parent and one of its children/grandchildren at the same time

When a user adds a new item to the selection, we must check:

1. Is the newly selected item a descendent (child/grandchild etc) of an already selected item
2. Is the newly selected item a parent/grandparent of an already selected item.

In either of the above cases, the existing item should be removed from the selection and replaced with the item being added.

Being able to determine if a selection is (a), (b) or (c) type is will allow us to base behaviours on the type of selection - e.g. You can only "Save as section" when the selection is (a) type.

User interface changes

Working multi select!