[MD] Add experimental callout for index pattern section (#2523) (#2561)

* Add experimental callout for index pattern section Signed-off-by: Yibo Wang <yibow@amazon.com> * add switch for experimental callout & update snapshots Signed-off-by: Yibo Wang <yibow@amazon.com> * Update UT Signed-off-by: Yibo Wang <yibow@amazon.com> Signed-off-by: Yibo Wang <yibow@amazon.com> (cherry picked from commit 7777749) Co-authored-by: Yibo Wang <109543558+yibow98@users.noreply.github.com>
opensearch-project · Oct 12, 2022 · 39c7644 · 39c7644
1 parent a8c2eee
commit 39c7644
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [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 data source column into index pattern table ([#2542](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2542))
+* [Multi DataSource] UX enhancement for Data source management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501))
+* [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))

diff --git a/..._management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx b/..._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}

diff --git a/...t/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap b/...t/public/components/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap
diff --git a/...x_pattern_management/public/components/experimental_callout/experimental_callout.test.tsx b/...x_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();
+  });
+});
diff --git a/.../index_pattern_management/public/components/experimental_callout/experimental_callout.tsx b/.../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.',
+  }
+);
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
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './experimental_callout';
diff --git a/...ns/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx b/...ns/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,
@@ -261,36 +262,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>
+    </>
   );
 };