[MD] Add experimental callout for index pattern section

CHANGELOG.md

@@ -16,6 +16,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [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] UX enhancement on Index Pattern management stack ([#2527](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2527))
+* [Multi DataSource] 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))
 * [Vis Builder] Fixes visualization shift when editing agg ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))

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;
@@ -353,6 +354,7 @@ export class CreateIndexPatternWizard extends Component<
 
     return (
       <>
+        {this.dataSourceEnabled ? <ExperimentalCallout /> : null}
         {content}
         <EuiGlobalToastList
           toasts={this.state.toasts}

src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+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 = 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();
+  });
+});

src/plugins/index_pattern_management/public/components/experimental_callout/experimental_callout.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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"
+        data-test-subj="index-pattern-experimental-callout"
+      >
+        <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}
+          </p>
+        </EuiText>
+      </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.',
+  }
+);

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

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>
+    <>
+      {dataSourceEnabled ? <ExperimentalCallout /> : null}
+      <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>
+    </>
   );
 };