@adaptabletools/adaptable-cjs 17.0.0-canary.1

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AdaptableColumn, DataImportValidationError } from '../../../types';
+export interface ValidationErrorsMap {
+    [key: string]: DataImportValidationError[] | null;
+}
+export type ColumnsMap = {
+    field: string;
+    abColumn?: AdaptableColumn;
+    include?: boolean;
+};
+export declare const DataImportWizard: (props: {
+    onClose: () => void;
+}) => JSX.Element;

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

@@ -0,0 +1,285 @@
+"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 ColumnsSection_1 = require("./sections/ColumnsSection");
+const UploadSection_1 = require("./sections/UploadSection");
+const ValidationSection_1 = require("./sections/ValidationSection");
+const DataImportWizard = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    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('');
+    // This needs to be called only when:
+    // - columnsMap changes
+    // - new data is loaded
+    const [importType, setImportType] = React.useState('file');
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const hasDynamicallyAddedPrimaryKey = typeof dataImportOptions._getPrimaryKeyValue === 'function';
+    const getPrimaryKeyValue = (rowData) => {
+        if (hasDynamicallyAddedPrimaryKey) {
+            return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
+        }
+        return rowData[primaryKey];
+    };
+    const preprocessRowData = (rowData) => {
+        if (typeof (dataImportOptions === null || dataImportOptions === void 0 ? void 0 : dataImportOptions._preprocessRowData) === 'function') {
+            return dataImportOptions._preprocessRowData(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
+        }
+        // by default just trim the keys
+        let processedRowData = {};
+        if (rowData) {
+            processedRowData = Object.keys(rowData).reduce((acc, key) => {
+                acc[key.trim()] = rowData[key];
+                return acc;
+            }, processedRowData);
+        }
+        return processedRowData;
+    };
+    // ---- COLUMNS ----
+    const [columnsMap, setColumnsMap] = React.useState(null);
+    const mappedRowDataToColumns = React.useMemo(() => {
+        return (rowData !== null && rowData !== void 0 ? rowData : []).map((row) => {
+            // pick only included columns, and need to map to abColumn.field
+            return columnsMap === null || columnsMap === void 0 ? void 0 : columnsMap.reduce((acc, colMap) => {
+                if (colMap.include && colMap.abColumn && colMap.abColumn.field) {
+                    acc[colMap.abColumn.field] = row[colMap.field];
+                }
+                return acc;
+            }, {});
+        });
+    }, [rowData, columnsMap]);
+    const columnsErrors = React.useMemo(() => {
+        return columnsMap
+            ? columnsMap.reduce((acc, colMap) => {
+                if (colMap.include && !colMap.abColumn) {
+                    acc[colMap.field] = `Field ${colMap.field} does not have a coresponding column.`;
+                }
+                return acc;
+            }, {})
+            : null;
+    }, [columnsMap]);
+    const handleNewRowData = React.useCallback((data) => {
+        if (Array.isArray(data)) {
+            const processedData = data.map((rowData) => preprocessRowData(rowData));
+            setRowData(processedData);
+            const fields = new Set();
+            processedData.forEach((row) => {
+                Object.keys(row).forEach((field) => {
+                    fields.add(field);
+                });
+            });
+            const allAbColumns = adaptable.api.columnApi.getColumns();
+            const columnsMap = Array.from(fields).map((field) => {
+                const abColumn = allAbColumns.find((c) => {
+                    // exact field match
+                    if (c.field === field) {
+                        return true;
+                    }
+                    // based on friendly name
+                    const friendlyName = c.friendlyName;
+                    if (typeof friendlyName !== 'string') {
+                        return false;
+                    }
+                    // exact match
+                    if (friendlyName === field) {
+                        return true;
+                    }
+                    // match without case
+                    if (friendlyName.toLowerCase() === field.toLowerCase()) {
+                        return true;
+                    }
+                    // match without spaces and case, and special characters: ' ', '-', '_'
+                    if (friendlyName.replace(/\s|-|_/g, '').toLowerCase() === field.toLowerCase()) {
+                        return true;
+                    }
+                    return false;
+                });
+                return { field, abColumn, include: true };
+            });
+            setColumnsMap(columnsMap);
+        }
+        else {
+            setRowData(null);
+            setColumnsMap(null);
+        }
+    }, []);
+    const handleRowDataChange = React.useCallback((data) => {
+        if (Array.isArray(data)) {
+            setRowData(data);
+        }
+        else {
+            setRowData(null);
+        }
+    }, []);
+    const handleChangeImportType = React.useCallback((importType) => {
+        setImportType(importType);
+        // clear data
+        handleNewRowData(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);
+            handleNewRowData(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)) {
+                    handleNewRowData(textRawData);
+                    setTextError('');
+                }
+                else {
+                    throw 'Error parsing text';
+                }
+            }
+            catch (_b) {
+                handleNewRowData(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)));
+            const primaryKeyValue = getPrimaryKeyValue(rowData);
+            if (error && primaryKeyValue && error.length) {
+                acc[primaryKeyValue] = error;
+            }
+            return acc;
+        }, {});
+    }, [rowData])) !== null && _a !== void 0 ? _a : {};
+    const [skipInvalidRows, setSkipInvalidRows] = React.useState(false);
+    const handleFinish = () => {
+        const validData = mappedRowDataToColumns.filter((row) => {
+            const rowErrors = errors[getPrimaryKeyValue(row)];
+            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: 'Columns',
+                isValid: () => {
+                    if (columnsErrors && Object.keys(columnsErrors).length > 0) {
+                        return 'Some fields do not have a corresponding column.';
+                    }
+                    if (!hasDynamicallyAddedPrimaryKey &&
+                        !(columnsMap === null || columnsMap === void 0 ? void 0 : columnsMap.some((map) => { var _a; return ((_a = map === null || map === void 0 ? void 0 : map.abColumn) === null || _a === void 0 ? void 0 : _a.field) === primaryKey; }))) {
+                        return 'You need to select a column for the primary key.';
+                    }
+                    return true;
+                },
+                render: () => {
+                    return (React.createElement(ColumnsSection_1.ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
+                            setColumnsMap(columnsMap);
+                        } }));
+                },
+            },
+            {
+                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, columnsMap: columnsMap, onDataChange: handleRowDataChange, 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/ColumnsSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ColumnsMap } from '../DataImportWizard';
+interface ColumnsSectionProps {
+    columnsMap: ColumnsMap[] | null;
+    onColumnsChange: (columns: ColumnsMap[]) => void;
+}
+export declare const ColumnsSection: React.FunctionComponent<ColumnsSectionProps>;
+export {};

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

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSection = 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 DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const icons_1 = require("../../../../components/icons");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const Tabs_1 = require("../../../../components/Tabs");
+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 ColumnsSection = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const primaryKey = api.optionsApi.getPrimaryKey();
+    const allColumns = React.useMemo(() => {
+        return api.columnApi
+            .getColumns()
+            .filter((col) => col.field)
+            .map((column) => ({
+            label: column.friendlyName,
+            value: column,
+        }));
+    }, []);
+    const handleColumnMapChange = (newColMap) => {
+        var _a;
+        props.onColumnsChange((_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.map((cm) => {
+            if (cm.field === newColMap.field) {
+                return Object.assign(Object.assign({}, cm), newColMap);
+            }
+            return cm;
+        }));
+    };
+    const columns = React.useMemo(() => {
+        return {
+            include: {
+                field: 'include',
+                header: 'Included',
+                maxWidth: 110,
+                align: 'center',
+                render: (params) => {
+                    var _a, _b;
+                    return (React.createElement(CheckBox_1.CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
+                            handleColumnMapChange(Object.assign(Object.assign({}, params.data), { include: checked }));
+                        }, checked: Boolean(params.data.include) }));
+                },
+            },
+            field: {
+                field: 'field',
+                header: 'Data Field',
+            },
+            abColumn: {
+                header: 'AdapTable Column',
+                render: (params) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    // filter out used columns
+                    const availableColumns = allColumns
+                        .filter((c) => { var _a; return !((_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.find((cm) => cm.abColumn === c.value)); })
+                        .map((col) => {
+                        return Object.assign(Object.assign({}, col), { onClick: () => {
+                                handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: col.value, include: true }));
+                            } });
+                    });
+                    return (React.createElement(DropdownButton_1.default, { showClearButton: true, onClear: () => {
+                            handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: null, include: false }));
+                        }, width: "100%", columns: ['label'], items: availableColumns }, (_f = (_c = (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.friendlyName) !== null && _c !== void 0 ? _c : (_e = (_d = params.data) === null || _d === void 0 ? void 0 : _d.abColumn) === null || _e === void 0 ? void 0 : _e.columnId) !== null && _f !== void 0 ? _f : 'Select Column'));
+                },
+            },
+            valid: {
+                header: 'Valid',
+                maxWidth: 100,
+                minWidth: 90,
+                align: 'center',
+                render: (row) => {
+                    if (!row.data.abColumn) {
+                        return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
+                    }
+                    const successColor = UIHelper_1.default.getColorByMessageType('Success');
+                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                },
+            },
+        };
+    }, [props.columnsMap]);
+    if (!props.columnsMap) {
+        return (React.createElement(rebass_1.Box, { p: 2 },
+            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")));
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
+                    React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+                            valid: 'end',
+                            type: 'end',
+                        }, columnTypes: {
+                            default: {
+                                minWidth: 100,
+                                defaultFlex: 1,
+                            },
+                        }, domProps: tableDOMProps, columns: columns }))))));
+};
+exports.ColumnsSection = ColumnsSection;
+exports.ColumnsSection.displayName = 'ColumnsSection';

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

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

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

@@ -0,0 +1,158 @@
+"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 ObjectFactory_1 = require("../../../../Utilities/ObjectFactory");
+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)();
+    const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
+    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 columns = React.useMemo(() => {
+        var _a;
+        const mappedAdaptableColumns = (_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.filter((map) => map.include && map.abColumn);
+        const mapDataType = (dataType) => {
+            switch (dataType) {
+                case 'Boolean':
+                    return 'boolean';
+                case 'Date':
+                    return 'date';
+                case 'String':
+                    return 'number';
+            }
+            return dataType;
+        };
+        const getPrimaryKeyValue = (rowData) => {
+            if (typeof dataImportOptions._getPrimaryKeyValue === 'function') {
+                return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
+            }
+            return rowData[primaryKey];
+        };
+        const infiniteColumns = mappedAdaptableColumns.reduce((acc, colMap) => {
+            var _a;
+            const isPrimaryKey = ((_a = colMap === null || colMap === void 0 ? void 0 : colMap.abColumn) === null || _a === void 0 ? void 0 : _a.columnId) === primaryKey;
+            let editable = !isPrimaryKey;
+            if (props.editable !== undefined && !isPrimaryKey) {
+                editable = props.editable;
+            }
+            const abColumn = colMap.abColumn;
+            acc[colMap.field] = {
+                field: colMap.field,
+                header: adaptable.api.columnApi.getFriendlyNameForColumnId(colMap.abColumn.columnId),
+                dataType: mapDataType(abColumn.dataType),
+                defaultEditable: editable,
+                valueGetter: (params) => {
+                    if (abColumn.dataType === 'Boolean') {
+                        return params.data[colMap.field] ? 'True' : 'False';
+                    }
+                    else {
+                        return params.data[colMap.field];
+                    }
+                },
+            };
+            return acc;
+        }, {});
+        infiniteColumns['valid'] = {
+            header: 'Valid',
+            maxWidth: 100,
+            minWidth: 90,
+            align: 'center',
+            renderValue: (params) => {
+                const cellErrors = getRowErrors(props.errors, getPrimaryKeyValue(params.data));
+                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(getPrimaryKeyValue(params.data));
+                    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;