diff --git a/CHANGELOG.md b/CHANGELOG.md index bb0680e6c9f..e3135bd2d39 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 64906045b00..f54aef129df 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<any, Readonly<{}>, React.Component<{}, {}, any>>; beforeEach(() => { - component = shallow(<CreateButton history={history} />); + component = shallow(<CreateButton history={history} dataTestSubj={dataTestSubj} />); }); 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 072eb8af602..7c893af0209 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 ( <EuiButton - data-test-subj="createDataSourceButton" - fill={true} + data-test-subj={dataTestSubj} + fill={isEmptyState ? false : true} onClick={() => history.push('/create')} > <FormattedMessage 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 a7c32d540d2..b4331e26f79 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 @@ -112,6 +112,13 @@ exports[`Datasource Management: Create Datasource Wizard case1: should load reso </div> </EuiFlexGroup> </Header> + <EuiSpacer + size="m" + > + <div + className="euiSpacer euiSpacer--m" + /> + </EuiSpacer> <EuiForm data-test-subj="data-source-creation" > @@ -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="" > <EuiFormControlLayout @@ -425,7 +432,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" type="text" value="" /> @@ -1079,6 +1086,13 @@ exports[`Datasource Management: Create Datasource Wizard case2: should fail to l </div> </EuiFlexGroup> </Header> + <EuiSpacer + size="m" + > + <div + className="euiSpacer euiSpacer--m" + /> + </EuiSpacer> <EuiForm data-test-subj="data-source-creation" > @@ -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="" > <EuiFormControlLayout @@ -1392,7 +1406,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" type="text" 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 1006968b632..fcd197cc082 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 </div> </EuiFlexGroup> </Header> + <EuiSpacer + size="m" + > + <div + className="euiSpacer euiSpacer--m" + /> + </EuiSpacer> <EuiForm data-test-subj="data-source-creation" > @@ -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" > <EuiFormControlLayout @@ -453,7 +460,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" type="text" value="https://test.com" /> @@ -867,6 +874,13 @@ exports[`Datasource Management: Create Datasource form should create data source </div> </EuiFlexGroup> </Header> + <EuiSpacer + size="m" + > + <div + className="euiSpacer euiSpacer--m" + /> + </EuiSpacer> <EuiForm data-test-subj="data-source-creation" > @@ -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" > <EuiFormControlLayout @@ -1180,7 +1194,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" type="text" value="https://test.com" /> @@ -1792,6 +1806,13 @@ exports[`Datasource Management: Create Datasource form should render normally 1` </div> </EuiFlexGroup> </Header> + <EuiSpacer + size="m" + > + <div + className="euiSpacer euiSpacer--m" + /> + </EuiSpacer> <EuiForm data-test-subj="data-source-creation" > @@ -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="" > <EuiFormControlLayout @@ -2105,7 +2126,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" type="text" value="" /> @@ -2717,6 +2738,13 @@ exports[`Datasource Management: Create Datasource form should throw validation e </div> </EuiFlexGroup> </Header> + <EuiSpacer + size="m" + > + <div + className="euiSpacer euiSpacer--m" + /> + </EuiSpacer> <EuiForm data-test-subj="data-source-creation" > @@ -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" > <EuiFormControlLayout @@ -3047,7 +3075,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" type="text" 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 e5d779296a5..429790231a5 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 ( <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} 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 aaa50435d5e..08ac198c756 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<CreateDataSourceWiz }; const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => { - 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 abd6fc95c88..53e2fac3713 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" > <CreateButton + dataTestSubj="createDataSourceButton" history={ Object { "action": "PUSH", @@ -245,6 +246,7 @@ exports[`DataSourceTable should get datasources failed should render empty table /> </EuiSpacer> <CreateButton + dataTestSubj="createDataSourceButtonEmptyState" history={ Object { "action": "PUSH", @@ -267,25 +269,26 @@ exports[`DataSourceTable should get datasources failed should render empty table "replace": [MockFunction], } } + isEmptyState={true} > <EuiButton - data-test-subj="createDataSourceButton" - fill={true} + data-test-subj="createDataSourceButtonEmptyState" + fill={false} onClick={[Function]} > <EuiButtonDisplay baseClassName="euiButton" - data-test-subj="createDataSourceButton" + data-test-subj="createDataSourceButtonEmptyState" disabled={false} element="button" - fill={true} + fill={false} isDisabled={false} onClick={[Function]} type="button" > <button - className="euiButton euiButton--primary euiButton--fill" - data-test-subj="createDataSourceButton" + className="euiButton euiButton--primary" + data-test-subj="createDataSourceButtonEmptyState" disabled={false} onClick={[Function]} style={ @@ -527,6 +530,7 @@ exports[`DataSourceTable should get datasources successful should render normall className="euiFlexItem euiFlexItem--flexGrowZero" > <CreateButton + dataTestSubj="createDataSourceButton" history={ Object { "action": "PUSH", @@ -701,7 +705,7 @@ exports[`DataSourceTable should get datasources successful should render normall Object { "dataType": "string", "field": "title", - "name": "Datasource", + "name": "Title", "render": [Function], "sortable": [Function], }, @@ -1021,7 +1025,7 @@ exports[`DataSourceTable should get datasources successful should render normall Object { "dataType": "string", "field": "title", - "name": "Datasource", + "name": "Title", "render": [Function], "sortable": [Function], }, @@ -1095,7 +1099,7 @@ exports[`DataSourceTable should get datasources successful should render normall "allowNeutralSort": false, "sort": Object { "direction": "asc", - "field": "Datasource", + "field": "Title", }, } } @@ -1176,7 +1180,7 @@ exports[`DataSourceTable should get datasources successful should render normall "isSortAscending": true, "isSorted": true, "key": "_data_s_title_0", - "name": "Datasource", + "name": "Title", "onSort": [Function], }, Object { @@ -1404,15 +1408,15 @@ exports[`DataSourceTable should get datasources successful should render normall values={ Object { "description": undefined, - "innerText": "Datasource", + "innerText": "Title", } } > <span className="euiTableCellContent__text" - title="Datasource" + title="Title" > - Datasource + Title </span> </EuiI18n> </EuiInnerText> @@ -1562,7 +1566,7 @@ exports[`DataSourceTable should get datasources successful should render normall key="_data_column_title_alpha-test_0" mobileOptions={ Object { - "header": "Datasource", + "header": "Title", "render": undefined, } } @@ -1580,7 +1584,7 @@ exports[`DataSourceTable should get datasources successful should render normall <div className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop" > - Datasource + Title </div> <div className="euiTableCellContent euiTableCellContent--overflowingContent" @@ -1715,7 +1719,7 @@ exports[`DataSourceTable should get datasources successful should render normall key="_data_column_title_beta-test_0" mobileOptions={ Object { - "header": "Datasource", + "header": "Title", "render": undefined, } } @@ -1733,7 +1737,7 @@ exports[`DataSourceTable should get datasources successful should render normall <div className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop" > - Datasource + Title </div> <div className="euiTableCellContent euiTableCellContent--overflowingContent" @@ -1868,7 +1872,7 @@ exports[`DataSourceTable should get datasources successful should render normall key="_data_column_title_test_0" mobileOptions={ Object { - "header": "Datasource", + "header": "Title", "render": undefined, } } @@ -1886,7 +1890,7 @@ exports[`DataSourceTable should get datasources successful should render normall <div className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop" > - Datasource + Title </div> <div className="euiTableCellContent euiTableCellContent--overflowingContent" @@ -2021,7 +2025,7 @@ exports[`DataSourceTable should get datasources successful should render normall key="_data_column_title_test2_0" mobileOptions={ Object { - "header": "Datasource", + "header": "Title", "render": undefined, } } @@ -2039,7 +2043,7 @@ exports[`DataSourceTable should get datasources successful should render normall <div className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop" > - Datasource + Title </div> <div className="euiTableCellContent euiTableCellContent--overflowingContent" diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx index 15faf57f57a..bbb2ce5f410 100644 --- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx +++ b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx @@ -132,7 +132,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => { const columns = [ { field: 'title', - name: 'Datasource', + name: 'Title', render: ( name: string, index: { @@ -184,6 +184,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => { confirmButtonText={i18n.translate('dataSourcesManagement.dataSourcesTable.delete', { defaultMessage: 'Delete', })} + buttonColor="danger" defaultFocusedButton="confirm" > <p> @@ -249,7 +250,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => { /* Toast Handlers */ const handleDisplayToastMessage = ({ id, defaultMessage }: ToastMessageItem) => { - toasts.addWarning( + toasts.addDanger( i18n.translate(id, { defaultMessage, }) @@ -258,7 +259,14 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => { /* Render Ui elements*/ /* Create Data Source button */ - const createButton = <CreateButton history={history} />; + const createButton = <CreateButton history={history} dataTestSubj="createDataSourceButton" />; + const createButtonEmptyState = ( + <CreateButton + history={history} + isEmptyState={true} + dataTestSubj="createDataSourceButtonEmptyState" + /> + ); /* Render header*/ const renderHeader = () => { @@ -332,7 +340,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => { } </EuiText> <EuiSpacer /> - {createButton} + {createButtonEmptyState} </EuiPanel> <EuiSpacer size="l" /> </> 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 index 611e410e373..23f0d45a320 100644 --- 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 @@ -23,7 +23,7 @@ export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) = { <FormattedMessage id="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 " + defaultMessage="This 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 " /> } <EuiLink href={docLinks.links.noDocumentation.indexPatterns.introduction} target="_blank"> @@ -44,7 +44,7 @@ export const ExperimentalCallout = ({ docLinks }: { docLinks: DocLinksStart }) = { <FormattedMessage id="dataSourcesManagement.experimentalFeatureCallout.openForumText" - defaultMessage="OpenSearch Forum" + defaultMessage="forum.opensearch.org" /> } </EuiLink>