Skip to content

Commit abf0141

Browse files
ruchidhopensearch-changeset-bot[bot]
ruchidh
and
opensearch-changeset-bot[bot]
authored
Data importer ui fixes (#10961)
* fix inconsistent caplitalization and change name of create new Signed-off-by: Ruchi Sharma <[email protected]> * update font size and data source Signed-off-by: Ruchi Sharma <[email protected]> * update yml Signed-off-by: Ruchi Sharma <[email protected]> * Update opensearch_dashboards.yml Signed-off-by: Ruchi Sharma <[email protected]> * Changeset file for PR #10961 created/updated * Update index.scss Signed-off-by: Ruchi Sharma <[email protected]> * fix test cases Signed-off-by: Ruchi Sharma <[email protected]> * Update index.scss Signed-off-by: Ruchi Sharma <[email protected]> * Update index.scss Signed-off-by: Ruchi Sharma <[email protected]> * fix i18n Signed-off-by: Ruchi Sharma <[email protected]> * update ii8n mesage Signed-off-by: Ruchi Sharma <[email protected]> * update snapshpt Signed-off-by: Ruchi Sharma <[email protected]> * Update opensearch_dashboards.yml Signed-off-by: Ruchi Sharma <[email protected]> * Update opensearch_dashboards.yml Signed-off-by: Ruchi Sharma <[email protected]> * fix ts error for datasource selector Signed-off-by: Ruchi Sharma <[email protected]> * code review fixes Signed-off-by: Ruchi Sharma <[email protected]> * Update opensearch_dashboards.yml Signed-off-by: Ruchi Sharma <[email protected]> * Update import_type_selector.test.tsx.snap Signed-off-by: Ruchi Sharma <[email protected]> * update snapshot Signed-off-by: Ruchi Sharma <[email protected]> * update snaphost import selector Signed-off-by: Ruchi Sharma <[email protected]> * snapshot updated Signed-off-by: Ruchi Sharma <[email protected]> --------- Signed-off-by: Ruchi Sharma <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
1 parent 7506c9f commit abf0141

File tree

12 files changed

+164
-98
lines changed

12 files changed

+164
-98
lines changed

‎changelogs/fragments/10961.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
fix:
2+
- Fix ui changes for data importer ([#10961](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10961))

‎src/plugins/data_importer/public/components/__snapshots__/data_importer_app.test.tsx.snap‎

Lines changed: 52 additions & 37 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/plugins/data_importer/public/components/__snapshots__/delimiter_select.test.tsx.snap‎

Lines changed: 1 addition & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/plugins/data_importer/public/components/__snapshots__/import_text_content.test.tsx.snap‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/plugins/data_importer/public/components/__snapshots__/import_type_selector.test.tsx.snap‎

Lines changed: 1 addition & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/plugins/data_importer/public/components/data_importer_app.test.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ describe('App', () => {
2525
};
2626

2727
it('should render without MDS', () => {
28+
const dataSourceManagementMock = {
29+
registerAuthenticationMethod: jest.fn(),
30+
ui: {
31+
DataSourceSelector: () => <div>Mock DataSourceSelector</div>,
32+
getDataSourceMenu: jest.fn(),
33+
},
34+
dataSourceSelection: {} as any,
35+
getDefaultDataSourceId: jest.fn(),
36+
getDefaultDataSourceId$: jest.fn(),
37+
};
2838
const container = shallow(
2939
// @ts-expect-error TS2741 TODO(ts-error): fixme
3040
<DataImporterPluginApp
@@ -35,7 +45,7 @@ describe('App', () => {
3545
navigation={navigationMock}
3646
config={mockConfig}
3747
dataSourceEnabled={false}
38-
dataSourceManagement={undefined}
48+
dataSourceManagement={dataSourceManagementMock}
3949
/>
4050
);
4151
expect(container).toMatchSnapshot();

‎src/plugins/data_importer/public/components/data_importer_app.tsx‎

Lines changed: 49 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,6 @@ export const DataImporterPluginApp = ({
7373
hideLocalCluster,
7474
dataSourceManagement,
7575
}: DataImporterPluginAppProps) => {
76-
const DataSourceMenuComponent = dataSourceManagement?.ui.getDataSourceMenu<
77-
DataSourceSelectableConfig
78-
>();
7976
const [indexName, setIndexName] = useState<string>();
8077
const [importType, setImportType] = useState<ImportChoices>(IMPORT_CHOICE_FILE);
8178
const [disableImport, setDisableImport] = useState<boolean>();
@@ -332,23 +329,22 @@ export const DataImporterPluginApp = ({
332329
}, [inputText, inputFile, config.maxTextCount, config.maxFileSizeBytes, notifications.toasts]);
333330

334331
const renderDataSourceComponent = useMemo(() => {
332+
if (!dataSourceEnabled || !dataSourceManagement) return null;
333+
334+
const DataSourceSelector = dataSourceManagement!.ui.DataSourceSelector as React.ComponentType<
335+
any
336+
>;
335337
return (
336-
<div>
337-
{DataSourceMenuComponent && (
338-
<>
339-
<DataSourceMenuComponent
340-
componentType={'DataSourceSelectable'}
341-
componentConfig={{
342-
fullWidth: true,
343-
savedObjects: savedObjects.client,
344-
notifications,
345-
onSelectedDataSources: onDataSourceSelect,
346-
}}
347-
onManageDataSource={() => {}}
348-
/>
349-
<EuiSpacer size="m" />
350-
</>
351-
)}
338+
<div className="devAppDataSourceSelector">
339+
<DataSourceSelector
340+
savedObjectsClient={savedObjects.client}
341+
notifications={notifications.toasts}
342+
onSelectedDataSource={onDataSourceSelect}
343+
disabled={!dataSourceEnabled}
344+
fullWidth={false}
345+
compressed={false}
346+
hideLocalCluster={hideLocalCluster}
347+
/>
352348
</div>
353349
);
354350
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -392,13 +388,14 @@ export const DataImporterPluginApp = ({
392388
</h1>
393389
</EuiTitle>
394390
</EuiPageHeader>
395-
<EuiPageContent>
391+
<EuiPageContent className="data_importer_content" paddingSize="s">
396392
<EuiFlexGroup>
397393
<EuiFlexItem grow={1}>
398394
<ImportTypeSelector
399395
updateSelection={onImportTypeChange}
400396
initialSelection={importType}
401397
/>
398+
<EuiSpacer size="s" />
402399
{dataSourceEnabled && (
403400
<>
404401
<EuiTitle size="xs">
@@ -415,7 +412,7 @@ export const DataImporterPluginApp = ({
415412
<EuiTitle size="xs">
416413
<span>
417414
{i18n.translate('dataImporter.indexName', {
418-
defaultMessage: 'Create/Select Index Name',
415+
defaultMessage: 'Select an existing index or create new',
419416
})}
420417
</span>
421418
</EuiTitle>
@@ -429,27 +426,45 @@ export const DataImporterPluginApp = ({
429426
onCreateOption={onCreateIndexName}
430427
/>
431428
</EuiFormRow>
432-
<EuiSpacer size="s" />
429+
433430
{showDelimiterChoice && (
434-
<DelimiterSelect
435-
onDelimiterChange={onDelimiterChange}
436-
initialDelimiter={delimiter}
437-
/>
431+
<>
432+
<EuiSpacer size="s" />
433+
<DelimiterSelect
434+
onDelimiterChange={onDelimiterChange}
435+
initialDelimiter={delimiter}
436+
/>
437+
</>
438438
)}
439+
439440
{importType === IMPORT_CHOICE_FILE && (
440-
<ImportFileContentBody
441-
enabledFileTypes={config.enabledFileTypes}
442-
onFileUpdate={onFileInput}
443-
/>
441+
<>
442+
<EuiSpacer size="s" />
443+
<ImportFileContentBody
444+
enabledFileTypes={config.enabledFileTypes}
445+
onFileUpdate={onFileInput}
446+
/>
447+
</>
444448
)}
445449
{importType === IMPORT_CHOICE_FILE && (
446-
<EuiButton fullWidth={true} isDisabled={disableImport} onClick={previewData}>
447-
Preview
448-
</EuiButton>
450+
<>
451+
<EuiSpacer size="s" />
452+
<EuiButton
453+
fullWidth={true}
454+
isDisabled={disableImport}
455+
onClick={previewData}
456+
>
457+
{i18n.translate('dataImporter.previewButton', {
458+
defaultMessage: 'Preview',
459+
})}
460+
</EuiButton>
461+
</>
449462
)}
450463
<EuiSpacer size="s" />
451464
<EuiButton fullWidth={true} isDisabled={disableImport} onClick={importData}>
452-
Import
465+
{i18n.translate('dataImporter.importButton', {
466+
defaultMessage: 'Import',
467+
})}
453468
</EuiButton>
454469
</EuiFlexItem>
455470
<EuiFlexItem grow={2}>

‎src/plugins/data_importer/public/components/delimiter_select.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import React from 'react';
77
import { i18n } from '@osd/i18n';
8-
import { EuiTitle, EuiSelect, EuiSpacer } from '@elastic/eui';
8+
import { EuiTitle, EuiSelect } from '@elastic/eui';
99
import { CSV_SUPPORTED_DELIMITERS } from '../../common/constants';
1010

1111
export interface DelimiterSelectProps {
@@ -19,7 +19,7 @@ export const DelimiterSelect = ({ onDelimiterChange, initialDelimiter }: Delimit
1919
<EuiTitle size="xs">
2020
<span>
2121
{i18n.translate('dataImporter.delimiter', {
22-
defaultMessage: 'Delimiter Options',
22+
defaultMessage: 'Delimiter options',
2323
})}
2424
</span>
2525
</EuiTitle>
@@ -30,7 +30,6 @@ export const DelimiterSelect = ({ onDelimiterChange, initialDelimiter }: Delimit
3030
onChange={onDelimiterChange}
3131
value={initialDelimiter}
3232
/>
33-
<EuiSpacer size="m" />
3433
</div>
3534
);
3635
};

0 commit comments

Comments
 (0)