[Multiple Datasource] add popover for Data Source empty state (opense…

…arch-project#6514) * add empty state popover Signed-off-by: yujin-emma <[email protected]> * fix failed test Signed-off-by: yujin-emma <[email protected]> --------- Signed-off-by: yujin-emma <[email protected]> Signed-off-by: Yu Jin <[email protected]>
SuZhou-Joe · Apr 17, 2024 · d8ddc1a · d8ddc1a
1 parent bd0ea35
commit d8ddc1a
Show file tree

Hide file tree

Showing 10 changed files with 377 additions and 135 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/...ource_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/...ource_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -403,4 +403,22 @@ describe('DataSourceSelectable', () => {
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
     expect(onSelectedDataSource).toHaveBeenCalled();
   });
+  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');
+  });
 });
diff --git a/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/...ata_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -228,7 +228,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 />;

diff --git a/...anagement/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/...anagement/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
diff --git a/...ugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx b/...ugins/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');
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/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 />;