@adaptabletools/adaptable 11.0.8 → 11.1.1-canary.0

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

@@ -59,7 +59,7 @@ class CellSummaryViewPanelComponent extends React.Component {
             if (operationValue == undefined) {
                 return;
             }
-            return this.props.viewType === 'ToolPanel' ? (React.createElement(rebass_1.Flex, { className: `ab-${elementType}__CellSummary__value`, style: { borderRadius: 'var(--ab__border-radius)' }, marginRight: 2, padding: 2, color: 'var( --ab-color-text-on-info)', backgroundColor: 'var(--ab-color-info)', fontSize: 'var( --ab-font-size-2)' }, operationValue)) : (React.createElement(rebass_1.Flex, { flex: 1, marginRight: 2, justifyContent: "center", className: `ab-${elementType}__CellSummary__value`, color: 'var(--ab-color-text-on-primary)' }, operationValue));
+            return this.props.viewType === 'ToolPanel' ? (React.createElement(rebass_1.Flex, { className: `ab-${elementType}__CellSummary__value`, style: { borderRadius: 'var(--ab__border-radius)' }, marginRight: 2, padding: 2, color: 'var( --ab-color-text-on-info)', backgroundColor: 'var(--ab-color-info)', fontSize: 'var( --ab-font-size-2)' }, operationValue)) : (React.createElement(rebass_1.Flex, { flex: 1, marginRight: 2, marginLeft: 1, justifyContent: "center", className: `ab-${elementType}__CellSummary__value`, color: 'var(--ab-color-text-on-primary)' }, operationValue));
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },

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/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>;

package/src/View/Layout/LayoutEditorStandalonePopup.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutEditorStandalonePopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const uuid_1 = require("../../components/utils/uuid");
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const PanelFooter_1 = require("../Components/Panels/PanelFooter");
+const PanelWithImage_1 = require("../Components/Panels/PanelWithImage");
+const LayoutEditorWizard_1 = require("./Wizard/LayoutEditorWizard");
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+exports.LayoutEditorStandalonePopup = (props) => {
+    /**
+     * This is here because the old code mutates the object.
+     * And we need a way to trigger an update/render.
+     *
+     * I've left the mutation because we might want to use the old PopupWizard.
+     * And it currently, the refactoring of the editor out of the scope of this feature.
+     */
+    const [stateLayout, setStateLayout] = React.useState(null);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const layoutModule = adaptable.ModuleService.getModuleById('Layout');
+    const layouts = react_redux_1.useSelector((state) => state.Layout.Layouts);
+    const layoutData = React.useMemo(() => {
+        var _a;
+        let layoutData = null;
+        const layoutToCloneOrEdit = (_a = props === null || props === void 0 ? void 0 : props.popupProps) === null || _a === void 0 ? void 0 : _a.layout;
+        switch (props.popupProps.action) {
+            case 'Clone':
+                layoutData = Helper_1.default.cloneObject(layoutToCloneOrEdit);
+                layoutData.Name = '';
+                layoutData.IsReadOnly = false;
+                layoutData.Uuid = uuid_1.createUuid();
+                break;
+            case 'New':
+                layoutData = ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+                break;
+            case 'Edit':
+                layoutData = Helper_1.default.cloneObject(layoutToCloneOrEdit);
+                break;
+        }
+        return layoutData;
+    }, []);
+    const handleCancel = React.useCallback(() => {
+        props.onDismiss();
+    }, []);
+    const handleAccept = React.useCallback(() => {
+        var _a;
+        switch ((_a = props === null || props === void 0 ? void 0 : props.popupProps) === null || _a === void 0 ? void 0 : _a.action) {
+            case 'Edit':
+                const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+                dispatch(LayoutRedux.LayoutSave(layoutData));
+                if (currentLayout.Uuid === layoutData.Uuid) {
+                    dispatch(LayoutRedux.LayoutSelect(layoutData.Name));
+                }
+                break;
+            case 'Clone':
+                dispatch(LayoutRedux.LayoutAdd(layoutData));
+                dispatch(LayoutRedux.LayoutSelect(layoutData.Name));
+                break;
+            case 'New':
+                dispatch(LayoutRedux.LayoutAdd(layoutData));
+                dispatch(LayoutRedux.LayoutSelect(layoutData.Name));
+        }
+        props.onDismiss();
+    }, []);
+    const finishDisabled = !layoutData.Name;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PanelWithImage_1.PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: layoutModule.moduleInfo.Glyph, header: layoutModule.moduleInfo.FriendlyName, infoLink: layoutModule.moduleInfo.HelpPage, infoLinkDisabled: false, variant: "primary" },
+            React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { data: layoutData, api: adaptable.api, Layouts: layouts, moduleInfo: layoutModule.moduleInfo, onLayoutChange: setStateLayout, updateGoBackState: () => null })),
+        React.createElement(PanelFooter_1.PanelFooter, { acceptDisabled: finishDisabled, onAccept: handleAccept, onCancel: handleCancel })));
+};

package/src/View/Layout/LayoutPopup.js

@@ -10,7 +10,6 @@ const TeamSharingRedux = tslib_1.__importStar(require("../../Redux/ActionsReduce
 const LayoutWizard_1 = require("./Wizard/LayoutWizard");
 const LayoutEntityRow_1 = require("./LayoutEntityRow");
 const Helper_1 = require("../../Utilities/Helpers/Helper");
-const ObjectFactory_1 = require("../../Utilities/ObjectFactory");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const AdaptableObjectCollection_1 = require("../Components/AdaptableObjectCollection");
@@ -18,7 +17,6 @@ const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableC
 const UIHelper_1 = require("../UIHelper");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
-const uuid_1 = require("../../components/utils/uuid");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 class LayoutPopupComponent extends React.Component {
     constructor(props) {
@@ -82,32 +80,13 @@ class LayoutPopupComponent extends React.Component {
             this.state.editedAdaptableObject != null && (React.createElement(LayoutWizard_1.LayoutWizard, { moduleInfo: this.props.moduleInfo, editedAdaptableObject: this.state.editedAdaptableObject, configEntities: this.props.Layouts, modalContainer: this.props.modalContainer, ColumnSorts: this.props.api.gridApi.getColumnSorts(), api: this.props.api, wizardStartIndex: this.state.wizardStartIndex, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: () => this.onFinishWizard(), canFinishWizard: () => this.canFinishWizard() }))));
     }
     onNew() {
-        this.setState({
-            editedAdaptableObject: ObjectFactory_1.ObjectFactory.CreateEmptyLayout({
-                Name: '',
-            }),
-            wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
-        });
+        this.props.api.layoutApi.showLayoutEditor(null, 'New');
     }
     onEdit(layout) {
-        const clonedObject = Helper_1.Helper.cloneObject(layout);
-        this.setState({
-            editedAdaptableObject: clonedObject,
-            wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.Edit,
-        });
+        this.props.api.layoutApi.showLayoutEditor(layout.Name, 'Edit');
     }
     onClone(layout) {
-        let clonedObject = Helper_1.Helper.cloneObject(layout);
-        clonedObject.Name = '';
-        clonedObject.IsReadOnly = false;
-        clonedObject.Uuid = uuid_1.createUuid();
-        this.setState({
-            editedAdaptableObject: clonedObject,
-            wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
-        });
+        this.props.api.layoutApi.showLayoutEditor(layout.Name, 'Clone');
     }
     onCloseWizard() {
         this.props.onClearPopupParams();

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

@@ -1,14 +1,11 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { Layout } from '../../PredefinedConfig/LayoutState';
-import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as React from 'react';
+export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;
     onSaveLayout: (layout: Layout) => void;
-    onNewLayout: (popup: string) => PopupRedux.PopupShowScreenAction;
-    onCloneLayout: (popup: string) => PopupRedux.PopupShowScreenAction;
-    onEditLayout: (popup: string) => PopupRedux.PopupShowScreenAction;
     Layouts: Layout[];
     CurrentDraftLayout: Layout;
     CanSave: boolean;

package/src/View/Layout/LayoutViewPanel.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutViewPanelControl = void 0;
+exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
-const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const React = tslib_1.__importStar(require("react"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
@@ -14,9 +13,9 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const react_redux_1 = require("react-redux");
 const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
+exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
         let layoutEntity = this.props.Layouts.find((x) => x.Name == this.props.CurrentLayoutName || x.Uuid == this.props.CurrentLayoutName);
@@ -34,9 +33,9 @@ class LayoutViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], style: { width: '100%', fontSize: 'small' }, className: `ab-${elementType}__Layout__select`, items: availableLayoutOptions, disabled: availableLayoutOptions.length == 0 }, layoutEntity ? layoutEntity.Name : null)),
             React.createElement(rebass_1.Flex, { flexDirection: "row", className: join_1.default(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditLayout(this.props.moduleInfo.Popup), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
-                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.onCloneLayout(this.props.moduleInfo.Popup), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.onNewLayout(this.props.moduleInfo.Popup), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
+                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name, 'Clone'), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
+                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.api.layoutApi.showLayoutEditor(null, 'New'), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
                 React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Layout", disabled: this.props.Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: "Are you sure you want to delete '" + this.props.CurrentLayoutName + "'?", ConfirmationTitle: 'Delete Layout', accessLevel: accessLevel }))));
     }
     onSaveLayout() {
@@ -66,18 +65,6 @@ function mapDispatchToProps(dispatch) {
             dispatch(LayoutRedux.LayoutSave(layout));
             dispatch(LayoutRedux.LayoutUpdateCurrentDraft(null));
         },
-        onNewLayout: (popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.LayoutModuleId, popup, {
-            action: 'New',
-            source: 'Toolbar',
-        })),
-        onCloneLayout: (popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.LayoutModuleId, popup, {
-            action: 'Clone',
-            source: 'Toolbar',
-        })),
-        onEditLayout: (popup) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.LayoutModuleId, popup, {
-            action: 'Edit',
-            source: 'Toolbar',
-        })),
     };
 }
 exports.LayoutViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);

package/src/View/Layout/Wizard/LayoutEditor/ColumnLabels.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AdaptableColumnProperties } from '../../../../PredefinedConfig/Common/AdaptableColumn';
+export declare const ColumnLabels: (props: AdaptableColumnProperties & {
+    children?: React.ReactNode;
+    labels?: Record<string, React.ReactNode>;
+    flexDirection?: 'row' | 'column';
+    showBoth?: boolean;
+    showTitle?: boolean;
+}) => JSX.Element;

package/src/View/Layout/Wizard/LayoutEditor/ColumnLabels.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnLabels = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+exports.ColumnLabels = (props) => {
+    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
+    const labelNames = [
+        'Aggregatable',
+        'Filterable',
+        'Groupable',
+        'Moveable',
+        'Pivotable',
+        'Sortable',
+    ];
+    const labels = labelNames.map((name) => columnProperties[name.toLocaleLowerCase()] ? name.charAt(0) : '');
+    const flexProps = {
+        [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
+    };
+    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
+        showTitle ? React.createElement(rebass_1.Text, { mr: 2 }, "Behaviours:") : null,
+        labels.map((l, index) => {
+            const enabled = !!l;
+            const labelName = labelNames[index];
+            const letter = labelName.charAt(0);
+            const renderBox = (enabled, key) => {
+                return (React.createElement(rebass_1.Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
+                        overflow: 'hidden',
+                        cursor: 'auto',
+                        position: 'relative',
+                        fontWeight: 600,
+                        lineHeight: 0,
+                        border: `1px solid var(--ab-color-${enabled ? 'accent' : 'inputborder'})`,
+                        borderRadius: 'var(--ab__border-radius)',
+                        opacity: enabled ? 1 : 0.5,
+                    }, key: `${letter}${key ? key : ''}` },
+                    !enabled ? (React.createElement("div", { style: {
+                            background: 'currentColor',
+                            position: 'absolute',
+                            bottom: '-100%',
+                            right: 0,
+                            width: 2,
+                            height: '200%',
+                            transform: 'skewX(45deg)',
+                        } })) : null,
+                    letter));
+            };
+            return (React.createElement(rebass_1.Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
+                renderBox(enabled),
+                showBoth ? renderBox(!enabled, 'label') : null,
+                labelsProp ? (React.createElement(rebass_1.Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
+        }),
+        children));
+};