[MD] Address UX comments on index pattern stack

- Update data source column header in index pattern table - Update index pattern column name to Title - Remove data source search field error check given it is not required Signed-off-by: Kristen Tian <tyarong@amazon.com>
opensearch-project · Oct 21, 2022 · 1a8268d · 1a8268d
1 parent 8d5e504
commit 1a8268d
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 248 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,6 +35,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [MD] Add data source param to low-level search call in Discover ([#2431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2431))
 * [Multi DataSource] Skip data source view in index pattern step when pick default ([#2574](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2574))
 * [Multi DataSource] Address UX comments on Edit Data source page ([#2629](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2629))
+* [Multi DataSource] Address UX comments on index pattern management stack ([#2611](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2611))
 
 ### 🚞 Infrastructure
 

diff --git a/...lugins/data_source_management/public/components/data_source_column/data_source_column.tsx b/...lugins/data_source_management/public/components/data_source_column/data_source_column.tsx
@@ -24,7 +24,7 @@ export class DataSourceColumn implements IndexPatternTableColumn<DataSourceMap>
   public euiColumn = {
     field: 'referenceId',
     name: i18n.translate('dataSource.management.dataSourceColumn', {
-      defaultMessage: 'Data Source',
+      defaultMessage: 'Data Source Connection',
     }),
     render: (referenceId: string, index: IndexPatternTableRecord) => {
       if (!referenceId) {

diff --git a/...n_wizard/components/step_data_source/components/header/__snapshots__/header.test.tsx.snap b/...n_wizard/components/step_data_source/components/header/__snapshots__/header.test.tsx.snap
diff --git a/...create_index_pattern_wizard/components/step_data_source/components/header/header.test.tsx b/...create_index_pattern_wizard/components/step_data_source/components/header/header.test.tsx
@@ -18,20 +18,6 @@ jest.mock('../../../../../../../../../plugins/opensearch_dashboards_react/public
 afterAll(() => jest.clearAllMocks());
 
 describe('Header', () => {
-  it('should render normally', () => {
-    const component = shallowWithIntl(
-      <Header
-        onDataSourceSelected={() => {}}
-        dataSourceRef={{ type: 'type', id: 'id', title: 'title' }!}
-        goToNextStep={() => {}}
-        isNextStepDisabled={true}
-        stepInfo={{ totalStepNumber: 0, currentStepNumber: 0 }}
-      />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
   it('should render existing data sources list when choose to use data source', () => {
     const component = shallowWithIntl(
       <Header
@@ -51,7 +37,12 @@ describe('Header', () => {
         },
       });
 
-    expect(component).toMatchSnapshot();
+    expect(
+      component
+        .find('[data-test-subj="createIndexPatternStepDataSourceSelectDataSource"]')
+        .first()
+        .exists()
+    ).toBeTruthy();
   });
 
   it('should disable next step before select data source', () => {

diff --git a/...ents/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx b/...ents/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx
@@ -64,7 +64,7 @@ export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
         }
       })
       .catch(() => {
-        toasts.addWarning(
+        toasts.addDanger(
           i18n.translate(
             'indexPatternManagement.createIndexPattern.stepDataSource.fetchDataSourceError',
             {
@@ -145,6 +145,7 @@ export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
           <EuiFlexItem grow={false}>
             <EuiSpacer size="m" />
             <EuiSelectable
+              data-test-subj="createIndexPatternStepDataSourceSelectDataSource"
               aria-label={i18n.translate(
                 'indexPatternManagement.createIndexPattern.stepDataSource.searchlabel',
                 {
@@ -160,7 +161,6 @@ export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
                     defaultMessage: 'Search data sources',
                   }
                 ),
-                isInvalid: !!dataSources,
               }}
               singleSelection={'always'}
               options={dataSources}

diff --git a/...mponents/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx b/...mponents/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.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