Apply get indice error handling in step index pattern (#2652)

Error handling only happens before loading the indices to step index pattern but not within. Therefore pass the error handling inside the step as well to render error state.

Signed-off-by: Kristen Tian <tyarong@amazon.com>

Author: kristenTian

CHANGELOG.md

@@ -39,6 +39,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Multi DataSource] Address UX comments on Edit Data source page ([#2629](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2629))
 * [BUG] Fix suggestion list cutoff issue ([#2607](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2607))
 * [Multi DataSource] Address UX comments on index pattern management stack ([#2611](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2611))
+* [Multi DataSource] Apply get indices error handling in step index pattern ([#2652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2652))
 
 ### 🚞 Infrastructure
 

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap

@@ -62,6 +62,7 @@ const allIndices = [
 ];
 
 const goToNextStep = () => {};
+const catchAndWarn = jest.fn(async (asyncFn) => await asyncFn);
 
 const mockContext = mockManagementPlugin.createIndexPatternManagmentContext();
 
@@ -94,6 +95,7 @@ describe('StepIndexPattern', () => {
         goToNextStep,
         indexPatternCreationType: mockIndexPatternCreationType,
         initialQuery: 'opensearch-dashboards',
+        catchAndWarn,
       },
       mockContext
     );
@@ -116,6 +118,7 @@ describe('StepIndexPattern', () => {
         isIncludingSystemIndices: false,
         goToNextStep,
         indexPatternCreationType: mockIndexPatternCreationType,
+        catchAndWarn,
       },
       mockContext
     );
@@ -139,6 +142,7 @@ describe('StepIndexPattern', () => {
         isIncludingSystemIndices: false,
         goToNextStep,
         indexPatternCreationType: mockIndexPatternCreationType,
+        catchAndWarn,
       },
       mockContext
     );
@@ -163,6 +167,7 @@ describe('StepIndexPattern', () => {
         isIncludingSystemIndices: false,
         goToNextStep,
         indexPatternCreationType: mockIndexPatternCreationType,
+        catchAndWarn,
       },
       mockContext
     );
@@ -179,6 +184,7 @@ describe('StepIndexPattern', () => {
         isIncludingSystemIndices: false,
         goToNextStep,
         indexPatternCreationType: mockIndexPatternCreationType,
+        catchAndWarn,
       },
       mockContext
     );
@@ -194,6 +200,7 @@ describe('StepIndexPattern', () => {
         isIncludingSystemIndices: false,
         goToNextStep,
         indexPatternCreationType: mockIndexPatternCreationType,
+        catchAndWarn,
       },
       mockContext
     );

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.test.tsx

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import React, { Component } from 'react';
+import React, { Component, ReactElement } from 'react';
 import {
   EuiSpacer,
   EuiCallOut,
@@ -65,6 +65,11 @@ interface StepIndexPatternProps {
   showSystemIndices: boolean;
   dataSourceRef?: DataSourceRef;
   stepInfo: StepInfo;
+  catchAndWarn: (
+    asyncFn: Promise<MatchedItem[]>,
+    errorValue: [] | string[],
+    errorMsg: ReactElement
+  ) => Promise<unknown>;
 }
 
 interface StepIndexPatternState {
@@ -165,7 +170,7 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
   };
 
   fetchIndices = async (query: string) => {
-    const { indexPatternCreationType, dataSourceRef } = this.props;
+    const { indexPatternCreationType, dataSourceRef, catchAndWarn } = this.props;
     const dataSourceId = dataSourceRef?.id;
     const { existingIndexPatterns } = this.state;
     const { http } = this.context.services;
@@ -180,16 +185,27 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
 
     this.setState({ isLoadingIndices: true, indexPatternExists: false });
 
+    const indicesFailMsg = (
+      <FormattedMessage
+        id="indexPatternManagement.createIndexPattern.loadIndicesFailMsg"
+        defaultMessage="Failed to load indices"
+      />
+    );
+
     if (query.endsWith('*')) {
       const exactMatchedIndices = await ensureMinimumTime(
-        getIndices({
-          http,
-          getIndexTags,
-          pattern: query,
-          showAllIndices,
-          searchClient,
-          dataSourceId,
-        })
+        catchAndWarn(
+          getIndices({
+            http,
+            getIndexTags,
+            pattern: query,
+            showAllIndices,
+            searchClient,
+            dataSourceId,
+          }),
+          [],
+          indicesFailMsg
+        )
       );
       // If the search changed, discard this state
       if (query !== this.lastQuery) {
@@ -200,22 +216,30 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
     }
 
     const [partialMatchedIndices, exactMatchedIndices] = await ensureMinimumTime([
-      getIndices({
-        http,
-        getIndexTags,
-        pattern: `${query}*`,
-        showAllIndices,
-        searchClient,
-        dataSourceId,
-      }),
-      getIndices({
-        http,
-        getIndexTags,
-        pattern: query,
-        showAllIndices,
-        searchClient,
-        dataSourceId,
-      }),
+      catchAndWarn(
+        getIndices({
+          http,
+          getIndexTags,
+          pattern: `${query}*`,
+          showAllIndices,
+          searchClient,
+          dataSourceId,
+        }),
+        [],
+        indicesFailMsg
+      ),
+      catchAndWarn(
+        getIndices({
+          http,
+          getIndexTags,
+          pattern: query,
+          showAllIndices,
+          searchClient,
+          dataSourceId,
+        }),
+        [],
+        indicesFailMsg
+      ),
     ]);
 
     // If the search changed, discard this state

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx

@@ -317,6 +317,7 @@ export class CreateIndexPatternWizard extends Component<
             }
             dataSourceRef={dataSourceRef}
             stepInfo={stepInfo}
+            catchAndWarn={this.catchAndWarn}
           />
         </EuiPageContent>
       );