@adaptabletools/adaptable 12.0.0-canary.1 → 12.0.0-canary.4

package/src/Utilities/Services/RowEditService.js

@@ -6,30 +6,29 @@ class RowEditService {
         this.adaptableApi = adaptableApi;
         this.adaptableInstance = this.adaptableApi.internalApi.getAdaptableInstance();
         this.rowEditFormOptions =
-            this.adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.editOptions.rowFormOptions;
-        if (this.adaptableInstance.adaptableOptions.userInterfaceOptions.actionOptions
-            .autoHandleActionRowButtons) {
-            this.adaptableInstance.api.eventApi.on('RowFormSubmitted', (eventInfo) => this.autoHandleActionRowButtons(eventInfo));
+            this.adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionOptions.actionRowFormOptions;
+        if (this.adaptableInstance.adaptableOptions.actionOptions.autoHandleActionRowButtons) {
+            this.adaptableInstance.api.eventApi.on('ActionRowSubmitted', (eventInfo) => this.autoHandleActionRowButtons(eventInfo));
         }
     }
     buildRowEditForm(rowNode) {
-        return this.buildRowForm('rowEdited', rowNode);
+        return this.buildActionRow('rowEdited', rowNode);
     }
     buildRowCreateForm(clonedRowNode) {
-        return this.buildRowForm('rowCreated', clonedRowNode);
+        return this.buildActionRow('rowCreated', clonedRowNode);
     }
-    buildRowForm(type, rowNode) {
-        const formFields = this.buildRowFormFields(type, rowNode);
-        const formButtons = this.buildRowFormButtons(type, rowNode);
+    buildActionRow(type, rowNode) {
+        const formFields = this.buildActionRowFields(type, rowNode);
+        const formButtons = this.buidActionRowButtons(type, rowNode);
         const formTitle = this.getFormTitle(type, rowNode);
         const formDescription = this.getFormDescription(type, rowNode);
-        const rowForm = {
+        const actionRowForm = {
             title: formTitle,
             description: formDescription,
             fields: formFields,
             buttons: formButtons,
         };
-        return rowForm;
+        return actionRowForm;
     }
     getFormTitle(type, rowNode) {
         if (this.rowEditFormOptions.formTitle == undefined) {
@@ -51,7 +50,7 @@ class RowEditService {
             type: type,
         };
     }
-    buildRowFormFields(type, rowNode) {
+    buildActionRowFields(type, rowNode) {
         const relevantColumns = this.adaptableApi.columnApi
             .getColumns()
             .filter((column) => {
@@ -61,7 +60,7 @@ class RowEditService {
             .filter((column) => !this.adaptableApi.columnApi.isActionRowButtonColumn(column.columnId));
         return relevantColumns.map((column) => this.buildFormField(type, column, rowNode));
     }
-    buildRowFormButtons(type, rowNode) {
+    buidActionRowButtons(type, rowNode) {
         // 1. check if there are custom user provided buttons
         if (Array.isArray(this.rowEditFormOptions.formButtons)) {
             return this.rowEditFormOptions.formButtons;
@@ -95,8 +94,8 @@ class RowEditService {
                         rowNode: rowNode,
                         adaptableApi: context.adaptableApi,
                     };
-                this.adaptableApi.eventApi.emit('RowFormSubmitted', eventInfo);
-                (_b = (_a = this.adaptableInstance.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                this.adaptableApi.eventApi.emit('ActionRowSubmitted', eventInfo);
+                (_b = (_a = this.adaptableInstance.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
             },
         };
         return [cancelButton, saveButton];
@@ -168,22 +167,22 @@ class RowEditService {
             label: value,
         }));
     }
-    autoHandleActionRowButtons(rowEditedFormInfo) {
-        const { adaptableApi } = rowEditedFormInfo;
-        if (rowEditedFormInfo.type === 'rowEdited') {
-            const { rowNode, formData } = rowEditedFormInfo;
+    autoHandleActionRowButtons(actionRowSubmittedInfo) {
+        const { adaptableApi } = actionRowSubmittedInfo;
+        if (actionRowSubmittedInfo.type === 'rowEdited') {
+            const { rowNode, formData } = actionRowSubmittedInfo;
             const newRowData = Object.assign(Object.assign({}, rowNode.data), formData);
             adaptableApi.gridApi.updateGridData([newRowData]);
         }
-        if (rowEditedFormInfo.type === 'rowDeleted') {
-            const { rowNode } = rowEditedFormInfo;
+        if (actionRowSubmittedInfo.type === 'rowDeleted') {
+            const { rowNode } = actionRowSubmittedInfo;
             const deletedRowData = rowNode.data;
             adaptableApi.gridApi.deleteGridData([deletedRowData]);
         }
-        if (rowEditedFormInfo.type === 'rowCreated') {
-            const { formData } = rowEditedFormInfo;
-            const setPrimaryKeyValueFunction = adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.userInterfaceOptions
-                .actionOptions.setPrimaryKeyValue;
+        if (actionRowSubmittedInfo.type === 'rowCreated') {
+            const { formData } = actionRowSubmittedInfo;
+            const setPrimaryKeyValueFunction = adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionOptions
+                .setPrimaryKeyValue;
             const newRowData = typeof setPrimaryKeyValueFunction === 'function'
                 ? setPrimaryKeyValueFunction({
                     rowData: formData,

package/src/Utilities/isAdaptableObject.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableObject = void 0;
 // pretty primitive type guard for AdaptableObject, but currently there is no better/safer way
-exports.isAdaptableObject = (object) => {
+const isAdaptableObject = (object) => {
     return object != undefined && typeof object['Uuid'] === 'string';
 };
+exports.isAdaptableObject = isAdaptableObject;

package/src/Utilities/isMacLike.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isMacLike = void 0;
-exports.isMacLike = () => {
+const isMacLike = () => {
     const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
     return /(Mac|iPhone|iPod|iPad)/i.test(globalObject.navigator.platform);
 };
+exports.isMacLike = isMacLike;

package/src/Utilities/license/decode.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.decode=exports.fieldsToLicenseDetails=void 0;const e=require("./hashing"),t=()=>new Error("Invalid License");exports.fieldsToLicenseDetails=e=>{var r;const o=e.reduce(((e,t)=>(e.set(t.name,t.value),e)),new Map),s={count:o.get("DeveloperCount")?Number(o.get("DeveloperCount")):0,start:new Date(o.get("StartDate")),end:new Date(o.get("EndDate")),owner:o.get("Owner"),timestamp:o.get("TS")?Number(o.get("TS")):0,trial:"true"===o.get("Trial"),ref:null!==(r=o.get("Ref"))&&void 0!==r?r:""};if(!(s.start&&s.end&&s.owner&&"boolean"==typeof s.trial&&s.ref))throw t();return s},exports.decode=r=>{let o="",s=r.split("|").map((e=>{let[t,r]=e.split("=");return"C"===t&&(o=r),{name:t,value:r}}));if(!o)throw t();const n=o.split(",").reverse(),a=n.pop();n.forEach(((r,o)=>{const n=s[o];if(e.compute_string(n.value)!==r)throw t()}));const i=[...s];i.pop();const l=i.map((e=>`${e.name}=${e.value}`)).join("|");if(e.compute_string(l)!==a)throw t();return s=s.map((e=>Object.assign(Object.assign({},e),{value:decodeURI(e.value)}))),exports.fieldsToLicenseDetails(s)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.decode=exports.fieldsToLicenseDetails=void 0;const e=require("./hashing"),t=()=>new Error("Invalid License"),r=e=>{var r;const o=e.reduce(((e,t)=>(e.set(t.name,t.value),e)),new Map),s={count:o.get("DeveloperCount")?Number(o.get("DeveloperCount")):0,start:new Date(o.get("StartDate")),end:new Date(o.get("EndDate")),owner:o.get("Owner"),timestamp:o.get("TS")?Number(o.get("TS")):0,trial:"true"===o.get("Trial"),ref:null!==(r=o.get("Ref"))&&void 0!==r?r:""};if(!(s.start&&s.end&&s.owner&&"boolean"==typeof s.trial&&s.ref))throw t();return s};exports.fieldsToLicenseDetails=r;const o=r=>{let o="",s=r.split("|").map((e=>{let[t,r]=e.split("=");return"C"===t&&(o=r),{name:t,value:r}}));if(!o)throw t();const n=o.split(",").reverse(),a=n.pop();n.forEach(((r,o)=>{const n=s[o];if(e.compute_string(n.value)!==r)throw t()}));const i=[...s];i.pop();const l=i.map((e=>`${e.name}=${e.value}`)).join("|");if(e.compute_string(l)!==a)throw t();return s=s.map((e=>Object.assign(Object.assign({},e),{value:decodeURI(e.value)}))),exports.fieldsToLicenseDetails(s)};exports.decode=o;

package/src/Utilities/reorder.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reorder = void 0;
-exports.reorder = (list, startIndex, endIndex) => {
+const reorder = (list, startIndex, endIndex) => {
     const result = [...list];
     if (startIndex > list.length - 1) {
         // not much that we can do if the dragged item is out of bounds...
@@ -14,3 +14,4 @@ exports.reorder = (list, startIndex, endIndex) => {
     result.splice(endIndex, 0, removed);
     return result;
 };
+exports.reorder = reorder;

package/src/Utilities/runIfNotResolvedIn.js

@@ -8,7 +8,7 @@ exports.runIfNotResolvedIn = void 0;
  * @param callback Called if promise does not resolve in the time defined by 'delay'
  * @param delay Time after which if the promise was not resolved the callback (fn) is called.
  */
-exports.runIfNotResolvedIn = async (promise, callback, delay = 100) => {
+const runIfNotResolvedIn = async (promise, callback, delay = 100) => {
     let isFulfilled = false;
     promise === null || promise === void 0 ? void 0 : promise.then(() => {
         isFulfilled = true;
@@ -21,3 +21,4 @@ exports.runIfNotResolvedIn = async (promise, callback, delay = 100) => {
     })();
     return promise;
 };
+exports.runIfNotResolvedIn = runIfNotResolvedIn;

package/src/Utilities/waitForCondition.d.ts

@@ -1 +1 @@
-export declare const waitForCondition: (isReady: () => boolean, timeout?: number) => Promise<any>;
+export declare const waitForCondition: (isReady: () => boolean, timeout?: number) => Promise<void>;

package/src/Utilities/waitForCondition.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForCondition = void 0;
-exports.waitForCondition = (isReady, timeout = 5000) => {
+const waitForCondition = (isReady, timeout = 5000) => {
     const startTime = Date.now();
     const ready = isReady();
     if (ready) {
@@ -26,3 +26,4 @@ exports.waitForCondition = (isReady, timeout = 5000) => {
         wait(resolve);
     });
 };
+exports.waitForCondition = waitForCondition;

package/src/View/AdaptableContext.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext = React.createContext(null);
 exports.default = AdaptableContext;
-exports.useAdaptable = () => {
+const useAdaptable = () => {
     return React.useContext(AdaptableContext);
 };
+exports.useAdaptable = useAdaptable;

package/src/View/AdaptableView.js

@@ -60,4 +60,5 @@ function mapDispatchToProps(dispatch) {
     };
 }
 let AdaptableWrapper = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(AdaptableView);
-exports.AdaptableApp = ({ Adaptable }) => renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(AdaptableWrapper, { Adaptable: Adaptable }), Adaptable);
+const AdaptableApp = ({ Adaptable }) => renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(AdaptableWrapper, { Adaptable: Adaptable }), Adaptable);
+exports.AdaptableApp = AdaptableApp;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.d.ts

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import { ColDef } from '@ag-grid-community/all-modules';
-interface Column extends Partial<ColDef> {
+export interface NocodeColumn extends Partial<ColDef> {
     field?: string;
     type?: string | string[];
     caption?: string;
 }
-declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, }: {
+declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }: {
     onValidityChange: (valid: boolean) => any;
     handle: React.MutableRefObject<any>;
-    columns: Column[];
+    columns: NocodeColumn[];
+    onChange?: (columns: NocodeColumn[]) => void;
+    onSelectionChange?: (column: any, flag: boolean) => void;
+    selectedColumns?: {
+        [key: string]: boolean;
+    };
 }) => JSX.Element>;
 export default _default;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -37,11 +37,12 @@ const useForceRender = () => {
         setNow(Date.now());
     };
 };
-const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
+const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
     const rerender = useForceRender();
     const columnsRef = react_1.useRef(cols);
     const silentSetColumns = (columns) => {
         columnsRef.current = columns;
+        onChange === null || onChange === void 0 ? void 0 : onChange(columns);
     };
     const setColumns = (columns) => {
         silentSetColumns(columns);
@@ -83,7 +84,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
         setColumns(cols);
     };
     const [primaryKeyField, setPrimaryKeyField] = React.useState(columns[0].field);
-    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = useSelection_1.default(columns, true, null);
+    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = useSelection_1.default(columns, selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : true, null, { onChange: onSelectionChange });
     handle.current = {
         getColumns: () => getColumns().filter((col) => isIncludedColumn(col.field)),
         getPrimaryKey: () => primaryKeyField,

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationForm.js

@@ -9,7 +9,7 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const rebass_1 = require("rebass");
 const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
 const ConfigurationForm = (props) => {
-    var _a;
+    var _a, _b, _c;
     let abOptions = props.adaptableOptions;
     const layoutOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.layoutOptions), abOptions.layoutOptions);
     const generalOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions), abOptions.generalOptions);
@@ -20,6 +20,13 @@ const ConfigurationForm = (props) => {
     // we are 'hard-coding' this to use AG Grid but so does helper so ok for now and we can refactor when Adaptable Grid is ready
     const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
     return (React.createElement(React.Fragment, null,
+        React.createElement(HelpBlock_1.default, null, "Base Options"),
+        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'label', style: { textAlign: 'start' } }, { name: 'children' }] },
+            React.createElement(FormLayout_1.FormRow, { label: "Adaptable ID" },
+                React.createElement(Input_1.default, { value: (_b = (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.adaptableId) !== null && _b !== void 0 ? _b : null, onChange: (event) => {
+                        var _a;
+                        props.onChangeadaptableOptions(Object.assign(Object.assign({}, abOptions), { adaptableId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
+                    }, style: { minWidth: '20rem' } }))),
         React.createElement(HelpBlock_1.default, null, "General Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Show Missing Primary Key Warning" },
@@ -39,7 +46,7 @@ const ConfigurationForm = (props) => {
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: (_c = gridOptions.defaultColDef) === null || _c === void 0 ? void 0 : _c.floatingFilter, onChange: (floatingFilter) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.defaultColDef = {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../types';
+import { OnePageWizardSection } from '../../Wizard/OnePageWizards';
+import { AdaptableFrameworkComponent } from '../../../../types';
+export interface CustomSection<T> {
+    title: OnePageWizardSection<T>['title'];
+    details?: AdaptableFrameworkComponent;
+    isValid?: OnePageWizardSection<T>['isValid'];
+    isVisible?: OnePageWizardSection<T>['isVisible'];
+    render: (
+    /**
+     * Internal state of adaptableOptions.
+     */
+    adaptableOptions: AdaptableOptions, 
+    /**
+     * With this callback adaptableOptions can be changed.
+     */
+    onChange: (newAdaptableOptions: AdaptableOptions) => void, 
+    /**
+     * Set the selected columns.
+     */
+    setSelectedColumns: (selectedColumn: Record<string, boolean>) => void) => React.ReactNode;
+}
+export interface ConfigurationWizardProps {
+    adaptableOptions: AdaptableOptions;
+    onFinish: (adaptableOptions: AdaptableOptions) => void;
+    onCancel: () => void;
+    startSections?: CustomSection<AdaptableOptions>[];
+}
+export declare const ConfigurationWizard: React.FunctionComponent<ConfigurationWizardProps>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const OnePageWizards_1 = require("../../Wizard/OnePageWizards");
+const ConfigurationWizardColumnsStep_1 = require("./ConfigurationWizardColumnsStep");
+const ConfigurationForm_1 = tslib_1.__importDefault(require("./ConfigurationForm"));
+const ConfigurationWizard = (props) => {
+    const [isPrimaryKeySelected, setIsValid] = React.useState(true);
+    const [adaptableOptions, setAdaptableOptions] = react_1.useState(props.adaptableOptions);
+    const [selectedColumns, setSelectedColumns] = react_1.useState(() => {
+        return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
+            acc[col.field] = true;
+            return acc;
+        }, {});
+    });
+    const columnsHandle = React.useRef();
+    const handleFinish = () => {
+        const newAdaptableOptions = Object.assign({}, adaptableOptions);
+        newAdaptableOptions.gridOptions = Object.assign({}, adaptableOptions.gridOptions);
+        newAdaptableOptions.gridOptions.columnDefs = columnsHandle
+            .current.getColumns()
+            .map((column) => {
+            const newColumn = Object.assign(Object.assign({}, column), { headerName: column.caption || StringExtensions_1.default.Humanize(column.field) });
+            delete newColumn.caption;
+            return newColumn;
+        });
+        newAdaptableOptions.primaryKey = columnsHandle.current.getPrimaryKey();
+        setAdaptableOptions(newAdaptableOptions);
+        props.onFinish(newAdaptableOptions);
+    };
+    const handlePrimaryKeyColumnIsNotSelected = React.useCallback((newIsValid) => {
+        setIsValid(newIsValid);
+    }, []);
+    const handleColumnsChange = React.useCallback((columns) => {
+        setAdaptableOptions((adaptableOptions) => (Object.assign(Object.assign({}, adaptableOptions), { gridOptions: Object.assign(Object.assign({}, adaptableOptions.gridOptions), { columnDefs: columns }) })));
+    }, []);
+    const handleColumnSelectionChange = React.useCallback((col, flag) => {
+        setSelectedColumns((selectedColumns) => {
+            const newSelectedColumns = selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : {};
+            newSelectedColumns[col.field] = flag;
+            return newSelectedColumns;
+        });
+    }, []);
+    let sections = [
+        {
+            title: 'Columns',
+            details: 'Configure Adaptable',
+            isValid: () => {
+                if (!isPrimaryKeySelected) {
+                    return 'Primary key column must be included';
+                }
+                return true;
+            },
+            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableOptions: adaptableOptions, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: (newAdaptableOptions) => {
+                    setAdaptableOptions(newAdaptableOptions);
+                }, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
+        },
+        {
+            title: 'Adaptable Options',
+            details: 'Configure Adaptable Options',
+            isValid: () => (adaptableOptions.adaptableId ? true : 'Adaptable ID is required'),
+            render: () => (React.createElement(ConfigurationForm_1.default, { adaptableOptions: adaptableOptions, onChangeadaptableOptions: (abOptions) => {
+                    setAdaptableOptions(abOptions);
+                } })),
+        },
+    ];
+    if (props.startSections) {
+        sections = [
+            ...props.startSections.map((section) => {
+                return {
+                    title: section.title,
+                    isValid: section.isValid,
+                    isVisible: section.isVisible,
+                    render: () => {
+                        return section.render(adaptableOptions, setAdaptableOptions, setSelectedColumns);
+                    },
+                };
+            }),
+            ...sections,
+        ];
+    }
+    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableOptions, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+};
+exports.ConfigurationWizard = ConfigurationWizard;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { NocodeColumn } from './ColumnsList';
+import { AdaptableOptions } from '../../../types';
+export interface ConfigurationWizardColumnsStepProps {
+    adaptableOptions: AdaptableOptions;
+    onChange: (newOptions: AdaptableOptions) => void;
+    columnsHandle: React.MutableRefObject<{
+        getColumns: () => any[];
+        getPrimaryKey: () => string;
+    }>;
+    setPrimaryKeyIsNotSelected: (enabled: boolean) => void;
+    onColumnChange: (columns: NocodeColumn[]) => void;
+    onSelectionChange: (column: any, flag: boolean) => void;
+    selectedColumns: {
+        [key: string]: boolean;
+    };
+}
+export declare const ConfigurationWizardColumnsStep: React.FunctionComponent<ConfigurationWizardColumnsStepProps>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationWizardColumnsStep = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
+const ConfigurationWizardColumnsStep = (props) => {
+    var _a, _b;
+    return (React.createElement(Panel_1.default, { header: '', border: "none", bodyScroll: false, bodyProps: {
+            style: { overflow: 'auto', display: 'flex', flexFlow: 'column' },
+        }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
+        React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
+                props.setPrimaryKeyIsNotSelected(valid);
+            }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs })));
+};
+exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/index.d.ts

@@ -1,9 +1,2 @@
-import * as React from 'react';
-import { AdaptableOptions } from '../../../types';
-interface ConfigurationDialogProps extends React.HTMLProps<HTMLElement> {
-    adaptableOptions: AdaptableOptions;
-    onFinish: (adaptableOptions: AdaptableOptions) => void;
-    onCancel: () => void;
-}
-declare const ConfigurationDialog: (props: ConfigurationDialogProps) => JSX.Element;
-export default ConfigurationDialog;
+import { ConfigurationWizard } from './ConfigurationWizard';
+export default ConfigurationWizard;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/index.js

@@ -1,77 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const react_1 = require("react");
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ConfigurationForm_1 = tslib_1.__importDefault(require("./ConfigurationForm"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const ConfigurationDialog = (props) => {
-    const [abOptions, setABOptions] = react_1.useState(props.adaptableOptions);
-    const [finishEnabled, setFinishEnabled] = react_1.useState(true);
-    const [currentStep, setCurrentStep] = react_1.useState(0);
-    let canFinish = finishEnabled;
-    if (!abOptions.adaptableId) {
-        canFinish = false;
-    }
-    let canNext = canFinish && currentStep === 0;
-    const columnsHandle = React.useRef();
-    const onadaptableIdChange = (event) => {
-        const newABOptions = Object.assign({}, abOptions);
-        newABOptions.adaptableId = event.target.value;
-        setABOptions(newABOptions);
-    };
-    const onFinish = () => {
-        const newABOptions = Object.assign({}, abOptions);
-        newABOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-        newABOptions.gridOptions.columnDefs = columnsHandle.current.getColumns().map((c) => {
-            const col = Object.assign(Object.assign({}, c), { headerName: c.caption || StringExtensions_1.default.Humanize(c.field) });
-            delete col.caption;
-            return col;
-        });
-        newABOptions.primaryKey = columnsHandle.current.getPrimaryKey();
-        setABOptions(newABOptions);
-        props.onFinish(newABOptions);
-    };
-    const onNext = () => {
-        setCurrentStep(1);
-    };
-    const stepOne = (React.createElement(React.Fragment, null,
-        React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", bodyScroll: false, bodyProps: {
-                padding: 0,
-                style: { overflow: 'auto', display: 'flex', flexFlow: 'column' },
-            }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
-            React.createElement(Panel_1.default, { style: { minHeight: 50 }, border: "none" },
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "AdaptableId" },
-                        React.createElement(Input_1.default, { value: abOptions.adaptableId, onChange: onadaptableIdChange, style: { minWidth: '20rem' } })))),
-            React.createElement(ColumnsList_1.default, { handle: columnsHandle, onValidityChange: (valid) => {
-                    setFinishEnabled(valid);
-                }, columns: abOptions.gridOptions.columnDefs }))));
-    const stepTwo = (React.createElement(React.Fragment, null,
-        React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", style: { flex: 1, overflow: 'auto' } },
-            React.createElement(ConfigurationForm_1.default, { adaptableOptions: abOptions, onChangeadaptableOptions: (abOptions) => {
-                    setABOptions(abOptions);
-                } }))));
-    return (React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", style: {
-                height: '100%',
-                width: '90vw',
-                maxWidth: 1000,
-                maxHeight: '90vh',
-            } },
-            currentStep === 0 ? stepOne : stepTwo,
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, backgroundColor: "primary", alignItems: "center" },
-                React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", tooltip: "Cancel configuration ", onClick: props.onCancel }, "Cancel"),
-                React.createElement("div", { style: { flex: 1 } }),
-                React.createElement(SimpleButton_1.default, { variant: "outlined", onClick: () => setCurrentStep(0), disabled: currentStep === 0, marginRight: 2, tone: "neutral" }, "Back"),
-                React.createElement(SimpleButton_1.default, { variant: "outlined", onClick: onNext, disabled: !canNext, marginRight: 2, tone: "neutral" }, "Next"),
-                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", icon: 'check', onClick: onFinish, disabled: !canFinish }, "Finish")))));
-};
-exports.default = ConfigurationDialog;
+const ConfigurationWizard_1 = require("./ConfigurationWizard");
+exports.default = ConfigurationWizard_1.ConfigurationWizard;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/useSelection.d.ts

@@ -1,6 +1,8 @@
 declare const useSelection: (columns: {
     [key: string]: any;
-}[], defaultValue: boolean, fieldName: string | null, changeListeners?: {
+}[], defaultValue: boolean | {
+    [key: string]: boolean;
+}, fieldName: string | null, changeListeners?: {
     onChange?: (column: any, flag: boolean) => void;
     onBatchChange?: (flag: boolean) => void;
 }) => {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/useSelection.js

@@ -5,10 +5,15 @@ const useSelection = (columns, defaultValue, fieldName, changeListeners) => {
     changeListeners = changeListeners || {};
     const onChange = changeListeners.onChange || ((column, flag) => { });
     const onBatchChange = changeListeners.onBatchChange || ((flag) => { });
-    const [selected, setSelected] = react_1.useState(columns.reduce((acc, col) => {
-        acc[col.field] = fieldName ? col[fieldName] : defaultValue;
-        return acc;
-    }, {}));
+    const [selected, setSelected] = react_1.useState(typeof defaultValue === 'object'
+        ? defaultValue
+        : columns.reduce((acc, col) => {
+            const flag = fieldName ? col[fieldName] : defaultValue;
+            if (flag) {
+                acc[col.field] = flag;
+            }
+            return acc;
+        }, {}));
     const getColumn = (field) => columns.filter((c) => c.field === field)[0];
     const result = {
         selected,

package/src/View/AdaptableWizardView/Utils.d.ts

@@ -0,0 +1 @@
+export declare const validDataSource: (dataSourceInfo: any) => boolean;

package/src/View/AdaptableWizardView/Utils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validDataSource = void 0;
+const validDataSource = (dataSourceInfo) => {
+    if (!dataSourceInfo || !Array.isArray(dataSourceInfo.columns)) {
+        throw `We can't find any columns in your configuration`;
+    }
+    if (!dataSourceInfo.columns.length) {
+        throw 'You should have at least one column';
+    }
+    const allStringColumns = dataSourceInfo.columns.reduce((acc, col) => {
+        if (!col || typeof col !== 'string') {
+            return false;
+        }
+        return acc;
+    }, true);
+    if (!allStringColumns) {
+        throw `Some of your columns are not strings`;
+    }
+    if (!Array.isArray(dataSourceInfo.data)) {
+        throw `We can't find the data array in your configuration`;
+    }
+    return true;
+};
+exports.validDataSource = validDataSource;