[MD]Address comments from UX signoff meeting-Datasource list and crea…

…te page

Signed-off-by: Yibo Wang <[email protected]>

CHANGELOG.md

@@ -24,6 +24,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * [Multi DataSource] Make text content dynamically translated & update unit tests ([#2570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2570))
 * [Vis Builder] Change classname prefix wiz to vb ([#2581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2581/files))
 * [Vis Builder] Change wizard to vis_builder in file names and paths ([#2587](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2587))
+* [Multi DataSource] Address UX comments on Data source list and create page ([#2625](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2625))
 
 ### 🐛 Bug Fixes
 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401))

src/plugins/data_source_management/public/components/create_button/create_button.test.tsx

@@ -13,10 +13,11 @@ const createButtonIdentifier = `[data-test-subj="createDataSourceButton"]`;
 
 describe('CreateButton', () => {
   const history = (scopedHistoryMock.create() as unknown) as ScopedHistory;
+  const dataTestSubj = 'createDataSourceButton';
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
 
   beforeEach(() => {
-    component = shallow(<CreateButton history={history} />);
+    component = shallow(<CreateButton history={history} dataTestSubj={dataTestSubj} />);
   });
 
   it('should render normally', () => {

src/plugins/data_source_management/public/components/create_button/create_button.tsx

@@ -11,13 +11,15 @@ import { FormattedMessage } from '@osd/i18n/react';
 
 interface Props {
   history: History;
+  isEmptyState?: boolean;
+  dataTestSubj: string;
 }
 
-export const CreateButton = ({ history }: Props) => {
+export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) => {
   return (
     <EuiButton
-      data-test-subj="createDataSourceButton"
-      fill={true}
+      data-test-subj={dataTestSubj}
+      fill={isEmptyState ? false : true}
       onClick={() => history.push('/create')}
     >
       <FormattedMessage

src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx

@@ -287,6 +287,7 @@ export class CreateDataSourceForm extends React.Component<
     return (
       <EuiPageContent>
         {this.renderHeader()}
+        <EuiSpacer size="m" />
         <EuiForm data-test-subj="data-source-creation">
           {/* Endpoint section */}
           {this.renderSectionHeader(
@@ -354,7 +355,7 @@ export class CreateDataSourceForm extends React.Component<
               placeholder={i18n.translate(
                 'dataSourcesManagement.createDataSource.endpointPlaceholder',
                 {
-                  defaultMessage: 'Sample URL: https://connectionurl.com',
+                  defaultMessage: 'https://connectionurl.com',
                 }
               )}
               isInvalid={!!this.state.formErrorsByField.endpoint.length}

src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx

@@ -75,7 +75,7 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
   };
 
   const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => {
-    toasts.addWarning(i18n.translate(id, { defaultMessage }));
+    toasts.addDanger(i18n.translate(id, { defaultMessage }));
   };
 
   /* Render the creation wizard */