@adaptabletools/adaptable 12.1.6 → 12.1.8-canary.1

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -11,7 +11,7 @@ const ValueSelector_1 = require("../ValueSelector");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const dispatch = react_redux_1.useDispatch();
     const adaptable = AdaptableContext_1.useAdaptable();
     const objectView = props.module.toViewCompact(props.abObject);
@@ -20,9 +20,24 @@ const AdaptableObjectCompactListItem = (props) => {
     const moduleAccessLevel = adaptable.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
-    const handleDelete = React.useCallback(() => {
+    const suspendAction = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getCompactSuspendAction) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.abObject);
+    const unSuspendAction = (_e = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getCompactUnSuspendAction) === null || _e === void 0 ? void 0 : _e.call(viewOptions, props.abObject);
+    const isSuspended = props.abObject.IsSuspended;
+    const handleDelete = React.useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
         dispatch(deleteAction);
     }, []);
+    const handleSuspendUnSuspend = React.useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        if (isSuspended) {
+            dispatch(unSuspendAction);
+        }
+        else {
+            dispatch(suspendAction);
+        }
+    }, [props.abObject]);
     let labelEl = objectView.item.label;
     if (typeof labelEl === 'function') {
         labelEl = React.createElement(labelEl, { data: props.abObject });
@@ -35,21 +50,42 @@ const AdaptableObjectCompactListItem = (props) => {
                 React.createElement(objectView.item.view, {
                     data: props.abObject,
                 }),
-            Boolean(((_d = objectView.item) === null || _d === void 0 ? void 0 : _d.values) && ((_f = (_e = objectView.item) === null || _e === void 0 ? void 0 : _e.values) === null || _f === void 0 ? void 0 : _f.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
+            Boolean(((_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) && ((_h = (_g = objectView.item) === null || _g === void 0 ? void 0 : _g.values) === null || _h === void 0 ? void 0 : _h.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
                 React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
-        React.createElement(rebass_1.Flex, { ml: 1 }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onClick: handleDelete, accessLevel: moduleAccessLevel })))));
+        suspendAction && unSuspendAction && (React.createElement(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'play' : 'pause' })),
+        React.createElement(rebass_1.Flex, { ml: 1 }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
+    const adaptable = AdaptableContext_1.useAdaptable();
     const viewProperties = (_b = (_a = props.module).getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
     const deleteAllAction = (_c = viewProperties === null || viewProperties === void 0 ? void 0 : viewProperties.getDeleteAllAction) === null || _c === void 0 ? void 0 : _c.call(viewProperties);
+    const suspendAllAction = (_d = viewProperties === null || viewProperties === void 0 ? void 0 : viewProperties.getSuspendAllAction) === null || _d === void 0 ? void 0 : _d.call(viewProperties);
+    const unSuspendAllAction = (_e = viewProperties === null || viewProperties === void 0 ? void 0 : viewProperties.getUnSuspendAllAction) === null || _e === void 0 ? void 0 : _e.call(viewProperties);
     const dispatch = react_redux_1.useDispatch();
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
+    const isAtLeastOneAbObjectActive = props.abObjects.some((abObject) => {
+        return !abObject.IsSuspended;
+    });
+    const handleSuspendUnsuspendAll = React.useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        if (isAtLeastOneAbObjectActive) {
+            dispatch(suspendAllAction);
+        }
+        else {
+            dispatch(unSuspendAllAction);
+        }
+    }, [isAtLeastOneAbObjectActive]);
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", className: baseClassName },
         React.createElement(rebass_1.Flex, { className: `${baseClassName}__Header`, fontSize: 3 },
             React.createElement(rebass_1.Box, { className: `${baseClassName}__Title` }, props.module.moduleInfo.FriendlyName),
             React.createElement(rebass_1.Box, { flex: 1 }),
-            deleteAllAction && (React.createElement(SimpleButton_1.default, { onClick: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: 'Full' }, "Clear All"))),
+            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton_1.default, { mr: 2, onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'play', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
+            deleteAllAction && (React.createElement(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
         React.createElement(rebass_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
             return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
         }))));

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -28,7 +28,7 @@ const AdaptableObjectListItemView = (props) => {
                 labelEl = React.createElement(tag.label, { data: props.abObject });
             }
             labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
-            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
+            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
                     labelEl,
                     props.showEditButton && (React.createElement(SimpleButton_1.default, { accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {

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

@@ -14,6 +14,7 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
 const react_1 = require("react");
+const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
 const isRuleValid = (abObject, api, context) => {
     var _a, _b, _c, _d, _e, _f;
     if (!((_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) && !((_b = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression)) {
@@ -90,6 +91,19 @@ const EntityRulesEditor = (props) => {
     const predicateId = data.Rule.Predicate != undefined ? data.Rule.Predicate.PredicateId : undefined;
     const predicateInputs = predicateId ? (_a = data.Rule.Predicate.Inputs) !== null && _a !== void 0 ? _a : [] : [];
     const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
+    const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
+    const predicateDefsOptions = predicateDefs
+        .filter((def) => {
+        if (isValuesPredicateDef(def)) {
+            return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
+        }
+        return true;
+    })
+        .map((item) => ({
+        value: item.id,
+        label: item.label,
+        onClick: () => onPredicateChange(item),
+    }));
     const onPredicateInputChange = (e, index) => {
         const { value } = e.target;
         const newInputs = [...predicateInputs];
@@ -101,6 +115,14 @@ const EntityRulesEditor = (props) => {
                 },
             } }));
     };
+    const onPredicateValuesChange = (inputs) => {
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+                Predicate: {
+                    PredicateId: predicateId,
+                    Inputs: inputs,
+                },
+            } }));
+    };
     const onPredicateChange = (item) => {
         var _a;
         if (item) {
@@ -146,14 +168,13 @@ const EntityRulesEditor = (props) => {
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         maxWidth: 'inherit',
-                    }, placeholder: "Select Rule", showClearButton: !!data.Rule.Predicate, onClear: clearPredicate, items: predicateDefs.map((item) => ({
-                        value: item.id,
-                        label: item.label,
-                        onClick: () => onPredicateChange(item),
-                    })), columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 :
+                    }, placeholder: "Select Rule", showClearButton: !!data.Rule.Predicate, onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 :
                 _b.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
                     index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
                     React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
+                isValuesPredicateDef(currentPredicateDef) &&
+                    'ColumnIds' in data.Scope &&
+                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: data.Rule.Predicate, scope: data.Scope })),
                 showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,

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

@@ -144,7 +144,7 @@ class FilterFormComponent extends React.Component {
                 React.createElement(Radio_1.default, { marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
             this.state.currentTab === 'values' && (React.createElement("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
+                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
             this.state.currentTab === 'predicates' && (React.createElement("div", null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
@@ -157,7 +157,7 @@ class FilterFormComponent extends React.Component {
         const { editedColumnFilter } = this.state;
         const checked = ((_a = editedColumnFilter === null || editedColumnFilter === void 0 ? void 0 : editedColumnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId) === predicateDef.id;
         return (React.createElement(rebass_1.Flex, { key: index, flexDirection: "column" },
-            React.createElement(Radio_1.default, { fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
+            React.createElement(Radio_1.default, { disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
             React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
     }
     renderPredicateInput(predicateDef, filter) {
@@ -165,7 +165,7 @@ class FilterFormComponent extends React.Component {
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: true, false, all(indeterminate)
             return (React.createElement(rebass_1.Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filter.Predicate.Inputs[0] === 'true'
+                React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
                         ? true
                         : filter.Predicate.Inputs[0] === 'false'
                             ? false
@@ -181,12 +181,16 @@ class FilterFormComponent extends React.Component {
                     } })));
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
+            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
                     marginBottom: 5,
                     flex: 1,
                     fontSize: 'var( --ab-font-size-2)',
                 } }))));
     }
+    isFilterDisabled() {
+        var _a;
+        return Boolean((_a = this.state.editedColumnFilter) === null || _a === void 0 ? void 0 : _a.IsSuspended);
+    }
     isFilterable() {
         if (!this.props.currentColumn.filterable) {
             return 'Column is not filterable';

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

@@ -58,6 +58,7 @@ const ListBoxFilterForm = (props) => {
                 children: distinctValue.label,
                 checked: isActive,
                 onChange: () => onClickItemColumnValue(distinctValue.value),
+                disabled: props.disabled,
             });
         }
         return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));

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

@@ -74,6 +74,9 @@ class QuickFilterFormComponent extends React.Component {
         (_a = this.unsubscribeOnCellChanged) === null || _a === void 0 ? void 0 : _a.call(this);
         (_b = this.unsubscribeOnGridDataChanged) === null || _b === void 0 ? void 0 : _b.call(this);
     }
+    isFilterDisabled() {
+        return Boolean(this.state.filter.IsSuspended);
+    }
     UNSAFE_componentWillReceiveProps(nextProps) {
         const filter = this.getFilterFromProps(nextProps);
         if (isEqual_1.default(filter, this.state.filter)) {
@@ -142,7 +145,7 @@ class QuickFilterFormComponent extends React.Component {
                             React.createElement("span", { style: { width: 20, marginRight: 10 } },
                                 React.createElement(icons_1.Icon, { name: "delete" })),
                             "Clear"))),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
+                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
                 React.createElement(SimpleButton_1.default, { style: {
@@ -161,7 +164,7 @@ class QuickFilterFormComponent extends React.Component {
             return this.renderValuesDropdown(filter);
         }
         return (activePredicateDef &&
-            (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { p: 1, alignSelf: "center" }, activePredicateDef.label)));
+            (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { color: this.isFilterDisabled() && 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
     }
     renderPredicateIcon(predicateDef) {
         if (!predicateDef || !predicateDef.icon) {
@@ -179,7 +182,7 @@ class QuickFilterFormComponent extends React.Component {
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: 'checked', 'unchecked', 'all'
             return (React.createElement(rebass_1.Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center", style: { position: 'absolute', left: 0, right: 0, bottom: 0, top: 0 } },
-                React.createElement(CheckBox_1.CheckBox, { checked: filter.Predicate.Inputs[0] === 'checked'
+                React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'checked'
                         ? true
                         : filter.Predicate.Inputs[0] === 'unchecked'
                             ? false
@@ -196,7 +199,7 @@ class QuickFilterFormComponent extends React.Component {
         }
         return (_a = predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => {
             var _a, _b;
-            return (React.createElement(AdaptableInput_1.default, { key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
+            return (React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
                 // autoFocus has to be FALSE because if the input receives focus in the init phase,
                 // it may scroll the ag-grid header viewport into view and de-synchronize it (relative to the content viewport)
                 autoFocus: false, value: (_b = (_a = filter.Predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), onKeyDownCapture: (e) => {
@@ -266,7 +269,7 @@ class QuickFilterFormComponent extends React.Component {
                         React.createElement(SimpleButton_1.default, { onClick: () => this.clearFilter() }, "Clear Filter"),
                         ((_a = this.props.api.internalApi.getAdaptableOptions().filterOptions) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) ==
                             false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => this.updateFilter(this.state.filter) }, "Apply Filter"))),
-                    React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
+                    React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
             } },
             React.createElement(SimpleButton_1.default, { style: {
                     flex: 1,
@@ -276,7 +279,8 @@ class QuickFilterFormComponent extends React.Component {
                     borderRadius: 0,
                     borderLeftWidth: 0,
                     borderColor: 'var(--ab-color-primarydark)',
-                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
+                }, disabled: this.isFilterDisabled() ||
+                    ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
     }
     onColumnValuesChange(columnValues) {
         var _a;

package/src/View/Components/PermittedValuesSelector/PermitedValuesSelector.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ScopeColumnIds } from '../../../PredefinedConfig/Common/AdaptableScope';
+import { AdaptablePredicate } from '../../../types';
+export interface PermitedValuesSelectorProps {
+    scope: ScopeColumnIds;
+    onPredicateValuesChange: (inputs: any[]) => void;
+    predicate: AdaptablePredicate;
+}
+export declare const PermitedValuesSelector: React.FunctionComponent<PermitedValuesSelectorProps>;

package/src/View/Components/PermittedValuesSelector/PermitedValuesSelector.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermitedValuesSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
+const PermitedValuesSelector = (props) => {
+    var _a;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const columnId = props.scope.ColumnIds[0];
+    const column = adaptable.api.columnApi.getColumnFromId(columnId);
+    const distinctValues = ((_a = adaptable.api.columnApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => ({ value: value, label: value }));
+    const predicateInputs = props.predicate.Inputs;
+    const isClearDisabled = predicateInputs.filter((item) => item !== undefined || item !== null || item !== '')
+        .length === 0;
+    const popupContent = (React.createElement(rebass_1.Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
+        React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
+    return (React.createElement(rebass_1.Box, { className: "ab-PermitedValuesSelector", mt: 2 },
+        React.createElement(rebass_1.Box, { flex: 1 },
+            React.createElement(OverlayTrigger_1.default, { render: () => popupContent },
+                React.createElement(SimpleButton_1.default, { width: "100%", mb: 2 }, (predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.join(', ')) || 'No Selected values'))),
+        React.createElement(SimpleButton_1.default, { disabled: isClearDisabled, onClick: () => props.onPredicateValuesChange([]) }, "Clear Values")));
+};
+exports.PermitedValuesSelector = PermitedValuesSelector;

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

@@ -0,0 +1 @@
+export { PermitedValuesSelector } from './PermitedValuesSelector';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermitedValuesSelector = void 0;
+var PermitedValuesSelector_1 = require("./PermitedValuesSelector");
+Object.defineProperty(exports, "PermitedValuesSelector", { enumerable: true, get: function () { return PermitedValuesSelector_1.PermitedValuesSelector; } });

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

@@ -35,7 +35,7 @@ const Navigation = (props) => {
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
     return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
         React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
             if (menuItem === '-') {
                 return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
@@ -46,7 +46,7 @@ const Navigation = (props) => {
             return (React.createElement("li", { className: className, key: menuItem.label },
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
-                    } },
+                    }, "data-name": (_e = menuItem.module) !== null && _e !== void 0 ? _e : menuItem.label },
                     menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
                     customIcon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }),
                     menuItem.label)));

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

@@ -11,19 +11,14 @@ const showToast = (props) => {
     // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
-        Toastify_1.toast.dismiss(toastId);
+        Toastify_1.toast.dismiss();
         api = null;
     });
     const adaptableOptions = props.api.internalApi.getAdaptableOptions();
     const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
         containerId: adaptableOptions.adaptableId,
         onClose: () => {
-            if (api) {
-                off();
-                if (!api.isDestroyed()) {
-                    api.internalApi.hidePopupAlert();
-                }
-            }
+            off();
         },
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {

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

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

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

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

package/src/View/Export/ExportViewPanel.d.ts

@@ -13,7 +13,6 @@ export interface ExportViewPanelComponentProps extends ViewPanelProps {
     onEditReport: (popup: string) => PopupRedux.PopupShowScreenAction;
     onNewReportSchedule: (reportSchedule: ReportSchedule) => PopupRedux.PopupShowScreenAction;
     Columns: AdaptableColumn[];
-    Reports: Report[] | undefined;
     CurrentReport: string | undefined;
     CurrentDestination: ExportDestination | string | undefined;
 }
@@ -25,5 +24,5 @@ declare class ExportViewPanelComponent extends React.Component<ExportViewPanelCo
     private isCustomDestination;
     private onNewReportSchedule;
 }
-export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "CurrentReport" | "moduleInfo" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "Reports" | "CurrentDestination">>;
+export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "CurrentReport" | "moduleInfo" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "CurrentDestination">>;
 export {};

package/src/View/Export/ExportViewPanel.js

@@ -83,7 +83,7 @@ class ExportViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, style: { width: '100%', fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
             React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || currentReport.ReportColumnScope == 'CustomColumns', accessLevel: accessLevel }),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isCustomReport(currentReport), accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),
                 React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
                 this.props.api.internalApi
@@ -97,10 +97,7 @@ class ExportViewPanelComponent extends React.Component {
         this.props.onSelectDestination(destination);
     }
     getAllReportNames() {
-        return [
-            ...this.props.api.exportApi.getAvailableSystemReports(),
-            ...this.props.Reports.map((r) => r.Name),
-        ];
+        return [...this.props.api.exportApi.getAllReports().map((r) => r.Name)];
     }
     isCustomDestination(destination) {
         var _a;
@@ -116,7 +113,6 @@ function mapStateToProps(state) {
     return {
         CurrentReport: state.Export.CurrentReport,
         CurrentDestination: state.Export.CurrentDestination,
-        Reports: state.Export.Reports,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/Export/Wizard/ReportColumnTypeWizard.d.ts

@@ -1,7 +1,6 @@
-import { Report } from '../../../PredefinedConfig/ExportState';
+import { Report, ReportColumnScope } from '../../../PredefinedConfig/ExportState';
 import * as React from 'react';
 import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { ReportColumnScope } from '../../../PredefinedConfig/Common/Enums';
 export interface ReportColumnTypeWizardProps extends AdaptableWizardStepProps<Report> {
 }
 export interface ReportColumnsWizardState {

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportColumnTypeWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const rebass_1 = require("rebass");
@@ -20,52 +19,52 @@ class ReportColumnTypeWizard extends React.Component {
             React.createElement(WizardPanel_1.default, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 2 },
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "All columns in the datasource will be included in the Report, whether visible or not at time of export"),
-                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportColumnScope == Enums_1.ReportColumnScope.AllColumns, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
+                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only columns that are visible at the time the Report is exported will be included"),
-                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportColumnScope == Enums_1.ReportColumnScope.VisibleColumns, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
+                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only selected columns (which you will choose in the next step) will be exported - whether visible or not"),
-                    React.createElement(Radio_1.default, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns, onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
+                    React.createElement(Radio_1.default, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == 'ScopeColumns', onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
                     ' '))));
     }
     onScopeSelectChanged(event) {
         let e = event.target;
         if (e.value == 'All') {
             this.setState({
-                ReportColumnScope: Enums_1.ReportColumnScope.AllColumns,
+                ReportColumnScope: 'AllColumns',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else if (e.value == 'Visible') {
             this.setState({
-                ReportColumnScope: Enums_1.ReportColumnScope.VisibleColumns,
+                ReportColumnScope: 'VisibleColumns',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else {
             this.setState({
-                ReportColumnScope: Enums_1.ReportColumnScope.ScopeColumns,
+                ReportColumnScope: 'ScopeColumns',
             }, () => this.props.updateGoBackState());
         }
     }
     canNext() {
-        return (this.state.ReportColumnScope == Enums_1.ReportColumnScope.AllColumns ||
-            this.state.ReportColumnScope == Enums_1.ReportColumnScope.VisibleColumns ||
-            this.state.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns);
+        return (this.state.ReportColumnScope == 'AllColumns' ||
+            this.state.ReportColumnScope == 'VisibleColumns' ||
+            this.state.ReportColumnScope == 'ScopeColumns');
     }
     canBack() {
         return true;
     }
     next() {
         this.props.data.ReportColumnScope = this.state.ReportColumnScope;
-        if (this.state.ReportColumnScope != Enums_1.ReportColumnScope.ScopeColumns) {
+        if (this.state.ReportColumnScope != 'ScopeColumns') {
             this.props.data.Scope = undefined;
         }
     }
     back() { }
     getIndexStepIncrement() {
-        return this.state.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns ? 1 : 2;
+        return this.state.ReportColumnScope == 'ScopeColumns' ? 1 : 2;
     }
     getIndexStepDecrement() {
         return 1;

package/src/View/Export/Wizard/ReportRowTypeWizard.d.ts

@@ -1,7 +1,6 @@
-import { Report } from '../../../PredefinedConfig/ExportState';
+import { Report, ReportRowScope } from '../../../PredefinedConfig/ExportState';
 import * as React from 'react';
 import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { ReportRowScope } from '../../../PredefinedConfig/Common/Enums';
 export interface ReportRowTypeWizardProps extends AdaptableWizardStepProps<Report> {
 }
 export interface ReportRowsWizardState {

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportRowTypeWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const rebass_1 = require("rebass");
@@ -20,55 +19,55 @@ class ReportRowTypeWizard extends React.Component {
             React.createElement(WizardPanel_1.default, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 2 },
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "All rows in the datasource will be included in the report, whether visible or not at time of export."),
-                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportRowScope == Enums_1.ReportRowScope.AllRows, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
+                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only rows that are visible at the time the Report is exported will be included in the Export"),
-                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportRowScope == Enums_1.ReportRowScope.VisibleRows, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
+                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
                     ' ',
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only the rows which match the Query (built in next step) will be exported - whether visible or not."),
-                    React.createElement(Radio_1.default, { value: "Expression", checked: this.state.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows, onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "By Query - built by you in next step"),
+                    React.createElement(Radio_1.default, { value: "Expression", checked: this.state.ReportRowScope == 'ExpressionRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "By Query - built by you in next step"),
                     ' '))));
     }
     onScopeSelectChanged(event) {
         let e = event.target;
         if (e.value == 'All') {
             this.setState({
-                ReportRowScope: Enums_1.ReportRowScope.AllRows,
+                ReportRowScope: 'AllRows',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else if (e.value == 'Visible') {
             this.setState({
-                ReportRowScope: Enums_1.ReportRowScope.VisibleRows,
+                ReportRowScope: 'VisibleRows',
                 SelectedColumnValues: [],
             }, () => this.props.updateGoBackState());
         }
         else {
             this.setState({
-                ReportRowScope: Enums_1.ReportRowScope.ExpressionRows,
+                ReportRowScope: 'ExpressionRows',
             }, () => this.props.updateGoBackState());
         }
     }
     canNext() {
-        return (this.state.ReportRowScope == Enums_1.ReportRowScope.AllRows ||
-            this.state.ReportRowScope == Enums_1.ReportRowScope.VisibleRows ||
-            this.state.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows);
+        return (this.state.ReportRowScope == 'AllRows' ||
+            this.state.ReportRowScope == 'VisibleRows' ||
+            this.state.ReportRowScope == 'ExpressionRows');
     }
     canBack() {
         return true;
     }
     next() {
         this.props.data.ReportRowScope = this.state.ReportRowScope;
-        if (this.props.data.Query && this.state.ReportRowScope != Enums_1.ReportRowScope.ExpressionRows) {
+        if (this.props.data.Query && this.state.ReportRowScope != 'ExpressionRows') {
             this.props.data.Query = undefined;
         }
     }
     back() { }
     getIndexStepIncrement() {
-        return this.state.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows ? 1 : 2;
+        return this.state.ReportRowScope == 'ExpressionRows' ? 1 : 2;
     }
     getIndexStepDecrement() {
-        return this.props.data.ReportColumnScope == Enums_1.ReportColumnScope.ScopeColumns ? 1 : 2;
+        return this.props.data.ReportColumnScope == 'ScopeColumns' ? 1 : 2;
     }
 }
 exports.ReportRowTypeWizard = ReportRowTypeWizard;