From 7f2bc490e334db2fa21820a5a2ab2dbd1abb3548 Mon Sep 17 00:00:00 2001 From: Yibo Wang <109543558+yibow98@users.noreply.github.com> Date: Mon, 10 Oct 2022 20:57:35 -0700 Subject: [PATCH] [MD] Add experimental callout for index pattern section (#2523) * Add experimental callout for index pattern section Signed-off-by: Yibo Wang * add switch for experimental callout & update snapshots Signed-off-by: Yibo Wang * Update UT Signed-off-by: Yibo Wang Signed-off-by: Yibo Wang (cherry picked from commit 777774910d00587ccb28f9a59407b5059e8803d5) --- CHANGELOG.md | 2 + .../create_index_pattern_wizard.tsx | 2 + .../experimental_callout.test.tsx.snap | 87 +++++++++++++++++++ .../experimental_callout.test.tsx | 26 ++++++ .../experimental_callout.tsx | 66 ++++++++++++++ .../components/experimental_callout/index.ts | 6 ++ .../index_pattern_table.tsx | 64 +++++++------- 7 files changed, 223 insertions(+), 30 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 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 f68b43eb0c26..67711160ea71 100644 --- 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/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 4083cb3d3700..6f0fd34899bb 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; @@ -353,6 +354,7 @@ export class CreateIndexPatternWizard extends Component< return ( <> + {this.dataSourceEnabled ? : null} {content} + +
+
+ + + Experimental feature active + +
+ +
+ +
+ +
+

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

+
+ +
+ +
+ +
+ + +
+ + +`; 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..a00fb635bd02 --- /dev/null +++ b/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(); + 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 new file mode 100644 index 000000000000..96859204d637 --- /dev/null +++ b/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 ( + <> + + +

+ {DESCRIPTION_FIRST_PART} + {DATASOURCE_CONNECTION} + {DESCRIPTION_SECOND_PART} + {DEFAULT} + {DESCRIPTION_THIRD_PART} +

+ + + + + ); +}; + +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 85b47b3a1ff8..8993d64750ef 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, @@ -261,36 +262,39 @@ export const IndexPatternTable = ({ canSave, history }: Props) => { } return ( - - - - -

{title}

- - - -

- -

- - - {createButton} - - - - + <> + {dataSourceEnabled ? : null} + + + + +

{title}

+ + + +

+ +

+ + + {createButton} + + + + + ); };