From 3cd8481d867d85d2f8f3e53c896a6778f48f6636 Mon Sep 17 00:00:00 2001 From: Yibo Wang Date: Tue, 4 Oct 2022 13:29:56 -0700 Subject: [PATCH 1/7] UX refactor for datasource create page Signed-off-by: Yibo Wang --- .../create_form/create_data_source_form.tsx | 290 +++++++++++------- .../components/header/header.tsx | 23 +- .../components/text_content/text_content.ts | 70 +++-- .../data_source_management/public/types.ts | 10 +- 4 files changed, 236 insertions(+), 157 deletions(-) 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 f278431d091c..d9c8038b44ca 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,11 +10,12 @@ import { EuiFieldText, EuiForm, EuiFormRow, - EuiHorizontalRule, EuiPageContent, + EuiRadioGroup, EuiSpacer, - EuiSuperSelect, EuiText, + EuiCallOut, + EuiLink, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { credentialSourceOptions, DataSourceManagementContextValue } from '../../../../types'; @@ -27,16 +28,21 @@ import { } from '../../../validation'; import { AuthType, DataSourceAttributes, UsernamePasswordTypedContent } from '../../../../types'; import { - createDataSourceCredentialSource, - createDataSourceDescriptionPlaceholder, - createDataSourceEndpointPlaceholder, - createDataSourceEndpointURL, - createDataSourcePasswordPlaceholder, - createDataSourceUsernamePlaceholder, - descriptionText, - passwordText, - titleText, - usernameText, + ENDPOINT_PLACEHOLDER, + DATA_SOURCE_DESCRIPTION_PLACEHOLDER, + DATA_SOURCE_PASSWORD_PLACEHOLDER, + USERNAME_PLACEHOLDER, + DESCRIPTION, + PASSWORD, + TITLE, + USERNAME, + ENDPOINT_URL, + EXPERIMENTAL_FEATURE, + OPTIONAL, + EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION, + DATA_SOURCE_LEAVE_FEEDBACK_TEXT, + AUTHENTICATION_METHOD_DESCRIPTION, + NO_AUTHENTICATION, } from '../../../text_content'; export interface CreateDataSourceProps { @@ -109,8 +115,10 @@ export class CreateDataSourceForm extends React.Component< this.setState({ endpoint: e.target.value }, this.checkValidation); }; - onChangeAuthType = (value: AuthType) => { - this.setState({ auth: { ...this.state.auth, type: value } }, this.checkValidation); + onChangeAuthType = (value: string) => { + const valueToSave = + value === AuthType.UsernamePasswordType ? AuthType.UsernamePasswordType : AuthType.NoAuth; + this.setState({ auth: { ...this.state.auth, type: valueToSave } }, this.checkValidation); }; onChangeUsername = (e: { target: { value: any } }) => { @@ -163,10 +171,42 @@ export class CreateDataSourceForm extends React.Component< /* Render methods */ + /* Render experimental callout*/ + renderExperimentalCallout = () => { + const { docLinks } = this.context.services; + return ( + +

+ {EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION} + + + {' '} + {DATA_SOURCE_LEAVE_FEEDBACK_TEXT} + + + +

+ + ); + }; + /* Render header*/ renderHeader = () => { - const { docLinks } = this.context.services; - return
; + return
; }; /* Render Section header*/ @@ -174,25 +214,33 @@ export class CreateDataSourceForm extends React.Component< return ( <> -
+

-

+ ); }; + /* Render field label with Optional text*/ + renderFieldLabelAsOptional = (label: string) => { + return ( + <> + {label} - {OPTIONAL} + + ); + }; /* Render create new credentials*/ renderCreateNewCredentialsForm = () => { return ( <> { return ( - - {this.renderHeader()} - - - {/* Endpoint section */} - {this.renderSectionHeader( - 'dataSourceManagement.connectToDataSource.connectionDetails', - 'Connection Details' - )} - - - {/* Title */} - + {this.renderExperimentalCallout()} + + + + {this.renderHeader()} + - + {/* Endpoint section */} + {this.renderSectionHeader( + 'dataSourceManagement.connectToDataSource.connectionDetails', + 'Connection Details' + )} + + + {/* Title */} + - - - {/* Description */} - - - - - {/* Endpoint URL */} - - + + + + {/* Description */} + + + + + {/* Endpoint URL */} + - - - {/* Authentication Section: */} - - - - {this.renderSectionHeader( - 'dataSourceManagement.connectToDataSource.authenticationHeader', - 'Authentication' - )} - - {/* Credential source */} - - - this.onChangeAuthType(value)} - data-test-subj="createDataSourceFormAuthTypeSelect" - /> - - - {/* Create New credentials */} - {this.state.auth.type === AuthType.UsernamePasswordType - ? this.renderCreateNewCredentialsForm() - : null} - - - {/* Create Data Source button*/} - - Create a data source connection - - - + error={this.state.formErrorsByField.endpoint} + > + + + + {/* Authentication Section: */} + + + + {this.renderSectionHeader( + 'dataSourceManagement.connectToDataSource.authenticationHeader', + 'Authentication Method' + )} + + + + + {AUTHENTICATION_METHOD_DESCRIPTION} + {NO_AUTHENTICATION} + + + + {/* Credential source */} + + + this.onChangeAuthType(id)} + name="Credential" + data-test-subj="createDataSourceFormAuthTypeSelect" + /> + + + {/* Create New credentials */} + {this.state.auth.type === AuthType.UsernamePasswordType + ? this.renderCreateNewCredentialsForm() + : null} + + + {/* Create Data Source button*/} + + Create a data source connection + + + + ); }; 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 3a66b7426141..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,45 +5,34 @@ 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 { createDataSourceHeader } from '../../../text_content/text_content'; +import { CREATE_DATA_SOURCE_HEADER } from '../../../text_content'; -export const Header = ({ docLinks }: { docLinks: DocLinksStart }) => { +export const Header = () => { const changeTitle = useOpenSearchDashboards().services.chrome .docTitle.change; - changeTitle(createDataSourceHeader); + changeTitle(CREATE_DATA_SOURCE_HEADER); return (
-

{createDataSourceHeader}

+

{CREATE_DATA_SOURCE_HEADER}


- - -

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 ee6bca828eb0..d96d4b9ae243 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 @@ -14,22 +14,25 @@ export const deleteText = i18n.translate('delete', { defaultMessage: 'Delete', }); -export const titleText = i18n.translate('title', { +export const TITLE = i18n.translate('title', { defaultMessage: 'Title', }); -export const descriptionText = i18n.translate('description', { +export const DESCRIPTION = i18n.translate('description', { defaultMessage: 'Description', }); -export const usernameText = i18n.translate('username', { +export const USERNAME = i18n.translate('username', { defaultMessage: 'Username', }); -export const passwordText = i18n.translate('password', { +export const PASSWORD = i18n.translate('password', { defaultMessage: 'Password', }); +export const OPTIONAL = i18n.translate('optional', { + defaultMessage: 'optional', +}); /* Datasource listing page */ export const dsListingAriaRegion = i18n.translate( 'dataSourcesManagement.createDataSourcesLiveRegionAriaLabel', @@ -86,46 +89,50 @@ export const dsListingDeleteDataSourceWarning = i18n.translate( ); /* CREATE DATA SOURCE */ -export const createDataSourceHeader = i18n.translate( +export const CREATE_DATA_SOURCE_HEADER = i18n.translate( 'dataSourcesManagement.createDataSourceHeader', { defaultMessage: 'Create data source connection', } ); -export const createDataSourceDescriptionPlaceholder = i18n.translate( +export const DATA_SOURCE_DESCRIPTION_PLACEHOLDER = i18n.translate( 'dataSourcesManagement.createDataSource.descriptionPlaceholder', { defaultMessage: 'Description of the data source', } ); -export const createDataSourceEndpointURL = i18n.translate( - 'dataSourcesManagement.createDataSource.endpointURL', - { - defaultMessage: 'Endpoint URL', - } -); -export const createDataSourceEndpointPlaceholder = i18n.translate( +export const ENDPOINT_URL = i18n.translate('dataSourcesManagement.createDataSource.endpointURL', { + defaultMessage: 'Endpoint URL', +}); +export const ENDPOINT_PLACEHOLDER = i18n.translate( 'dataSourcesManagement.createDataSource.endpointPlaceholder', { defaultMessage: 'The connection URL', } ); -export const createDataSourceUsernamePlaceholder = i18n.translate( +export const USERNAME_PLACEHOLDER = i18n.translate( 'dataSourcesManagement.createDataSource.usernamePlaceholder', { defaultMessage: 'Username to connect to data source', } ); -export const createDataSourcePasswordPlaceholder = i18n.translate( +export const DATA_SOURCE_PASSWORD_PLACEHOLDER = i18n.translate( 'dataSourcesManagement.createDataSource.passwordPlaceholder', { defaultMessage: 'Password to connect to data source', } ); -export const createDataSourceCredentialSource = i18n.translate( - 'dataSourcesManagement.createDataSource.credentialSource', +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: 'Credential Source', + defaultMessage: 'No authentication', } ); @@ -281,3 +288,30 @@ export const dataSourceValidationPasswordEmpty = i18n.translate( defaultMessage: 'Password should not be empty', } ); + +/* 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 ', + } +); diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts index c0aa502b5830..22eda7a38444 100644 --- a/src/plugins/data_source_management/public/types.ts +++ b/src/plugins/data_source_management/public/types.ts @@ -50,12 +50,6 @@ export type DataSourceManagementContextValue = OpenSearchDashboardsReactContextV DataSourceManagementContext >; -export interface UpdatePasswordFormType { - oldPassword: string; - newPassword: string; - confirmNewPassword: string; -} - /* Datasource types */ export enum AuthType { NoAuth = 'no_auth', @@ -63,8 +57,8 @@ export enum AuthType { } export const credentialSourceOptions = [ - { value: AuthType.UsernamePasswordType, inputDisplay: 'Username & Password' }, - { value: AuthType.NoAuth, inputDisplay: 'No authentication' }, + { id: AuthType.NoAuth, label: 'No authentication' }, + { id: AuthType.UsernamePasswordType, label: 'Username & Password' }, ]; export interface DataSourceAttributes extends SavedObjectAttributes { From d60adadae982bc94ab884c3ec55ddec37f40aff9 Mon Sep 17 00:00:00 2001 From: Yibo Wang Date: Tue, 4 Oct 2022 16:05:38 -0700 Subject: [PATCH 2/7] address comments&add CHANGLOG Signed-off-by: Yibo Wang --- CHANGELOG.md | 1 + src/plugins/data_source_management/public/types.ts | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f86e98aedc5..9a29d668eb74 100644 --- a/CHANGELOG.md +++ b/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] UI/UX refactor for datasource management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501)) ### 🐛 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/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts index 22eda7a38444..6e0517110e57 100644 --- a/src/plugins/data_source_management/public/types.ts +++ b/src/plugins/data_source_management/public/types.ts @@ -50,6 +50,12 @@ export type DataSourceManagementContextValue = OpenSearchDashboardsReactContextV DataSourceManagementContext >; +export interface UpdatePasswordFormType { + oldPassword: string; + newPassword: string; + confirmNewPassword: string; +} + /* Datasource types */ export enum AuthType { NoAuth = 'no_auth', From a7a4aaa1714acbc73666382176647dcdb8078c6b Mon Sep 17 00:00:00 2001 From: Yibo Wang Date: Wed, 5 Oct 2022 14:29:38 -0700 Subject: [PATCH 3/7] Apply callout in all ds pages & update endpoint field placeholder text Signed-off-by: Yibo Wang --- .../create_form/create_data_source_form.tsx | 44 +------------------ .../components/text_content/text_content.ts | 17 +++++-- .../experimental_call_out.tsx | 34 ++++++++++++++ .../compoenent/experimental_call_out/index.ts | 6 +++ .../mount_management_section.tsx | 2 + 5 files changed, 57 insertions(+), 46 deletions(-) create mode 100644 src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx create mode 100644 src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/index.ts 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 d9c8038b44ca..bad6e8211875 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 @@ -14,8 +14,6 @@ import { EuiRadioGroup, EuiSpacer, EuiText, - EuiCallOut, - EuiLink, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { credentialSourceOptions, DataSourceManagementContextValue } from '../../../../types'; @@ -37,12 +35,10 @@ import { TITLE, USERNAME, ENDPOINT_URL, - EXPERIMENTAL_FEATURE, OPTIONAL, - EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION, - DATA_SOURCE_LEAVE_FEEDBACK_TEXT, AUTHENTICATION_METHOD_DESCRIPTION, NO_AUTHENTICATION, + CREATE_DATA_SOURCE_BUTTON_TEXT, } from '../../../text_content'; export interface CreateDataSourceProps { @@ -171,39 +167,6 @@ export class CreateDataSourceForm extends React.Component< /* Render methods */ - /* Render experimental callout*/ - renderExperimentalCallout = () => { - const { docLinks } = this.context.services; - return ( - -

- {EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION} - - - {' '} - {DATA_SOURCE_LEAVE_FEEDBACK_TEXT} - - - -

- - ); - }; - /* Render header*/ renderHeader = () => { return
; @@ -268,9 +231,6 @@ export class CreateDataSourceForm extends React.Component< renderContent = () => { return ( <> - {this.renderExperimentalCallout()} - - {this.renderHeader()} - Create a data source connection + {CREATE_DATA_SOURCE_BUTTON_TEXT} 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 d96d4b9ae243..70e6949dae0c 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 @@ -107,7 +107,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( @@ -135,6 +135,12 @@ export const NO_AUTHENTICATION = i18n.translate( defaultMessage: 'No authentication', } ); +export const CREATE_DATA_SOURCE_BUTTON_TEXT = i18n.translate( + 'dataSourcesManagement.createDataSource.createDataSourceButtonText', + { + defaultMessage: 'Create a data source connection', + } +); /* Edit data source */ export const dataSourceNotFound = i18n.translate( @@ -293,7 +299,6 @@ export const dataSourceValidationPasswordEmpty = i18n.translate( export const EXPERIMENTAL_FEATURE = i18n.translate('experimentalFeature', { defaultMessage: 'Experimental Feature', }); - export const EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION = i18n.translate( 'dataSourcesManagement.experimentalFeatureCallout.description', { @@ -301,17 +306,21 @@ export const EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION = i18n.translate( '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_call_out/experimental_call_out.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx new file mode 100644 index 000000000000..07089380933d --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx @@ -0,0 +1,34 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui'; +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 = () => { + 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_call_out/index.ts b/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/index.ts new file mode 100644 index 000000000000..5e14d557a161 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './experimental_call_out'; 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..e95e2de268e4 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_call_out'; export interface DataSourceManagementStartDependencies { data: DataPublicPluginStart; @@ -45,6 +46,7 @@ export async function mountManagementSection( ReactDOM.render( + From 89d2b49f64e4ed9cad799241f1d91f1be580f685 Mon Sep 17 00:00:00 2001 From: Yibo Wang Date: Wed, 5 Oct 2022 15:22:15 -0700 Subject: [PATCH 4/7] add documentation links Signed-off-by: Yibo Wang --- .lycheeexclude | 2 ++ src/core/public/doc_links/doc_links_service.ts | 3 +++ .../experimental_call_out/experimental_call_out.tsx | 7 ++++--- .../public/management_app/mount_management_section.tsx | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/.lycheeexclude b/.lycheeexclude index b82de263d3d9..cad34f89ea0d 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/t/feedback-experimental-feature-connect-to-external-data-sources/11144 \ No newline at end of file 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/management_app/compoenent/experimental_call_out/experimental_call_out.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx index 07089380933d..bb6f0f51b241 100644 --- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx @@ -5,6 +5,7 @@ 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, @@ -13,17 +14,17 @@ import { DATA_SOURCE_OPEN_FORUM_TEXT, } from '../../../components/text_content'; -export const ExperimentalCallOut = () => { +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/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx index e95e2de268e4..87c2ddf13429 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 @@ -46,7 +46,7 @@ export async function mountManagementSection( ReactDOM.render( - + From 1ca6d1d03971f20bb6d6d2e26e48dceb0f39f2be Mon Sep 17 00:00:00 2001 From: Yibo Wang Date: Thu, 6 Oct 2022 14:20:05 -0700 Subject: [PATCH 5/7] update snapshot test and snapshots Signed-off-by: Yibo Wang --- .../create_data_source_wizard.test.tsx.snap | 456 ++-- .../create_data_source_form.test.tsx.snap | 2280 ++++++----------- .../create_data_source_form.test.tsx | 10 +- .../experimental_callout.test.tsx.snap | 31 + .../experimental_callout.test.tsx | 18 + .../experimental_callout.tsx} | 8 +- .../index.ts | 2 +- .../mount_management_section.tsx | 4 +- 8 files changed, 991 insertions(+), 1818 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 rename src/plugins/data_source_management/public/management_app/compoenent/{experimental_call_out/experimental_call_out.tsx => experimental_callout/experimental_callout.tsx} (82%) rename src/plugins/data_source_management/public/management_app/compoenent/{experimental_call_out => experimental_callout}/index.ts (67%) 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 cbdcf40a6478..9f4522c16bf9 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 @@ -43,20 +43,7 @@ exports[`Datasource Management: Create Datasource Wizard should render normally className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -91,62 +78,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) - - - - -

@@ -156,11 +96,6 @@ exports[`Datasource Management: Create Datasource Wizard should render normally
- -
- + +
+
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -400,7 +368,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="" > @@ -450,24 +418,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 + +
+
+
+ + +
+ + +
- - - } - isOpen={false} - panelPaddingSize="none" +
- +
+ +
+ +
+ + - +
+
- - - - + Username & Password + +
+ +
+
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 923fcff47b43..c430a3a6629f 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 @@ -74,20 +74,7 @@ exports[`Datasource Management: Create Datasource form should create data source className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -122,62 +109,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) - - - - -

@@ -187,11 +127,6 @@ exports[`Datasource Management: Create Datasource form should create data source
- -
- + +
+
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -431,7 +399,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" > @@ -481,24 +449,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 + +
+
+
+ + +
+ + +
- - - } - isOpen={false} - panelPaddingSize="none" +
- +
+ +
+ +
+ + - +
+
- - - - + Username & Password + +
+ +
+
@@ -892,20 +746,7 @@ exports[`Datasource Management: Create Datasource form should create data source className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -940,62 +781,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) - - - - -

@@ -1005,11 +799,6 @@ exports[`Datasource Management: Create Datasource form should create data source
- -
- + +
+
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -1249,7 +1071,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" > @@ -1299,24 +1121,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 + +
+
+
+ + +
+ + +
- - - } - isOpen={false} - panelPaddingSize="none" +
- +
+ +
+ +
+ + - +
+
- - - - + Username & Password + +
+ +
+
@@ -1908,20 +1616,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1` className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -1956,62 +1651,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) - - - - -

@@ -2021,11 +1669,6 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
- -
- + +
+
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -2265,7 +1941,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="" > @@ -2315,24 +1991,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 + +
+
+
+ + +
+ + +
- - - } - isOpen={false} - panelPaddingSize="none" +
- +
+ +
+ +
+ + - +
+
- - - - + Username & Password + +
+ +
+
@@ -2924,20 +2486,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -2972,62 +2521,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) - - - - -

@@ -3037,11 +2539,6 @@ exports[`Datasource Management: Create Datasource form should throw validation e
- -
- + +
+
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -3360,7 +2890,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" > @@ -3410,24 +2940,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 + +
+
+
+ + +
+ + +
- - - } - isOpen={false} - panelPaddingSize="none" +
- +
+ +
+ +
+ + - +
+
- - - - + Username & Password + +
+ +
+
@@ -4019,20 +3435,7 @@ exports[`Datasource Management: Create Datasource form should validate when subm className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent" role="main" > -
+
@@ -4067,62 +3470,15 @@ exports[`Datasource Management: Create Datasource form should validate when subm >

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

@@ -4132,11 +3488,6 @@ exports[`Datasource Management: Create Datasource form should validate when subm
- -
- + +
+
-
+

-

+
+ Description + + + - + optional + + + } labelType="label" >
Description + + + - + optional +
@@ -4481,7 +3865,7 @@ exports[`Datasource Management: Create Datasource form should validate when subm onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="The connection URL" + placeholder="Sample URL: https://connectionurl.com" value="" > @@ -4545,24 +3929,24 @@ exports[`Datasource Management: Create Datasource form should validate when subm
-
+

- Authentication + Authentication Method -

+
- - - + Provide authentication details require to gain access to the endpoint. If no authentication is required, choose + + No authentication + +
+
+
+ + +
+ + +
- - - } - isOpen={false} - panelPaddingSize="none" +
- +
+ +
+ +
+ + - +
+
- - - - + Username & Password + +
+ +
+
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx index 54b33a0a0bb1..4d03977f5b98 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx +++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.test.tsx @@ -74,12 +74,11 @@ describe('Datasource Management: Create Datasource form', () => { /* Default option: Username & Password*/ test('should validate when submit button is clicked without any user input on any field', () => { findTestSubject(component, 'createDataSourceButton').simulate('click'); - const { title, description, endpoint, authType, username, password } = getFields(component); + const { title, description, endpoint, username, password } = getFields(component); expect(component).toMatchSnapshot(); expect(title.prop('isInvalid')).toBe(true); expect(description.prop('isInvalid')).toBe(undefined); expect(endpoint.prop('isInvalid')).toBe(true); - expect(authType.prop('isInvalid')).toBe(false); expect(username.prop('isInvalid')).toBe(true); expect(password.prop('isInvalid')).toBe(true); }); @@ -93,13 +92,11 @@ describe('Datasource Management: Create Datasource form', () => { /* Click on submit without any user input */ findTestSubject(component, 'createDataSourceButton').simulate('click'); - const { title, description, endpoint, authType, username, password } = getFields(component); + const { title, description, endpoint, username, password } = getFields(component); - expect(authType.prop('valueOfSelected')).toBe(AuthType.NoAuth); expect(title.prop('isInvalid')).toBe(true); expect(description.prop('isInvalid')).toBe(undefined); expect(endpoint.prop('isInvalid')).toBe(true); - expect(authType.prop('isInvalid')).toBe(false); expect(username.exists()).toBeFalsy(); // username field does not exist when No Auth option is selected expect(password.exists()).toBeFalsy(); // password field does not exist when No Auth option is selected }); @@ -112,13 +109,12 @@ describe('Datasource Management: Create Datasource form', () => { findTestSubject(component, 'createDataSourceButton').simulate('click'); - const { title, description, endpoint, authType, username, password } = getFields(component); + const { title, description, endpoint, username, password } = getFields(component); expect(component).toMatchSnapshot(); expect(title.prop('isInvalid')).toBe(true); expect(description.prop('isInvalid')).toBe(undefined); expect(endpoint.prop('isInvalid')).toBe(false); - expect(authType.prop('isInvalid')).toBe(false); expect(username.prop('isInvalid')).toBe(false); expect(password.prop('isInvalid')).toBe(false); 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..e1b90e038970 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/__snapshots__/experimental_callout.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dataasource experimental callout component should render normally 1`] = ` + + +

+ 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 + + + To leave feedback, visit + + OpenSearch Forum + +

+ + + +`; 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..42f7453d8a41 --- /dev/null +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.test.tsx @@ -0,0 +1,18 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { ExperimentalCallout } from './experimental_callout'; +import { DocLinksStart } from 'opensearch-dashboards/public'; +import { docLinks } from '../../../mocks'; + +describe('Dataasource experimental callout component', () => { + test('should render normally', () => { + const mockedDocLinks = docLinks as DocLinksStart; + const component = shallow(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx similarity index 82% rename from src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx rename to src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx index bb6f0f51b241..83e3721e19e8 100644 --- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/experimental_call_out.tsx +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/experimental_callout.tsx @@ -14,10 +14,14 @@ import { DATA_SOURCE_OPEN_FORUM_TEXT, } from '../../../components/text_content'; -export const ExperimentalCallOut = ({ docLinks }: { docLinks: DocLinksStart }) => { +export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) => { return ( <> - +

{EXPERIMENTAL_FEATURE_CALL_OUT_DESCRIPTION} diff --git a/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/index.ts b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/index.ts similarity index 67% rename from src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/index.ts rename to src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/index.ts index 5e14d557a161..1f6d2620bf37 100644 --- a/src/plugins/data_source_management/public/management_app/compoenent/experimental_call_out/index.ts +++ b/src/plugins/data_source_management/public/management_app/compoenent/experimental_callout/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './experimental_call_out'; +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 87c2ddf13429..487d8c607d55 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,7 +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_call_out'; +import { ExperimentalCallout } from './compoenent/experimental_callout'; export interface DataSourceManagementStartDependencies { data: DataPublicPluginStart; @@ -46,7 +46,7 @@ export async function mountManagementSection( ReactDOM.render( - + From 64c63073579ae6db3b19ef7749cc33c23c32e88d Mon Sep 17 00:00:00 2001 From: Yibo Wang <109543558+yibow98@users.noreply.github.com> Date: Fri, 7 Oct 2022 14:41:55 -0700 Subject: [PATCH 6/7] Update CHANGELOG.md&.lycheeexclude Signed-off-by: Yibo Wang --- .lycheeexclude | 2 +- CHANGELOG.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.lycheeexclude b/.lycheeexclude index cad34f89ea0d..26e53a54973d 100644 --- a/.lycheeexclude +++ b/.lycheeexclude @@ -115,4 +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/t/feedback-experimental-feature-connect-to-external-data-sources/11144 \ No newline at end of file +https://forum.opensearch.org/ \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index cc3df8784716..aaf53e115be4 100644 --- a/CHANGELOG.md +++ b/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] UX enhancement for Data source management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501)) + ### 🐛 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)) @@ -54,7 +56,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) * [Viz Builder] Create a new wizard directly on a dashboard ([#2384](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2384)) * [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] UI/UX refactor for datasource management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501)) +* [Multi DataSource] UX enhancement for Data source management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501)) ### 🐛 Bug Fixes From 56d4bf8b4c9e7a7e6580d2a18eef4712fd2af311 Mon Sep 17 00:00:00 2001 From: Yibo Wang Date: Mon, 10 Oct 2022 11:28:49 -0700 Subject: [PATCH 7/7] Update UT Signed-off-by: Yibo Wang --- CHANGELOG.md | 1 - .../experimental_callout.test.tsx.snap | 138 +++++++++++++++--- .../experimental_callout.test.tsx | 17 ++- 3 files changed, 134 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aaf53e115be4..ea80a9169a44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -56,7 +56,6 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) * [Viz Builder] Create a new wizard directly on a dashboard ([#2384](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2384)) * [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 for Data source management creation page ([#2051](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2501)) ### 🐛 Bug Fixes 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 index e1b90e038970..f3c2e06db210 100644 --- 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 @@ -1,31 +1,133 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Dataasource experimental callout component should render normally 1`] = ` - +exports[`Datasource experimental callout component should render normally 1`] = ` + -

- 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 - - - To leave feedback, visit -
+ - OpenSearch Forum - -

+
+ +
+

+ 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 index 42f7453d8a41..cd61e0ea2056 100644 --- 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 @@ -4,15 +4,26 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import { ExperimentalCallout } from './experimental_callout'; import { DocLinksStart } from 'opensearch-dashboards/public'; import { docLinks } from '../../../mocks'; -describe('Dataasource experimental callout component', () => { +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 = shallow(); + 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(); }); });