@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.2

package/src/Utilities/ObjectFactory.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFactory = exports.CreateToastOptions = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyDataSource = exports.CreateEmptyCustomSort = void 0;
+exports.ObjectFactory = exports.CreateToastOptions = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const GeneralConstants_1 = require("./Constants/GeneralConstants");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
@@ -9,10 +9,6 @@ function CreateEmptyCustomSort() {
     return { Uuid: Uuid_1.createUuid(), ColumnId: GeneralConstants_1.EMPTY_STRING, SortedValues: [] };
 }
 exports.CreateEmptyCustomSort = CreateEmptyCustomSort;
-function CreateEmptyDataSource() {
-    return { Uuid: Uuid_1.createUuid(), Name: GeneralConstants_1.EMPTY_STRING, Description: GeneralConstants_1.EMPTY_STRING };
-}
-exports.CreateEmptyDataSource = CreateEmptyDataSource;
 function CreateEmptyCalculatedColumn(isFilterable) {
     return {
         Uuid: Uuid_1.createUuid(),
@@ -359,7 +355,7 @@ function CreateColumnFilter(ColumnId, PredicateId, Inputs) {
     };
 }
 exports.CreateColumnFilter = CreateColumnFilter;
-function CreateToastOptions(notificationsOptions, { onClose } = {}) {
+function CreateToastOptions(notificationsOptions, { onClose, containerId }) {
     const adaptableToastPosition = notificationsOptions.position;
     const position = getToastPosition(adaptableToastPosition);
     const duration = notificationsOptions.duration;
@@ -369,6 +365,7 @@ function CreateToastOptions(notificationsOptions, { onClose } = {}) {
     const isDraggable = notificationsOptions.isDraggable;
     const transition = getToastTransition(notificationsOptions.transition);
     const toastProps = {
+        containerId,
         position,
         autoClose: duration == 'always' ? false : duration,
         hideProgressBar: !showProgressBar,
@@ -412,7 +409,6 @@ function getToastTransition(transition) {
 }
 exports.ObjectFactory = {
     CreateEmptyCustomSort,
-    CreateEmptyDataSource,
     CreateEmptyCalculatedColumn,
     CreateEmptyNamedQuery,
     CreateEmptyPlusMinusNudge,

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnExpressionService = void 0;
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const LoggingHelper_1 = require("../Helpers/LoggingHelper");
 const ModuleConstants_1 = require("../Constants/ModuleConstants");
 const scalarAggregationHelper_1 = require("../ExpressionFunctions/scalarAggregationHelper");
@@ -42,28 +41,28 @@ class CalculatedColumnExpressionService {
                 // currently AggregatedScalarExpression support only numerical values
                 // TODO AFL try to derive the type from the aggregatedColumn?
                 // we definitely don't want to aggregate everything only to get the data type
-                return Enums_1.DataType.Number;
+                return 'Number';
             }
             let firstRowNode = this.adaptableApi.gridApi.getFirstRowNode();
             let firstRowValue = this.adaptableApi.internalApi
                 .getQueryLanguageService()
                 .evaluateScalarExpression(calculatedColumnQuery.ScalarExpression, ModuleConstants_1.CalculatedColumnModuleId, firstRowNode);
             if (firstRowValue instanceof Date) {
-                return Enums_1.DataType.Date;
+                return 'Date';
             }
             if (typeof firstRowValue === 'boolean') {
-                return Enums_1.DataType.Boolean;
+                return 'Boolean';
             }
             if (typeof firstRowValue === 'string') {
-                return Enums_1.DataType.String;
+                return 'String';
             }
             if (typeof firstRowValue === 'number') {
-                return Enums_1.DataType.Number;
+                return 'Number';
             }
         }
         catch (e) {
             LoggingHelper_1.LogAdaptableWarning(`Invalid CalculatedColumn expression ${this.adaptableApi.queryLanguageApi.getAdaptableQueryExpression(calculatedColumnQuery)} :: ${e}`);
-            return Enums_1.DataType.Number;
+            return 'Number';
         }
     }
     isCalculatedColumnQueryValid(calculatedColumnQuery) {

package/src/Utilities/Services/EntitlementService.js

@@ -33,7 +33,13 @@ class EntitlementService {
             const moduleEntitlements = entitlementOptions.moduleEntitlements;
             if (moduleEntitlements) {
                 if (typeof moduleEntitlements === 'function') {
-                    const dynamicModuleEntitlement = moduleEntitlements(adaptableModule, adaptableOptions.userName, adaptableOptions.adaptableId, defaultAccessLevel);
+                    const entitlementContext = {
+                        adaptableModule,
+                        userName: adaptableOptions.userName,
+                        adaptableId: adaptableOptions.adaptableId,
+                        defaultAccessLevel,
+                    };
+                    const dynamicModuleEntitlement = moduleEntitlements(entitlementContext);
                     return dynamicModuleEntitlement !== null && dynamicModuleEntitlement !== void 0 ? dynamicModuleEntitlement : defaultAccessLevel;
                 }
                 else {

package/src/Utilities/Services/ModuleService.js

@@ -93,7 +93,7 @@ class ModuleService {
                 return learnUrl + 'handbook-sorting';
             case 'Dashboard':
                 return learnUrl + 'ui-dashboard';
-            case 'DataSource':
+            case 'DataSet':
                 return learnUrl + 'handbook-data-sources';
             case 'DataChangeHistory':
                 return learnUrl + 'handbook-monitoring#data-change-history';

package/src/Utilities/Services/ReportService.js

@@ -341,18 +341,17 @@ class ReportService {
             : // type === formattedValue
                 this.adaptableApi.gridApi.getFormattedValueFromRawValue(columnId, cellRawValue);
     }
-    computeCellExportValueFormat(columnType) {
+    computeCellExportValueFormat(columnDataType) {
         const exportOptions = this.adaptableApi.internalApi.getAdaptableOptions().exportOptions;
         if (exportOptions.exportFormatType === 'rawValue' ||
             exportOptions.exportFormatType === 'formattedValue') {
             return exportOptions.exportFormatType;
         }
         // format is customized based on column data type
-        switch (columnType) {
+        switch (columnDataType) {
             case 'String':
                 return exportOptions.exportFormatType.string;
             case 'Number':
-            case 'NumberArray':
                 return exportOptions.exportFormatType.number;
             case 'Date':
                 return exportOptions.exportFormatType.date;

package/src/Utilities/Services/RowEditService.d.ts

@@ -22,4 +22,5 @@ export declare class RowEditService implements IRowEditService {
     private buildFormFieldLabelContext;
     private getFieldTypeFromColumnType;
     private getFieldValueOptions;
+    private autoHandleActionRowButtons;
 }

package/src/Utilities/Services/RowEditService.js

@@ -7,6 +7,10 @@ class RowEditService {
         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));
+        }
     }
     buildRowEditForm(rowNode) {
         return this.buildRowForm('rowEdited', rowNode);
@@ -48,10 +52,13 @@ class RowEditService {
         };
     }
     buildRowFormFields(type, rowNode) {
-        const relevantColumns = this.adaptableApi.columnApi.getColumns().filter((column) => {
+        const relevantColumns = this.adaptableApi.columnApi
+            .getColumns()
+            .filter((column) => {
             // if there is NO rowNode, do NOT display the non-editable fields as they will be empty
             return !!rowNode || this.isColumnEditable(column, rowNode);
-        });
+        })
+            .filter((column) => !this.adaptableApi.columnApi.isActionRowButtonColumn(column.columnId));
         return relevantColumns.map((column) => this.buildFormField(type, column, rowNode));
     }
     buildRowFormButtons(type, rowNode) {
@@ -161,5 +168,30 @@ class RowEditService {
             label: value,
         }));
     }
+    autoHandleActionRowButtons(rowEditedFormInfo) {
+        const { adaptableApi } = rowEditedFormInfo;
+        if (rowEditedFormInfo.type === 'rowEdited') {
+            const { rowNode, formData } = rowEditedFormInfo;
+            const newRowData = Object.assign(Object.assign({}, rowNode.data), formData);
+            adaptableApi.gridApi.updateGridData([newRowData]);
+        }
+        if (rowEditedFormInfo.type === 'rowDeleted') {
+            const { rowNode } = rowEditedFormInfo;
+            const deletedRowData = rowNode.data;
+            adaptableApi.gridApi.deleteGridData([deletedRowData]);
+        }
+        if (rowEditedFormInfo.type === 'rowCreated') {
+            const { formData } = rowEditedFormInfo;
+            const setPrimaryKeyValueFunction = adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.userInterfaceOptions
+                .actionOptions.setPrimaryKeyValue;
+            const newRowData = typeof setPrimaryKeyValueFunction === 'function'
+                ? setPrimaryKeyValueFunction({
+                    rowData: formData,
+                    adaptableApi,
+                })
+                : Object.assign({}, formData);
+            adaptableApi.gridApi.addGridData([newRowData], { addIndex: 0 });
+        }
+    }
 }
 exports.RowEditService = RowEditService;

package/src/Utilities/Services/TeamSharingService.js

@@ -74,7 +74,7 @@ class TeamSharingService {
                 return importInfo === null || importInfo === void 0 ? void 0 : importInfo.AddAction(Entity);
             }
         };
-        const existingSharedEntities = this.adaptableApi.teamSharingApi.getSharedEntities();
+        const existingSharedEntities = this.adaptableApi.internalApi.getLocalTeamSharingEntities();
         const sharedEntityDependencyTree = this.getSharedEntityDependencyTree(importedSharedEntity, existingSharedEntities);
         const importSteps = sharedEntityDependencyTree.map((sharedEntity) => ({
             sharedEntity,
@@ -84,13 +84,13 @@ class TeamSharingService {
     }
     getSharedEntityLocalAndRemoteRevisions(changedAdaptableObjectId, remoteSharedEntities) {
         var _a, _b, _c, _d;
-        const localRevision = (_b = (_a = this.adaptableApi.teamSharingApi.getTeamSharingState().ActiveSharedEntityMap[changedAdaptableObjectId]) === null || _a === void 0 ? void 0 : _a.Revision) !== null && _b !== void 0 ? _b : -1;
+        const localRevision = (_b = (_a = this.adaptableApi.internalApi.getState().TeamSharing.ActiveSharedEntityMap[changedAdaptableObjectId]) === null || _a === void 0 ? void 0 : _a.Revision) !== null && _b !== void 0 ? _b : -1;
         const remoteRevision = (_d = (_c = remoteSharedEntities.find((sharedEntity) => sharedEntity.Entity.Uuid === changedAdaptableObjectId)) === null || _c === void 0 ? void 0 : _c.Revision) !== null && _d !== void 0 ? _d : -1;
         return [localRevision, remoteRevision];
     }
     getStaleActiveSharedEntities() {
-        const sharedEntities = this.adaptableApi.teamSharingApi.getSharedEntities();
-        const activeEntities = this.adaptableApi.teamSharingApi.getTeamSharingState().ActiveSharedEntityMap;
+        const sharedEntities = this.adaptableApi.internalApi.getLocalTeamSharingEntities();
+        const activeEntities = this.adaptableApi.internalApi.getState().TeamSharing.ActiveSharedEntityMap;
         const result = {};
         sharedEntities
             .filter((sharedEntity) => sharedEntity.Type === 'Active')

package/src/View/AdaptablePopover/index.d.ts

@@ -12,6 +12,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<AdaptablePo
     useButton?: boolean;
     tooltipText?: string;
     popoverMinWidth?: number;
+    popoverMaxWidth?: number;
     popupPadding?: number;
 }
 export declare class AdaptablePopover extends React.Component<AdaptablePopoverProps, {}> {

package/src/View/AdaptablePopover/index.js

@@ -11,7 +11,7 @@ const OverlayTrigger_1 = tslib_1.__importDefault(require("../../components/Overl
 const rebass_1 = require("rebass");
 class AdaptablePopover extends React.Component {
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
         const showIcon = (_a = this.props.showIcon) !== null && _a !== void 0 ? _a : true;
         let useButton = this.props.useButton != null ? this.props.useButton : false;
@@ -23,11 +23,10 @@ class AdaptablePopover extends React.Component {
                 margin: '0px',
                 padding: '0px',
                 minWidth: popoverMinWidth,
-                maxWidth: 300,
+                maxWidth: (_b = this.props.popoverMaxWidth) !== null && _b !== void 0 ? _b : 300,
             } },
-            title ? (React.createElement(rebass_1.Text, { fontSize: 2, padding: 2 },
-                React.createElement("b", null, title))) : null,
-            React.createElement(rebass_1.Box, { className: "ab-Popover__body", padding: (_b = this.props.popupPadding) !== null && _b !== void 0 ? _b : 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
+            title ? (React.createElement(rebass_1.Text, { fontSize: 4, padding: 2 }, title)) : null,
+            React.createElement(rebass_1.Box, { className: "ab-Popover__body", padding: (_c = this.props.popupPadding) !== null && _c !== void 0 ? _c : 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
         const icon = 'info'; // - think this is wrong - UIHelper.getGlyphByMessageType(messageType);
         const color = UIHelper_1.UIHelper.getColorByMessageType(messageType);
         const iconStyle = {
@@ -37,7 +36,7 @@ class AdaptablePopover extends React.Component {
         return (React.createElement(rebass_1.Flex, { alignItems: "center", className: this.props.className },
             React.createElement(OverlayTrigger_1.default, { showTriangle: true, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
                     overflow: 'visible',
-                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
+                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
                 this.props.children,
                 showIcon && React.createElement(icons_1.Icon, { name: icon }))))));
     }

package/src/View/AdaptableView.js

@@ -33,7 +33,7 @@ class AdaptableView extends React.Component {
             , { 
                 // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
                 // instance is destroyed and re-created many times
-                containerId: adaptableOptions.adaptableId, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+                containerId: adaptableOptions.adaptableId, enableMultiContainer: true, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups_1.WindowPopups, null),
             React.createElement(FormPopups_1.FormPopups, null),

package/src/View/AdaptableViewFactory.js

@@ -26,7 +26,7 @@ const QuickSearchViewPanel_1 = require("./QuickSearch/QuickSearchViewPanel");
 const SmartEditViewPanel_1 = require("./SmartEdit/SmartEditViewPanel");
 const SystemStatusViewPanel_1 = require("./SystemStatus/SystemStatusViewPanel");
 const ThemeViewPanel_1 = require("./Theme/ThemeViewPanel");
-const DataSourceViewPanel_1 = require("./DataSource/DataSourceViewPanel");
+const DataSetViewPanel_1 = require("./DataSet/DataSetViewPanel");
 const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryPopup");
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
@@ -59,7 +59,7 @@ exports.AdaptableViewPanelFactory = new Map([
     [ModuleConstants.SmartEditModuleId, SmartEditViewPanel_1.SmartEditViewPanelControl],
     [ModuleConstants.SystemStatusModuleId, SystemStatusViewPanel_1.SystemStatusViewPanel],
     [ModuleConstants.ThemeModuleId, ThemeViewPanel_1.ThemeViewPanelControl],
-    [ModuleConstants.DataSourceModuleId, DataSourceViewPanel_1.DataSourceViewPanelControl],
+    [ModuleConstants.DataSetModuleId, DataSetViewPanel_1.DataSetViewPanelControl],
     [ModuleConstants.DataChangeHistoryModuleId, DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl],
     [ModuleConstants.StateManagementModuleId, StateManagementViewPanel_1.StateManagementViewPanel],
 ]);

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,18 @@
+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: (adaptableOptions: AdaptableOptions, onChange: (newAdaptableOptions: AdaptableOptions) => 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,87 @@
+"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"));
+exports.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);
+                    },
+                };
+            }),
+            ...sections,
+        ];
+    }
+    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableOptions, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+};

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,16 @@
+"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"));
+exports.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 })));
+};

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;