@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.2

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/ActiveAlertsPanel.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ActiveAlertsPanel: React.FunctionComponent;

package/src/View/Alert/ActiveAlertsPanel.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveAlertsPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const AdaptableObjectCompactList_1 = require("../Components/AdaptableObjectList/AdaptableObjectCompactList");
+const react_redux_1 = require("react-redux");
+exports.ActiveAlertsPanel = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.AlertModuleId);
+    const alerts = react_redux_1.useSelector((state) => state.System.AdaptableAlerts);
+    return React.createElement(AdaptableObjectCompactList_1.AdaptableObjectCompactList, { abObjects: alerts, module: filterModule });
+};

package/src/View/Alert/AlertStatusSubPanel.js

@@ -5,16 +5,14 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = require("../AdaptableContext");
-const AlertsPanel_1 = require("./AlertsPanel");
 const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
 const StatusBarPanel_1 = require("../StatusBar/StatusBarPanel");
-const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
 const initialStyle = { color: '', background: '' };
 exports.AlertStatusPanel = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const [style, setStyle] = React.useState(initialStyle);
-    const dispatch = react_redux_1.useDispatch();
     const module = adaptable.ModuleService.getModuleById(ModuleConstants.AlertModuleId);
     const statusbarHighlightDuration = adaptable.adaptableOptions.alertOptions.statusbarHighlightDuration;
     /**
@@ -49,9 +47,6 @@ exports.AlertStatusPanel = () => {
             setStyle(initialStyle);
         }, statusbarHighlightDuration);
     }, [alerts]);
-    // Dropdown content
-    const handleDeleteAlert = React.useCallback((alert) => dispatch(SystemRedux.SystemAlertDelete(alert)), []);
-    const handleDeleteAllAlerts = React.useCallback((alerts) => dispatch(SystemRedux.SystemAlertDeleteAll(alerts)), []);
-    let alertsPanel = (React.createElement(AlertsPanel_1.AlertsPanel, { Alerts: alerts, ShowPanel: true, ShowHeader: false, onClearAlert: handleDeleteAlert, onClearAllAlerts: handleDeleteAllAlerts }));
-    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { "data-name": module.moduleInfo.ModuleName, color: style.color, backgroundColor: style.background, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
+    let alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
+    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, color: style.color, backgroundColor: style.background, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
 };

package/src/View/Alert/AlertViewPanel.js

@@ -6,10 +6,10 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
-const AlertsPanel_1 = require("./AlertsPanel");
 const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
+const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -31,7 +31,7 @@ class AlertViewPanelComponent extends React.Component {
             : this.props.AdaptableAlerts.length == 1
                 ? '1 Alert'
                 : this.props.AdaptableAlerts.length + ' Alerts';
-        const alertsPanel = (React.createElement(AlertsPanel_1.AlertsPanel, { Alerts: this.props.AdaptableAlerts, ShowPanel: true, ShowHeader: false, onClearAlert: this.props.onDeleteAlert, onRender: () => this.setState({ ShowMessage: false }), onClearAllAlerts: this.props.onDeleteAllAlert }));
+        const alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
             React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonBackground, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),

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/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 ",
@@ -53,11 +53,11 @@ exports.AlertPreview = (_a) => {
         return result;
     }, [alertDefinition]);
     return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
-        React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, api: api, onClose: () => { } })));
+        React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
 };
 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/BulkUpdate/BulkUpdateViewPanel.js

@@ -59,7 +59,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
                 !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply_1.ButtonApply, { marginLeft: 2, className: `ab-${elementType}__BulkUpdate__apply`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                         (this.props.PreviewInfo != null &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel }, this.props.viewType === 'ToolPanel' && 'Update')),
-                !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
+                !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

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,14 +6,14 @@ 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: {
         height: '100%',
-        minWidth: '15rem',
-        minHeight: '20rem',
+        minWidth: '20rem',
+        minHeight: 380,
     },
 };
 class CellSummaryDetails extends React.Component {

package/src/View/CellSummary/CellSummaryPopover.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { CellSummmary } from '../../PredefinedConfig/Common/CellSummary';
-export interface CellSummaryPopoverProps extends React.ClassAttributes<CellSummaryPopover> {
+export interface CellSummaryPopoverProps {
     CellSummary: CellSummmary;
 }
-export declare class CellSummaryPopover extends React.Component<CellSummaryPopoverProps, {}> {
-    render(): any;
-}
+export declare const CellSummaryPopover: React.FunctionComponent<CellSummaryPopoverProps>;

package/src/View/CellSummary/CellSummaryPopover.js

@@ -4,9 +4,6 @@ exports.CellSummaryPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const CellSummaryDetails_1 = require("./CellSummaryDetails");
-class CellSummaryPopover extends React.Component {
-    render() {
-        return React.createElement(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: this.props.CellSummary });
-    }
-}
-exports.CellSummaryPopover = CellSummaryPopover;
+exports.CellSummaryPopover = (props) => {
+    return React.createElement(CellSummaryDetails_1.CellSummaryDetails, { CellSummary: props.CellSummary });
+};