Improve add widget UI on Flows

[peterkeating]

The current implementation of adding widgets within a flow doesn't extend well when there are a large amount of widgets, as shown below.

An alternative is to replace the dropdown button with a modal popup that'll open the door to other possibilities like filtering, ordering, grouping (grouping may need some more thought behind it), etc...

I've had a quick play with the current implementation and threw together a short screen recording to give a better idea of the direction I was thinking.

Be great to get any thoughts/further suggestions and confirmation to whether it's worth implementing something more concrete and submit a PR.

[sebastienros]

Next, grouping and custom shapes which would allow us to use custom rendering (icons or images for instance). Search box also maybe?

[sebastienros]

The group could be a type setting, which could later be integrated in the content type editors if we want to change it.

[peterkeating]

@sebastienros Awesome, I'll crack on then!

Could you explain how you see custom shapes working? Do you mean a shape for customising the display of card that represents the widget in the modal?

Using a setting in the content type for the grouping was what I was thinking too 👍

[sebastienros]

Yes for the shapes. The idea is that you render a widget with a specific display type, like Thumbnail (look at how it's done for Workflows, or Recipe Steps, ...) and then there is a default template named Widget.Thumbnail.cshtml, but because you add a custom alternate like Widget_Thumnbail-[WithType] any module could then provide a custom template for each widget. But at the same time it can be done later, AND it might not be that useful as most widgets will be dynamic.

[peterkeating]

More often than not we’re creating widgets via recipes, so perhaps the thumbnail could be specified in the content type settings similar to the group?

Still think having the shape would be useful too for consistency and to give the option to override it with an alternate like you’ve mentioned. This would also be useful if you want to override the shape in a custom admin theme too.