[MD] UX refactor for datasource create page (opensearch-project#2501) (…

…opensearch-project#2559)

* UX refactor for datasource create page

Signed-off-by: Yibo Wang <yibow@amazon.com>

* address comments&add CHANGLOG

Signed-off-by: Yibo Wang <yibow@amazon.com>

* Apply callout in all ds pages & update endpoint field placeholder text

Signed-off-by: Yibo Wang <yibow@amazon.com>

* add documentation links

Signed-off-by: Yibo Wang <yibow@amazon.com>

* update snapshot test and snapshots

Signed-off-by: Yibo Wang <yibow@amazon.com>

* Update CHANGELOG.md&.lycheeexclude

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

Co-authored-by: Yibo Wang <109543558+yibow98@users.noreply.github.com>

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

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(<ExperimentalCallout docLinks={mockedDocLinks} />);
+    const titleText = component.find(titleIdentifier).text();
+    const descriptionText = component.find(descriptionIdentifier).last().text();
+
+    expect(titleText).toBe(expectedTitleText);
+    expect(descriptionText).toBe(expectedDescriptionText);
+    expect(component).toMatchSnapshot();
+  });
+});