[Meta][UX][Multiple Datasource] Improvement to data source components in the navigation bar

[BionIT]

We introduced a few data source components to be mounted in the navigation bar

• data source selectable: [MD] Create data source menu component able to be mount to nav bar #6082
• data source multi selectable: [Multiple Datasource] Add multi selectable data source component #6211
• data source read only single selected: [Multiple Datasource] Add component to show single selected data source in read only mode #6125
• data source read only aggregated view for all data sources: [Multiple Datasource] Add data source aggregated view to show all compatible data sources or only show used data sources #6129
• data sources read only aggregated view for active data sources: [Multiple Datasource] Add data source aggregated view to show all compatible data sources or only show used data sources #6129

Based on recommendations, we need to add a few improvements included below:

Planned for 3/25 - 4/5/2024:

• [Multiple Datasource] Remove arrow down icon from data source selectable component #6257
• [Backport 2.x] Add default icon for selectable component and make sure the default datasource shows automatically #6346
• [MDS] Update Data source selector behavior for defaultOption #6372
• [Multiple Datasource] Pass selected data sources to plugin consumers when the multi-select component initially loads #6333
• [MD]Add default icon in multi-selectable picker #6357
• Add default icon for selectable component and make sure the default datasource shows automatically #6327
• [Multiple Datasource] Enhanced data source selector with default datasource shows as first choice #6293
• Make sure customer always have a default datasource #6237
• Add icon in datasource table page to show the default datasource #6231
• [Multiple DataSource] DataSourceSelectable support to render label by getting it from dataSourceOptions #6358
• [Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315
• [BUG] Fix bug in data source aggregated view to change it to depend on displayAllCompatibleDataSources property to show the badge value #6291

Planned for 4/8 - 4/19/2024:

• [paused] change popover used by the readonly data source components to tooltip(see notes from @xeniatup for requirements)
• change readonly data source components to show color of the button instead of greyed out or being disabled, and remove info icon UI change for datasource view picker to enable selectable #6497
• list all with active data source component should show / and also display unselected data sources as well [MDS] Refactor dropdown header + Aggregate view UI #6541
• [MD] Add OpenSearch clusters label on top of single and multi selectable dropdown #6370
• Adjust the filter component for multi select to match with requirements below
• multi select data source component should show / and change style/base component for the button group to select all or deselect all
• [MDS] Update Selectable props #6566
• [MDS] Refactor DataSourceAggregatedView #6500
• Fix on data source selectable and readonly component are not consistent #6545
• For selectable component, remove group label and close popover after selection #6515
• UI change for datasource view picker to enable selectable #6497
• Modify the button of selectable component to fix the title overflow issue #6465
• Refactor read-only component to cover more edge cases #6416
• [Multiple Datasource]update no data source text font and button size #6549
• [Multiple Datasource] add popover for Data Source empty state #6514
• [MD] Validate length of title to be no longer than 32 characters #6452
• [MD] Add dropdown header to data source single selector #6431
• [MD] Add OpenSearch cluster group label to top of single selectable dropdown #6400
• [Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors #6440
• [Multiple Datasource] Fix style of data source option inside popover for data source selector, selectable, multi select components #6438

4/22 - 4/30/2024:

• [Multiple Datasource] Pass data source menu to top nav via function instead of using component #6594
• [Multiple Datasource] Add new error database icon to handle error state for data source component #6570
• [Multiple Datasource] Add empty icon and fix empty state handling #6597
• [Multiple Datasource] Fix style for mobile view of a few data source components #6617

[xeniatup]

Adding a more detailed view for: Change popover used by the readonly data source components to tooltip

The UX recommendation is to show a popover (triggered by click) when user can select a single data source/multi-select data sources:

And for providing context (all read only: data source read only single selected, data source read only aggregated) the recommendation is to trigger a tooltip on mouse over.