@adaptabletools/adaptable 16.1.1-canary.1 → 16.2.0-canary.0

package/src/View/Dashboard/Dashboard.js

@@ -2,32 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dashboard = void 0;
 const tslib_1 = require("tslib");
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const rebass_1 = require("rebass");
+const Dashboard_1 = require("../../components/Dashboard");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
-const rebass_1 = require("rebass");
-const Dashboard_1 = require("../../components/Dashboard");
-const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
 const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFormControlTextClear");
 const useQuickSearchDebounced_1 = require("../QuickSearch/useQuickSearchDebounced");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
-const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
-const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const CustomDashboardButton_1 = require("./CustomDashboardButton");
-const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
-const AdaptableButton_1 = require("../Components/AdaptableButton");
+const CustomToolbar_1 = require("./CustomToolbar");
+const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
+const PinnedDashboard_1 = require("./PinnedDashboard");
+const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const DashboardComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const dashboardAccessLevel = props.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
     const renderTab = (tab) => {
-        // JW: dont understand why we need this line but we do...
         const visibleToolbarNames = tab.Toolbars.filter((vt) => vt);
         const customToolbars = props.api.dashboardApi.getCustomToolbars();
         let visibleDashboardElements = visibleToolbarNames.map((visibleToolbarName) => {
@@ -35,28 +36,20 @@ const DashboardComponent = (props) => {
             if (customToolbar) {
                 if (dashboardAccessLevel != 'Hidden') {
                     return (React.createElement(rebass_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
-                        React.createElement(CustomToolbarWrapper_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
+                        React.createElement(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
                 }
             }
             else {
-                let moduleToolbarName = visibleToolbarName;
+                const moduleToolbarName = visibleToolbarName;
                 if (props.api.internalApi.getModuleService().isModuleAvailable(moduleToolbarName)) {
-                    let accessLevel = props.api.internalApi
-                        .getEntitlementService()
-                        .getEntitlementAccessLevelForModule(moduleToolbarName);
                     let moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(moduleToolbarName);
                     if (moduleToolbarView) {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        let moduleToolbarElement = React.createElement(moduleToolbarView, {
-                            viewType: 'Toolbar',
-                            api: props.api,
-                            accessLevel,
-                            moduleInfo,
-                        });
                         return (React.createElement(rebass_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
-                            React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel }, moduleToolbarElement)));
+                            React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
+                                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
                     }
                     else {
                         props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
@@ -106,7 +99,10 @@ const DashboardComponent = (props) => {
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
         props.api.internalApi.getModuleService().getModuleById(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
-    return props.DashboardState.IsHidden ? (React.createElement("div", null)) : (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
+    if (props.DashboardState.IsHidden) {
+        return React.createElement("div", null);
+    }
+    return (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard_1.PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
             props.onSetActiveTabIndex(ActiveTabIndex);
         }, collapsed: props.DashboardState.IsCollapsed, onCollapsedChange: (IsCollapsed) => {
             props.onSetIsCollapsed(IsCollapsed);

package/src/View/Dashboard/DashboardPopup.d.ts

@@ -17,7 +17,8 @@ interface DashboardPopupComponentProps extends ModuleViewPopupProps<DashboardPop
 }
 export declare enum DashboardConfigView {
     Toolbars = "Toolbars",
-    Buttons = "Buttons"
+    Buttons = "Buttons",
+    PinnedToolbars = "PinnedToolbars"
 }
 export interface DashboardPopupState {
     DashboardConfigView: DashboardConfigView;

package/src/View/Dashboard/DashboardPopup.js

@@ -13,10 +13,12 @@ const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Das
 const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
 const CheckBox_1 = require("../../components/CheckBox");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
 var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
     DashboardConfigView["Buttons"] = "Buttons";
+    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
 })(DashboardConfigView = exports.DashboardConfigView || (exports.DashboardConfigView = {}));
 class DashboardPopupComponent extends React.Component {
     constructor(props) {
@@ -26,8 +28,8 @@ class DashboardPopupComponent extends React.Component {
         };
     }
     render() {
-        const availableToolbars = Types_1.ALL_TOOLBARS;
         const moduleService = this.props.api.internalApi.getModuleService();
+        const availableToolbars = Types_1.ALL_TOOLBARS;
         const systemToolbars = availableToolbars
             .filter((at) => this.props.api.internalApi.getModuleService().isModuleAvailable(at))
             .map((at) => ({
@@ -80,12 +82,14 @@ class DashboardPopupComponent extends React.Component {
                 React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
                     React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
                         React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars")),
                     React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
                             ? 'toolbars'
                             : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
                         this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
+                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
+                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/Dashboard/DashboardToolbarFactory.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableModule } from '../../types';
+interface DashboardToolbarFactoryProps {
+    toolbarName: AdaptableModule | string;
+}
+export declare const DashboardToolbarFactory: React.FunctionComponent<DashboardToolbarFactoryProps>;
+export {};

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardToolbarFactory = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Types_1 = require("../../PredefinedConfig/Common/Types");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
+const CustomToolbar_1 = require("./CustomToolbar");
+const SystemDashboardToolbarFactory = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const moduleInfo = adaptable.api.internalApi
+        .getModuleService()
+        .getModuleInfoByModule(props.toolbarName);
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(props.toolbarName);
+    const moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(props.toolbarName);
+    const moduleToolbarElement = React.createElement(moduleToolbarView, {
+        viewType: 'Toolbar',
+        api: adaptable.api,
+        accessLevel,
+        moduleInfo,
+    });
+    return moduleToolbarElement;
+};
+const CustomDashboardToolbarFactory = (props) => {
+    const revision = (0, react_redux_1.useSelector)((state) => state.System.DashboardRevision);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const customToolbars = adaptable.api.dashboardApi.getCustomToolbars();
+    const customToolbar = customToolbars && customToolbars.find((ct) => ct.name == props.toolbarName);
+    if (customToolbar) {
+        return React.createElement(CustomToolbar_1.CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
+    }
+    return React.createElement(React.Fragment, null);
+};
+const DashboardToolbarFactory = (props) => {
+    if (Types_1.ALL_MODULES.includes(props.toolbarName)) {
+        return React.createElement(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
+    }
+    else {
+        return React.createElement(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
+    }
+};
+exports.DashboardToolbarFactory = DashboardToolbarFactory;

package/src/View/Dashboard/PinnedDashboard.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface PinnedDashboardProps {
+}
+export declare const PinnedDashboard: React.FunctionComponent<PinnedDashboardProps>;
+export {};

package/src/View/Dashboard/PinnedDashboard.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinnedDashboard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
+const PinnedDashboard = (props) => {
+    const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
+    const pinnedToolbars = dashboardState.PinnedToolbars;
+    if (!pinnedToolbars || pinnedToolbars.length == 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Dashboard__pinned-content" }, pinnedToolbars.map((toolbar, index) => {
+        return (React.createElement(rebass_1.Box, { mr: 2, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+            React.createElement(rebass_1.Box, { className: "ab-Dashboard__toolbar-content" },
+                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { key: index, toolbarName: toolbar }))));
+    })));
+};
+exports.PinnedDashboard = PinnedDashboard;

package/src/View/Dashboard/PinnedToolbarsSelector.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface PinnedToolbarsSelectorProps {
+}
+export declare const PinnedToolbarsSelector: React.FunctionComponent<PinnedToolbarsSelectorProps>;
+export {};

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinnedToolbarsSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ModuleManager_1 = require("../../components/DragAndDropContext/ModuleManager");
+const Types_1 = require("../../PredefinedConfig/Common/Types");
+const DashboardRedux_1 = require("../../Redux/ActionsReducers/DashboardRedux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const PinnedToolbarsSelector = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const dashboardAccessLevel = api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule('Dashboard');
+    const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
+    const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const pinnedToolbars = dashboardState.PinnedToolbars;
+    const moduleService = api.internalApi.getModuleService();
+    const toolbars = React.useMemo(() => {
+        const availableToolbars = Types_1.ALL_TOOLBARS;
+        const systemToolbars = availableToolbars
+            .filter((at) => api.internalApi.getModuleService().isModuleAvailable(at))
+            .map((at) => ({
+            Id: at,
+            Title: moduleService.getModuleInfoByModule(at).FriendlyName,
+        }));
+        const customToolbars = api.dashboardApi.getCustomToolbars().map((ct) => ({
+            Id: ct.name,
+            Title: ct.title ? ct.title : ct.name,
+        }));
+        return [...systemToolbars, ...customToolbars];
+    }, []);
+    const tabs = React.useMemo(() => {
+        return [
+            {
+                Name: 'Pinned Toolbars',
+                Items: pinnedToolbars !== null && pinnedToolbars !== void 0 ? pinnedToolbars : [],
+            },
+        ];
+    }, [pinnedToolbars]);
+    return (React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+            createTab: false,
+            dragAndDropTab: false,
+            deleteTab: false,
+            editTabName: false,
+        }, onTabsChange: (tabs) => {
+            dispatch((0, DashboardRedux_1.DashboardSetPinnedToolbars)(tabs[0].Items));
+        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbar Panels", dragItemText: "Drag into the Panel below" }));
+};
+exports.PinnedToolbarsSelector = PinnedToolbarsSelector;

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

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

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

@@ -9,6 +9,7 @@ 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) => {
@@ -19,6 +20,9 @@ const DataImportWizard = (props) => {
     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 getPrimaryKeyValue = (rowData) => {
@@ -27,6 +31,50 @@ const DataImportWizard = (props) => {
         }
         return rowData[primaryKey];
     };
+    // ---- 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)) {
+            setRowData(data);
+            const fields = new Set();
+            data.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) => c.field === field);
+                return { field, abColumn, include: true };
+            });
+            setColumnsMap(columnsMap);
+        }
+        else {
+            setRowData(null);
+            setColumnsMap(null);
+        }
+    }, []);
     const handleRowDataChange = React.useCallback((data) => {
         if (Array.isArray(data)) {
             setRowData(data);
@@ -38,7 +86,7 @@ const DataImportWizard = (props) => {
     const handleChangeImportType = React.useCallback((importType) => {
         setImportType(importType);
         // clear data
-        handleRowDataChange(null);
+        handleNewRowData(null);
         setFile(null);
         setText('');
     }, []);
@@ -63,7 +111,7 @@ const DataImportWizard = (props) => {
         try {
             const data = await handler.handleFile(file);
             setFile(file);
-            handleRowDataChange(data);
+            handleNewRowData(data);
             return data;
         }
         catch (_c) {
@@ -101,7 +149,7 @@ const DataImportWizard = (props) => {
             try {
                 textRawData = await textHandler(text);
                 if (Array.isArray(textRawData)) {
-                    handleRowDataChange(textRawData);
+                    handleNewRowData(textRawData);
                     setTextError('');
                 }
                 else {
@@ -109,7 +157,7 @@ const DataImportWizard = (props) => {
                 }
             }
             catch (_b) {
-                handleRowDataChange(null);
+                handleNewRowData(null);
                 setTextError('Error parsing text');
             }
         }
@@ -134,11 +182,8 @@ const DataImportWizard = (props) => {
         }, {});
     }, [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 validData = mappedRowDataToColumns.filter((row) => {
             const rowErrors = errors[getPrimaryKeyValue(row)];
             return !rowErrors || rowErrors.length === 0;
         });
@@ -164,6 +209,23 @@ const DataImportWizard = (props) => {
                         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 (!(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',
@@ -175,7 +237,7 @@ const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, onDataChange: handleValidationDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
                 },
             },
         ] }));

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ValidationErrorsMap } from '../DataImportWizard';
+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 {};