Add experimental callout for index pattern section

Signed-off-by: Yibo Wang <[email protected]>

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

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}

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.',
+  }
+);

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>
+    <>
+      <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>
+    </>
   );
 };