@adaptabletools/adaptable 16.0.10-canary.0 → 16.1.0-canary.1

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataImportWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Tag_1 = require("../../../components/Tag");
+const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const systemFileHandlers_1 = require("../systemFileHandlers");
+const UploadSection_1 = require("./sections/UploadSection");
+const ValidationSection_1 = require("./sections/ValidationSection");
+const DataImportWizard = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
+    const module = adaptable.ModuleService.getModuleById('DataImport');
+    const [rowData, setRowData] = React.useState(null);
+    const [file, setFile] = React.useState(null);
+    const [text, setText] = React.useState('');
+    const [importType, setImportType] = React.useState('file');
+    const handleRowDataChange = React.useCallback((data) => {
+        if (Array.isArray(data)) {
+            setRowData(data);
+        }
+        else {
+            setRowData(null);
+        }
+    }, []);
+    const handleChangeImportType = React.useCallback((importType) => {
+        setImportType(importType);
+        // clear data
+        handleRowDataChange(null);
+        setFile(null);
+        setText('');
+    }, []);
+    // ---- FILE HANDLERS ----
+    const fileHandlers = React.useMemo(() => {
+        var _a, _b;
+        const userDefinedHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
+        return [...userDefinedHandlers, ...systemFileHandlers_1.systemFileHandlers];
+    }, []);
+    const supportedFileFormats = React.useMemo(() => {
+        return fileHandlers.map((h) => h.fileExtension).join(', ');
+    }, [fileHandlers]);
+    const readFile = React.useCallback(async (file) => {
+        var _a, _b;
+        const userDefinedFileHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
+        const fileExtension = `.${file.name.split('.').pop()}`;
+        const handler = [...userDefinedFileHandlers, ...systemFileHandlers_1.systemFileHandlers].find((fh) => fh.fileExtension === fileExtension);
+        if (!handler) {
+            adaptable.api.logError(`No file handler found for file extension ${fileExtension}. Please provide a file handler in Data Import Options.`);
+            return;
+        }
+        try {
+            const data = await handler.handleFile(file);
+            setFile(file);
+            handleRowDataChange(data);
+            return data;
+        }
+        catch (_c) {
+            adaptable.api.logError(`Error reading file ${file.name}. Please check the file is valid.`);
+        }
+    }, [adaptable]);
+    const fileMessage = file ? (React.createElement(HelpBlock_1.default, { mb: 2 },
+        "File ",
+        React.createElement(Tag_1.Tag, null, file.name),
+        " is ready to be imported.")) : (React.createElement(HelpBlock_1.default, { mb: 2 },
+        "Supported file types: ",
+        supportedFileFormats));
+    // ---- TEXT IMPORT ----
+    const [textError, setTextError] = React.useState(null);
+    const handleTextChange = React.useCallback(async (text) => {
+        var _a;
+        //
+        let textHandler = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.textHandler;
+        if (!textHandler) {
+            // regex to test for json
+            const jsonRegex = /^\s*[\[{]/;
+            if (text && jsonRegex.test(text)) {
+                textHandler = JSON.parse;
+            }
+            else {
+                textHandler = systemFileHandlers_1.parseCSV;
+            }
+        }
+        setText(text);
+        let textRawData = null;
+        if (!text || text === '') {
+            setTextError(null);
+        }
+        else {
+            try {
+                textRawData = await textHandler(text);
+                if (Array.isArray(textRawData)) {
+                    handleRowDataChange(textRawData);
+                    setTextError('');
+                }
+                else {
+                    throw 'Error parsing text';
+                }
+            }
+            catch (_b) {
+                handleRowDataChange(null);
+                setTextError('Error parsing text');
+            }
+        }
+    }, []);
+    const textMessage = textError !== null && textError !== void 0 ? textError : (!rowData ? 'Paste your data here' : '');
+    // ---- VALIDATION ----
+    const errors = (_a = React.useMemo(() => {
+        var _a;
+        if (!(dataImportOptions === null || dataImportOptions === void 0 ? void 0 : dataImportOptions.validate)) {
+            return null;
+        }
+        if (!rowData) {
+            return null;
+        }
+        return (_a = rowData === null || rowData === void 0 ? void 0 : rowData.reduce) === null || _a === void 0 ? void 0 : _a.call(rowData, (acc, rowData) => {
+            const error = dataImportOptions.validate(Object.assign({ rowData }, (0, ObjectFactory_1.createBaseContext)(adaptable.api)));
+            if (error && rowData[primaryKey] && error.length) {
+                acc[rowData[primaryKey]] = error;
+            }
+            return acc;
+        }, {});
+    }, [rowData])) !== null && _a !== void 0 ? _a : {};
+    const [skipInvalidRows, setSkipInvalidRows] = React.useState(false);
+    const handleValidationDataChange = (data) => {
+        handleRowDataChange(data);
+    };
+    const handleFinish = () => {
+        const validData = rowData.filter((row) => {
+            const rowErrors = errors[row[primaryKey]];
+            return !rowErrors || rowErrors.length === 0;
+        });
+        adaptable.api.dataImportApi.internalApi.importData(validData);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
+            handleFinish();
+            props.onClose();
+        }, onHide: () => {
+            props.onClose();
+        }, sections: [
+            {
+                title: 'Upload',
+                isValid: () => {
+                    return rowData ? true : 'No valid data uploaded';
+                },
+                details: 'Upload the data',
+                render: () => {
+                    return (React.createElement(UploadSection_1.UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
+                        // FILE
+                        readFile: readFile, supportedFileFormats: supportedFileFormats, fileMessage: fileMessage, 
+                        // TEXT
+                        text: text, onTextChange: handleTextChange, textMessage: textMessage }));
+                },
+            },
+            {
+                title: 'Validation',
+                details: 'Check the Data is Valid',
+                isValid: () => {
+                    if (errors && Object.keys(errors).length > 0) {
+                        if (!skipInvalidRows)
+                            return 'There are errors in the data.';
+                    }
+                    return true;
+                },
+                render: () => {
+                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, onDataChange: handleValidationDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                },
+            },
+        ] }));
+};
+exports.DataImportWizard = DataImportWizard;

package/src/View/DataImport/DataImportWizard/index.d.ts

@@ -0,0 +1 @@
+export * from './DataImportWizard';

package/src/View/DataImport/DataImportWizard/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataImportWizard"), exports);

package/src/View/DataImport/DataImportWizard/sections/DataPreview.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ValidationErrorsMap } from '../DataImportWizard';
+interface DataPreviewProps {
+    data?: Record<string, unknown>[];
+    onDataChange?: (data: Record<string, unknown>[]) => void;
+    errors: ValidationErrorsMap | null;
+    editable?: boolean;
+}
+export declare const DataPreview: React.FunctionComponent<DataPreviewProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPreview = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const icons_1 = require("../../../../components/icons");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptablePopover_1 = require("../../../AdaptablePopover");
+const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 300,
+        flex: 1,
+    },
+};
+const getRowErrors = (errors, primaryKeyValue) => {
+    if (!errors) {
+        return null;
+    }
+    if (!errors[primaryKeyValue]) {
+        return null;
+    }
+    return errors[primaryKeyValue];
+};
+const getCellError = (errors, primaryKeyValue, columnId) => {
+    var _a, _b;
+    return (_b = (_a = getRowErrors(errors, primaryKeyValue)) === null || _a === void 0 ? void 0 : _a.find((e) => e.columnId === columnId)) !== null && _b !== void 0 ? _b : null;
+};
+const DataPreview = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    if (!props.data) {
+        return (React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
+            "No Data has been Imported. Go to ",
+            React.createElement(Tag_1.Tag, null, "Upload"),
+            " step and provide Data"));
+    }
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const dataSample = props.data[0];
+    const columns = React.useMemo(() => {
+        if (!dataSample) {
+            return {};
+        }
+        const adaptableColumnsInData = adaptable.api.columnApi.getColumns().filter((c) => {
+            var _a;
+            return dataSample && ((_a = c.field) !== null && _a !== void 0 ? _a : c.columnId) in dataSample;
+        });
+        const mapDataType = (dataType) => {
+            switch (dataType) {
+                case 'Boolean':
+                    return 'boolean';
+                case 'Date':
+                    return 'date';
+                case 'String':
+                    return 'number';
+            }
+            return dataType;
+        };
+        const infiniteColumns = adaptableColumnsInData.reduce((acc, column) => {
+            const isPrimaryKey = column.columnId === primaryKey;
+            let editable = !isPrimaryKey;
+            if (props.editable !== undefined && !isPrimaryKey) {
+                editable = props.editable;
+            }
+            acc[column.columnId] = {
+                field: column.field,
+                header: adaptable.api.columnApi.getFriendlyNameForColumnId(column.columnId),
+                dataType: mapDataType(column.dataType),
+                defaultEditable: editable,
+                valueGetter: (params) => {
+                    if (column.dataType === 'Boolean') {
+                        return params.data[column.columnId] ? 'True' : 'False';
+                    }
+                    else {
+                        return params.data[params.field];
+                    }
+                },
+            };
+            return acc;
+        }, {});
+        infiniteColumns['valid'] = {
+            header: 'Valid',
+            maxWidth: 100,
+            minWidth: 90,
+            align: 'center',
+            renderValue: (params) => {
+                const cellErrors = getRowErrors(props.errors, params.data[primaryKey]);
+                const successColor = UIHelper_1.default.getColorByMessageType('Success');
+                if (!cellErrors || cellErrors.length === 0) {
+                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                }
+                const errorsStr = cellErrors.map((e) => e.error).join(', ');
+                return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
+            },
+        };
+        infiniteColumns['type'] = {
+            header: 'Type',
+            maxWidth: 100,
+            minWidth: 90,
+            renderValue: (params) => {
+                try {
+                    const isExistingRow = adaptable.api.gridApi.getRowNodeForPrimaryKey(params.data[primaryKey]);
+                    return isExistingRow ? 'Update' : 'New';
+                }
+                catch (error) {
+                    // empty
+                }
+                return React.createElement(React.Fragment, null);
+            },
+        };
+        return infiniteColumns;
+    }, [props.data]);
+    const getCellErrorStyle = (columnId, primaryKeyValue) => {
+        const cellError = getCellError(props.errors, primaryKeyValue, columnId);
+        if (!cellError) {
+            return {};
+        }
+        return {
+            border: 'var(--ab-Dataimport-validation-error__border)',
+        };
+    };
+    return (React.createElement(InfiniteTable_1.DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
+            const newRowData = [...props.data];
+            const mutationsList = (0, lodash_1.flatten)(Array.from(params.mutations.values()));
+            if (!mutationsList.length) {
+                return;
+            }
+            mutationsList.forEach((mutation) => {
+                const index = newRowData.findIndex((row) => row[primaryKey] === mutation.primaryKey);
+                if (index !== -1) {
+                    newRowData[index] = Object.assign(Object.assign({}, newRowData[index]), mutation.data);
+                }
+            });
+            props.onDataChange(newRowData);
+        } },
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+                valid: 'end',
+                type: 'end',
+            }, columnTypes: {
+                default: {
+                    style: (params) => {
+                        return getCellErrorStyle(params.column.id, params.rowInfo.id);
+                    },
+                    minWidth: 100,
+                    defaultFlex: 1,
+                },
+            }, domProps: tableDOMProps, columns: columns })));
+};
+exports.DataPreview = DataPreview;

package/src/View/DataImport/DataImportWizard/sections/ImportSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ValidationErrorsMap } from '../DataImportWizard';
+interface ImportSectionProps {
+    data?: Record<string, unknown>[];
+    onDataChange?: (data: Record<string, unknown>[]) => void;
+    errors: ValidationErrorsMap | null;
+}
+export declare const ImportSection: React.FunctionComponent<ImportSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/ImportSection.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const check_box_1 = tslib_1.__importDefault(require("../../../../components/icons/check-box"));
+const Tabs_1 = require("../../../../components/Tabs");
+const DataPreview_1 = require("./DataPreview");
+const ImportSection = (props) => {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(check_box_1.default, null))))),
+        React.createElement(Tabs_1.Tabs, { flex: 1 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(DataPreview_1.DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
+};
+exports.ImportSection = ImportSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadFileSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ImportFileSectionProps {
+    readFile: (data: File) => Promise<Record<string, unknown>[]>;
+    supportedFileFormats: string;
+    message: React.ReactNode;
+}
+export declare const ImportFileSection: React.FunctionComponent<ImportFileSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadFileSection.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportFileSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("../../../../../components/FileDroppable/index"));
+const index_2 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
+const ImportFileSection = (props) => {
+    return (React.createElement(index_1.default, { loadingText: React.createElement(index_2.default, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+};
+exports.ImportFileSection = ImportFileSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+declare type UploadSectionProps = {
+    readFile: (data: File) => Promise<Record<string, unknown>[]>;
+    supportedFileFormats: string;
+    fileMessage: ReactNode;
+    onTextChange: (text: string) => void;
+    text?: string;
+    textMessage?: string;
+    importType: 'file' | 'text';
+    onImportTypeChange: (importType: 'file' | 'text') => void;
+};
+export declare const UploadSection: React.FC<UploadSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadSection.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const index_1 = tslib_1.__importDefault(require("../../../../../components/Radio/index"));
+const index_2 = require("../../../../../components/Tabs/index");
+const UploadFileSection_1 = require("./UploadFileSection");
+const UploadTextSection_1 = require("./UploadTextSection");
+const UploadSection = (props) => {
+    return (react_1.default.createElement(rebass_1.Flex, { p: 2, height: "100%", flexDirection: "column" },
+        react_1.default.createElement(index_2.Tabs, { mb: 2 },
+            react_1.default.createElement(index_2.Tabs.Tab, null, "Import Type"),
+            react_1.default.createElement(index_2.Tabs.Content, null,
+                react_1.default.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file' }, "File"),
+                    react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text' }, "Text")))),
+        react_1.default.createElement(index_2.Tabs, { flex: 1 },
+            react_1.default.createElement(index_2.Tabs.Tab, null, props.importType === 'file' ? 'File Upload' : 'Text'),
+            react_1.default.createElement(index_2.Tabs.Content, null, props.importType === 'file' ? (react_1.default.createElement(UploadFileSection_1.ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (react_1.default.createElement(UploadTextSection_1.ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange }))))));
+};
+exports.UploadSection = UploadSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ImportTextSectionProps {
+    text?: string;
+    onTextChange: (text: string) => void;
+    message?: string;
+}
+export declare const ImportTextSection: React.FunctionComponent<ImportTextSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportTextSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
+const index_2 = tslib_1.__importDefault(require("../../../../../components/Textarea/index"));
+const ImportTextSection = (props) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), height: "100%" }),
+        props.message && React.createElement(index_1.default, null, props.message)));
+};
+exports.ImportTextSection = ImportTextSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/index.d.ts

@@ -0,0 +1 @@
+export * from './UploadSection';

package/src/View/DataImport/DataImportWizard/sections/UploadSection/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./UploadSection"), exports);

package/src/View/DataImport/DataImportWizard/sections/ValidationSection.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ValidationErrorsMap } from '../DataImportWizard';
+interface ValidationSectionProps {
+    data?: Record<string, unknown>[];
+    onDataChange?: (data: Record<string, unknown>[]) => void;
+    errors: ValidationErrorsMap | null;
+    skipInvalidRows: boolean;
+    onSkipInvalidRowsChange: (skipInvalidRows: boolean) => void;
+}
+export declare const ValidationSection: React.FunctionComponent<ValidationSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/ValidationSection.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Tabs_1 = require("../../../../components/Tabs");
+const DataPreview_1 = require("./DataPreview");
+const getRowErrors = (errors, primaryKeyValue) => {
+    if (!errors) {
+        return null;
+    }
+    if (!errors[primaryKeyValue]) {
+        return null;
+    }
+    return errors[primaryKeyValue];
+};
+const ValidationSection = (props) => {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(CheckBox_1.CheckBox, { onChange: () => {
+                                props.onSkipInvalidRowsChange(!props.skipInvalidRows);
+                            }, checked: props.skipInvalidRows }))))),
+        React.createElement(Tabs_1.Tabs, { flex: 1 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(DataPreview_1.DataPreview, { data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));
+};
+exports.ValidationSection = ValidationSection;

package/src/View/DataImport/systemFileHandlers.d.ts

@@ -0,0 +1,3 @@
+import { DataImportFileHandler } from '../../types';
+export declare const parseCSV: (content: string) => Record<string, unknown>[];
+export declare const systemFileHandlers: DataImportFileHandler<Record<string, unknown>>[];

package/src/View/DataImport/systemFileHandlers.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.systemFileHandlers = exports.parseCSV = void 0;
+const FileDroppable_1 = require("../../components/FileDroppable");
+const jsonHandler = {
+    fileExtension: '.json',
+    handleFile: (file) => (0, FileDroppable_1.readJSONFile)(file),
+};
+const parseCSV = (content) => {
+    const lines = content.split('\n');
+    const headers = lines[0].split(',');
+    const data = [];
+    if (lines.length <= 1) {
+        return null;
+    }
+    for (let i = 1; i < lines.length; i++) {
+        const values = lines[i].split(',');
+        if (values.length === headers.length) {
+            const item = {};
+            for (let j = 0; j < headers.length; j++) {
+                const value = values[j];
+                item[headers[j]] = isNaN(Number(value)) ? value : Number(value);
+            }
+            data.push(item);
+        }
+    }
+    return data;
+};
+exports.parseCSV = parseCSV;
+const csvFileHandler = {
+    fileExtension: '.csv',
+    handleFile: (file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                var _a;
+                const content = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+                resolve((0, exports.parseCSV)(content));
+            };
+            reader.readAsText(file);
+        });
+    },
+};
+exports.systemFileHandlers = [jsonHandler, csvFileHandler];

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -39,6 +39,7 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
     titleContainerStyle?: CSSProperties;
     closeText?: React.ReactNode;
     closeTooltip?: string;
+    finishText?: React.ReactNode;
 }
 export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => JSX.Element;
 export declare const OnePageWizardSummary: <ENTITY extends unknown>() => JSX.Element;

package/src/View/Wizard/OnePageWizards.d.ts

@@ -34,5 +34,6 @@ export interface OnePageWizardProps<ENTITY> {
     titleContainerStyle?: CSSProperties;
     closeText?: React.ReactNode;
     closeTooltip?: string;
+    finishText?: React.ReactNode;
 }
 export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => JSX.Element;

package/src/View/Wizard/OnePageWizards.js

@@ -30,7 +30,7 @@ function useOnePageWizardContext() {
 }
 exports.useOnePageWizardContext = useOnePageWizardContext;
 const OnePageWizard = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     let defaultCurrentIndex = 0;
     if (props.defaultCurrentSectionName) {
         const candidate = props.sections.findIndex((section) => section !== '-' && (section === null || section === void 0 ? void 0 : section.title) === props.defaultCurrentSectionName);
@@ -188,6 +188,6 @@ const OnePageWizard = (props) => {
                                 color: 'var(--ab-color-error)',
                                 textAlign: 'end',
                             } }, firstErrorMessage),
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
+                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, (_c = props.finishText) !== null && _c !== void 0 ? _c : 'Finish')))))));
 };
 exports.OnePageWizard = OnePageWizard;

package/src/agGrid/agGridHelper.js

@@ -46,6 +46,7 @@ const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const BadgeRenderer_1 = require("./BadgeRenderer");
 const CheckboxRenderer_1 = require("./CheckboxRenderer");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
+const DataImportModule_1 = require("../Strategy/DataImportModule");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -85,6 +86,7 @@ class agGridHelper {
         modules.set(ModuleConstants.CellSummaryModuleId, new CellSummaryModule_1.CellSummaryModule(api));
         modules.set(ModuleConstants.CustomSortModuleId, new CustomSortModule_1.CustomSortModule(api));
         modules.set(ModuleConstants.DataChangeHistoryModuleId, new DataChangeHistoryModule_1.DataChangeHistoryModule(api));
+        modules.set(ModuleConstants.DataImportModuleId, new DataImportModule_1.DataImportModule(api));
         modules.set(ModuleConstants.DataSetModuleId, new DataSetModule_1.DataSetModule(api));
         modules.set(ModuleConstants.ExportModuleId, new ExportModule_1.ExportModule(api));
         modules.set(ModuleConstants.FilterModuleId, new FilterModule_1.FilterModule(api));