@adaptabletools/adaptable 11.0.9 → 11.1.1-canary.1

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

@@ -1,14 +1,14 @@
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
-import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
+import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChangedInfo';
 import { IValidationService } from './Interface/IValidationService';
 import { AlertDefinition } from '../../PredefinedConfig/AlertState';
 export declare class ValidationService implements IValidationService {
     private adaptable;
     constructor(adaptable: IAdaptable);
-    getValidationRulesForDataChange(dataChangedInfo: DataChangedInfo): AlertDefinition[];
-    performValidation(dataChangedInfo: DataChangedInfo): boolean;
+    getValidationRulesForDataChange(cellDataChangedInfo: CellDataChangedInfo): AlertDefinition[];
+    performValidation(cellDataChangedInfo: CellDataChangedInfo): boolean;
     private IsAlertDefinitionTriggered;
-    performServerValidation(dataChangedInfo: DataChangedInfo, config: {
+    performServerValidation(cellDataChangedInfo: CellDataChangedInfo, config: {
         onServerValidationCompleted: () => void;
     }): () => boolean;
     createValidationDescription(alertDefinition: AlertDefinition): string;

package/src/Utilities/Services/ValidationService.js

@@ -11,28 +11,28 @@ class ValidationService {
         this.adaptable = adaptable;
     }
     // Not sure where to put this: was in the Module but might be better here until I can work out a way of having an event with a callback...
-    getValidationRulesForDataChange(dataChangedInfo) {
+    getValidationRulesForDataChange(cellDataChangedInfo) {
         // if the new value is the same as the old value then we can get out as we dont see it as an edit?
-        if (dataChangedInfo.oldValue == dataChangedInfo.newValue) {
+        if (cellDataChangedInfo.oldValue == cellDataChangedInfo.newValue) {
             return [];
         }
         let editingRules = this.adaptable.api.alertApi
             .getAlertDefinitionsWithPreventEdit()
-            .filter((v) => this.adaptable.api.scopeApi.isColumnInScope(dataChangedInfo.column, v.Scope));
+            .filter((v) => this.adaptable.api.scopeApi.isColumnInScope(cellDataChangedInfo.column, v.Scope));
         let failedValidations = [];
         if (ArrayExtensions_1.ArrayExtensions.IsNotEmpty(editingRules)) {
             editingRules.forEach((alertDefinition) => {
                 if (alertDefinition.Rule.BooleanExpression) {
-                    let isSatisfiedExpression = dataChangedInfo.rowNode != null &&
+                    let isSatisfiedExpression = cellDataChangedInfo.rowNode != null &&
                         this.adaptable.api.internalApi
                             .getQueryLanguageService()
-                            .evaluateBooleanExpression(alertDefinition.Rule.BooleanExpression, ModuleConstants_1.AlertModuleId, dataChangedInfo.rowNode);
+                            .evaluateBooleanExpression(alertDefinition.Rule.BooleanExpression, ModuleConstants_1.AlertModuleId, cellDataChangedInfo.rowNode);
                     if (isSatisfiedExpression) {
                         failedValidations.push(alertDefinition);
                     }
                 }
                 else {
-                    if (this.IsAlertDefinitionTriggered(alertDefinition, dataChangedInfo)) {
+                    if (this.IsAlertDefinitionTriggered(alertDefinition, cellDataChangedInfo)) {
                         failedValidations.push(alertDefinition);
                     }
                 }
@@ -40,14 +40,15 @@ class ValidationService {
         }
         return failedValidations;
     }
-    performValidation(dataChangedInfo) {
-        const failedRules = this.getValidationRulesForDataChange(dataChangedInfo);
+    performValidation(cellDataChangedInfo) {
+        const failedRules = this.getValidationRulesForDataChange(cellDataChangedInfo);
         if (failedRules.length > 0) {
             let alert = {
+                alertType: 'cellChanged',
                 header: 'Alert',
                 message: 'Perform Edit Alert Fired',
                 alertDefinition: failedRules[0],
-                dataChangedInfo: dataChangedInfo,
+                cellDataChangedInfo: cellDataChangedInfo,
             };
             this.adaptable.api.alertApi.publishAlertFiredEvent(alert);
             return false;
@@ -63,25 +64,25 @@ class ValidationService {
             column: dataChangedEvent.column,
         }, false);
     }
-    performServerValidation(dataChangedInfo, config) {
+    performServerValidation(cellDataChangedInfo, config) {
         return () => {
             this.adaptable.adaptableOptions.editOptions
-                .validateOnServer(dataChangedInfo)
+                .validateOnServer(cellDataChangedInfo)
                 .then((validationResult) => {
                 var _a, _b;
                 if (validationResult.NewValue === undefined) {
-                    validationResult.NewValue = dataChangedInfo.newValue;
+                    validationResult.NewValue = cellDataChangedInfo.newValue;
                 }
                 // If they have changed the return value then we should update the grid, log the function change
                 // otherwise the value will persist
-                if (validationResult.NewValue !== dataChangedInfo.newValue) {
-                    dataChangedInfo.newValue = validationResult.NewValue;
-                    // this.adaptable.setValue(dataChangedInfo, false);
-                    const row = (_a = dataChangedInfo.rowNode) === null || _a === void 0 ? void 0 : _a.data;
+                if (validationResult.NewValue !== cellDataChangedInfo.newValue) {
+                    cellDataChangedInfo.newValue = validationResult.NewValue;
+                    // this.adaptable.setValue(cellDataChangedInfo, false);
+                    const row = (_a = cellDataChangedInfo.rowNode) === null || _a === void 0 ? void 0 : _a.data;
                     if (!row) {
                         return;
                     }
-                    row[(_b = this.adaptable.api.columnApi.getAgGridColumnFieldForAdaptableColumn(dataChangedInfo.column.columnId)) !== null && _b !== void 0 ? _b : dataChangedInfo.column.columnId] = validationResult.NewValue;
+                    row[(_b = this.adaptable.api.columnApi.getAgGridColumnFieldForAdaptableColumn(cellDataChangedInfo.column.columnId)) !== null && _b !== void 0 ? _b : cellDataChangedInfo.column.columnId] = validationResult.NewValue;
                     this.adaptable.api.gridApi.updateGridData([row]);
                     if (StringExtensions_1.default.IsNotNullOrEmpty(validationResult.ValidationMessage) &&
                         this.adaptable.adaptableOptions.editOptions.displayServerValidationMessages) {

package/src/View/AdaptableView.js

@@ -15,6 +15,7 @@ const License_1 = require("./License");
 const ExportCustomDestinationFormPopups_1 = require("./Export/ExportCustomDestinationFormPopups");
 const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressIndicator");
 const react_toastify_1 = require("react-toastify");
+const WindowPopups_1 = require("./Components/Popups/WindowPopups/WindowPopups");
 class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d;
@@ -29,6 +30,7 @@ class AdaptableView extends React.Component {
             React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().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(ProgressIndicator_1.ProgressIndicator, null)));
     }
 }

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

@@ -17,6 +17,7 @@ exports.renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
         AlertProperties.HighlightCell ? { label: 'Highlight Cell', id: 'highlightCell' } : null,
         AlertProperties.HighlightRow ? { label: 'Highlight Row', id: 'highlightRow' } : null,
         AlertProperties.JumpToCell ? { label: 'Jump To Cell', id: 'jumptocell' } : null,
+        AlertProperties.JumpToRow ? { label: 'Jump To Row', id: 'jumptorow' } : null,
         AlertProperties.ShowInDiv
             ? {
                 label: (React.createElement(React.Fragment, null,
@@ -33,34 +34,40 @@ exports.renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
     return (React.createElement(ValueSelector_1.ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => React.createElement(React.Fragment, null, x.label) }));
 };
 exports.AlertBehaviourWizardSection = (props) => {
-    const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const { AlertProperties = {} } = data;
+    const rowAddedAlert = api.internalApi.isAlertDefinitionForAddedRowChangeEvent(data);
+    const rowRemovedAlert = api.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
+    const cellChangedAlert = !rowAddedAlert && !rowRemovedAlert;
     const onChange = (AlertProperties) => {
         props.onChange(Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), AlertProperties) }));
     };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Behaviour"),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
+            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
                     onChange({
                         PreventEdit,
                     });
                 } },
                 "Prevent Cell Edit",
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)")),
-            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: Boolean(AlertProperties.HighlightCell), onChange: (HighlightCell) => {
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
+            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: Boolean(AlertProperties.HighlightCell), onChange: (HighlightCell) => {
                     onChange({ HighlightCell });
                 } },
                 "Highlight Cell",
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)")),
-            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: Boolean(AlertProperties.HighlightRow), onChange: (HighlightRow) => {
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)"))),
+            rowAddedAlert && (React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: Boolean(AlertProperties.HighlightRow), onChange: (HighlightRow) => {
                     onChange({ HighlightRow });
                 } },
                 "Highlight Row",
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)")),
-            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)"))),
+            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
                     onChange({ JumpToCell });
-                } }, "Jump To Cell"),
+                } }, "Jump To Cell")),
+            rowAddedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
+                    onChange({ JumpToRow });
+                } }, "Jump To Row")),
             React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
                     onChange({ ShowInDiv });
                 } },

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

@@ -12,12 +12,22 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const CheckBox_1 = require("../../../components/CheckBox");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const BUTTON_ACTIONS = ['highlight-cell', 'jump-to-cell', 'undo', 'suspend'];
 exports.AlertButtonsEditor = (props) => {
+    const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
         props.onChange(newButtons);
     };
     const AlertButtons = Helper_1.cloneObject(props.AlertButtons || []) || [];
+    const rowAddedAlert = api.internalApi.isAlertDefinitionForAddedRowChangeEvent(adaptableAlert.alertDefinition);
+    const rowRemovedAlert = api.internalApi.isAlertDefinitionForRemovedRowChangeEvent(adaptableAlert.alertDefinition);
+    const buttonActions = [];
+    if (rowAddedAlert) {
+        buttonActions.push('highlight-row', 'jump-to-row');
+    }
+    if (!rowAddedAlert && !rowRemovedAlert) {
+        buttonActions.push('highlight-cell', 'jump-to-cell', 'undo');
+    }
+    buttonActions.push('suspend');
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
             React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),
@@ -42,7 +52,7 @@ exports.AlertButtonsEditor = (props) => {
                     : button.Action
                 : [];
             // filter out the adaptable standard actions
-            const btnUserFunctions = btnActions.filter((action) => !BUTTON_ACTIONS.includes(action));
+            const btnUserFunctions = btnActions.filter((action) => !buttonActions.includes(action));
             const setVariant = (variant) => {
                 onChange(AlertButtons.map((btn, i) => {
                     if (i === index) {
@@ -115,7 +125,7 @@ exports.AlertButtonsEditor = (props) => {
                                     onChange(AlertButtons.filter((btn) => btn !== button));
                                 } }))),
                     React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") },
-                        BUTTON_ACTIONS.map((actionName) => {
+                        buttonActions.map((actionName) => {
                             return (React.createElement(CheckBox_1.CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => {
                                     let actions = btnActions;
                                     if (!checked) {

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

@@ -45,6 +45,7 @@ exports.AlertPreview = (_a) => {
         const alertForm = alertDefinition.AlertForm || {};
         const Buttons = (((_a = alertForm === null || alertForm === void 0 ? void 0 : alertForm.Buttons) === null || _a === void 0 ? void 0 : _a.length) ? alertForm.Buttons : DEFAULT_BUTTONS).map(mapButtons);
         const result = {
+            alertType: 'generic',
             header: alertDefinition.MessageType,
             message: api.alertApi.getAlertDescription(alertDefinition),
             alertDefinition: Object.assign(Object.assign({}, alertDefinition), { AlertForm: Object.assign(Object.assign({}, alertForm), { Buttons }) }),
@@ -60,6 +61,7 @@ exports.AlertDisplayWizardSection = (props) => {
     const messageType = data.MessageType;
     const messageText = api.alertApi.getAlertDescription(data);
     const adaptableAlert = {
+        alertType: 'generic',
         header: data.MessageType,
         message: '',
         alertDefinition: data,

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

@@ -18,6 +18,7 @@ const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
 const AlertRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/AlertRedux"));
+const AdaptableContext_1 = require("../../AdaptableContext");
 exports.AlertWizard = (props) => {
     const [alertDefinition, setAlertDefinition] = react_1.useState(() => {
         var _a;
@@ -33,6 +34,87 @@ exports.AlertWizard = (props) => {
         alertDefinition.MessageType = (_a = alertDefinition.MessageType) !== null && _a !== void 0 ? _a : GeneralConstants_1.ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
+    const { api } = AdaptableContext_1.useAdaptable();
+    const updateAlertDefinition = (alertDefinition) => {
+        var _a;
+        // we need to adjust the alert actions&behaviours based on the predicate type(row/cell based)
+        const isAddedRowChangeAlert = api.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
+        const isRemovedRowChangeAlert = api.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
+        const isCellChangeAlert = !isAddedRowChangeAlert && !isRemovedRowChangeAlert;
+        // map FormButton Actions
+        const mapValidButtonActions = (alertAction) => {
+            if (isCellChangeAlert) {
+                if (alertAction === 'highlight-row') {
+                    return 'highlight-cell';
+                }
+                if (alertAction === 'jump-to-row') {
+                    return 'jump-to-cell';
+                }
+                return alertAction;
+            }
+            if (isAddedRowChangeAlert) {
+                if (alertAction === 'highlight-cell') {
+                    return 'highlight-row';
+                }
+                if (alertAction === 'jump-to-cell') {
+                    return 'jump-to-row';
+                }
+                if (alertAction === 'jump-to-column' || alertAction === 'undo') {
+                    return null;
+                }
+                return alertAction;
+            }
+            if (isRemovedRowChangeAlert) {
+                if (alertAction === 'highlight-cell' ||
+                    alertAction === 'jump-to-cell' ||
+                    alertAction === 'highlight-row' ||
+                    alertAction === 'jump-to-row' ||
+                    alertAction === 'jump-to-column' ||
+                    alertAction === 'undo') {
+                    return null;
+                }
+                return alertAction;
+            }
+        };
+        if (alertDefinition.AlertForm && typeof alertDefinition.AlertForm !== 'string') {
+            const alertButtons = (_a = alertDefinition.AlertForm) === null || _a === void 0 ? void 0 : _a.Buttons;
+            alertButtons.forEach((alertButton) => {
+                const alertAction = alertButton.Action;
+                if (Array.isArray(alertAction)) {
+                    alertButton.Action = alertAction
+                        .map(mapValidButtonActions)
+                        .filter(Boolean);
+                }
+                else {
+                    alertButton.Action = mapValidButtonActions(alertAction);
+                }
+            });
+            // map Alert Properties(Behaviour)
+            if (isCellChangeAlert) {
+                alertDefinition.AlertProperties.HighlightCell =
+                    alertDefinition.AlertProperties.HighlightRow;
+                delete alertDefinition.AlertProperties.HighlightRow;
+                alertDefinition.AlertProperties.JumpToCell = alertDefinition.AlertProperties.JumpToRow;
+                delete alertDefinition.AlertProperties.JumpToRow;
+            }
+            if (isAddedRowChangeAlert) {
+                alertDefinition.AlertProperties.HighlightRow =
+                    alertDefinition.AlertProperties.HighlightCell;
+                delete alertDefinition.AlertProperties.HighlightCell;
+                alertDefinition.AlertProperties.JumpToRow = alertDefinition.AlertProperties.JumpToCell;
+                delete alertDefinition.AlertProperties.JumpToCell;
+                delete alertDefinition.AlertProperties.PreventEdit;
+            }
+            if (isRemovedRowChangeAlert) {
+                delete alertDefinition.AlertProperties.PreventEdit;
+                delete alertDefinition.AlertProperties.HighlightRow;
+                delete alertDefinition.AlertProperties.JumpToRow;
+                delete alertDefinition.AlertProperties.HighlightCell;
+                delete alertDefinition.AlertProperties.JumpToCell;
+            }
+        }
+        setAlertDefinition(alertDefinition);
+    };
     const dispatch = react_redux_1.useDispatch();
     const handleFinish = () => {
         if (props.data) {
@@ -60,7 +142,7 @@ exports.AlertWizard = (props) => {
                     React.createElement("b", null, "when"),
                     " the Alert should trigger")),
                 isValid: isValidAlertRules_1.isValidAlertRules,
-                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition, module: "alert" }),
+                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: updateAlertDefinition, module: "alert" }),
                 renderSummary: AlertRulesWizardSection_1.renderAlertRulesSummary,
                 title: 'Rule',
             },

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -38,8 +38,7 @@ class CellSummaryViewPanelComponent extends React.Component {
                 onClick: () => this.props.onCellSummaryOperationChange(summaryOperation),
             };
         });
-        const cellSummaryOperationDefinitions = this.props.api.internalApi.getAdaptableOptions()
-            .generalOptions.cellSummaryOperations;
+        const cellSummaryOperationDefinitions = this.props.api.internalApi.getAdaptableOptions().generalOptions.cellSummaryOperations;
         const operationDefinitions = ArrayExtensions_1.default.IsNullOrEmpty(cellSummaryOperationDefinitions)
             ? []
             : cellSummaryOperationDefinitions.map((operationDefinition) => {

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

@@ -177,8 +177,8 @@ class FilterFormComponent extends React.Component {
                         this.changeColumnPredicateInput(newCheckedValue, 0);
                     } })));
         }
-        return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { key: index, type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
+        return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
+            React.createElement(AdaptableInput_1.default, { type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
                     marginBottom: 5,
                     flex: 1,
                     fontSize: 'var( --ab-font-size-2)',

package/src/View/Components/Panels/PanelFooter.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface PanelFooterProps {
+    onCancel: () => void;
+    onAccept: () => void;
+    cancelDisabled?: boolean;
+    acceptDisabled?: boolean;
+    acceptText?: React.ReactElement;
+    cancelText?: React.ReactElement;
+}
+export declare const PanelFooter: React.FunctionComponent<PanelFooterProps>;

package/src/View/Components/Panels/PanelFooter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelFooter = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+exports.PanelFooter = (props) => {
+    var _a, _b;
+    return (React.createElement(rebass_1.Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
+        React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'CANCEL'),
+        React.createElement(rebass_1.Box, { flex: 1 }),
+        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Finish')));
+};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -24,7 +24,12 @@ exports.AdaptablePopup = (props) => {
     const isWindowModal = settingsPanelOptions.popupType === 'window';
     const modalContainer = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.modalContainer;
     let friendlyName = null;
-    let isActionModule = false;
+    /**
+     * This means that it is not rendered in the context of Settings Panel
+     * - no topbar
+     * - no navigation
+     */
+    let isStandalone = false;
     let moduleViewContent = null;
     let activeItem = null;
     let accessLevel = 'Full';
@@ -50,15 +55,15 @@ exports.AdaptablePopup = (props) => {
             .getEntitlementService()
             .getEntitlementAccessLevelForModule(componentModule);
         friendlyName = moduleInfo.FriendlyName;
-        isActionModule =
+        isStandalone =
             moduleInfo &&
-                (DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+                (DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
                     (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
         activeItem = moduleInfo.ModuleName;
         moduleViewContent = (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
     const baseClassName = 'ab-Adaptable-Popup';
-    const className = join_1.default(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const className = join_1.default(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
     return (React.createElement(PopupContext_1.default.Provider, { value: {
             hidePopup: () => {
                 if (props.onHide) {
@@ -66,9 +71,9 @@ exports.AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isActionModule, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
-            !isActionModule && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
+            !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
             React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
-                !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -8,7 +8,7 @@ const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
-const Utilities_1 = require("./Utilities");
+const Utilities_1 = require("../Utilities");
 const WindowDialog = (props) => {
     var _a, _b;
     const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide } = props, dialogProps = tslib_1.__rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -20,7 +20,9 @@ exports.useMenuItems = () => {
                 navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
             }
         }
-        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' && !DefaultSettingsPanel_1.ACTION_POPUPS.includes(item.module) && item.isVisible);
+        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' &&
+            !DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(item.module) &&
+            item.isVisible);
         return navigationItems
             .map((moduleName) => {
             var _a, _b;

package/src/View/Components/Popups/{AdaptablePopup/Utilities.d.ts → Utilities.d.ts}

@@ -13,3 +13,7 @@ export declare const getSettingsPanelSize: () => {
     height: number;
     width: number;
 };
+export declare const getWindowPopupSize: () => {
+    height: number;
+    width: number;
+};

package/src/View/Components/Popups/{AdaptablePopup/Utilities.js → Utilities.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
-const Helper_1 = require("../../../../Utilities/Helpers/Helper");
+exports.getWindowPopupSize = exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
 exports.getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;
@@ -26,3 +26,6 @@ exports.getSettingsPanelSize = () => {
         width: Helper_1.clamp(width * 0.9, 0, 800),
     };
 };
+exports.getWindowPopupSize = () => {
+    return exports.getSettingsPanelSize();
+};

package/src/View/Components/Popups/WindowPopups/WindowPopups.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface WindowPopupChildProps {
+    onDismiss: () => void;
+    popupProps: any;
+}
+export declare const WindowPopups: React.FunctionComponent;

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WindowPopups = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const Utilities_1 = require("../Utilities");
+const windowFactory_1 = require("./windowFactory");
+const NoopComponent = () => {
+    return React.createElement(React.Fragment, null);
+};
+exports.WindowPopups = () => {
+    const [windowModalSettings, setWindowModalSettings] = React.useState({});
+    const dispatch = react_redux_1.useDispatch();
+    const windowItems = react_redux_1.useSelector((state) => state.Popup.WindowPopup.PopupList);
+    return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem, index) => {
+        var _a, _b, _c, _d, _e;
+        const Component = (_a = windowFactory_1.windowFactory[windowItem.Id]) !== null && _a !== void 0 ? _a : NoopComponent;
+        const _f = windowItem.PopupProps, { windowModalProps } = _f, restPopupProps = tslib_1.__rest(_f, ["windowModalProps"]);
+        const handleDismiss = () => {
+            dispatch(PopupRedux_1.PopupWindowHide(windowItem.Id));
+        };
+        const size = (_c = (_b = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : Utilities_1.getWindowPopupSize();
+        const position = (_e = (_d = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _d === void 0 ? void 0 : _d.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size);
+        return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
+                    setWindowModalSettings((settingsMap) => (Object.assign(Object.assign({}, settingsMap), { [windowItem.Id]: settings })));
+                }, handleSelector: '.ab-Window-Modal .ab-Panel__header', size: size, position: position }), fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
+            React.createElement(Component, { onDismiss: handleDismiss, popupProps: restPopupProps })));
+    })));
+};

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { WindowPopupChildProps } from './WindowPopups';
+export declare const WINDOW_LAYOUT_EDITOR = "WINDOW_LAYOUT_EDITOR";
+export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.windowFactory = exports.WINDOW_LAYOUT_EDITOR = void 0;
+const LayoutEditorStandalonePopup_1 = require("../../../Layout/LayoutEditorStandalonePopup");
+exports.WINDOW_LAYOUT_EDITOR = 'WINDOW_LAYOUT_EDITOR';
+exports.windowFactory = {
+    [exports.WINDOW_LAYOUT_EDITOR]: LayoutEditorStandalonePopup_1.LayoutEditorStandalonePopup,
+};

package/src/View/DataChangeHistory/DataChangeHistoryGrid.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
+import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChangedInfo';
 export interface DataChangeHistoryGridProps {
     adaptableContainerId: string;
     agGridContainerId: string;
-    changeHistoryLog: Record<string, DataChangedInfo>;
+    changeHistoryLog: Record<string, CellDataChangedInfo>;
     onUndoChange: (changeKey: string) => void;
 }
 export declare const DataChangeHistoryGrid: (props: DataChangeHistoryGridProps) => JSX.Element;

package/src/View/DataChangeHistory/DataChangeHistoryPopup.d.ts

@@ -1,11 +1,11 @@
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import * as React from 'react';
-import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
+import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChangedInfo';
 import { SystemDataChangeHistoryDisableAction, SystemDataChangeHistoryEnableAction, SystemDataChangeHistoryResumeAction, SystemDataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/SystemRedux';
 import { DataChangeHistoryMode } from '../../PredefinedConfig/SystemState';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHistoryPopupComponent> {
-    changeHistoryLog: Record<string, DataChangedInfo>;
+    changeHistoryLog: Record<string, CellDataChangedInfo>;
     changeHistoryMode: DataChangeHistoryMode;
     activationTime: Date;
     suspensionTime: Date;

package/src/View/Layout/LayoutEditorStandalonePopup.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const LayoutEditorStandalonePopup: React.FunctionComponent<WindowPopupChildProps>;