I think one feature I'd love to see is dividing the list of options in the select component in 2 distinct groups:

Data sources that manage Alert rules and other data sources.

As a user I'd love to be able to quickly select from a set of data sources (Prometheus and Loki) that have Manage alerts via Alerting UI turned on.

react-select does seem to support Grouped drop-down content and since MultiSelect is a wrapper component it should work.

@gillesdemey I've implemented a grouped version of it, let me know if this looks better, thanks! 🙏

That looks amazing! 🤩 Tagging @brendamuir here to refine the wording / terminology here a bit.

Hey-what does "data sources that manage alert rules mean" and how are they different to "other data sources"?

Data sources that manage alert rules.
Other data sources.
--> some typo/caps changes in there. I'd like to fully understand what it means before making a real call-but don't want to block if this needs merging asap.

I'm sure @gillesdemey can explain this better, but from what I can tell the difference resides on whether the "Manage alerts via the Alerting UI" setting in the admin section of the datasource is turned on or off

So basically the datasources that don't have the option turned on are listed under "Other datasources" and the difference is they don't manage alerts from within Grafana. I believe only Prometheus and Loki will fall under the first category as those are the ones that we support.

--> some typo/caps changes in there. I'd like to fully understand what it means before making a real call-but don't want to block if this needs merging asap.

@brendamuir I can wait for your input before merging, let me know if you need extra clarification, thank you!!

I've updated the texts according to our conversation in Slack. Please let me know if it looks better now, thank you!