From 746bde9925019c770a32d691b602205ed7f0bb81 Mon Sep 17 00:00:00 2001 From: Yibo Wang <109543558+yibow98@users.noreply.github.com> Date: Tue, 11 Oct 2022 13:44:42 -0700 Subject: [PATCH] [MD] UX refactor for datasource create page (#2501) * UX refactor for datasource create page Signed-off-by: Yibo Wang * address comments&add CHANGLOG Signed-off-by: Yibo Wang * Apply callout in all ds pages & update endpoint field placeholder text Signed-off-by: Yibo Wang * add documentation links Signed-off-by: Yibo Wang * update snapshot test and snapshots Signed-off-by: Yibo Wang * Update CHANGELOG.md&.lycheeexclude Signed-off-by: Yibo Wang * Update UT Signed-off-by: Yibo Wang Signed-off-by: Yibo Wang (cherry picked from commit 9b56ff50327154cd531fcd4479ab2fc3798cf86b) --- .lycheeexclude | 2 + CHANGELOG.md | 2 +- .../public/doc_links/doc_links_service.ts | 3 + .../create_data_source_wizard.test.tsx.snap | 171 ++--- .../create_data_source_form.test.tsx.snap | 684 ++++++++---------- .../create_form/create_data_source_form.tsx | 46 +- .../header/__snapshots__/header.test.tsx.snap | 17 +- .../components/header/header.test.tsx | 5 +- .../components/header/header.tsx | 17 +- .../components/text_content/text_content.ts | 45 +- .../experimental_callout.test.tsx.snap | 133 ++++ .../experimental_callout.test.tsx | 29 + .../experimental_callout.tsx | 39 + .../compoenent/experimental_callout/index.ts | 6 + .../mount_management_section.tsx | 2 + 15 files changed, 685 insertions(+), 516 deletions(-) create mode 100644 src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap create mode 100644 src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx create mode 100644 src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx create mode 100644 src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/index.ts diff --git a/.lycheeexclude b/.lycheeexclude index b82de263d3d9..26e53a54973d 100644 --- a/.lycheeexclude +++ b/.lycheeexclude @@ -87,6 +87,7 @@ https://opensearch.org/cool/path https://opensearch.org/redirect http://www.opensearch.org/painlessDocs https://www.hostedgraphite.com/ +https://connectionurl.com # External urls https://www.zeek.org/ @@ -114,3 +115,4 @@ https://a.tile.openstreetmap.org/ http://www.creedthoughts.gov https://media-for-the-masses.theacademyofperformingartsandscience.org/ https://yarnpkg.com/latest.msi +https://forum.opensearch.org/ \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index c0339170df21..b4db50d19c6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,7 +54,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### 📈 Features/Enhancements -* Add updated_at column to objects' tables ([#1218](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/1218)) +* Add updated_at column to objects' tables ([#1218](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/1218)) * [Viz Builder] State validation before dispatching and loading ([#2351](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2351)) * [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)) diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts index 8fb5fc3ea790..52c72e3372b6 100644 --- a/src/core/public/doc_links/doc_links_service.ts +++ b/src/core/public/doc_links/doc_links_service.ts @@ -397,6 +397,8 @@ export class DocLinksService { functionbeat: `https://opensearch.org/docs/latest/downloads/beats/functionbeat`, winlogbeat: `${OPENSEARCH_WEBSITE_DOCS}`, siem: `${OPENSEARCH_WEBSITE_DOCS}`, + openSearchForum: + 'https://forum.opensearch.org/t/feedback-experimental-feature-connect-to-external-data-sources/11144', indexPatterns: { loadingData: `${OPENSEARCH_WEBSITE_DOCS}`, introduction: `${OPENSEARCH_WEBSITE_DOCS}`, @@ -752,6 +754,7 @@ export interface DocLinksStart { readonly functionbeat: string; readonly winlogbeat: string; readonly siem: string; + readonly openSearchForum: string; readonly indexPatterns: { readonly loadingData: string; readonly introduction: string; diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap index 756b3b38c7bc..16215de8d86a 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/__snapshots__/create_data_source_wizard.test.tsx.snap @@ -51,20 +51,7 @@ exports[`Datasource Management: Create Datasource Wizard should render normally className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -99,62 +86,15 @@ exports[`Datasource Management: Create Datasource Wizard should render normally >

- A data source is an OpenSearch cluster endpoint (for now) to query against. + Create a new data source connection to help you retrieve data from an external OpenSearch compatible source.
- - - - - Read documentation - - - - - - - - - (opens in a new tab or window) - - - - -

@@ -164,11 +104,6 @@ exports[`Datasource Management: Create Datasource Wizard should render normally
- -
- @@ -182,7 +117,7 @@ exports[`Datasource Management: Create Datasource Wizard should render normally
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -406,7 +367,7 @@ exports[`Datasource Management: Create Datasource Wizard should render normally onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="The connection URL" + placeholder="Sample URL: https://connectionurl.com" value="" > @@ -456,24 +417,24 @@ exports[`Datasource Management: Create Datasource Wizard should render normally
-
+

- Authentication + Authentication Method -

+
- - - + Provide authentication details require to gain access to the endpoint. If no authentication is required, choose + + No authentication + +
+
+
+ + +
+ + +
@@ -895,7 +880,7 @@ exports[`Datasource Management: Create Datasource Wizard should render normally - Create a data source connection + Create data source connection diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap index c8ad1d40cbc2..8549619e7d71 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/__snapshots__/create_data_source_form.test.tsx.snap @@ -75,20 +75,7 @@ exports[`Datasource Management: Create Datasource form should create data source className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -123,62 +110,15 @@ exports[`Datasource Management: Create Datasource form should create data source >

- A data source is an OpenSearch cluster endpoint (for now) to query against. + Create a new data source connection to help you retrieve data from an external OpenSearch compatible source.
- - - - - Read documentation - - - - - - - - - (opens in a new tab or window) - - - - -

@@ -188,11 +128,6 @@ exports[`Datasource Management: Create Datasource form should create data source
- -
- @@ -206,7 +141,7 @@ exports[`Datasource Management: Create Datasource form should create data source
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -430,7 +391,7 @@ exports[`Datasource Management: Create Datasource form should create data source onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="The connection URL" + placeholder="Sample URL: https://connectionurl.com" value="https://test.com" > @@ -480,24 +441,24 @@ exports[`Datasource Management: Create Datasource form should create data source
-
+

- Authentication + Authentication Method -

+
- - - + Provide authentication details require to gain access to the endpoint. If no authentication is required, choose + + No authentication + +
+
+
+ + +
+ + +
@@ -678,7 +663,7 @@ exports[`Datasource Management: Create Datasource form should create data source - Create a data source connection + Create data source connection @@ -755,20 +740,7 @@ exports[`Datasource Management: Create Datasource form should create data source className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -803,62 +775,15 @@ exports[`Datasource Management: Create Datasource form should create data source >

- A data source is an OpenSearch cluster endpoint (for now) to query against. + Create a new data source connection to help you retrieve data from an external OpenSearch compatible source.
- - - - - Read documentation - - - - - - - - - (opens in a new tab or window) - - - - -

@@ -868,11 +793,6 @@ exports[`Datasource Management: Create Datasource form should create data source
- -
- @@ -886,7 +806,7 @@ exports[`Datasource Management: Create Datasource form should create data source
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -1110,7 +1056,7 @@ exports[`Datasource Management: Create Datasource form should create data source onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="The connection URL" + placeholder="Sample URL: https://connectionurl.com" value="https://test.com" > @@ -1160,24 +1106,24 @@ exports[`Datasource Management: Create Datasource form should create data source
-
+

- Authentication + Authentication Method -

+
- - - + Provide authentication details require to gain access to the endpoint. If no authentication is required, choose + + No authentication + +
+
+
+ + +
+ + +
@@ -1599,7 +1569,7 @@ exports[`Datasource Management: Create Datasource form should create data source - Create a data source connection + Create data source connection @@ -1633,20 +1603,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1` className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -1681,62 +1638,15 @@ exports[`Datasource Management: Create Datasource form should render normally 1` >

- A data source is an OpenSearch cluster endpoint (for now) to query against. + Create a new data source connection to help you retrieve data from an external OpenSearch compatible source.
- - - - - Read documentation - - - - - - - - - (opens in a new tab or window) - - - - -

@@ -1746,11 +1656,6 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
- -
- @@ -1764,7 +1669,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -1988,7 +1919,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1` onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="The connection URL" + placeholder="Sample URL: https://connectionurl.com" value="" > @@ -2038,24 +1969,24 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
-
+

- Authentication + Authentication Method -

+
- - - + Provide authentication details require to gain access to the endpoint. If no authentication is required, choose + + No authentication + +
+
+
+ + +
+ + +
@@ -2477,7 +2432,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1` - Create a data source connection + Create data source connection @@ -2511,20 +2466,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -2559,62 +2501,15 @@ exports[`Datasource Management: Create Datasource form should throw validation e >

- A data source is an OpenSearch cluster endpoint (for now) to query against. + Create a new data source connection to help you retrieve data from an external OpenSearch compatible source.
- - - - - Read documentation - - - - - - - - - (opens in a new tab or window) - - - - -

@@ -2624,11 +2519,6 @@ exports[`Datasource Management: Create Datasource form should throw validation e
- -
- @@ -2642,7 +2532,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -2883,7 +2799,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="The connection URL" + placeholder="Sample URL: https://connectionurl.com" value="https://test.com" > @@ -2933,24 +2849,24 @@ exports[`Datasource Management: Create Datasource form should throw validation e
-
+

- Authentication + Authentication Method -

+
- - - + Provide authentication details require to gain access to the endpoint. If no authentication is required, choose + + No authentication + +
+
+
+ + +
+ + +
@@ -3372,7 +3312,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e - Create a data source connection + Create data source connection diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx index c30f4f985e85..823e8b9ca8ae 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx @@ -10,7 +10,6 @@ import { EuiFieldText, EuiForm, EuiFormRow, - EuiHorizontalRule, EuiPageContent, EuiRadioGroup, EuiSpacer, @@ -33,16 +32,19 @@ import { performDataSourceFormValidation, } from '../../../validation'; import { - CREDENTIAL_SOURCE, + ENDPOINT_PLACEHOLDER, DATA_SOURCE_DESCRIPTION_PLACEHOLDER, DATA_SOURCE_PASSWORD_PLACEHOLDER, + USERNAME_PLACEHOLDER, DESCRIPTION, - ENDPOINT_PLACEHOLDER, - ENDPOINT_URL, PASSWORD, TITLE, USERNAME, - USERNAME_PLACEHOLDER, + ENDPOINT_URL, + OPTIONAL, + AUTHENTICATION_METHOD_DESCRIPTION, + NO_AUTHENTICATION, + CREATE_DATA_SOURCE_BUTTON_TEXT, } from '../../../text_content'; import { isValidUrl } from '../../../utils'; @@ -211,8 +213,7 @@ export class CreateDataSourceForm extends React.Component< /* Render header*/ renderHeader = () => { - const { docLinks } = this.context.services; - return
; + return
; }; /* Render Section header*/ @@ -220,13 +221,21 @@ export class CreateDataSourceForm extends React.Component< return ( <> -
+

-

+ ); }; + /* Render field label with Optional text*/ + renderFieldLabelAsOptional = (label: string) => { + return ( + <> + {label} - {OPTIONAL} + + ); + }; /* Render create new credentials*/ renderCreateNewCredentialsForm = () => { @@ -269,7 +278,6 @@ export class CreateDataSourceForm extends React.Component< return ( {this.renderHeader()} - {/* Endpoint section */} {this.renderSectionHeader( @@ -296,7 +304,7 @@ export class CreateDataSourceForm extends React.Component< {/* Description */} - + + + + + {AUTHENTICATION_METHOD_DESCRIPTION} + {NO_AUTHENTICATION} + + {/* Credential source */} - - + + - Create a data source connection + {CREATE_DATA_SOURCE_BUTTON_TEXT} diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/__snapshots__/header.test.tsx.snap index 01005baf35ae..4876ec8c5686 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/__snapshots__/header.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/__snapshots__/header.test.tsx.snap @@ -1,18 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Datasource Management: Header should render normally 1`] = ` -
-`; +exports[`Datasource Management: Header should render normally 1`] = `
`; diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.test.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.test.tsx index ce396c413ebc..aa3001d4cebc 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.test.tsx +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.test.tsx @@ -6,18 +6,15 @@ import React from 'react'; import { Header } from '../header'; import { shallow } from 'enzyme'; -import { DocLinksStart } from 'opensearch-dashboards/public'; import { wrapWithIntl } from 'test_utils/enzyme_helpers'; import { OpenSearchDashboardsContextProvider } from '../../../../../../opensearch_dashboards_react/public'; -import { docLinks } from '../../../../mocks'; import { mockManagementPlugin } from '../../../../mocks'; describe('Datasource Management: Header', () => { const mockedContext = mockManagementPlugin.createDataSourceManagementContext(); - const mockedDocLinks = docLinks as DocLinksStart; test('should render normally', () => { - const component = shallow(wrapWithIntl(
), { + const component = shallow(wrapWithIntl(
), { wrappingComponent: OpenSearchDashboardsContextProvider, wrappingComponentProps: { services: mockedContext, diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx index f878a503313b..28882eb30bf3 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx @@ -5,15 +5,14 @@ import React from 'react'; -import { EuiSpacer, EuiTitle, EuiText, EuiLink, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; +import { EuiSpacer, EuiTitle, EuiText, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; -import { DocLinksStart } from 'opensearch-dashboards/public'; import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public'; import { DataSourceManagementContext } from '../../../../types'; import { CREATE_DATA_SOURCE_HEADER } from '../../../text_content'; -export const Header = ({ docLinks }: { docLinks: DocLinksStart }) => { +export const Header = () => { const changeTitle = useOpenSearchDashboards().services.chrome .docTitle.change; @@ -31,19 +30,9 @@ export const Header = ({ docLinks }: { docLinks: DocLinksStart }) => {


- - -

diff --git a/src/plugins/data_source_management/public/components/text_content/text_content.ts b/src/plugins/data_source_management/public/components/text_content/text_content.ts index 8cf536c72fa5..5a26668ff2c6 100644 --- a/src/plugins/data_source_management/public/components/text_content/text_content.ts +++ b/src/plugins/data_source_management/public/components/text_content/text_content.ts @@ -125,7 +125,7 @@ export const ENDPOINT_URL = i18n.translate('dataSourcesManagement.createDataSour export const ENDPOINT_PLACEHOLDER = i18n.translate( 'dataSourcesManagement.createDataSource.endpointPlaceholder', { - defaultMessage: 'The connection URL', + defaultMessage: 'Sample URL: https://connectionurl.com', } ); export const USERNAME_PLACEHOLDER = i18n.translate( @@ -146,6 +146,19 @@ export const CREDENTIAL_SOURCE = i18n.translate( defaultMessage: 'Credential Source', } ); +export const AUTHENTICATION_METHOD_DESCRIPTION = i18n.translate( + 'dataSourcesManagement.createDataSource.authenicationMethodDescription', + { + defaultMessage: + 'Provide authentication details require to gain access to the endpoint. If no authentication is required, choose ', + } +); +export const NO_AUTHENTICATION = i18n.translate( + 'dataSourcesManagement.createDataSource.noAuthentication', + { + defaultMessage: 'No authentication', + } +); /* Edit data source */ export const DATA_SOURCE_NOT_FOUND = i18n.translate( @@ -253,3 +266,33 @@ export const DATA_SOURCE_VALIDATION_TITLE_EXISTS = i18n.translate( defaultMessage: 'This title is already in use', } ); + +/* Experimental call out text */ +export const EXPERIMENTAL_FEATURE = i18n.translate('experimentalFeature', { + defaultMessage: 'Experimental Feature', +}); +export const EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION = i18n.translate( + 'dataSourcesManagement.experimentalFeatureCallout.description', + { + defaultMessage: + 'The feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see ', + } +); +export const DATA_SOURCE_DOCUMENTATION_TEXT = i18n.translate( + 'dataSourcesManagement.experimentalFeatureCallout.documentationText', + { + defaultMessage: 'Data Source Documentation', + } +); +export const DATA_SOURCE_LEAVE_FEEDBACK_TEXT = i18n.translate( + 'dataSourcesManagement.experimentalFeatureCallout.feedbackText', + { + defaultMessage: 'To leave feedback, visit ', + } +); +export const DATA_SOURCE_OPEN_FORUM_TEXT = i18n.translate( + 'dataSourcesManagement.experimentalFeatureCallout.openForumText', + { + defaultMessage: 'OpenSearch Forum', + } +); diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap new file mode 100644 index 000000000000..f3c2e06db210 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Datasource experimental callout component should render normally 1`] = ` + + +
+
+ + + Experimental Feature + +
+ +
+ +
+

+ The feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see + + + Data Source Documentation + + + + + + + (opens in a new tab or window) + + + + + + + To leave feedback, visit + + + +

+
+ +
+ +
+ + +
+ + +`; diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx new file mode 100644 index 000000000000..cd61e0ea2056 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx @@ -0,0 +1,29 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { mount } from 'enzyme'; +import { ExperimentalCallout } from './experimental_callout'; +import { DocLinksStart } from 'opensearch-dashboards/public'; +import { docLinks } from '../../../mocks'; + +const titleIdentifier = '.euiCallOutHeader__title'; +const descriptionIdentifier = '[data-test-subj="data-source-experimental-call"]'; +const expectedTitleText = 'Experimental Feature'; +const expectedDescriptionText = + 'Experimental FeatureThe feature is experimental and should not be used in a production environment. Any index patterns, visualization, and observability panels will be impacted if the feature is deactivated. For more information see Data Source Documentation(opens in a new tab or window) To leave feedback, visit OpenSearch Forum'; + +describe('Datasource experimental callout component', () => { + test('should render normally', () => { + const mockedDocLinks = docLinks as DocLinksStart; + 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/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx new file mode 100644 index 000000000000..83e3721e19e8 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx @@ -0,0 +1,39 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui'; +import { DocLinksStart } from 'opensearch-dashboards/public'; +import { + EXPERIMENTAL_FEATURE, + EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION, + DATA_SOURCE_LEAVE_FEEDBACK_TEXT, + DATA_SOURCE_DOCUMENTATION_TEXT, + DATA_SOURCE_OPEN_FORUM_TEXT, +} from '../../../components/text_content'; + +export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) => { + return ( + <> + +

+ {EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION} + + {DATA_SOURCE_DOCUMENTATION_TEXT} + {' '} + {DATA_SOURCE_LEAVE_FEEDBACK_TEXT} + + {DATA_SOURCE_OPEN_FORUM_TEXT} + +

+ + + + ); +}; diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/index.ts b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/index.ts new file mode 100644 index 000000000000..1f6d2620bf37 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/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/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx index 9fe1f2406382..e5258773ec9d 100644 --- a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx +++ b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx @@ -17,6 +17,7 @@ import { CreateDataSourceWizardWithRouter } from '../components/create_data_sour import { DataSourceTableWithRouter } from '../components/data_source_table'; import { DataSourceManagementContext } from '../types'; import { EditDataSourceWithRouter } from '../components/edit_data_source'; +import { ExperimentalCallout } from './compoenent/experimental_callout'; export interface DataSourceManagementStartDependencies { data: DataPublicPluginStart; @@ -46,6 +47,7 @@ export async function mountManagementSection( +