From ad8bf132f25c258d0cdfb7235c389b0c0c127438 Mon Sep 17 00:00:00 2001
From: Yibo Wang <yibow@amazon.com>
Date: Wed, 5 Oct 2022 18:04:25 -0700
Subject: [PATCH 1/3] Add experimental callout for index pattern section

Signed-off-by: Yibo Wang <yibow@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../create_index_pattern_wizard.tsx           |  2 +
 .../experimental_callout.tsx                  | 61 ++++++++++++++++++
 .../components/experimental_callout/index.ts  |  6 ++
 .../index_pattern_table.tsx                   | 64 ++++++++++---------
 5 files changed, 104 insertions(+), 30 deletions(-)
 create mode 100644 src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
 create mode 100644 src/plugins/index_pattern_management/public/components/experimental_callout/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f86e98aedc5..6c85017c15a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 * [MD] Support legacy client for data source ([#2204](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2204))
 * [Plugin Helpers] Facilitate version changes ([#2398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2398))
+* [MD] Add experimental callout for index pattern section ([#2523](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2523))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
index f0f0563eee87..88499919d65a 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
@@ -65,6 +65,7 @@ import { DataSourceRef, IndexPatternManagmentContextValue } from '../../types';
 import { MatchedItem } from './types';
 import { DuplicateIndexPatternError, IndexPattern } from '../../../../data/public';
 import { StepDataSource } from './components/step_data_source';
+import { ExperimentalCallout } from '../experimental_callout';
 
 interface CreateIndexPatternWizardState {
   step: StepType;
@@ -352,6 +353,7 @@ export class CreateIndexPatternWizard extends Component<
 
     return (
       <>
+        <ExperimentalCallout />
         {content}
         <EuiGlobalToastList
           toasts={this.state.toasts}
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
new file mode 100644
index 000000000000..5629e5759fb3
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
+
+export const ExperimentalCallout = () => {
+  return (
+    <>
+      <EuiCallOut title={TITLE} iconType="alert" color="warning">
+        <p>
+          <EuiText>
+            {DESCRIPTION_FIRST_PART}
+            <b>{DATASOURCE_CONNECTION}</b>
+            {DESCRIPTION_SECOND_PART}
+            <b>{DEFAULT}</b>
+            {DESCRIPTION_THIRD_PART}
+          </EuiText>
+        </p>
+      </EuiCallOut>
+      <EuiSpacer size="m" />
+    </>
+  );
+};
+
+const TITLE = i18n.translate('indexPatternManagement.experimentalFeatureCallout.title', {
+  defaultMessage: 'Experimental feature active',
+});
+
+const DESCRIPTION_FIRST_PART = i18n.translate(
+  'indexPatternManagement.experimentalFeatureCallout.descriptionPartOne',
+  {
+    defaultMessage: 'The experimental feature ',
+  }
+);
+const DATASOURCE_CONNECTION = i18n.translate(
+  'indexPatternManagement.experimentalFeatureCallout.datasourceConnection',
+  {
+    defaultMessage: 'Data Source Connection ',
+  }
+);
+const DESCRIPTION_SECOND_PART = i18n.translate(
+  'indexPatternManagement.experimentalFeatureCallout.descriptionPartTwo',
+  {
+    defaultMessage:
+      'is active. To create an index pattern without using data from an external source, use ',
+  }
+);
+const DEFAULT = i18n.translate('indexPatternManagement.experimentalFeatureCallout.default', {
+  defaultMessage: 'default',
+});
+const DESCRIPTION_THIRD_PART = i18n.translate(
+  'indexPatternManagement.experimentalFeatureCallout.descriptionPartThree',
+  {
+    defaultMessage:
+      '. Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.',
+  }
+);
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/index.ts b/src/plugins/index_pattern_management/public/components/experimental_callout/index.ts
new file mode 100644
index 000000000000..1f6d2620bf37
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './experimental_callout';
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
index c19c9f5b0c2d..a750db2df802 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
@@ -58,6 +58,7 @@ import { EmptyState } from './empty_state';
 import { MatchedItem, ResolveIndexResponseItemAlias } from '../create_index_pattern_wizard/types';
 import { EmptyIndexPatternPrompt } from './empty_index_pattern_prompt';
 import { getIndices } from '../create_index_pattern_wizard/lib';
+import { ExperimentalCallout } from '../experimental_callout';
 
 const pagination = {
   initialPageSize: 10,
@@ -242,36 +243,39 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
   }
 
   return (
-    <EuiPageContent data-test-subj="indexPatternTable" role="region" aria-label={ariaRegion}>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2>{title}</h2>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText>
-            <p>
-              <FormattedMessage
-                id="indexPatternManagement.indexPatternTable.indexPatternExplanation"
-                defaultMessage="Create and manage the index patterns that help you retrieve your data from OpenSearch."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
-      <EuiInMemoryTable
-        allowNeutralSort={false}
-        itemId="id"
-        isSelectable={false}
-        items={indexPatterns}
-        columns={columns}
-        pagination={pagination}
-        sorting={sorting}
-        search={search}
-      />
-    </EuiPageContent>
+    <>
+      <ExperimentalCallout />
+      <EuiPageContent data-test-subj="indexPatternTable" role="region" aria-label={ariaRegion}>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2>{title}</h2>
+            </EuiTitle>
+            <EuiSpacer size="s" />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="indexPatternManagement.indexPatternTable.indexPatternExplanation"
+                  defaultMessage="Create and manage the index patterns that help you retrieve your data from OpenSearch."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+        <EuiInMemoryTable
+          allowNeutralSort={false}
+          itemId="id"
+          isSelectable={false}
+          items={indexPatterns}
+          columns={columns}
+          pagination={pagination}
+          sorting={sorting}
+          search={search}
+        />
+      </EuiPageContent>
+    </>
   );
 };
 

From 723a3fb6ad815259ce35b7bde0a8012269b10dbc Mon Sep 17 00:00:00 2001
From: Yibo Wang <yibow@amazon.com>
Date: Thu, 6 Oct 2022 12:12:05 -0700
Subject: [PATCH 2/3] add switch for experimental callout & update snapshots

Signed-off-by: Yibo Wang <yibow@amazon.com>
---
 .../create_index_pattern_wizard.tsx           |  2 +-
 .../experimental_callout.test.tsx.snap        | 31 +++++++++++++++++++
 .../experimental_callout.test.tsx             | 15 +++++++++
 .../experimental_callout.tsx                  |  9 ++++--
 .../index_pattern_table.tsx                   |  2 +-
 5 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
 create mode 100644 src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx

diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
index 88499919d65a..4ed3cdcdad44 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx
@@ -353,7 +353,7 @@ export class CreateIndexPatternWizard extends Component<
 
     return (
       <>
-        <ExperimentalCallout />
+        {this.dataSourceEnabled ? <ExperimentalCallout /> : null}
         {content}
         <EuiGlobalToastList
           toasts={this.state.toasts}
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap b/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
new file mode 100644
index 000000000000..1e62f59f3c0f
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Index pattern experimental callout component should render normally 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    data-test-subj="index-pattern-experimental-callout"
+    iconType="alert"
+    title="Experimental feature active"
+  >
+    <p>
+      <EuiText
+        data-test-subj="index-pattern-experimental-callout-text"
+      >
+        The experimental feature 
+        <b>
+          Data Source Connection 
+        </b>
+        is active. To create an index pattern without using data from an external source, use 
+        <b>
+          default
+        </b>
+        . Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.
+      </EuiText>
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
new file mode 100644
index 000000000000..971b041af8da
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ExperimentalCallout } from './experimental_callout';
+
+describe('Index pattern experimental callout component', () => {
+  test('should render normally', () => {
+    const component = shallow(<ExperimentalCallout />);
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
index 5629e5759fb3..3d8f6517c4b1 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
@@ -10,9 +10,14 @@ import { EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
 export const ExperimentalCallout = () => {
   return (
     <>
-      <EuiCallOut title={TITLE} iconType="alert" color="warning">
+      <EuiCallOut
+        title={TITLE}
+        iconType="alert"
+        color="warning"
+        data-test-subj="index-pattern-experimental-callout"
+      >
         <p>
-          <EuiText>
+          <EuiText data-test-subj="index-pattern-experimental-callout-text">
             {DESCRIPTION_FIRST_PART}
             <b>{DATASOURCE_CONNECTION}</b>
             {DESCRIPTION_SECOND_PART}
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
index a750db2df802..52854695969c 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx
@@ -244,7 +244,7 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
 
   return (
     <>
-      <ExperimentalCallout />
+      {dataSourceEnabled ? <ExperimentalCallout /> : null}
       <EuiPageContent data-test-subj="indexPatternTable" role="region" aria-label={ariaRegion}>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>

From b9ed2851f7a93192a5160bb2f80a382eda63e378 Mon Sep 17 00:00:00 2001
From: Yibo Wang <yibow@amazon.com>
Date: Mon, 10 Oct 2022 11:20:49 -0700
Subject: [PATCH 3/3] Update UT

Signed-off-by: Yibo Wang <yibow@amazon.com>
---
 CHANGELOG.md                                  |  1 -
 .../experimental_callout.test.tsx.snap        | 86 +++++++++++++++----
 .../experimental_callout.test.tsx             | 15 +++-
 .../experimental_callout.tsx                  |  8 +-
 4 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a31a0e334d1c..24db7a4720cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,7 +56,6 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Viz Builder] Create a new wizard directly on a dashboard ([#2384](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2384))
 * [Multi DataSource] UX enhacement on index pattern management stack ([#2505](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2505))
 * [Multi DataSource] UX enhancement on Data source management stack ([#2521](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2521))
-* [Multi DataSource] Add experimental callout for index pattern section ([#2523](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2523))
 
 ### 🐛 Bug Fixes
 
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap b/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
index 1e62f59f3c0f..16d951e8ebc7 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
@@ -1,31 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Index pattern experimental callout component should render normally 1`] = `
-<Fragment>
+<ExperimentalCallout>
   <EuiCallOut
     color="warning"
     data-test-subj="index-pattern-experimental-callout"
     iconType="alert"
     title="Experimental feature active"
   >
-    <p>
+    <div
+      className="euiCallOut euiCallOut--warning"
+      data-test-subj="index-pattern-experimental-callout"
+    >
+      <div
+        className="euiCallOutHeader"
+      >
+        <EuiIcon
+          aria-hidden="true"
+          className="euiCallOutHeader__icon"
+          color="inherit"
+          size="m"
+          type="alert"
+        >
+          <span
+            aria-hidden="true"
+            className="euiCallOutHeader__icon"
+            color="inherit"
+            data-euiicon-type="alert"
+            size="m"
+          />
+        </EuiIcon>
+        <span
+          className="euiCallOutHeader__title"
+        >
+          Experimental feature active
+        </span>
+      </div>
       <EuiText
-        data-test-subj="index-pattern-experimental-callout-text"
+        color="default"
+        size="s"
       >
-        The experimental feature 
-        <b>
-          Data Source Connection 
-        </b>
-        is active. To create an index pattern without using data from an external source, use 
-        <b>
-          default
-        </b>
-        . Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.
+        <div
+          className="euiText euiText--small"
+        >
+          <EuiTextColor
+            color="default"
+            component="div"
+          >
+            <div
+              className="euiTextColor euiTextColor--default"
+            >
+              <EuiText
+                data-test-subj="index-pattern-experimental-callout-text"
+              >
+                <div
+                  className="euiText euiText--medium"
+                  data-test-subj="index-pattern-experimental-callout-text"
+                >
+                  <p>
+                    The experimental feature 
+                    <b>
+                      Data Source Connection 
+                    </b>
+                    is active. To create an index pattern without using data from an external source, use 
+                    <b>
+                      default
+                    </b>
+                    . Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.
+                  </p>
+                </div>
+              </EuiText>
+            </div>
+          </EuiTextColor>
+        </div>
       </EuiText>
-    </p>
+    </div>
   </EuiCallOut>
   <EuiSpacer
     size="m"
-  />
-</Fragment>
+  >
+    <div
+      className="euiSpacer euiSpacer--m"
+    />
+  </EuiSpacer>
+</ExperimentalCallout>
 `;
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
index 971b041af8da..a00fb635bd02 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx
@@ -4,12 +4,23 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { ExperimentalCallout } from './experimental_callout';
 
+const titleIdentifier = '.euiCallOutHeader__title';
+const descriptionIdentifier = '[data-test-subj="index-pattern-experimental-callout-text"]';
+const expectedTitleText = 'Experimental feature active';
+const expectedDescriptionText =
+  'The experimental feature Data Source Connection is active. To create an index pattern without using data from an external source, use default. Any index pattern created using an external data source will result in an error if the experimental feature is deactivated.';
+
 describe('Index pattern experimental callout component', () => {
   test('should render normally', () => {
-    const component = shallow(<ExperimentalCallout />);
+    const component = mount(<ExperimentalCallout />);
+    const titleText = component.find(titleIdentifier).text();
+    const descriptionText = component.find(descriptionIdentifier).last().text();
+
+    expect(titleText).toBe(expectedTitleText);
+    expect(descriptionText).toBe(expectedDescriptionText);
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
index 3d8f6517c4b1..96859204d637 100644
--- a/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
+++ b/src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx
@@ -16,15 +16,15 @@ export const ExperimentalCallout = () => {
         color="warning"
         data-test-subj="index-pattern-experimental-callout"
       >
-        <p>
-          <EuiText data-test-subj="index-pattern-experimental-callout-text">
+        <EuiText data-test-subj="index-pattern-experimental-callout-text">
+          <p>
             {DESCRIPTION_FIRST_PART}
             <b>{DATASOURCE_CONNECTION}</b>
             {DESCRIPTION_SECOND_PART}
             <b>{DEFAULT}</b>
             {DESCRIPTION_THIRD_PART}
-          </EuiText>
-        </p>
+          </p>
+        </EuiText>
       </EuiCallOut>
       <EuiSpacer size="m" />
     </>