@adaptabletools/adaptable 11.2.4 → 12.0.0-canary.1

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

@@ -0,0 +1,26 @@
+import { IRowEditService } from './Interface/IRowEditService';
+import { RowNode } from '@ag-grid-community/all-modules';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableForm } from '../../PredefinedConfig/Common/AdaptableForm';
+import { CreateRowFormContext, EditRowFormContext } from '../../AdaptableOptions/EditOptions';
+export declare class RowEditService implements IRowEditService {
+    private adaptableApi;
+    private adaptableInstance;
+    private rowEditFormOptions;
+    constructor(adaptableApi: AdaptableApi);
+    buildRowEditForm(rowNode: RowNode): AdaptableForm<EditRowFormContext>;
+    buildRowCreateForm(clonedRowNode?: RowNode): AdaptableForm<CreateRowFormContext>;
+    private buildRowForm;
+    private getFormTitle;
+    private getFormDescription;
+    private buildFormParamContext;
+    private buildRowFormFields;
+    private buildRowFormButtons;
+    private isColumnEditable;
+    private buildFormField;
+    private getFormFieldLabel;
+    private buildFormFieldLabelContext;
+    private getFieldTypeFromColumnType;
+    private getFieldValueOptions;
+    private autoHandleActionRowButtons;
+}

package/src/Utilities/Services/RowEditService.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowEditService = void 0;
+class RowEditService {
+    constructor(adaptableApi) {
+        this.adaptableApi = adaptableApi;
+        this.adaptableInstance = this.adaptableApi.internalApi.getAdaptableInstance();
+        this.rowEditFormOptions =
+            this.adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.editOptions.rowFormOptions;
+        if (this.adaptableInstance.adaptableOptions.userInterfaceOptions.actionOptions
+            .autoHandleActionRowButtons) {
+            this.adaptableInstance.api.eventApi.on('RowFormSubmitted', (eventInfo) => this.autoHandleActionRowButtons(eventInfo));
+        }
+    }
+    buildRowEditForm(rowNode) {
+        return this.buildRowForm('rowEdited', rowNode);
+    }
+    buildRowCreateForm(clonedRowNode) {
+        return this.buildRowForm('rowCreated', clonedRowNode);
+    }
+    buildRowForm(type, rowNode) {
+        const formFields = this.buildRowFormFields(type, rowNode);
+        const formButtons = this.buildRowFormButtons(type, rowNode);
+        const formTitle = this.getFormTitle(type, rowNode);
+        const formDescription = this.getFormDescription(type, rowNode);
+        const rowForm = {
+            title: formTitle,
+            description: formDescription,
+            fields: formFields,
+            buttons: formButtons,
+        };
+        return rowForm;
+    }
+    getFormTitle(type, rowNode) {
+        if (this.rowEditFormOptions.formTitle == undefined) {
+            return type === 'rowCreated' ? 'Create New Row' : 'Edit Row';
+        }
+        return typeof this.rowEditFormOptions.formTitle === 'function'
+            ? this.rowEditFormOptions.formTitle(this.buildFormParamContext(type, rowNode))
+            : this.rowEditFormOptions.formTitle;
+    }
+    getFormDescription(type, rowNode) {
+        return typeof this.rowEditFormOptions.formDescription === 'function'
+            ? this.rowEditFormOptions.formDescription(this.buildFormParamContext(type, rowNode))
+            : this.rowEditFormOptions.formDescription;
+    }
+    buildFormParamContext(type, rowNode) {
+        return {
+            rowNode,
+            adaptableApi: this.adaptableApi,
+            type: type,
+        };
+    }
+    buildRowFormFields(type, rowNode) {
+        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) {
+        // 1. check if there are custom user provided buttons
+        if (Array.isArray(this.rowEditFormOptions.formButtons)) {
+            return this.rowEditFormOptions.formButtons;
+        }
+        // 2. else return the standard ones
+        const cancelButton = {
+            label: 'Cancel',
+            buttonStyle: {
+                variant: 'raised',
+                tone: 'neutral',
+            },
+        };
+        const saveButton = {
+            label: 'Save',
+            buttonStyle: {
+                variant: 'raised',
+                tone: 'success',
+            },
+            onClick: (button, context) => {
+                var _a, _b;
+                const eventInfo = type === 'rowCreated'
+                    ? {
+                        type: 'rowCreated',
+                        formData: context.formData,
+                        adaptableApi: context.adaptableApi,
+                        clonedRowNode: rowNode,
+                    }
+                    : {
+                        type: 'rowEdited',
+                        formData: context.formData,
+                        rowNode: rowNode,
+                        adaptableApi: context.adaptableApi,
+                    };
+                this.adaptableApi.eventApi.emit('RowFormSubmitted', eventInfo);
+                (_b = (_a = this.adaptableInstance.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+            },
+        };
+        return [cancelButton, saveButton];
+    }
+    isColumnEditable(column, rowNode) {
+        return rowNode
+            ? this.adaptableInstance.isCellEditable(rowNode, this.adaptableInstance.getAgGridColumnForColumnId(column.columnId))
+            : !column.readOnly;
+    }
+    buildFormField(type, column, rowNode) {
+        const isColumnEditable = this.isColumnEditable(column, rowNode);
+        const fieldValueOptions = this.getFieldValueOptions(column, rowNode);
+        const fieldType = isColumnEditable
+            ? !!(fieldValueOptions === null || fieldValueOptions === void 0 ? void 0 : fieldValueOptions.length)
+                ? 'select'
+                : this.getFieldTypeFromColumnType(column)
+            : 'textOutput';
+        const defaultValue = rowNode
+            ? isColumnEditable
+                ? this.adaptableInstance.getRawValueFromRowNode(rowNode, column.columnId)
+                : this.adaptableInstance.getDisplayValueFromRowNode(rowNode, column.columnId)
+            : null;
+        return {
+            label: this.getFormFieldLabel(type, column, rowNode),
+            name: column.columnId,
+            defaultValue,
+            fieldType,
+            options: fieldValueOptions,
+        };
+    }
+    getFormFieldLabel(type, column, rowNode) {
+        const customFieldLabel = typeof this.rowEditFormOptions.formFieldLabel === 'function'
+            ? this.rowEditFormOptions.formFieldLabel(this.buildFormFieldLabelContext(type, column, rowNode))
+            : undefined;
+        return customFieldLabel !== null && customFieldLabel !== void 0 ? customFieldLabel : column.friendlyName;
+    }
+    buildFormFieldLabelContext(type, column, rowNode) {
+        return {
+            rowNode,
+            column,
+            adaptableApi: this.adaptableApi,
+            type: type,
+        };
+    }
+    getFieldTypeFromColumnType(column) {
+        switch (column.dataType) {
+            case 'Boolean':
+                return 'checkbox';
+            case 'Date':
+                return 'date';
+            case 'Number':
+                return 'number';
+            default:
+                // everything else is a plain text input
+                return 'text';
+        }
+    }
+    getFieldValueOptions(column, rowNode) {
+        const editLookUpItem = this.adaptableApi.userInterfaceApi.getEditLookUpItemForColumn(column);
+        if (!editLookUpItem) {
+            return;
+        }
+        const gridCell = rowNode
+            ? this.adaptableInstance.getGridCellFromRowNode(rowNode, column.columnId)
+            : undefined;
+        const editLookUpValues = this.adaptableApi.internalApi.getEditLookUpValuesForColumn(editLookUpItem, column, gridCell);
+        return editLookUpValues === null || editLookUpValues === void 0 ? void 0 : editLookUpValues.map((value) => ({
+            value,
+            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/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/AlertDisplayWizardSection.js

@@ -53,7 +53,7 @@ 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;

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");
@@ -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"));
@@ -64,16 +63,16 @@ 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;
     const ColumnId = data.ColumnId;
     let { DataType: dataType } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
-    const { Width, ShowToolTip, HeaderToolTip } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
+    const { Width, ShowToolTip, HeaderToolTip, ExternallyEvaluatedExpression } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
     const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
     };
@@ -118,7 +117,14 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
                                 }) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")),
+                        React.createElement(FormLayout_1.FormRow, { label: "" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-external-expression-evaluation", onChange: (checked) => handleSpecialColumnSettingsChange({ ExternallyEvaluatedExpression: checked }), checked: ExternallyEvaluatedExpression }, "Suppress Expression Evaluation"),
+                            ExternallyEvaluatedExpression && (React.createElement(rebass_1.Box, { "data-name": "note-external-expression-evaluation", p: 2, style: {
+                                    background: 'var(--ab-color-primary)',
+                                    borderRadius: 'var(--ab__border-radius)',
+                                    whiteSpace: 'pre-wrap',
+                                } }, "The column value is loaded from the row data property with the same name as the ColumnId"))))))),
         ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
         React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
 };

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 });
+};

package/src/View/CellSummary/CellSummaryPopup.js

@@ -9,6 +9,14 @@ const CellSummaryDetails_1 = require("./CellSummaryDetails");
 const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
 class CellSummaryPopupComponent extends React.Component {
     componentDidMount() {
+        var _a, _b, _c;
+        if (((_a = this.props.popupParams) === null || _a === void 0 ? void 0 : _a.source) === 'ColumnMenu' && ((_b = this.props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
+            // if the summary was requested from the column menu, we need to select the entire column
+            // afterwards, we will go on with the cell summary logic, as that will evaluate the current(column) cell selection
+            this.props.api.columnApi.selectColumn((_c = this.props.popupParams) === null || _c === void 0 ? void 0 : _c.column.columnId);
+            // we also need to update the internal state of the selected cells
+            this.props.api.internalApi.getAdaptableInstance().setSelectedCells();
+        }
         this.props.onCreateCellSummary();
     }
     render() {

package/src/View/CellSummary/CellSummaryStatusBarSubPanelPopover.js

@@ -11,5 +11,5 @@ exports.CellSummaryStatusBarSubPanelPopover = () => {
     return cellSummary && cellSummary.Count ? (summary) : (
     // the extra wrapper is added because the empty text is rendered
     // inside a  EmptyContent, hat has position absolute
-    React.createElement("div", { style: { position: 'relative', width: 200, height: 80 } }, summary));
+    React.createElement("div", { style: { position: 'relative', width: '100%', height: 80 } }, summary));
 };

package/src/View/CellSummary/CellSummaryStatusPanel.js

@@ -14,7 +14,7 @@ exports.CellSummaryStatusPanel = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const cellSummaryApi = adaptable.api.cellSummaryApi;
-    const cellSummaryModule = adaptable.ModuleService.getModuleById(ModuleConstants.CellSummaryModuleId);
+    const module = adaptable.ModuleService.getModuleById(ModuleConstants.CellSummaryModuleId);
     const text = `${cellSummaryApi.getCurrentCellSummaryOperation()}: ${(_a = cellSummaryApi.getCurrentCellSummaryOperationValue()) !== null && _a !== void 0 ? _a : 'N/A'}`;
     const onAction = () => {
         adaptable.api.cellSummaryApi.showCellSummaryPopup();
@@ -32,5 +32,5 @@ exports.CellSummaryStatusPanel = () => {
         checkSelectedCells();
         return () => cleanupEvent === null || cleanupEvent === void 0 ? void 0 : cleanupEvent();
     }, []);
-    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { icon: cellSummaryModule.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover_1.CellSummaryStatusBarSubPanelPopover }));
+    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, icon: module.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover_1.CellSummaryStatusBarSubPanelPopover, popoverMinWidth: 360 }));
 };