From 5fec942c3a3d85e9c38c0c2c9afb72b1d168779e Mon Sep 17 00:00:00 2001
From: Kristen Tian <105667444+kristenTian@users.noreply.github.com>
Date: Fri, 21 Oct 2022 17:22:36 -0700
Subject: [PATCH]  [MD] Address UX comments on index pattern stack (#2611)

- 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>

Signed-off-by: Kristen Tian <tyarong@amazon.com>
Signed-off-by: Arpit Bandejiya <abandeji@amazon.com>
---
 CHANGELOG.md                                  |   1 +
 .../data_source_column/data_source_column.tsx |   2 +-
 .../header/__snapshots__/header.test.tsx.snap | 203 ------------------
 .../components/header/header.test.tsx         |  21 +-
 .../components/header/header.tsx              |   4 +-
 5 files changed, 10 insertions(+), 221 deletions(-)
 delete mode 100644 src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/__snapshots__/header.test.tsx.snap

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51a2d0803b52..924aa5280c9e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [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))
 * [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))
 
 ### 🚞 Infrastructure
 
diff --git a/src/plugins/data_source_management/public/components/data_source_column/data_source_column.tsx b/src/plugins/data_source_management/public/components/data_source_column/data_source_column.tsx
index 6ac2258b7811..640eb1b369fd 100644
--- a/src/plugins/data_source_management/public/components/data_source_column/data_source_column.tsx
+++ b/src/plugins/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/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/__snapshots__/header.test.tsx.snap
deleted file mode 100644
index e2e49b95177c..000000000000
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/__snapshots__/header.test.tsx.snap
+++ /dev/null
@@ -1,203 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header should render existing data sources list when choose to use data source 1`] = `
-<Fragment>
-  <div>
-    <EuiTitle
-      size="s"
-    >
-      <h2>
-        <FormattedMessage
-          defaultMessage="Step {currentStepNumber} of {totalStepNumber}: Configure data source"
-          id="indexPatternManagement.createIndexPattern.stepDataSourceHeader"
-          values={
-            Object {
-              "currentStepNumber": 0,
-              "totalStepNumber": 0,
-            }
-          }
-        />
-      </h2>
-    </EuiTitle>
-    <EuiText>
-      <FormattedMessage
-        defaultMessage="Pick a data source within which to configure index patterns."
-        id="indexPatternManagement.createIndexPattern.stepDataSourceLabel"
-        values={Object {}}
-      />
-    </EuiText>
-    <EuiSpacer
-      size="m"
-    />
-    <EuiRadio
-      checked={false}
-      compressed={true}
-      data-test-subj="createIndexPatternStepDataSourceUseDefaultRadio"
-      id="useDefault"
-      label={
-        <FormattedMessage
-          defaultMessage="Use default data source"
-          id="indexPatternManagement.createIndexPattern.stepDataSource.useDefaultLabel"
-          values={Object {}}
-        />
-      }
-      onChange={[Function]}
-    />
-    <EuiSpacer
-      size="m"
-    />
-    <EuiRadio
-      checked={true}
-      compressed={true}
-      data-test-subj="createIndexPatternStepDataSourceUseDataSourceRadio"
-      id="useDataSource"
-      label={
-        <FormattedMessage
-          defaultMessage="Use external data source connection"
-          id="indexPatternManagement.createIndexPattern.stepDataSource.useDataSourceLabel"
-          values={Object {}}
-        />
-      }
-      onChange={[Function]}
-    />
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiSpacer
-        size="m"
-      />
-      <EuiSelectable
-        aria-label="Search data sources"
-        isPreFiltered={false}
-        onChange={[Function]}
-        options={Array []}
-        searchProps={
-          Object {
-            "data-test-subj": "selectDataSources",
-            "isInvalid": true,
-            "placeholder": "Search data sources",
-          }
-        }
-        searchable={true}
-        singleSelection="always"
-      >
-        <Component />
-      </EuiSelectable>
-    </EuiFlexItem>
-    <EuiSpacer
-      size="m"
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
-    >
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          data-test-subj="createIndexPatternStepDataSourceNextStepButton"
-          fill={true}
-          iconSide="right"
-          iconType="arrowRight"
-          isDisabled={true}
-          onClick={[Function]}
-        >
-          <FormattedMessage
-            defaultMessage="Next step"
-            id="indexPatternManagement.createIndexPattern.step.nextStepButton"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</Fragment>
-`;
-
-exports[`Header should render normally 1`] = `
-<Fragment>
-  <div>
-    <EuiTitle
-      size="s"
-    >
-      <h2>
-        <FormattedMessage
-          defaultMessage="Step {currentStepNumber} of {totalStepNumber}: Configure data source"
-          id="indexPatternManagement.createIndexPattern.stepDataSourceHeader"
-          values={
-            Object {
-              "currentStepNumber": 0,
-              "totalStepNumber": 0,
-            }
-          }
-        />
-      </h2>
-    </EuiTitle>
-    <EuiText>
-      <FormattedMessage
-        defaultMessage="Pick a data source within which to configure index patterns."
-        id="indexPatternManagement.createIndexPattern.stepDataSourceLabel"
-        values={Object {}}
-      />
-    </EuiText>
-    <EuiSpacer
-      size="m"
-    />
-    <EuiRadio
-      checked={true}
-      compressed={true}
-      data-test-subj="createIndexPatternStepDataSourceUseDefaultRadio"
-      id="useDefault"
-      label={
-        <FormattedMessage
-          defaultMessage="Use default data source"
-          id="indexPatternManagement.createIndexPattern.stepDataSource.useDefaultLabel"
-          values={Object {}}
-        />
-      }
-      onChange={[Function]}
-    />
-    <EuiSpacer
-      size="m"
-    />
-    <EuiRadio
-      checked={false}
-      compressed={true}
-      data-test-subj="createIndexPatternStepDataSourceUseDataSourceRadio"
-      id="useDataSource"
-      label={
-        <FormattedMessage
-          defaultMessage="Use external data source connection"
-          id="indexPatternManagement.createIndexPattern.stepDataSource.useDataSourceLabel"
-          values={Object {}}
-        />
-      }
-      onChange={[Function]}
-    />
-    <EuiSpacer
-      size="m"
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
-    >
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          data-test-subj="createIndexPatternStepDataSourceNextStepButton"
-          fill={true}
-          iconSide="right"
-          iconType="arrowRight"
-          isDisabled={false}
-          onClick={[Function]}
-        >
-          <FormattedMessage
-            defaultMessage="Next step"
-            id="indexPatternManagement.createIndexPattern.step.nextStepButton"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</Fragment>
-`;
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.test.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.test.tsx
index 8a7aa9b1e461..ffb80bec555f 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/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/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx
index d7af93be8f5b..e5a6fdf60c0e 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_data_source/components/header/header.tsx
+++ b/src/plugins/index_pattern_management/public/components/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}