@adaptabletools/adaptable 12.1.7 → 12.1.8-canary.0

package/src/View/AdaptableView.js

@@ -25,7 +25,7 @@ class AdaptableView extends React.Component {
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
-            React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
+            Boolean(this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup) && (React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi })),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
             React.createElement(Toastify_1.ToastContainer
             // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
@@ -50,7 +50,6 @@ function mapStateToProps(state, ownProps) {
 function mapDispatchToProps(dispatch) {
     return {
         onCloseScreenPopup: () => dispatch(PopupRedux.PopupHideScreen()),
-        onCloseAlertPopup: () => dispatch(PopupRedux.PopupHideAlert()),
         onClosePromptPopup: () => dispatch(PopupRedux.PopupHidePrompt()),
         onConfirmPromptPopup: (inputText) => dispatch(PopupRedux.PopupConfirmPrompt(inputText)),
         onConfirmConfirmationPopup: (comment) => dispatch(PopupRedux.PopupConfirmConfirmation(comment)),

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingsTags.d.ts

@@ -0,0 +1,2 @@
+import { CalculatedColumnSettings } from '../../../types';
+export declare const getCalculatedColumnSettingsTags: (settings: CalculatedColumnSettings) => string[];

package/src/View/CalculatedColumn/Utilities/{getCalculatedColumnSettingTags.js → getCalculatedColumnSettingsTags.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCalculatedColumnSettingTags = void 0;
-const getCalculatedColumnSettingTags = (settings) => {
+exports.getCalculatedColumnSettingsTags = void 0;
+const getCalculatedColumnSettingsTags = (settings) => {
     const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings !== null && settings !== void 0 ? settings : {};
     const colTypes = (settings === null || settings === void 0 ? void 0 : settings.ColumnTypes) ? settings.ColumnTypes.join(', ') : '';
     return [
@@ -16,4 +16,4 @@ const getCalculatedColumnSettingTags = (settings) => {
         colTypes ? `Column Types: ${colTypes}` : null,
     ].filter(Boolean);
 };
-exports.getCalculatedColumnSettingTags = getCalculatedColumnSettingTags;
+exports.getCalculatedColumnSettingsTags = getCalculatedColumnSettingsTags;

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

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

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalculatedColumnDefinitionWizardSection = exports.isValidCalculatedColumnDefinition = exports.renderCalculatedColumnDefinitionSummary = 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 CheckBox_1 = require("../../../components/CheckBox");
+const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const renderCalculatedColumnDefinitionSummary = (data) => {
+    var _a;
+    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));
+};
+exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefinitionSummary;
+const isValidCalculatedColumnDefinition = (data, api) => {
+    const columns = api.columnApi.getColumns();
+    if (!data.ColumnId) {
+        return 'Column Id cannot be empty';
+    }
+    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;
+};
+exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
+const CalculatedColumnDefinitionWizardSection = (props) => {
+    var _a;
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    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 inEdit = props.isEdit;
+    const validCheck = exports.isValidCalculatedColumnDefinition(data, api);
+    const ErrorMessage = validCheck === true ? null : validCheck;
+    const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
+    const ColumnName = data.FriendlyName;
+    const ColumnId = data.ColumnId;
+    const { ShowToolTip, HeaderToolTip } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
+    const handleSpecialColumnSettingsChange = (settings) => {
+        props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
+    };
+    return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-definition' },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
+            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: "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));
+};
+exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;

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

@@ -46,18 +46,24 @@ QueryTab.defaultProps = {
 const CalculatedColumnExpressionWizardSection = (props) => {
     const { api, data, moduleInfo } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const initialData = react_1.useMemo(() => api.internalApi.getQueryPreviewData(), []);
-    const type = data.Query.AggregatedScalarExpression != undefined
-        ? 'AggregatedScalarExpression'
-        : 'ScalarExpression';
-    const [selectedTab, setSelectedTab] = React.useState(type);
-    const setType = (type) => {
-        setSelectedTab(type);
-        if (type === 'ScalarExpression') {
+    const [selectedTab, setSelectedTab] = React.useState(() => {
+        return data.Query.AggregatedScalarExpression == undefined
+            ? 'ScalarExpression'
+            : api.internalApi
+                .getQueryLanguageService()
+                .isCumulativeAggregate(data.Query.AggregatedScalarExpression)
+                ? 'CumulativeAggregateExpression'
+                : 'AggregatedScalarExpression';
+    });
+    const updateExpressionType = (expressionType) => {
+        setSelectedTab(expressionType);
+        if (expressionType === 'ScalarExpression') {
             props.onChange(Object.assign(Object.assign({}, data), { Query: {
                     ScalarExpression: '',
                 } }));
         }
         else {
+            // CumulativeAggregateExpression & AggregatedScalarExpression use the same property
             props.onChange(Object.assign(Object.assign({}, data), { Query: {
                     AggregatedScalarExpression: '',
                 } }));
@@ -68,12 +74,15 @@ const CalculatedColumnExpressionWizardSection = (props) => {
         const dataType = calculatedColumnExpressionService.getCalculatedColumnDataType(calculatedColumnQuery);
         props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
-        React.createElement(QueryTab, { value: "ScalarExpression", type: type, label: "Scalar" }),
+    return (React.createElement(Tabs_1.Tabs, { onValueChange: updateExpressionType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
+        React.createElement(QueryTab, { value: "ScalarExpression", type: selectedTab, label: "Scalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'ScalarExpression' },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),
-        React.createElement(QueryTab, { value: "AggregatedScalarExpression", type: type, label: "AggregatedScalar" }),
+        React.createElement(QueryTab, { value: "AggregatedScalarExpression", type: selectedTab, label: "AggregatedScalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedScalarExpression' },
-            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedScalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api }))));
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedScalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),
+        React.createElement(QueryTab, { value: "CumulativeAggregateExpression", type: selectedTab, label: "CumulativeAggregatedScalar" }),
+        React.createElement(Tabs_1.Tabs.Content, { value: 'CumulativeAggregateExpression' },
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'cumulativeAggregatedScalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api }))));
 };
 exports.CalculatedColumnExpressionWizardSection = CalculatedColumnExpressionWizardSection;

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