@adaptabletools/adaptable 12.1.7 → 12.1.8-canary.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/View/Export/ExportViewPanel.js

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

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

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

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

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

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

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

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

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

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

@@ -9,7 +9,6 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const rebass_1 = require("rebass");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 class ReportSettingsWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -56,7 +55,7 @@ class ReportSettingsWizard extends React.Component {
         return 1;
     }
     getIndexStepDecrement() {
-        return this.props.data.ReportRowScope == Enums_1.ReportRowScope.ExpressionRows ? 1 : 2;
+        return this.props.data.ReportRowScope == 'ExpressionRows' ? 1 : 2;
     }
 }
 exports.ReportSettingsWizard = ReportSettingsWizard;

package/src/View/Filter/FilterViewPanel.js

@@ -8,23 +8,39 @@ const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
 const rebass_1 = require("rebass");
 const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
 const AdaptablePopover_1 = require("../AdaptablePopover");
+const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
 const CheckBox_1 = require("../../components/CheckBox");
 const react_redux_1 = require("react-redux");
 const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
+        var _a, _b, _c, _d;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        const showClearButton = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.filterOptions) === null || _b === void 0 ? void 0 : _b.showClearFilterButton;
+        const showSuspendFilterButton = (_d = (_c = this.props.api.internalApi.getAdaptableOptions()) === null || _c === void 0 ? void 0 : _c.filterOptions) === null || _d === void 0 ? void 0 : _d.showSuspendFilterButton;
+        const isAtLeastOneFilterActive = this.props.api.filterApi.getActiveColumnFilters().length > 0;
+        const isAtLeastOneFilter = this.props.api.filterApi.getColumnFilters().length > 0;
+        const handleSuspendUnsuspendAll = () => {
+            if (isAtLeastOneFilterActive) {
+                this.props.api.filterApi.suspendAllColumnFilters();
+            }
+            else {
+                this.props.api.filterApi.unSuspendAllColumnFilters();
+            }
+        };
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null, ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], 
-                //  tooltipText={'Show Filter Details'}
-                useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 }))),
+            React.createElement(rebass_1.Flex, null,
+                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
+                showClearButton && (React.createElement(ButtonClear_1.ButtonClear, { marginLeft: 1, marginBottom: 0, marginRight: 1, className: `ab-${elementType}__Filter__clear`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')),
+                showSuspendFilterButton && (React.createElement(SimpleButton_1.default, { disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel }))),
             React.createElement(rebass_1.Flex, { alignItems: "center" }, this.props.api.filterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
                     this.props.api.internalApi.isGridInPivotMode(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
-                } }, "Show Quick Filter")))));
+                } }, "Quick Filter")))));
     }
     onClearFilters() {
         this.props.api.filterApi.clearColumnFilters();

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

@@ -378,7 +378,7 @@ const FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
-    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
+    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(data.Scope, displayFormatter.scope));
     if (Type === 'NumberFormatter') {
         return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -112,6 +112,7 @@ const LayoutWizard = (props) => {
                 title: 'Aggregations',
                 details: 'Select Column Aggregations',
                 renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
+                isValid: (data) => AggregationsSection_1.isAggregationsSectionValid(data),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
                     React.createElement(AggregationsSection_1.AggregationsSection, { onChange: setLayout }))),
             },

package/src/View/Layout/Wizard/sections/AggregationsSection.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
+export declare const isAggregationsSectionValid: (data: Layout) => true | string;
 export declare const AggregationsSectionSummary: React.FunctionComponent;
 interface AggregationsSectionProps {
     onChange: (data: Layout) => void;