@adaptabletools/adaptable 12.0.0-canary.0 → 12.0.0-canary.3

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,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validDataSource = void 0;
+exports.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;
+};

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Reducer, ReactNode } from 'react';
+import { AdaptableOptions } from '../../types';
+import { ConfigurationWizardProps } from './AdaptableConfigurationDialog/ConfigurationWizard';
+export interface AdaptableWizardViewProps {
+    adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
+        primaryKey?: string;
+    };
+    /**
+     * Default true.
+     */
+    ddEnabled?: boolean;
+    /**
+     * When true the the configuration wizard will be shown.
+     * It will use the available information in adaptableOptions & gridOptions.
+     * This mode skips over interpreting data to figure-out columns.
+     */
+    skipToWizard?: boolean;
+    onInit: (adaptableOptions: AdaptableOptions) => any;
+    fileContentsToJSON?: (str: string) => Promise<any> | any;
+    readFile?: (file: File) => Promise<any>;
+    fileAccept?: string;
+    helpText?: React.ReactNode;
+    loadingMessage?: ReactNode;
+    defaultActionMessage?: ReactNode;
+    dragOverActionMessage?: ReactNode;
+    fetchData?: () => Promise<Record<string, any>[]>;
+    showFetchDataWizard?: boolean;
+    startSections?: ConfigurationWizardProps['startSections'];
+    prepareData?: (data: any, file?: File) => {
+        columns: string[];
+        data: any[];
+        primaryKey?: string;
+    };
+}
+export declare const initialState: Partial<WizardState>;
+export declare const reducer: Reducer<WizardState, any>;
+interface WizardState {
+    dropped: boolean;
+    error: any;
+    adaptableOptions: AdaptableOptions;
+}
+/**
+ * The wizard in a few modes:
+ *
+ * 1. Based on data:
+ * 1.1 Drag and drop a file
+ * 1.2 Fetch data from a url
+ *
+ * 2. Based on configuration:
+ * Provide a schema, on how the data looks like.
+ */
+export declare const Wizard: (props: AdaptableWizardViewProps) => JSX.Element;
+export {};

package/src/View/AdaptableWizardView/Wizard.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = exports.reducer = exports.initialState = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const helper_1 = require("./helper");
+const rebass_1 = require("rebass");
+const AdaptableConfigurationDialog_1 = tslib_1.__importDefault(require("./AdaptableConfigurationDialog"));
+const FileDroppable_1 = tslib_1.__importDefault(require("../../components/FileDroppable"));
+const Utils_1 = require("./Utils");
+exports.initialState = {
+    dropped: false,
+};
+exports.reducer = (state, action) => {
+    if (action.type === 'DROPPED') {
+        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload, dropped: true, error: null });
+    }
+    if (action.type === 'ERROR') {
+        return Object.assign(Object.assign({}, state), { dropped: false, error: action.payload });
+    }
+    if (action.type === 'CANCEL') {
+        return Object.assign(Object.assign({}, state), { error: null, dropped: false });
+    }
+    return state;
+};
+/**
+ * The wizard in a few modes:
+ *
+ * 1. Based on data:
+ * 1.1 Drag and drop a file
+ * 1.2 Fetch data from a url
+ *
+ * 2. Based on configuration:
+ * Provide a schema, on how the data looks like.
+ */
+exports.Wizard = (props) => {
+    var _a;
+    const [state, dispatch] = react_1.useReducer(exports.reducer, Object.assign(Object.assign({}, exports.initialState), { adaptableOptions: props.adaptableOptions }));
+    const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
+    const [isDataLoading, setIsDataLoading] = react_1.useState(false);
+    const handleDataSource = (array, file) => {
+        const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
+        try {
+            Utils_1.validDataSource(dataSourceInfo);
+        }
+        catch (err) {
+            return dispatch({
+                type: 'ERROR',
+                payload: `Invalid adaptable configuration - ${err}`,
+            });
+        }
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
+        adaptableOptions.gridOptions = gridOptions;
+        if (dataSourceInfo.primaryKey) {
+            adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
+        }
+        const shouldShowWizard = props.fetchData ? Boolean(props.showFetchDataWizard) : true;
+        if (shouldShowWizard) {
+            dispatch({
+                type: 'DROPPED',
+                payload: adaptableOptions,
+            });
+        }
+        else {
+            props.onInit(adaptableOptions);
+        }
+    };
+    let wizard;
+    if (props.skipToWizard || state.dropped) {
+        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableOptions: state.adaptableOptions, onCancel: () => {
+                // change the file droppable component key
+                // so it's remounted and it's in the initial state
+                setDroppableKey(Date.now());
+                dispatch({
+                    type: 'CANCEL',
+                });
+            }, onFinish: (adaptableOptions) => {
+                props.onInit(adaptableOptions);
+            } }));
+    }
+    react_1.useEffect(() => {
+        if (props.fetchData) {
+            setIsDataLoading(true);
+            props.fetchData().then((data) => {
+                handleDataSource(data);
+                setIsDataLoading(false);
+            });
+        }
+    }, []);
+    const ddEnabled = (_a = props.ddEnabled) !== null && _a !== void 0 ? _a : !props.fetchData;
+    return (React.createElement(React.Fragment, null,
+        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-nocode-wizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
+        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-nocode-wizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
+        wizard));
+};

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

@@ -1,25 +1,4 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import { AdaptableOptions } from '../../AdaptableOptions/AdaptableOptions';
-interface AdaptableWizardViewProps {
-    adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
-        primaryKey?: string;
-    };
-    onInit: (adaptableOptions: AdaptableOptions) => any;
-    fileContentsToJSON?: (str: string) => Promise<any> | any;
-    readFile?: (file: File) => Promise<any>;
-    fileAccept?: string;
-    helpText?: React.ReactNode;
-    loadingMessage?: ReactNode;
-    defaultActionMessage?: ReactNode;
-    dragOverActionMessage?: ReactNode;
-    fetchData?: () => Promise<Record<string, any>[]>;
-    showFetchDataWizard?: boolean;
-    prepareData?: (data: any, file?: File) => {
-        columns: string[];
-        data: any[];
-        primaryKey?: string;
-    };
-}
+import { AdaptableWizardViewProps } from './Wizard';
 declare const AdaptableWizardView: React.FunctionComponent<AdaptableWizardViewProps>;
 export default AdaptableWizardView;

package/src/View/AdaptableWizardView/index.js

@@ -3,109 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const styled_components_1 = require("styled-components");
-const react_1 = require("react");
 const theme_1 = tslib_1.__importDefault(require("../../theme"));
-const FileDroppable_1 = tslib_1.__importDefault(require("../../components/FileDroppable"));
-const helper_1 = require("./helper");
-const rebass_1 = require("rebass");
-const AdaptableConfigurationDialog_1 = tslib_1.__importDefault(require("./AdaptableConfigurationDialog"));
+const Wizard_1 = require("./Wizard");
 const AdaptableWizardView = (props) => (React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
-    React.createElement(Wizard, Object.assign({}, props))));
-const initialState = {
-    dropped: false,
-};
-const reducer = (state, action) => {
-    if (action.type === 'DROPPED') {
-        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload, dropped: true, error: null });
-    }
-    if (action.type === 'ERROR') {
-        return Object.assign(Object.assign({}, state), { dropped: false, error: action.payload });
-    }
-    if (action.type === 'CANCEL') {
-        return Object.assign(Object.assign({}, state), { error: null, dropped: false });
-    }
-    return state;
-};
-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;
-};
-const Wizard = (props) => {
-    const [state, dispatch] = react_1.useReducer(reducer, Object.assign(Object.assign({}, initialState), { adaptableOptions: props.adaptableOptions }));
-    const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
-    const [isDataLoading, setIsDataLoading] = react_1.useState(false);
-    const handleDataSource = (array, file) => {
-        const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
-        try {
-            validDataSource(dataSourceInfo);
-        }
-        catch (err) {
-            return dispatch({
-                type: 'ERROR',
-                payload: `Invalid adaptable configuration - ${err}`,
-            });
-        }
-        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
-        const adaptableOptions = Object.assign({}, props.adaptableOptions);
-        adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
-        adaptableOptions.gridOptions = gridOptions;
-        if (dataSourceInfo.primaryKey) {
-            adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
-        }
-        const shouldShowWizard = props.fetchData ? Boolean(props.showFetchDataWizard) : true;
-        if (shouldShowWizard) {
-            dispatch({
-                type: 'DROPPED',
-                payload: adaptableOptions,
-            });
-        }
-        else {
-            props.onInit(adaptableOptions);
-        }
-    };
-    let wizard;
-    if (state.dropped) {
-        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { adaptableOptions: state.adaptableOptions, onCancel: () => {
-                // change the file droppable component key
-                // so it's remounted and it's in the initial state
-                setDroppableKey(Date.now());
-                dispatch({
-                    type: 'CANCEL',
-                });
-            }, onFinish: (adaptableOptions) => {
-                props.onInit(adaptableOptions);
-            } }));
-    }
-    react_1.useEffect(() => {
-        if (props.fetchData) {
-            setIsDataLoading(true);
-            props.fetchData().then((data) => {
-                handleDataSource(data);
-                setIsDataLoading(false);
-            });
-        }
-    }, []);
-    const ddEnabled = !props.fetchData;
-    return (React.createElement(React.Fragment, null,
-        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-nocode-wizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
-        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-nocode-wizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
-        wizard));
-};
+    React.createElement(Wizard_1.Wizard, Object.assign({}, props))));
 exports.default = AdaptableWizardView;

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -83,7 +83,7 @@ exports.renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
         } }));
 };
 exports.AlertBehaviourWizardSection = (props) => {
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const { AlertProperties = {} } = data;
     const rowAddedAlert = api.internalApi.isAlertDefinitionForAddedRowChangeEvent(data);
     const rowRemovedAlert = api.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);

package/src/View/Alert/Wizard/AlertButtonsEditor.d.ts

@@ -2,10 +2,10 @@
 import { AlertButton } from '../../../PredefinedConfig/AlertState';
 import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { AlertButtonContext } from '../../../types';
+import { AlertFormContext } from '../../../types';
 declare type AlertButtonsEditorProps = {
-    AlertButtons: AlertButton<AlertButtonContext>[];
-    onChange: (buttons: AlertButton<AlertButtonContext>[]) => void;
+    AlertButtons: AlertButton<AlertFormContext>[];
+    onChange: (buttons: AlertButton<AlertFormContext>[]) => void;
     api: AdaptableApi;
     adaptableAlert: AdaptableAlert;
 };

package/src/View/Alert/Wizard/AlertDisplayWizardSection.js

@@ -22,7 +22,7 @@ const DEFAULT_BUTTONS = [
 ];
 exports.renderAlertDisplaySummary = () => {
     var _a;
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     if (!((_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification)) {
         return (React.createElement(rebass_1.Text, { fontSize: 2 },
             "Alert type ",
@@ -57,7 +57,7 @@ exports.AlertPreview = (_a) => {
 };
 exports.AlertDisplayWizardSection = (props) => {
     var _a, _b, _c, _d;
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const messageType = data.MessageType;
     const messageText = api.alertApi.getAlertDescription(data);
     const adaptableAlert = {

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.BaseAlertRulesWizardSection = (props) => {
-    const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const wholeRowScope = props.wholeRowScope != null ? props.wholeRowScope : api.scopeApi.scopeIsAll(data.Scope);
     const predicateDefs = api.alertApi.getAlertPredicateDefsForScope(data.Scope);
     return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.js

@@ -8,7 +8,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ValueSelector_1 = require("../../Components/ValueSelector");
 exports.BaseAlertScopeWizardSection = (props) => {
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
         React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
                 rowScope: 'Changes anywhere in the row will trigger an alert',
@@ -41,7 +41,7 @@ exports.BaseAlertScopeWizardSection = (props) => {
             } })));
 };
 exports.renderBaseAlertScopeSummary = (data) => {
-    const { api: { scopeApi }, } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { api: { scopeApi }, } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const columnsInScope = scopeApi.getColumnsForScope(data.Scope);
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Box, null,

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const BulkUpdateRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/BulkUpdateRedux"));
 const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const PanelWithImage_1 = require("../Components/Panels/PanelWithImage");
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
@@ -34,7 +33,7 @@ class BulkUpdatePopupComponent extends React.Component {
         let dataTypeErrorMessage = '';
         if (col && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue)) {
             // check that the update value is a number for a numeric column.  not issue for dates as we dont allow free text
-            if (col.dataType == Enums_1.DataType.Number) {
+            if (col.dataType == 'Number') {
                 if (isNaN(Number(this.props.BulkUpdateValue))) {
                     hasDataTypeError = true;
                     dataTypeErrorMessage = 'This column only accepts numbers';
@@ -50,7 +49,7 @@ class BulkUpdatePopupComponent extends React.Component {
             return null;
         }
         return (React.createElement(PanelWithImage_1.PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary" },
-            col.dataType == Enums_1.DataType.Date ? (React.createElement(React.Fragment, null,
+            col.dataType == 'Date' ? (React.createElement(React.Fragment, null,
                 React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
                 React.createElement(rebass_1.Box, null,
                     React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, onChange: (checked) => this.onUseColumnValuesSelectorChanged(checked), checked: this.state.useSelector },

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const Tabs_1 = require("../../../components/Tabs");
 const CodeBlock_1 = require("../../../components/CodeBlock");
@@ -43,7 +42,7 @@ QueryTab.defaultProps = {
     isTabsTab: true,
 };
 exports.CalculatedColumnExpressionWizardSection = (props) => {
-    const { api, data, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { api, data, moduleInfo } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const initialData = react_1.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const type = data.Query.AggregatedScalarExpression != undefined
         ? 'AggregatedScalarExpression'
@@ -65,8 +64,8 @@ exports.CalculatedColumnExpressionWizardSection = (props) => {
     const setCalculatedColumnExpression = (calculatedColumnQuery) => {
         const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
         const dataType = calculatedColumnExpressionService.getCalculatedColumnDataType(calculatedColumnQuery);
-        const Pivotable = dataType == Enums_1.DataType.String;
-        const Aggregatable = dataType == Enums_1.DataType.Number;
+        const Pivotable = dataType == 'String';
+        const Aggregatable = dataType == 'Number';
         props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Pivotable,
                 Aggregatable }) }));
     };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -4,7 +4,6 @@ exports.CalculatedColumnSettingsWizardSection = exports.isValidCalculatedColumnS
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
@@ -45,7 +44,7 @@ exports.isValidCalculatedColumnSettings = (data, api) => {
 };
 exports.CalculatedColumnSettingsWizardSection = (props) => {
     var _a, _b;
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const calculatedColumnExpressionService = react_1.useMemo(() => api.internalApi.getCalculatedColumnExpressionService(), []);
     const handleColumnIdChange = (event) => {
         let e = event.target;
@@ -64,10 +63,10 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
     const validCheck = exports.isValidCalculatedColumnSettings(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     let options = [
-        { value: Enums_1.DataType.Number, label: Enums_1.DataType.Number },
-        { value: Enums_1.DataType.String, label: Enums_1.DataType.String },
-        { value: Enums_1.DataType.Date, label: Enums_1.DataType.Date },
-        { value: Enums_1.DataType.Boolean, label: Enums_1.DataType.Boolean },
+        { value: 'Number', label: 'Number' },
+        { value: 'String', label: 'String' },
+        { value: 'Date', label: 'Date' },
+        { value: 'Boolean', label: 'Boolean' },
     ];
     const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
     const ColumnName = data.FriendlyName;

package/src/View/CellSummary/CellSummaryDetails.js

@@ -6,8 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const columnsMap = new Map([
-    ['Operation', { field: 'Operation', flex: 1 }],
-    ['Value', { field: 'Value', flex: 1 }],
+    ['Operation', { field: 'Operation', defaultFlex: 1 }],
+    ['Value', { field: 'Value', defaultFlex: 1 }],
 ]);
 const tableDOMProps = {
     style: {

package/src/View/Components/FilterForm/FilterForm.js

@@ -105,7 +105,7 @@ class FilterFormComponent extends React.Component {
         this._isMounted = false;
     }
     componentDidMount() {
-        if (this.props.currentColumn.dataType != Enums_1.DataType.Boolean) {
+        if (this.props.currentColumn.dataType != 'Boolean') {
             this.loadPermittedValues();
         }
     }

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -321,7 +321,7 @@ class QuickFilterFormComponent extends React.Component {
     }
     clearFilter() {
         const { filter } = this.state;
-        this.props.api.layoutApi.clearColumnFilterByColumn(filter.ColumnId);
+        this.props.api.filterApi.clearColumnFilterByColumn(filter.ColumnId);
     }
     hasValuesPredicate(predicate) {
         return (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId) === 'Values' || (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId) === 'ExcludeValues';