[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id

[yujin-emma]

Description

Today the datasource menu does not populate the label of the datasource based on the datasourceId. This can be confusing to users, who may not know what human-readable datasource they are looking at.

This PR fix the issue in DataSourceView component. Adding the getDataSourceById to get the complete data source saved object when plugin only pass id

Issues Resolved

#6274

Screenshot

Testing the changes

When only pass id in the DataSourceMenu

<DataSourceMenu
        setMenuMountPoint={setActionMenu}
        componentType={'DataSourceView'}
        componentConfig={{fullWidth: true, savedObjects: savedObjects.client,
        notifications: notifications,
        activeOption: [{id: '5aaa7880-f116-11ee-9a73-d3c4f99fbc1f'}],
      }}

when pass invalid dataSourceId

<DataSourceMenu
        setMenuMountPoint={setActionMenu}
        componentType={'DataSourceView'}
        componentConfig={{fullWidth: true, savedObjects: savedObjects.client,
        notifications: notifications,
        activeOption: [{id: '5aaa7880-f116-11ee-9a73'}], // format incorrect 
        // onSelectedDataSources: (dataSources) => console.log(dataSources)
      }}

When activeOption is empty, getDataSourceById throw out exception

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[codecov]

Codecov Report

Attention: Patch coverage is 72.72727% with 6 lines in your changes are missing coverage. Please review.

Project coverage is 67.49%. Comparing base (fb31b2d) to head (ef5066d).

Files	Patch %	Lines
...c/components/data_source_view/data_source_view.tsx	71.42%	3 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6315      +/-   ##
==========================================
- Coverage   67.51%   67.49%   -0.03%     
==========================================
  Files        3376     3376              
  Lines       65783    65798      +15     
  Branches    10637    10639       +2     
==========================================
- Hits        44415    44408       -7     
- Misses      18785    18804      +19     
- Partials     2583     2586       +3     

Flag	Coverage Δ
Linux_1	?
Linux_2	55.60% <ø> (ø)
Linux_3	?
Linux_4	?
Windows_1	32.62% <ø> (-0.03%)	⬇️
Windows_2	55.57% <ø> (ø)
Windows_3	44.85% <72.72%> (+<0.01%)	⬆️
Windows_4	35.02% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[bandinib-amzn]

Hi @yujin-emma

1. Can you add more clear and detailed description in PR overview? It is hard to understand what problem this PR is fixing without any context?

2. Can you fix codecov/patch CI failure by adding more tests?

3. As a improvement I would suggest in render method only render component and extract all logic to separate private method. It would be easy to read and test.

[bandinib-amzn]

just curious: why do we need componentDidMount and componentWillUnmount for this change?

[yujin-emma]

We need to check the props.selectedOption.label exist, if not, need to call getDataSourceById to get the title back and set this value, since we only have one option, we only need to call at most once before rendering, this is the reason why put a componentDidMount here. As for this._isMounted = false; in componentWillUnmount, this refer to code here: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx#L65

[bandinib-amzn]

Can you please explain me this - why are we using this.state for selectedOption now instead of this.props?

[yujin-emma]

we pass the selectedOption from props, there can be some empty field, e.g. label is optional, we will use state to reconstruct this and render with the state one

[xinruiba]

+1, props should be enough.

[yujin-emma]

We do not only copy the value from props, but also add missing label in the state, therefore, only state.selectedOption contains sufficient information to render, props.selectedOption can miss the label for some plugins

[BionIT]

test coverage check failed, can you add more tests?

[BionIT]

Is it a bug or a new feature/enhancement?

[BionIT]

saved object client is not required

[BionIT]

notification service is not required

[BionIT]

savedobjects and notifications should be optional config

[xinruiba]

LGTM, thanks