@adaptabletools/adaptable 12.1.7 → 12.2.0-canary.0

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
 export declare type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;
 };
 export declare const renderCalculatedColumnSettingsSummary: (data: CalculatedColumn) => JSX.Element;
-export declare const isValidCalculatedColumnSettings: (data: CalculatedColumn, api: AdaptableApi) => true | string;
+export declare const isValidCalculatedColumnSettings: (data: CalculatedColumn) => true | string;
 export declare const CalculatedColumnSettingsWizardSection: (props: CalculatedColumnSettingsWizardSectionProps) => JSX.Element;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -3,66 +3,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnSettingsWizardSection = exports.isValidCalculatedColumnSettings = exports.renderCalculatedColumnSettingsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const react_1 = require("react");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const CheckBox_1 = require("../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const Tabs_1 = require("../../../components/Tabs");
 const ValueSelector_1 = require("../../Components/ValueSelector");
-const Tag_1 = require("../../../components/Tag");
-const getCalculatedColumnSettingTags_1 = require("../Utilities/getCalculatedColumnSettingTags");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
+const getCalculatedColumnSettingsTags_1 = require("../Utilities/getCalculatedColumnSettingsTags");
 const renderCalculatedColumnSettingsSummary = (data) => {
-    var _a;
-    const options = getCalculatedColumnSettingTags_1.getCalculatedColumnSettingTags(data.CalculatedColumnSettings);
+    const options = getCalculatedColumnSettingsTags_1.getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        React.createElement(rebass_1.Box, null,
-            "Column Identifier: ",
-            React.createElement(Tag_1.Tag, null, data.ColumnId)),
-        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
-            "Column Name: ",
-            React.createElement(Tag_1.Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null,
-        React.createElement(rebass_1.Box, { mb: 3 }),
         React.createElement(ValueSelector_1.ValueOptionsTags, { toLabel: (x) => x, toIdentifier: (c) => c, readOnly: true, options: options, value: options })));
 };
 exports.renderCalculatedColumnSettingsSummary = renderCalculatedColumnSettingsSummary;
-const isValidCalculatedColumnSettings = (data, api) => {
+const isValidCalculatedColumnSettings = (data) => {
     var _a;
-    const columns = api.columnApi.getColumns();
-    if (!data.ColumnId) {
-        return 'Column Id cannot be empty';
-    }
     if (!((_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.DataType)) {
         return 'No data type is specified and it could not be inferred from the defined expression';
     }
-    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
-    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
+    return true;
 };
 exports.isValidCalculatedColumnSettings = isValidCalculatedColumnSettings;
 const CalculatedColumnSettingsWizardSection = (props) => {
     var _a, _b;
     const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const calculatedColumnExpressionService = react_1.useMemo(() => api.internalApi.getCalculatedColumnExpressionService(), []);
-    const handleColumnIdChange = (event) => {
-        let e = event.target;
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnId: e.value }));
-    };
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
-        props.onChange(Object.assign(Object.assign({}, data), { FriendlyName: e.value }));
-    };
     const handleDataTypeChange = (dataType) => {
         var _a;
         const aggregatable = dataType == 'Number' ? (_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.Aggregatable : false;
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Aggregatable: aggregatable }) }));
     };
-    const inEdit = props.isEdit;
-    const validCheck = exports.isValidCalculatedColumnSettings(data, api);
+    const validCheck = exports.isValidCalculatedColumnSettings(data);
     const ErrorMessage = validCheck === true ? null : validCheck;
     let options = [
         { value: 'Number', label: 'Number' },
@@ -70,11 +45,8 @@ const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'Date', label: 'Date' },
         { value: 'Boolean', label: 'Boolean' },
     ];
-    const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
-    const ColumnName = data.FriendlyName;
-    const ColumnId = data.ColumnId;
     let { DataType: dataType } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
-    const { Width, ShowToolTip, HeaderToolTip } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
+    const { Width } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
     const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
     };
@@ -86,18 +58,10 @@ const CalculatedColumnSettingsWizardSection = (props) => {
     }, []);
     return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-settings' },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
-                            React.createElement(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
-                            React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                    setColumnNameFocused(true);
-                                }, onBlur: () => {
-                                    setColumnNameFocused(false);
-                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', width: 300, type: "text", placeholder: "Enter column name", onChange: handleColumnNameChange })),
                         React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
                             React.createElement(DropdownButton_1.default, { "data-name": "column-type", style: {
                                     width: '300px',
@@ -112,14 +76,7 @@ const CalculatedColumnSettingsWizardSection = (props) => {
                         React.createElement(FormLayout_1.FormRow, { label: "Width" },
                             React.createElement(Input_1.default, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
-                                }) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
-                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
-                                    HeaderToolTip: e.target.value,
-                                }) })),
-                        ' ',
-                        React.createElement(FormLayout_1.FormRow, { label: "" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
+                                }) })))))),
         ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
         React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -8,12 +8,13 @@ const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CalculatedColumnExpressionWizardSection_1 = require("./CalculatedColumnExpressionWizardSection");
-const CalculatedColumnSettingsWizardSection_1 = require("./CalculatedColumnSettingsWizardSection");
+const CalculatedColumnDefinitionWizardSection_1 = require("./CalculatedColumnDefinitionWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
 const CalculatedColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CalculatedColumnRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const CalculatedColumnSettingsWizardSection_1 = require("./CalculatedColumnSettingsWizardSection");
 const CalculatedColumnWizard = (props) => {
     var _a;
     const adaptable = AdaptableContext_1.useAdaptable();
@@ -44,13 +45,13 @@ const CalculatedColumnWizard = (props) => {
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Settings',
-                details: 'Specify Column details and properties',
-                isValid: CalculatedColumnSettingsWizardSection_1.isValidCalculatedColumnSettings,
-                renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
+                title: 'Definition',
+                details: 'Specify Column details',
+                isValid: CalculatedColumnDefinitionWizardSection_1.isValidCalculatedColumnDefinition,
+                renderSummary: CalculatedColumnDefinitionWizardSection_1.renderCalculatedColumnDefinitionSummary,
                 render: () => {
                     return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
+                        React.createElement(CalculatedColumnDefinitionWizardSection_1.CalculatedColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
             {
@@ -62,6 +63,16 @@ const CalculatedColumnWizard = (props) => {
                     return React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { onChange: setCalculatedColumn });
                 },
             },
+            {
+                title: 'Settings',
+                details: 'Specify Column properties',
+                isValid: CalculatedColumnSettingsWizardSection_1.isValidCalculatedColumnSettings,
+                renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
+                },
+            },
             {
                 details: 'Select Calculated Column tags',
                 title: 'Tags',

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

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { IColItem } from '../../UIInterfaces';
-export interface AdaptableObjectCollectionProps extends React.ClassAttributes<AdaptableObjectCollection> {
+import { BoxProps } from 'rebass';
+export interface AdaptableObjectCollectionProps extends BoxProps {
     colItems: IColItem[];
     items: any[];
     allowOverflow?: boolean;
     style?: React.CSSProperties;
     headerAlign?: string;
 }
-export declare class AdaptableObjectCollection extends React.Component<AdaptableObjectCollectionProps, {}> {
-    render(): any;
-}
+export declare const AdaptableObjectCollection: React.FunctionComponent<AdaptableObjectCollectionProps>;

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

@@ -5,12 +5,11 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 /// <reference path="../../typings/.d.ts" />
 const PanelWithRow_1 = require("../Panels/PanelWithRow");
-class AdaptableObjectCollection extends React.Component {
-    render() {
-        const allowOverflow = this.props.allowOverflow ? 'visible' : 'auto';
-        return (React.createElement("div", { style: Object.assign({}, this.props.style), className: "ab-ObjectCollection" },
-            React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: this.props.colItems, headerAlign: this.props.headerAlign }),
-            React.createElement("div", { style: { overflowY: allowOverflow, boxShadow: 'none' } }, this.props.items)));
-    }
-}
+const rebass_1 = require("rebass");
+const AdaptableObjectCollection = (props) => {
+    const allowOverflow = props.allowOverflow ? 'visible' : 'auto';
+    return (React.createElement(rebass_1.Box, { style: Object.assign({}, props.style), className: "ab-ObjectCollection" },
+        React.createElement(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems, headerAlign: props.headerAlign }),
+        React.createElement("div", { className: "ab-ObjectCollection__items", style: { overflowY: allowOverflow, boxShadow: 'none' } }, props.items)));
+};
 exports.AdaptableObjectCollection = AdaptableObjectCollection;

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/AdaptableObjectRow/index.js

@@ -15,10 +15,7 @@ class AdaptableObjectRow extends React.Component {
                 overflow: 'hidden',
             }, "data-name": "list-group-cell", paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
         const className = join_1.default('ab-AdaptableObjectRow', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended');
-        return (React.createElement("div", { className: className, onClick: this.props.onClick, style: this.props.style },
-            React.createElement(rebass_1.Flex, { "data-name": "list-group-item", className: "list-group-item", alignItems: "center", padding: 2, margin: 0, style: {
-                    overflowY: 'visible',
-                } }, colItems)));
+        return (React.createElement(rebass_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
     }
 }
 exports.AdaptableObjectRow = AdaptableObjectRow;

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)) {
@@ -46,8 +47,8 @@ QueryTab.defaultProps = {
 };
 const EntityRulesSummary = (props) => {
     const { data } = props;
-    const { api: { predicateApi, queryLanguageApi }, } = AdaptableContext_1.useAdaptable();
-    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicate ? (React.createElement(React.Fragment, null, props.renderPredicate(predicateApi.predicateToString(data.Rule.Predicate)))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(queryLanguageApi.getAdaptableQueryExpression(data.Rule))))));
+    const { api: { predicateApi, internalApi }, } = AdaptableContext_1.useAdaptable();
+    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicate ? (React.createElement(React.Fragment, null, props.renderPredicate(predicateApi.predicateToString(data.Rule.Predicate)))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const EntityRulesEditor = (props) => {
@@ -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

@@ -56,7 +56,7 @@ class QuickFilterFormComponent extends React.Component {
         };
     }
     componentDidMount() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.hasValuesPredicate((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate)) {
             this.loadPermittedValues();
         }
@@ -67,6 +67,14 @@ class QuickFilterFormComponent extends React.Component {
             // there is no way to find out if the changed rows are relevant for this filter, so we have to update it every time :/
             this.handleGridValueChange();
         });
+        if ((_c = this.props.api.internalApi.getAdaptableOptions().filterOptions) === null || _c === void 0 ? void 0 : _c.showDistinctFilteredValuesOnly) {
+            this.props.api.internalApi.getAdaptableInstance()._on('GridFiltered', () => {
+                const filter = this.getFilterFromProps();
+                if (this.hasValuesPredicate(filter === null || filter === void 0 ? void 0 : filter.Predicate)) {
+                    this.loadPermittedValues();
+                }
+            });
+        }
     }
     componentWillUnmount() {
         var _a, _b;
@@ -74,6 +82,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 +153,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 +172,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 +190,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 +207,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 +277,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 +287,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; } });