@adaptabletools/adaptable 11.0.0-canary.2 → 11.0.0-canary.3

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickFilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
@@ -16,7 +16,7 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
-const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 class QuickFilterFormComponent extends React.Component {

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

@@ -30,5 +30,5 @@ exports.ModuleValueSelector = (props) => {
     const sortedOptions = react_1.useMemo(() => {
         return sortWithOrder_1.sortWithOrderArray(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isDisabled: props.isDisabled })));
+    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
 };

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

@@ -72,8 +72,9 @@ exports.AdaptablePopup = (props) => {
     const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
     const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
     // action popups + non-primary module popups
-    const isActionModule = DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
-        (props.componentName && props.componentName !== moduleInfo.Popup);
+    const isActionModule = moduleInfo &&
+        (DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+            (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
     const baseClassName = 'ab-Adaptable-Popup';
     const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.popupType) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
     const isWindowModal = settingsPanelOptions.popupType === 'window';
@@ -84,7 +85,7 @@ exports.AdaptablePopup = (props) => {
     else if (isActionModule) {
         style = { maxWidth: 800, maxHeight: 450 };
     }
-    const settingsKey = isActionModule ? `action-${moduleInfo.FriendlyName}` : 'settings';
+    const settingsKey = isActionModule ? `action-${moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.FriendlyName}` : 'settings';
     let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsKey]; });
     if (!popupSettings) {
         const size = isActionModule

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { AccessLevel, AdaptableApi } from '../../../../../types';
 import { IModule } from '../../../../Strategy/Interface/IModule';
-export interface AdaptablePopupModuleViewProps {
+import { ModuleParams, ModuleViewPopupProps } from '../../SharedProps/ModuleViewPopupProps';
+export interface AdaptablePopupModuleViewProps extends ModuleViewPopupProps<typeof AdaptablePopupModuleView> {
     module: IModule;
     api: AdaptableApi;
     accessLevel: AccessLevel;
+    popupParams?: ModuleParams;
 }
 export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;

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

@@ -11,18 +11,27 @@ const AdaptableObjectList_1 = require("../../AdaptableObjectList");
 const ButtonNew_1 = require("../../Buttons/ButtonNew");
 const PopupPanel_1 = require("./PopupPanel");
 exports.AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     /**
      * This triggers an render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     react_redux_1.useSelector((state) => state);
-    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
+        var _a, _b;
+        return ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit';
+    });
+    React.useEffect(() => {
+        var _a, _b;
+        if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {
+            setIsWizardOpen(true);
+        }
+    }, [(_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action]);
     const [abObjectType, setAbObjectType] = React.useState(null);
     const moduleInfo = props.module.moduleInfo;
-    const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
+    const items = (_b = props.module) === null || _b === void 0 ? void 0 : _b.toViewAll();
     const moduleViewProperties = props.module.getViewProperties();
-    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
+    const EditWizard = (_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(moduleViewProperties);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -34,7 +43,7 @@ exports.AdaptablePopupModuleView = (props) => {
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _c === void 0 ? void 0 : _c.length) {
+    if ((_d = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _d === void 0 ? void 0 : _d.length) {
         const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjctType) => {
             var _a;
             return {
@@ -58,10 +67,14 @@ exports.AdaptablePopupModuleView = (props) => {
             } }));
     }
     const handleWizardClose = () => {
+        var _a;
         setAbObjectType(null);
         setIsWizardOpen(false);
+        if (['Toolbar', 'ContextMenu', 'ColumnMenu'].includes((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.source)) {
+            props.onClosePopup();
+        }
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton },
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
-        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };

package/src/View/Components/SharedProps/ModuleViewPopupProps.d.ts

@@ -4,7 +4,7 @@ import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColum
 import { ModuleInfo } from '../../../Strategy/Interface/IModule';
 import { AdaptableObject } from '../../../types';
 export interface ModuleViewPopupProps<View> extends BaseProps<View> {
-    popupParams: ModuleParams;
+    popupParams?: ModuleParams;
     onClearPopupParams: () => PopupRedux.PopupClearParamAction;
     teamSharingActivated: boolean;
     onClosePopup: () => void;

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");

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,7 @@ 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
@@ -78,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:`, isDisabled: isModuleCheckboxDisabled, 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;
@@ -88,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,7 +15,8 @@ export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | str
     xSelectedLabel?: (count: number) => ReactNode;
     selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
-    isDisabled?: (option: OPTION_TYPE) => boolean;
+    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, isDisabled, } = 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, disabled: isDisabled ? isDisabled(option) : false, 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,7 +13,7 @@ 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 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"));
@@ -90,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) => {

package/src/View/Dashboard/DashboardPopup.js

@@ -58,11 +58,11 @@ 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
@@ -72,7 +72,7 @@ class DashboardPopupComponent extends React.Component {
         };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph },
             React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsEnabled && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
+                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"),
                         ' ',
@@ -84,8 +84,8 @@ class DashboardPopupComponent extends React.Component {
                         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, { 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', isDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
+                        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/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, module: "flashingCell" },
-        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: 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")),
+        } }));
 };

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

@@ -3,7 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
+const rebass_1 = require("rebass");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.FlashingAlertScopeWizardSection = (props) => {
-    return React.createElement(BaseAlertScopeWizardSection_1.BaseAlertScopeWizardSection, Object.assign({}, props));
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+        React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
+                columnScope: 'Changes in selected columns will trigger an Flashing Cell',
+            }, scope: data.Scope, updateScope: (Scope) => {
+                const newData = Object.assign(Object.assign({}, data), { Scope });
+                if (newData.Rule.Predicate) {
+                    // when scope is changed, reset the rule to predicate of any
+                    // if it was set to a predicate before
+                    newData.Rule = {
+                        Predicate: { PredicateId: 'Any' },
+                    };
+                }
+                props.onChange(newData);
+            } })));
 };

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

@@ -12,6 +12,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
 exports.renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
@@ -21,7 +22,7 @@ exports.renderFlashingAlertSettingsSummary = (flashingAlert) => {
             "milliseconds")))));
 };
 exports.FlashingAlertSettingsWizardSection = (props) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     let { data: flashingCell } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     flashingCell = flashingCell !== null && flashingCell !== void 0 ? flashingCell : props.flashingCell;
     const setDuration = (FlashDuration) => {
@@ -40,8 +41,21 @@ exports.FlashingAlertSettingsWizardSection = (props) => {
     const handleTypeChange = (type) => {
         setDuration(type === 'number' ? numberDuration.current : 'always');
     };
-    const handleTargetChange = (type) => {
-        props.onChange(Object.assign(Object.assign({}, flashingCell), { FlashTarget: type }));
+    const handleTargetChange = (type, checked) => {
+        var _a;
+        let FlashTarget = (_a = flashingCell.FlashTarget) !== null && _a !== void 0 ? _a : [];
+        if (typeof FlashTarget === 'string') {
+            FlashTarget = [FlashTarget];
+        }
+        if (Array.isArray(FlashTarget)) {
+            if (checked) {
+                FlashTarget = [...FlashTarget, type];
+            }
+            else {
+                FlashTarget = FlashTarget.filter((target) => type != target);
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, flashingCell), { FlashTarget }));
     };
     return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
@@ -61,6 +75,7 @@ exports.FlashingAlertSettingsWizardSection = (props) => {
                             React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
                         duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
-                        React.createElement(Radio_1.default, { onChange: () => handleTargetChange('cell'), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) == 'cell', tabIndex: -1 }, "Cell"),
-                        React.createElement(Radio_1.default, { onChange: () => handleTargetChange('row'), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) == 'row', tabIndex: -1 }, "Row")))))));
+                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' || ((_c = (_b = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'cell')), tabIndex: -1 }, "Cell"),
+                        React.createElement(CheckBox_1.CheckBox, { mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' || ((_e = (_d = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _d === void 0 ? void 0 : _d.includes) === null || _e === void 0 ? void 0 : _e.call(_d, 'row')), tabIndex: -1 }, "Row"),
+                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' || ((_g = (_f = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _f === void 0 ? void 0 : _f.includes) === null || _g === void 0 ? void 0 : _g.call(_f, 'aggFuncCell')), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };

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

@@ -69,7 +69,7 @@ exports.FlashingCellWizard = (props) => {
                 isValid: isValidFlashingCellRules_1.isValidFlashingCellRules,
                 render: () => React.createElement(FlashingCellRulesWizardSection_1.FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
                 renderSummary: FlashingCellRulesWizardSection_1.renderFlashingAlertRulesSummary,
-                title: 'Condition',
+                title: 'Rule',
             },
             {
                 details: 'Select the Duration of the Flash',

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -4,8 +4,8 @@ exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope =
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const uniq_1 = tslib_1.__importDefault(require("lodash-es/uniq"));
-const clamp_1 = tslib_1.__importDefault(require("lodash-es/clamp"));
+const uniq_1 = tslib_1.__importDefault(require("lodash/uniq"));
+const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -70,15 +70,20 @@ const adjustFormatColumn = (formatColumn, api) => {
     return formatColumn;
 };
 function FormatColumnWizard(props) {
+    var _a;
     const { api } = AdaptableContext_1.useAdaptable();
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
     const [formatColumn, doSetFormatColumn] = react_1.useState(() => {
-        var _a;
-        let formatColumn = props.data
-            ? Helper_1.cloneObject(props.data)
-            : ObjectFactory_1.default.CreateEmptyFormatColumn();
+        var _a, _b, _c, _d;
+        let formatColumn = data ? Helper_1.cloneObject(data) : ObjectFactory_1.default.CreateEmptyFormatColumn();
         formatColumn.Scope = (_a = formatColumn.Scope) !== null && _a !== void 0 ? _a : {
             ColumnIds: [],
         };
+        if (((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'New' && ((_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.column)) {
+            formatColumn.Scope = {
+                ColumnIds: [(_d = props.popupParams) === null || _d === void 0 ? void 0 : _d.column.columnId],
+            };
+        }
         formatColumn = adjustFormatColumn(formatColumn, api);
         return formatColumn;
     });
@@ -87,7 +92,7 @@ function FormatColumnWizard(props) {
     }, []);
     const dispatch = react_redux_1.useDispatch();
     const handleFinish = () => {
-        if (props.data) {
+        if (data) {
             dispatch(FormatColumnRedux.FormatColumnEdit(formatColumn));
         }
         else {