[Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors

CHANGELOG.md

@@ -91,6 +91,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Dynamic Configurations] Improve dynamic configurations by adding cache and simplifying client fetch ([#6364](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6364))
 - [CSP Handler] Update CSP handler to only query and modify frame ancestors instead of all CSP directives ([#6398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6398))
 - [MD] Add OpenSearch cluster group label to top of single selectable dropdown  ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))
+- [Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors ([#6440](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6440))
 - [Workspace] Support workspace in saved objects client in server side. ([#6365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6365))
 - [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))
 

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

@@ -13,9 +13,11 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
-import { getDataSourcesWithFields } from '../utils';
+import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
+import { DataSourceBaseState } from '../data_source_menu/types';
 
 interface DataSourceAggregatedViewProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -27,7 +29,7 @@ interface DataSourceAggregatedViewProps {
   displayAllCompatibleDataSources: boolean;
 }
 
-interface DataSourceAggregatedViewState {
+interface DataSourceAggregatedViewState extends DataSourceBaseState {
   isPopoverOpen: boolean;
   allDataSourcesIdToTitleMap: Map<string, any>;
 }
@@ -44,6 +46,7 @@ export class DataSourceAggregatedView extends React.Component<
     this.state = {
       isPopoverOpen: false,
       allDataSourcesIdToTitleMap: new Map(),
+      showError: false,
     };
   }
 
@@ -89,15 +92,18 @@ export class DataSourceAggregatedView extends React.Component<
         }
       })
       .catch(() => {
-        this.props.notifications.addWarning(
-          i18n.translate('dataSource.fetchDataSourceError', {
-            defaultMessage: 'Unable to fetch existing data sources',
-          })
-        );
+        handleDataSourceFetchError(this.onError.bind(this), this.props.notifications);
       });
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     const button = (
       <EuiButtonIcon
         data-test-subj="dataSourceAggregatedViewInfoButton"

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

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiIcon, EuiText } from '@elastic/eui';
+import React from 'react';
+
+export const DataSourceErrorMenu = () => {
+  return (
+    <>
+      <EuiIcon type={'crossInCircleFilled'} color={'danger'} />
+      <EuiText color={'danger'}>Error</EuiText>
+    </>
+  );
+};

src/plugins/data_source_management/public/components/data_source_error_menu/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export { DataSourceErrorMenu } from './data_source_error_menu';

src/plugins/data_source_management/public/components/data_source_menu/types.ts

@@ -28,6 +28,10 @@ export interface DataSourceBaseConfig {
   disabled?: boolean;
 }
 
+export interface DataSourceBaseState {
+  showError: boolean;
+}
+
 export interface DataSourceMenuProps<T = any> {
   componentType: DataSourceComponentType;
   componentConfig: T;

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

@@ -5,10 +5,11 @@
 
 import React from 'react';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
-import { i18n } from '@osd/i18n';
 import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceFilterGroup, SelectedDataSourceOption } from './data_source_filter_group';
-import { getDataSourcesWithFields } from '../utils';
+import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
+import { DataSourceBaseState } from '../data_source_menu/types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
 
 export interface DataSourceMultiSeletableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -19,7 +20,7 @@ export interface DataSourceMultiSeletableProps {
   uiSettings?: IUiSettingsClient;
 }
 
-interface DataSourceMultiSeletableState {
+interface DataSourceMultiSeletableState extends DataSourceBaseState {
   dataSourceOptions: SelectedDataSourceOption[];
   selectedOptions: SelectedDataSourceOption[];
   defaultDataSource: string | null;
@@ -38,6 +39,7 @@ export class DataSourceMultiSelectable extends React.Component<
       dataSourceOptions: [],
       selectedOptions: [],
       defaultDataSource: null,
+      showError: false,
     };
   }
 
@@ -84,14 +86,18 @@ export class DataSourceMultiSelectable extends React.Component<
 
       this.props.onSelectedDataSources(selectedOptions);
     } catch (error) {
-      this.props.notifications.addWarning(
-        i18n.translate('dataSource.fetchDataSourceError', {
-          defaultMessage: 'Unable to fetch existing data sources',
-        })
+      handleDataSourceFetchError(
+        this.onError.bind(this),
+        this.props.notifications,
+        this.props.onSelectedDataSources
       );
     }
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   onChange(selectedOptions: SelectedDataSourceOption[]) {
     if (!this._isMounted) return;
     this.setState({
@@ -101,6 +107,9 @@ export class DataSourceMultiSelectable extends React.Component<
   }
 
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     return (
       <DataSourceFilterGroup
         selectedOptions={this.state.selectedOptions}

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

@@ -145,6 +145,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: false,
     });
 
     containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
@@ -165,6 +166,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: false,
     });
 
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
@@ -341,6 +343,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: false,
     });
   });
 
@@ -362,12 +365,13 @@ describe('DataSourceSelectable', () => {
 
     const containerInstance = container.instance();
 
-    expect(onSelectedDataSource).toBeCalledTimes(0);
+    expect(onSelectedDataSource).toBeCalledWith([]);
     expect(containerInstance.state).toEqual({
       dataSourceOptions: [],
       defaultDataSource: null,
       isPopoverOpen: false,
       selectedOption: [],
+      showError: true,
     });
 
     containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
@@ -388,6 +392,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: true,
     });
 
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);

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

@@ -25,11 +25,17 @@ import {
   getDataSourcesWithFields,
   getDefaultDataSource,
   getFilteredDataSources,
+  handleDataSourceFetchError,
 } from '../utils';
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
-import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import {
+  DataSourceBaseState,
+  DataSourceGroupLabelOption,
+  DataSourceOption,
+} from '../data_source_menu/types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
 import { DataSourceItem } from '../data_source_item';
 import './data_source_selectable.scss';
 import { DataSourceDropDownHeader } from '../drop_down_header';
@@ -47,7 +53,7 @@ interface DataSourceSelectableProps {
   uiSettings?: IUiSettingsClient;
 }
 
-interface DataSourceSelectableState {
+interface DataSourceSelectableState extends DataSourceBaseState {
   dataSourceOptions: DataSourceOption[];
   isPopoverOpen: boolean;
   selectedOption?: DataSourceOption[];
@@ -74,6 +80,7 @@ export class DataSourceSelectable extends React.Component<
       isPopoverOpen: false,
       selectedOption: [],
       defaultDataSource: null,
+      showError: false,
     };
 
     this.onChange.bind(this);
@@ -192,14 +199,18 @@ export class DataSourceSelectable extends React.Component<
       // handle default data source if there is no valid active option
       this.handleDefaultDataSource(dataSourceOptions, defaultDataSource);
     } catch (error) {
-      this.props.notifications.addWarning(
-        i18n.translate('dataSource.fetchDataSourceError', {
-          defaultMessage: 'Unable to fetch existing data sources',
-        })
+      handleDataSourceFetchError(
+        this.onError.bind(this),
+        this.props.notifications,
+        this.props.onSelectedDataSources
       );
     }
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   onChange(options: DataSourceOption[]) {
     if (!this._isMounted) return;
     const optionsWithoutGroupLabel = options.filter(
@@ -231,6 +242,9 @@ export class DataSourceSelectable extends React.Component<
   };
 
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     const button = (
       <>
         <EuiButtonEmpty