[FEATURE] Datasource picker UX design

[mengweieric]

Is your feature request related to a problem? With the integration of Spark data sources, we need a new data source selection process, which allows users to efficiently choose the appropriate data source for their analysis. It needs to be designed with a clear and intuitive user experience, so that users can easily understand the context of their chosen data source.

What solution would you like? Below is the UX mockup for datasource selection flow.

What alternatives have you considered? A clear and concise description of any alternative solutions or features you've considered.

Do you have any additional context? Add any other context or screenshots about the feature request here.

[mengweieric]

There are 2 versions currently implemented with dummy data, and attached here for discussions.

1st version

https://github.com/opensearch-project/dashboards-observability/assets/80358241/5a5aac80-b417-4d55-a161-aecdc1c30088

This version lists all sources in a flattened manner, i.e. external OpenSearch datasources will be [<OpenSearch cluster name>].<index>, <index>/<index-patterns> for local OpenSearch datasources, and for spark datasources.

2nd version

Second version breaks datasources and their indexes into different, nested lists

https://github.com/opensearch-project/dashboards-observability/assets/80358241/801dc54c-4cce-49f9-a40e-896c9978c709

However this approach currently pending for UX design more discussions in terms of implementations as

1. There seems to be no easy and direct way to add search bar to context menu for searching datasources
2. able to add selectable for secondary list for indexes but styling is not consistent
3. no clear specs on highlighting selected sources

[shanilpa]

@mengweieric Thanks for running these POC's here are some improvements so we better align to OUI component usage and patterns based on your first version.

We should use the OuiComboBox - Single Select as the primary component. For the list view we can POC whether OuiComboBox-Groups or OuiComboBox-Virtualized makes the most sense from a UX and performance standpoint.

Additionally if we can POC adding OuiBadge that reflects the query language options per data source without breaking the ComboBox component that would be awesome.