[Multiple Datasource] add popover for Data Source empty state

CHANGELOG.md

@@ -87,6 +87,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add installedPlugins list to data source saved object ([#6348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6348))
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Multiple Datasource] Add empty state component for no connected data source ([#6499](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6499))
+- [Multiple Datasource] Add popover for empty state and redirect to data source management page([#6514](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6514))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
 - [Workspace] Filter left nav menu items according to the current workspace ([#6234](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6234))
 - [Multiple Datasource] Add multi data source support to Timeline ([#6385](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6385))

src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx

@@ -488,4 +488,23 @@ describe('DataSourceSelectable', () => {
       { id: 'test2', label: 'test2', checked: 'on' },
     ]);
   });
+
+  it('should render no data source when no data source filtered out and hide local cluster', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: 'test2' }]}
+        dataSourceFilter={(ds) => false}
+      />
+    );
+    await nextTick();
+    const button = await container.findByTestId('dataSourceEmptyStateHeaderButton');
+    expect(button).toHaveTextContent('No data sources');
+  });
 });

src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx

@@ -251,7 +251,12 @@ export class DataSourceSelectable extends React.Component<
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource />;
+      return (
+        <NoDataSource
+          totalDataSourceCount={this.state.dataSourceOptions.length}
+          application={this.props.application}
+        />
+      );
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;

src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx

@@ -136,4 +136,21 @@ describe('DataSourceView', () => {
     button.click();
     expect(container).toMatchSnapshot();
   });
+
+  it('should render no data source when no data source filtered out and hide local cluster', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceView
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: '' }]}
+        dataSourceFilter={(ds) => false}
+      />
+    );
+    const button = await container.findByTestId('dataSourceEmptyStateHeaderButton');
+    expect(button).toHaveTextContent('No data sources');
+  });
 });

src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx

@@ -35,10 +35,10 @@ interface DataSourceViewProps {
   fullWidth: boolean;
   selectedOption: DataSourceOption[];
   hideLocalCluster: boolean;
+  application?: ApplicationStart;
   savedObjectsClient?: SavedObjectsClientContract;
   notifications?: ToastsStart;
   uiSettings?: IUiSettingsClient;
-  application?: ApplicationStart;
   dataSourceFilter?: (dataSource: any) => boolean;
   onSelectedDataSources?: (dataSources: DataSourceOption[]) => void;
 }
@@ -93,7 +93,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     ) {
       this.setState({
         selectedOption: [],
-        defaultDataSource,
+        showEmptyState: true,
       });
       if (this.props.onSelectedDataSources) {
         this.props.onSelectedDataSources([]);
@@ -146,7 +146,12 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
 
   render() {
     if (this.state.showEmptyState) {
-      return <NoDataSource />;
+      return (
+        <NoDataSource
+          totalDataSourceCount={this.state.selectedOption.length}
+          application={this.props.application}
+        />
+      );
     }
     if (this.state.showError) {
       return <DataSourceErrorMenu />;