From de2b984952d545ea86fdcbed8ce2be9e837b022c Mon Sep 17 00:00:00 2001 From: Yibo Wang <109543558+yibow98@users.noreply.github.com> Date: Thu, 20 Oct 2022 13:25:24 -0700 Subject: [PATCH] [MD]Address comments from UX signoff meeting-Datasource list and create page (#2625) Signed-off-by: Yibo Wang Signed-off-by: Sergey V. Osipov --- CHANGELOG.md | 1 + .../create_button/create_button.test.tsx | 3 +- .../create_button/create_button.tsx | 8 ++-- .../create_data_source_wizard.test.tsx.snap | 22 +++++++-- .../create_data_source_form.test.tsx.snap | 44 ++++++++++++++---- .../create_form/create_data_source_form.tsx | 3 +- .../create_data_source_wizard.tsx | 2 +- .../data_source_table.test.tsx.snap | 46 ++++++++++--------- .../data_source_table/data_source_table.tsx | 16 +++++-- .../experimental_callout.tsx | 4 +- 10 files changed, 104 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb0680e6c9f2..e3135bd2d397 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx index 64906045b004..f54aef129df3 100644 --- a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx +++ b/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, React.Component<{}, {}, any>>; beforeEach(() => { - component = shallow(); + component = shallow(); }); it('should render normally', () => { diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.tsx index 072eb8af6029..7c893af0209d 100644 --- a/src/plugins/data_source_management/public/components/create_button/create_button.tsx +++ b/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 ( history.push('/create')} > + +
+ @@ -401,7 +408,7 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Sample URL: https://connectionurl.com" + placeholder="https://connectionurl.com" value="" > @@ -1079,6 +1086,13 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l
+ +
+ @@ -1368,7 +1382,7 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Sample URL: https://connectionurl.com" + placeholder="https://connectionurl.com" value="" > 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 1006968b632f..fcd197cc0827 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 @@ -140,6 +140,13 @@ exports[`Datasource Management: Create Datasource form should create data source
+ +
+ @@ -429,7 +436,7 @@ exports[`Datasource Management: Create Datasource form should create data source onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Sample URL: https://connectionurl.com" + placeholder="https://connectionurl.com" value="https://test.com" > @@ -867,6 +874,13 @@ exports[`Datasource Management: Create Datasource form should create data source
+ +
+ @@ -1156,7 +1170,7 @@ exports[`Datasource Management: Create Datasource form should create data source onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Sample URL: https://connectionurl.com" + placeholder="https://connectionurl.com" value="https://test.com" > @@ -1792,6 +1806,13 @@ exports[`Datasource Management: Create Datasource form should render normally 1`
+ +
+ @@ -2081,7 +2102,7 @@ exports[`Datasource Management: Create Datasource form should render normally 1` onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Sample URL: https://connectionurl.com" + placeholder="https://connectionurl.com" value="" > @@ -2717,6 +2738,13 @@ exports[`Datasource Management: Create Datasource form should throw validation e
+ +
+ @@ -3023,7 +3051,7 @@ exports[`Datasource Management: Create Datasource form should throw validation e onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Sample URL: https://connectionurl.com" + placeholder="https://connectionurl.com" value="https://test.com" > 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 e5d779296a58..429790231a5c 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 @@ -287,6 +287,7 @@ export class CreateDataSourceForm extends React.Component< return ( {this.renderHeader()} + {/* 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} diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx index aaa50435d5e3..08ac198c7561 100644 --- a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx +++ b/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 { - toasts.addWarning(i18n.translate(id, { defaultMessage })); + toasts.addDanger(i18n.translate(id, { defaultMessage })); }; /* Render the creation wizard */ diff --git a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap index abd6fc95c88d..53e2fac37130 100644 --- a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap @@ -108,6 +108,7 @@ exports[`DataSourceTable should get datasources failed should render empty table className="euiFlexItem euiFlexItem--flexGrowZero" >