@adaptabletools/adaptable 10.0.4-canary.5 → 11.0.0-canary.3

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableToolPanelAgGridComponent = exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const react_redux_1 = require("react-redux");
@@ -25,12 +25,12 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
     var _a;
-    const functionsGlyph = React.createElement(icons_1.Icon, { name: 'home' });
-    const colsGlyph = React.createElement(icons_1.Icon, { name: 'list' });
     const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
     const entitlementService = props.api.internalApi.getEntitlementService();
     const moduleService = props.api.internalApi.getModuleService();
-    const toolPanelOptions = props.api.internalApi.getAdaptableOptions().toolPanelOptions;
+    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
+    const toolPanelOptions = adaptableOptions.toolPanelOptions;
+    const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (entitlementService.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
         return (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
@@ -80,19 +80,6 @@ const AdaptableToolPanelComponent = (props) => {
             return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
         }
     });
-    const renderModuleDropdowns = () => {
-        if (!toolPanelOptions.showModulesDropdown) {
-            return;
-        }
-        let menuItems = availableModuleItems.map((menuItem) => {
-            return {
-                onClick: () => props.onClick(menuItem.reduxAction),
-                icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
-                label: menuItem.label,
-            };
-        });
-        return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", items: menuItems, tooltip: "Adaptable Modules", className: "ab-ToolPanel__modules", key: 'dropdown-modules', id: 'dropdown-modules' }, functionsGlyph));
-    };
     const renderToolPanelDropdowns = () => {
         if (!toolPanelOptions.showToolPanelsDropdown) {
             return;
@@ -139,76 +126,55 @@ const AdaptableToolPanelComponent = (props) => {
         });
         return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
     };
-    const renderColumnsDropdown = () => {
-        if (!toolPanelOptions.showColumnsDropdown) {
-            return;
-        }
-        let colItems = [
-            {
-                clickable: false,
-                label: (React.createElement("div", { key: "colTitle" },
-                    ' ',
-                    "\u00A0\u00A0",
-                    React.createElement("b", null, 'Columns'))),
-            },
-        ];
-        props.Columns.forEach((col, index) => {
-            colItems.push({
-                id: col.columnId,
-                onClick: () => {
-                    onSetColumnVisibility(col.columnId);
-                },
-                label: (React.createElement(CheckBox_1.CheckBox, { as: "div", className: "ab-dd-checkbox", variant: "agGrid", my: 0, value: col.columnId, key: col.columnId, checked: col.visible, onMouseDown: preventDefault }, col.friendlyName)),
-            });
-        });
-        return (React.createElement(DropdownButton_1.default, { listMinWidth: 150, variant: "text", tone: "none", collapseOnItemClick: false, items: colItems, columns: ['label'], className: "ab-Toolpanel__columns", key: 'dropdown-cols', id: 'dropdown-cols', tooltip: "Select Columns" }, colsGlyph));
-    };
     const renderToolPanelButtons = () => {
-        var _a;
         const toolPanelButtons = [];
-        // 1. process custom buttons
-        if (props.api.toolPanelApi.getCustomToolPanelButtons().length) {
-            toolPanelButtons.push(props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
-                // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-                // with the next opportunity we should abstract it
-                // the default size of AdapTable SVG ModuleButtons
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
-                const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
-                const toolPanelContext = {
-                    adaptableApi: props.api,
-                    toolPanelState: props.api.toolPanelApi.getToolPanelState(),
-                };
-                let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
-                let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
-                let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
-                if (button.hidden && button.hidden(button, toolPanelContext)) {
-                    return null;
-                }
-                const disabled = button.disabled && button.disabled(button, toolPanelContext);
-                const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
-                const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-                const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-                return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                    button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
-            }));
+        let moduleButtons = props.ModuleButtons;
+        const shouldAddSettingsPanel = settingsPanelOptions.alwaysShowInToolPanel &&
+            !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !moduleButtons.includes('SettingsPanel')) {
+            moduleButtons = ['SettingsPanel', ...moduleButtons];
         }
-        // 2. process module buttons
-        if ((_a = props.ModuleButtons) === null || _a === void 0 ? void 0 : _a.length) {
-            toolPanelButtons.push(props.ModuleButtons.map((x) => {
+        if (moduleButtons === null || moduleButtons === void 0 ? void 0 : moduleButtons.length) {
+            toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton_1.default, { key: menuItem.label, icon: menuItem.icon, variant: "text", className: `ab-ToolPanel__Home__${kebabCase_1.default(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton_1.default, { "data-name": menuItem.module, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase_1.default(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
                 }
             }));
         }
         return toolPanelButtons;
     };
+    const renderCustomToolPanelButtons = () => {
+        return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
+            // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
+            // with the next opportunity we should abstract it
+            // the default size of AdapTable SVG ModuleButtons
+            const defaultIconProps = {
+                style: {
+                    height: 'var(--ab-cmp-simple-button__height)',
+                    width: 'var(--ab-cmp-simple-button__width)',
+                },
+            };
+            const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+            const toolPanelContext = {
+                adaptableApi: props.api,
+                toolPanelState: props.api.toolPanelApi.getToolPanelState(),
+            };
+            let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
+            let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
+            let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
+            if (button.hidden && button.hidden(button, toolPanelContext)) {
+                return null;
+            }
+            const disabled = button.disabled && button.disabled(button, toolPanelContext);
+            const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
+            const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
+            const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
+                button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                buttonLabel));
+        });
+    };
     const onSetColumnVisibility = (name) => {
         let changedColumn = props.api.columnApi.getColumnFromId(name);
         let columns = [].concat(props.Columns);
@@ -239,12 +205,11 @@ const AdaptableToolPanelComponent = (props) => {
     return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
         } },
-        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, style: { width: '100%' } },
-            renderModuleDropdowns(),
+        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
             isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
-            renderColumnsDropdown(),
+            toolPanelButtons,
             isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        ArrayExtensions_1.default.IsNotNullOrEmpty(toolPanelButtons) ? (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, toolPanelButtons)) : null,
+        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
         visibleToolPanelControls));
 };
 function mapStateToProps(state) {

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const uuid_1 = require("../../../components/utils/uuid");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 exports.CustomToolPanelContent = (props) => {
     var _a;
     const { customToolPanel } = props;

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -64,6 +64,14 @@ class ToolPanelPopupComponent extends React.Component {
         const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
             // ensure that the visible state has only valid tool panels
             .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
+        const isToolPanelReadOnly = entitlementService.isModuleReadOnlyEntitlement('ToolPanel');
+        const isModuleCheckboxDisabled = (module) => {
+            if (module === 'SettingsPanel') {
+                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+                    .alwaysShowInDashboard;
+            }
+            return false;
+        };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "ToolPanel Configuration", glyphicon: this.props.moduleInfo.Glyph },
             React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
                 React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
@@ -71,9 +79,9 @@ class ToolPanelPopupComponent extends React.Component {
                 React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
                     React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
                 React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues) })),
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
                 React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;
@@ -81,8 +89,7 @@ class ToolPanelPopupComponent extends React.Component {
         this.setState({ ToolPanelConfigView: ToolPanelConfigView });
     }
     onToolPanelToolPanelsChanged(selectedValues) {
-        const currentSelectedToolPanelDefinitions = this.props
-            .ToolPanelState.ToolPanels;
+        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
         // try to return the pre-existing definition (to maintain the previous collapsed state)
         // otherwise select the new toolPanel with the default 'collapsed' state
         let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {

package/src/View/Components/ValueSelector/index.d.ts

@@ -15,6 +15,8 @@ export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | str
     xSelectedLabel?: (count: number) => ReactNode;
     selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
+    isOptionDisabled?: (option: OPTION_TYPE) => boolean;
+    disabled?: boolean;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): JSX.Element;
 export declare namespace ValueSelector {

package/src/View/Components/ValueSelector/index.js

@@ -38,7 +38,7 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     return { selectedMap: result, optionsMap };
 }
 function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, } = props;
+    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
     const [selectedOnly, doSetSelectedOnly] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
@@ -74,7 +74,7 @@ function ValueSelector(props) {
                                 selectedMap.delete(identifier);
                             }
                             notifyChange();
-                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, onChange: (checked) => {
+                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
                             if (checked) {
                                 selectedMap.set(identifier, option);
                             }
@@ -91,13 +91,13 @@ function ValueSelector(props) {
     };
     const renderSelectionSection = () => {
         const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2, style: { whiteSpace: 'nowrap', flex: 'none' } }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
-            !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
+            !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     options.forEach((option) => {
                         selectedMap.set(toIdentifier(option), option);
                     });
                     notifyChange();
                 } }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
+            React.createElement(SimpleButton_1.default, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     selectedMap.clear();
                     notifyChange();
                 } }, clearSelectionLabel !== null && clearSelectionLabel !== void 0 ? clearSelectionLabel : 'Clear selection.'),
@@ -106,7 +106,7 @@ function ValueSelector(props) {
                 : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
         return (React.createElement(rebass_1.Box, { mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
             selectionBox,
-            React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange })));
+            React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange, readOnly: disabled })));
     };
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, className: "ab-ValueSelector", style: {
             overflow: 'hidden',

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -18,14 +18,14 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
 exports.ConditionalStyleWizard = (props) => {
+    var _a;
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
     const [conditionalStyle, setConditionalStyle] = react_1.useState(() => {
-        var _a;
+        var _a, _b, _c;
         const DEFAULT_RULE = {
             BooleanExpression: '',
         };
-        const conditionalStyle = props.data
-            ? Helper_1.cloneObject(props.data)
-            : ObjectFactory_1.default.CreateEmptyConditionalStyle();
+        const conditionalStyle = data ? Helper_1.cloneObject(data) : ObjectFactory_1.default.CreateEmptyConditionalStyle();
         conditionalStyle.Scope = (_a = conditionalStyle.Scope) !== null && _a !== void 0 ? _a : { All: true };
         if (!conditionalStyle.Rule) {
             conditionalStyle.Rule = DEFAULT_RULE;
@@ -33,11 +33,16 @@ exports.ConditionalStyleWizard = (props) => {
         if (!conditionalStyle.Rule.Predicate && conditionalStyle.Rule.BooleanExpression == undefined) {
             conditionalStyle.Rule.BooleanExpression = '';
         }
+        if (((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'New' && ((_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.column)) {
+            conditionalStyle.Scope = {
+                ColumnIds: [props.popupParams.column.columnId],
+            };
+        }
         return conditionalStyle;
     });
     const dispatch = react_redux_1.useDispatch();
     const handleFinish = () => {
-        if (props.data) {
+        if (data) {
             dispatch(ConditionalStyleRedux.ConditionalStyleEdit(conditionalStyle));
         }
         else {

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -13,14 +13,26 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const CustomSortRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CustomSortRedux"));
 exports.CustomSortWizard = (props) => {
+    var _a, _b;
+    let data = props.data;
+    const allCustomSorts = react_redux_1.useSelector((state) => { var _a; return (_a = state.CustomSort) === null || _a === void 0 ? void 0 : _a.CustomSorts; });
+    if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
+        data = allCustomSorts.find((x) => { var _a; return x.ColumnId == ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column.columnId); });
+    }
     const [customSort, setCustomSort] = react_1.useState(() => {
-        return props.data
-            ? Helper_1.cloneObject(props.data)
-            : ObjectFactory_1.default.CreateEmptyCustomSort();
+        var _a, _b;
+        if (data) {
+            return Helper_1.cloneObject(data);
+        }
+        const newData = ObjectFactory_1.default.CreateEmptyCustomSort();
+        if ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) {
+            newData.ColumnId = (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column.columnId;
+        }
+        return newData;
     });
     const dispatch = react_redux_1.useDispatch();
     const handleFinish = () => {
-        if (props.data) {
+        if (data) {
             dispatch(CustomSortRedux.CustomSortEdit(customSort));
         }
         else {

package/src/View/Dashboard/Dashboard.js

@@ -13,20 +13,16 @@ const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const rebass_1 = require("rebass");
 const Dashboard_1 = require("../../components/Dashboard");
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
-const icons_1 = require("../../components/icons");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFormControlTextClear");
 const useQuickSearchDebounced_1 = require("../QuickSearch/useQuickSearchDebounced");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const DefaultSettingsPanel_1 = require("../../Utilities/Defaults/DefaultSettingsPanel");
 const ApplicationIcon_1 = require("../../components/ApplicationIcon");
 const DashboardComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced_1.useQuickSearchDebounced(props);
-    const dispatch = react_redux_1.useDispatch();
     const dashboardAccessLevel = props.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
@@ -73,6 +69,13 @@ const DashboardComponent = (props) => {
     const renderModuleButtons = () => {
         let shortcutsArray = props.DashboardState.ModuleButtons;
         let shortcuts = null;
+        const alwaysShowInDashboard = props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+            .alwaysShowInDashboard;
+        const shouldAddSettingsPanel = alwaysShowInDashboard &&
+            !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
+            shortcutsArray.push('SettingsPanel');
+        }
         if (shortcutsArray) {
             shortcuts = shortcutsArray.map((x, index) => {
                 var _a, _b, _c;
@@ -87,7 +90,8 @@ const DashboardComponent = (props) => {
     };
     const renderDashboardButtons = () => {
         var _a;
-        let dashboardButtonsArray = (_a = props.api.dashboardApi.getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
+        let dashboardButtonsArray = (_a = props.api.dashboardApi
+            .getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
         let customDashboardButtons = null;
         if (dashboardButtonsArray) {
             customDashboardButtons = dashboardButtonsArray.map((button) => {
@@ -122,34 +126,8 @@ const DashboardComponent = (props) => {
         }
         return customDashboardButtons;
     };
-    const renderDashboardIcon = (icon) => {
-        return React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: icon });
-    };
-    const actionModuleMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; })
-        .filter((menuItem) => menuItem.module !== 'General' && DefaultSettingsPanel_1.ACTION_POPUPS.includes(menuItem.module))
-        .map((menuItem) => ({
-        disabled: props.accessLevel == 'Hidden',
-        onClick: () => props.dispatch(menuItem.reduxAction),
-        icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
-        label: menuItem.label,
-    }));
-    const renderModulesDropdown = () => {
-        let moduleService = props.api.internalApi.getModuleService();
-        let moduleInfo = moduleService.getModuleInfoByModule(ModuleConstants.DashboardModuleId);
-        // JW 23/1/22: we should check the SettingsPanel entitlement here...
-        const handleOpenPopup = () => {
-            dispatch(PopupRedux.PopupShowScreen());
-        };
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { className: "ab-SettingsButton", onClick: handleOpenPopup, variant: "text", tone: "none", icon: "settings" }),
-            React.createElement(DropdownButton_1.default, { icon: "edit", variant: "text", tone: "none", items: actionModuleMenuItems, className: "ab-DashboardToolbar__Home__functions", key: 'dropdown-functions', id: 'dropdown-functions', showToggleIcon: false })));
-    };
     const renderQuickSearch = () => {
-        let moduleInfo = props.api.internalApi
-            .getModuleService()
-            .getModuleInfoByModule('QuickSearch');
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { icon: "quick-search", variant: "text", tone: "none", onClick: props.onShowQuickSearchPopup, tooltip: moduleInfo.FriendlyName, mr: 2 }),
+        return (React.createElement(rebass_1.Box, { ml: 2 },
             React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.setToolbarTitle();
@@ -173,10 +151,10 @@ const DashboardComponent = (props) => {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
         }, left: React.createElement(React.Fragment, null,
-            renderDashboardIcon(props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon),
-            dashboardOptions.showSettingsPanel && renderModulesDropdown()), right: React.createElement(React.Fragment, null,
+            React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon }),
+            dashboardOptions.buttonsLocation === 'left' && renderModuleButtons()), right: React.createElement(React.Fragment, null,
             renderDashboardButtons(),
-            renderModuleButtons(),
+            dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
             shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
         props.DashboardState.Tabs.map((tab, index) => (React.createElement(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));
 };

package/src/View/Dashboard/DashboardPopup.js

@@ -58,26 +58,34 @@ class DashboardPopupComponent extends React.Component {
         });
         const allModuleButtons = this.props.GridState.ModuleDropdownMenuItems.map((x) => x.module);
         const baseClassName = 'ab-Dashboard-Popup';
-        // const isDisabled = this.props.Entitlements
         const dashboardAccessLevel = this.props.api.internalApi
             .getEntitlementService()
             .getEntitlementAccessLevelForModule('Dashboard');
-        const areDashboardSettingsEnabled = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
+        const areDashboardSettingsVisible = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
+        const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
+        const isModuleCheckboxDisabled = (module) => {
+            if (module === 'SettingsPanel') {
+                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+                    .alwaysShowInDashboard;
+            }
+            return false;
+        };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph },
-            areDashboardSettingsEnabled && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
-                React.createElement(rebass_1.Flex, null,
-                    React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
-                    ' ',
-                    this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
-                    ' ',
-                    React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
-            React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
-                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select", style: { borderBottom: '1px solid var(--ab-color-primary)' } },
-                    React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
-                    React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { overflow: 'auto', flex: 1 }, padding: 2 },
-                    this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                    this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))));
+            React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
+                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
+                    React.createElement(rebass_1.Flex, null,
+                        React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+                        ' ',
+                        this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                        ' ',
+                        React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
+                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select" },
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
+                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -64,7 +64,7 @@ exports.DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.internalApi.getAdaptableOptions().agGridOptions.api.applyTransactionAsync({
+        adaptableApi.internalApi.getAdaptableOptions().gridOptions.api.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });
@@ -81,7 +81,8 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         changeKey && onUndoChange(changeKey);
     };
     const options = {
-        agGridOptions: Object.assign(Object.assign({}, gridOptions), { modules: [...all_modules_1.AllCommunityModules] }),
+        gridOptions: gridOptions,
+        modules: [...all_modules_1.AllCommunityModules],
         primaryKey: 'primaryKey',
         licenseKey: mainAdaptableOptions.licenseKey,
         userName: `${mainAdaptableOptions.userName}`,

package/src/View/Export/Wizard/NewReportWizard.js

@@ -14,13 +14,23 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const ExportRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ExportRedux"));
 exports.NewReportWizard = (props) => {
+    var _a, _b;
+    const isEdit = ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) ? props.popupParams.action === 'Edit'
+        : Boolean(props.data);
+    const currentReport = react_redux_1.useSelector((state) => {
+        if (!isEdit) {
+            return;
+        }
+        return state.Export.Reports.find((report) => report.Name === state.Export.CurrentReport);
+    });
+    const data = (_b = props.data) !== null && _b !== void 0 ? _b : currentReport;
     const [report, setReport] = react_1.useState(() => {
-        return props.data ? Helper_1.cloneObject(props.data) : ObjectFactory_1.default.CreateEmptyReport();
+        return data ? Helper_1.cloneObject(data) : ObjectFactory_1.default.CreateEmptyReport();
     });
     const dispatch = react_redux_1.useDispatch();
     const handleFinish = () => {
-        if (props.data) {
-            dispatch(ExportRedux.ReportDelete(report));
+        if (isEdit) {
+            dispatch(ExportRedux.ReportEdit(report));
         }
         else {
             dispatch(ExportRedux.ReportAdd(report));

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -4,10 +4,6 @@ exports.FlashingAlertRulesWizardSection = exports.renderFlashingAlertRulesSummar
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
-const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const BaseAlertRulesWizardSection_1 = require("../../Alert/Wizard/BaseAlertRulesWizardSection");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
@@ -32,26 +28,21 @@ exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
         } }));
 };
 exports.FlashingAlertRulesWizardSection = (props) => {
-    var _a;
-    const { data: flashingAlert, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
-    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange, wholeRowScope: false },
-        React.createElement(rebass_1.Text, { fontSize: 2, mb: 2, pl: 2, pt: 2 }, "Flash target"),
-        React.createElement(Tabs_1.Tabs, { value: FlashTarget !== null && FlashTarget !== void 0 ? FlashTarget : 'row', pl: 2, onValueChange: (FlashTarget) => {
-                props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashTarget }));
-            } },
-            React.createElement(Tabs_1.Tabs.Tab, { value: "row" },
-                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: FlashTarget === 'row' }, "Row")),
-            React.createElement(Tabs_1.Tabs.Content, { value: "row" },
-                React.createElement(rebass_1.Text, { fontSize: 2 },
-                    "Flash the whole ",
-                    React.createElement("b", null, "row"))),
-            React.createElement(Tabs_1.Tabs.Tab, { value: "cell" },
-                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: FlashTarget === 'cell' }, "Cell")),
-            React.createElement(Tabs_1.Tabs.Content, { value: "cell" },
-                React.createElement(rebass_1.Text, { fontSize: 2 },
-                    "Flash the updated ",
-                    React.createElement("b", null, "cell"),
-                    " only"))),
-        React.createElement(rebass_1.Text, { mt: 3, fontSize: 2, pl: 2 }, "Flash rules")));
+    const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const predicateDefs = api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
+            selectPredicate: 'Select an Flashing Cell Rule - to be applied when data changes',
+            useBooleanQuery: (React.createElement(React.Fragment, null,
+                "Use an BooleanQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+            useObservableQuery: (React.createElement(React.Fragment, null,
+                "Use an ObservableQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+            useAggregationQuery: (React.createElement(React.Fragment, null,
+                "Use an AggregationQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'Whole Row' - so any data change may be evaluated in a complex AggregationExpression")),
+        } }));
 };