@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.0

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -12,29 +12,40 @@ exports.CustomToolbarWrapper = (props) => {
     let buttonsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__buttons';
     const [contentsHTML, setContentsHTML] = react_1.useState('');
     // dummy object which is used to force a re-render of the toolbar
-    const [revision, setRevision] = react_1.useState(1);
+    const [componentRevision, setComponentRevision] = react_1.useState(1);
     const contentsDivRef = react_1.useRef(null);
     const { api } = AdaptableContext_1.useAdaptable();
     react_1.useLayoutEffect(() => {
-        const node = contentsDivRef.current;
+        const element = contentsDivRef.current;
         const adaptableApi = api;
         if (props.customToolbar.render) {
             const html = props.customToolbar.render({
                 visible: true,
-                node,
+                element,
                 adaptableApi,
             });
             setContentsHTML(html);
         }
-        else if (props.customToolbar.frameworkComponent) {
-            adaptableApi.internalApi.createFrameworkComponent(node, props.customToolbar.frameworkComponent, 'toolbar');
-        }
+    }, [componentRevision, props.dashboardRevision]);
+    react_1.useLayoutEffect(() => {
+        const element = contentsDivRef.current;
+        const adaptableApi = api;
+        // cleanup runs in a separate effect, this way it's executed only once on unmount
         return () => {
             if (props.customToolbar.render) {
-                props.customToolbar.render({ visible: false, node, adaptableApi });
+                props.customToolbar.render({ visible: false, element, adaptableApi });
             }
-            else if (props.customToolbar.frameworkComponent) {
-                adaptableApi.internalApi.destroyFrameworkComponent(node, props.customToolbar.frameworkComponent, 'toolbar');
+        };
+    }, []);
+    react_1.useLayoutEffect(() => {
+        const element = contentsDivRef.current;
+        const adaptableApi = api;
+        if (props.customToolbar.frameworkComponent) {
+            adaptableApi.internalApi.createFrameworkComponent(element, props.customToolbar.frameworkComponent, 'toolbar');
+        }
+        return () => {
+            if (props.customToolbar.frameworkComponent) {
+                adaptableApi.internalApi.destroyFrameworkComponent(element, props.customToolbar.frameworkComponent, 'toolbar');
             }
         };
     }, []);
@@ -58,6 +69,14 @@ exports.CustomToolbarWrapper = (props) => {
                     adaptableApi: api,
                     dashboardState: api.dashboardApi.getDashboardState(),
                 };
+                const defaultIconProps = {
+                    style: {
+                        height: 'var(--ab-cmp-simple-button__height)',
+                        width: 'var(--ab-cmp-simple-button__width)',
+                    },
+                };
+                const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
+                const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                 let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
                 let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
                 let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -71,10 +90,10 @@ exports.CustomToolbarWrapper = (props) => {
                         button.onClick ? button.onClick(button, dashboardContext) : null;
                         setTimeout(() => {
                             // mutate state to force a re-rendering
-                            setRevision(revision + 1);
+                            setComponentRevision(componentRevision + 1);
                         }, 16);
                     } },
-                    button.icon ? React.createElement("img", Object.assign({}, button.icon)) : null,
+                    buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                     buttonLabel));
             }))));
 };

package/src/View/Dashboard/Dashboard.d.ts

@@ -8,6 +8,7 @@ import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
 import { SystemStatusMessageInfo } from '../../PredefinedConfig/Common/SystemStatusMessageInfo';
 interface DashboardComponentProps extends ModuleViewPopupProps<any> {
+    DashboardRevision: number;
     DashboardState: DashboardState;
     GridState: GridState;
     SystemStatusMessageInfos: SystemStatusMessageInfo[];

package/src/View/Dashboard/Dashboard.js

@@ -21,6 +21,7 @@ const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const ApplicationIcon_1 = require("../../components/ApplicationIcon");
+const CustomDashboardButton_1 = require("./CustomDashboardButton");
 const DashboardComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced_1.useQuickSearchDebounced(props);
     const dashboardAccessLevel = props.api.internalApi
@@ -35,7 +36,7 @@ const DashboardComponent = (props) => {
             if (customToolbar) {
                 if (dashboardAccessLevel != 'Hidden') {
                     return (React.createElement(rebass_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
-                        React.createElement(CustomToolbarWrapper_1.CustomToolbarWrapper, { customToolbar: customToolbar })));
+                        React.createElement(CustomToolbarWrapper_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
                 }
             }
             else {
@@ -88,40 +89,12 @@ const DashboardComponent = (props) => {
         return shortcuts;
     };
     const renderDashboardButtons = () => {
-        var _a;
-        let dashboardButtonsArray = (_a = props.api.dashboardApi
-            .getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
+        let dashboardButtonsArray = props.api.dashboardApi
+            .getCustomDashboardButtons()
+            .filter(Boolean);
         let customDashboardButtons = null;
-        if (dashboardButtonsArray) {
-            customDashboardButtons = dashboardButtonsArray.map((button) => {
-                // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-                // with the next opportunity we should abstract it
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
-                const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
-                //    const iconProps: any = button.icon ? { ...button.icon } : null;
-                //    if (iconProps) {
-                //      delete iconProps.Uuid;
-                //    }
-                const dashboardContext = {
-                    adaptableApi: props.api,
-                    dashboardState: props.api.dashboardApi.getDashboardState(),
-                };
-                let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
-                let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
-                let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
-                if (button.hidden && button.hidden(button, dashboardContext)) {
-                    return null;
-                }
-                const disabled = button.disabled && button.disabled(button, dashboardContext);
-                return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => button.onClick(button, dashboardContext), accessLevel: 'Full' },
-                    button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
-            });
+        if (dashboardButtonsArray === null || dashboardButtonsArray === void 0 ? void 0 : dashboardButtonsArray.length) {
+            customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton_1.CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
         }
         return customDashboardButtons;
     };
@@ -159,6 +132,7 @@ const DashboardComponent = (props) => {
 };
 function mapStateToProps(state, ownProps) {
     return {
+        DashboardRevision: state.System.DashboardRevision,
         DashboardState: state.Dashboard,
         GridState: state.Grid,
         SystemStatusMessageInfos: state.System.SystemStatusMessages,

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -8,6 +8,7 @@ const all_modules_1 = require("@ag-grid-community/all-modules");
 const react_1 = require("react");
 const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const buildActionColumnButton_1 = require("./buildActionColumnButton");
 exports.DataChangeHistoryGrid = (props) => {
     const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange } = props;
     const mainAdaptableInstance = AdaptableContext_1.useAdaptable();
@@ -72,7 +73,7 @@ exports.DataChangeHistoryGrid = (props) => {
     return React.createElement(React.Fragment, null);
 };
 const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange) => {
-    var _a, _b;
+    var _a, _b, _c;
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
     const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
     const undoRowNode = (rowNode) => {
@@ -80,6 +81,21 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const changeKey = (_a = rowNode === null || rowNode === void 0 ? void 0 : rowNode.data) === null || _a === void 0 ? void 0 : _a['changeKey'];
         changeKey && onUndoChange(changeKey);
     };
+    const actionColumnButton = buildActionColumnButton_1.buildActionColumnButton((_a = mainAdaptableInstance.adaptableOptions) === null || _a === void 0 ? void 0 : _a.dataChangeHistoryOptions, undoRowNode);
+    let actionOptions = undefined;
+    if (actionColumnButton) {
+        actionOptions = {
+            actionColumns: [
+                {
+                    columnId: 'undoActionColumn',
+                    friendlyName: ' ',
+                    includeGroupedRows: true,
+                    actionColumnSettings: { suppressMenu: true, suppressMovable: true },
+                    actionColumnButton,
+                },
+            ],
+        };
+    }
     const options = {
         gridOptions: gridOptions,
         modules: [...all_modules_1.AllCommunityModules],
@@ -98,40 +114,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
             createDefaultLayout: false,
         },
         userInterfaceOptions: {
-            actionColumns: [
-                {
-                    columnId: 'undoActionColumn',
-                    friendlyName: ' ',
-                    includeGroupedRows: true,
-                    actionColumnSettings: { suppressMenu: true, suppressMovable: true },
-                    actionColumnButton: {
-                        label: (button, context) => {
-                            if (context.adaptableApi.gridApi.isGroupRowNode(context.rowNode)) {
-                                return 'Undo Group';
-                            }
-                            return 'Undo Change';
-                        },
-                        onClick: (button, context) => {
-                            var _a;
-                            const rowNode = context.rowNode;
-                            if (context.adaptableApi.gridApi.isGroupRowNode(rowNode)) {
-                                // undo all children
-                                const childrenNodes = (_a = context.rowNode) === null || _a === void 0 ? void 0 : _a.childrenAfterFilter;
-                                if (childrenNodes) {
-                                    childrenNodes.forEach((childNode) => undoRowNode(childNode));
-                                }
-                            }
-                            else {
-                                undoRowNode(rowNode);
-                            }
-                        },
-                        buttonStyle: {
-                            variant: 'raised',
-                            tone: 'accent',
-                        },
-                    },
-                },
-            ],
+            actionOptions: actionOptions,
         },
         predefinedConfig: {
             Layout: {
@@ -174,7 +157,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                         DisplayFormat: {
                             Formatter: 'DateFormatter',
                             Options: {
-                                Pattern: `${(_b = (_a = mainAdaptableOptions.userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.dateInputOptions) === null || _b === void 0 ? void 0 : _b.dateFormat} HH:mm:ss`,
+                                Pattern: `${(_c = (_b = mainAdaptableOptions.userInterfaceOptions) === null || _b === void 0 ? void 0 : _b.dateInputOptions) === null || _c === void 0 ? void 0 : _c.dateFormat} HH:mm:ss`,
                             },
                         },
                     },

package/src/View/DataChangeHistory/buildActionColumnButton.d.ts

@@ -0,0 +1,3 @@
+import { RowNode } from '@ag-grid-community/all-modules';
+import { ActionColumnButtonContext, AdaptableButton, DataChangeHistoryOptions } from '../../types';
+export declare const buildActionColumnButton: (options: DataChangeHistoryOptions, undoRowNode: (rowNode: RowNode) => void) => AdaptableButton<ActionColumnButtonContext>[];

package/src/View/DataChangeHistory/buildActionColumnButton.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildActionColumnButton = void 0;
+exports.buildActionColumnButton = (options, undoRowNode) => {
+    let actionColumnButtonsOptions = options.actionColumnButton;
+    if (!actionColumnButtonsOptions ||
+        (Array.isArray(actionColumnButtonsOptions) && actionColumnButtonsOptions.length === 0)) {
+        return null;
+    }
+    if (!Array.isArray(actionColumnButtonsOptions)) {
+        actionColumnButtonsOptions = [actionColumnButtonsOptions];
+    }
+    const isGroupNode = (context) => context.adaptableApi.gridApi.isGroupRowNode(context.rowNode);
+    const onUndo = (context) => {
+        var _a;
+        const rowNode = context.rowNode;
+        if (context.adaptableApi.gridApi.isGroupRowNode(rowNode)) {
+            // undo all children
+            const childrenNodes = (_a = context.rowNode) === null || _a === void 0 ? void 0 : _a.childrenAfterFilter;
+            if (childrenNodes) {
+                childrenNodes.forEach((childNode) => undoRowNode(childNode));
+            }
+        }
+        else {
+            undoRowNode(rowNode);
+        }
+    };
+    const buildContext = (context) => (Object.assign(Object.assign({}, context), { isGroupNode: isGroupNode(context), undoDataChange: () => onUndo(context) }));
+    return actionColumnButtonsOptions.map((actionColumnOption) => ({
+        label: (button, context) => {
+            if (typeof actionColumnOption.label !== 'function') {
+                return actionColumnOption.label;
+            }
+            return actionColumnOption.label(button, buildContext(context));
+        },
+        buttonStyle: (button, context) => {
+            if (typeof actionColumnOption.buttonStyle !== 'function') {
+                return actionColumnOption.buttonStyle;
+            }
+            return actionColumnOption.buttonStyle(button, buildContext(context));
+        },
+        tooltip: (button, context) => {
+            if (typeof actionColumnOption.tooltip !== 'function') {
+                return actionColumnOption.tooltip;
+            }
+            return actionColumnOption.tooltip(button, buildContext(context));
+        },
+        disabled: (button, context) => {
+            if (typeof actionColumnOption.disabled !== 'function') {
+                return actionColumnOption.disabled;
+            }
+            return actionColumnOption.disabled(button, buildContext(context));
+        },
+        onClick: (button, context) => {
+            if (actionColumnOption.Action === 'undo') {
+                onUndo(buildContext(context));
+            }
+            if (typeof actionColumnOption.onClick === 'function') {
+                actionColumnOption.onClick(button, buildContext(context));
+            }
+        },
+        hidden: (button, context) => {
+            if (typeof actionColumnOption.hidden !== 'function') {
+                return actionColumnOption.hidden;
+            }
+            return actionColumnOption.hidden(button, buildContext(context));
+        },
+        icon: actionColumnOption.icon,
+    }));
+};

package/src/View/DataSet/DataSetSelector.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, DataSet } from '../../../types';
+export declare const DataSetSelector: React.FunctionComponent<{
+    data: DataSet;
+    id?: string;
+    accessLevel: AccessLevel;
+}>;

package/src/View/DataSet/DataSetSelector.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSetSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.DataSetSelector = ({ data }) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dataSets = adaptable.api.dataSetApi.getAllDataSets();
+    const selectedDataSet = adaptable.api.dataSetApi.getCurrentDataSet();
+    const isDisabled = (dataSets === null || dataSets === void 0 ? void 0 : dataSets.length) === 1;
+    const isSelected = (selectedDataSet === null || selectedDataSet === void 0 ? void 0 : selectedDataSet.name) === (data === null || data === void 0 ? void 0 : data.name);
+    const handleToggle = React.useCallback(() => {
+        adaptable.api.dataSetApi.setDataSet(data.name);
+    }, [isSelected]);
+    return React.createElement(Radio_1.default, { id: data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+};

package/src/View/DataSet/DataSetStatusPanelPopover.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const DataSetStatusPanelPopover: React.FunctionComponent;

package/src/View/DataSet/DataSetStatusPanelPopover.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSetStatusPanelPopover = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SelectList_1 = require("../../components/SelectList");
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.DataSetStatusPanelPopover = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dataSets = adaptable.api.dataSetApi.getAllDataSets();
+    const handleDataSetChange = React.useCallback((option) => {
+        adaptable.api.dataSetApi.setDataSet(option.label);
+    }, []);
+    const options = dataSets.map((dataSet) => ({
+        label: dataSet.name,
+        value: dataSet.name,
+    }));
+    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleDataSetChange });
+};

package/src/View/DataSet/DataSetViewPanel.d.ts

@@ -0,0 +1,19 @@
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
+import * as React from 'react';
+import * as Redux from 'redux';
+import { DataSet } from '../../types';
+export interface DataSetViewPanelComponentProps extends ViewPanelProps {
+    CurrentDataSetName: string;
+    onSelectDataSet: (dataSet: DataSet) => Redux.Action;
+}
+interface DataSetViewPanelComponentState {
+    CurrentDataSet: DataSet;
+}
+declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanelComponentProps, DataSetViewPanelComponentState> {
+    getCurrentDataSet(): DataSet;
+    getDataSets(): DataSet[];
+    render(): JSX.Element;
+    onSelectedDataSetChanged(dataSetName: string): void;
+}
+export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, Pick<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "ref" | "key">>;
+export {};

package/src/View/DataSet/DataSetViewPanel.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSetViewPanelControl = void 0;
+const tslib_1 = require("tslib");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const React = tslib_1.__importStar(require("react"));
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const react_redux_1 = require("react-redux");
+class DataSetViewPanelComponent extends React.Component {
+    getCurrentDataSet() {
+        return StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.CurrentDataSetName)
+            ? null
+            : this.getDataSets().find((ds) => ds.name == this.props.CurrentDataSetName);
+    }
+    getDataSets() {
+        return this.props.api.dataSetApi.getAllDataSets();
+    }
+    render() {
+        var _a, _b;
+        const selectDataSetString = 'Select Data Set';
+        let currentDataSetName = (_b = (_a = this.getCurrentDataSet()) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : selectDataSetString;
+        let availableDataSets = this.getDataSets().map((dataSet) => {
+            return {
+                value: dataSet.name,
+                label: dataSet.name,
+                onClick: () => this.onSelectedDataSetChanged(dataSet.name),
+            };
+        });
+        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
+            React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], style: { minWidth: 160, fontSize: 'small' }, className: `ab-${elementType}__DataSet__select`, items: availableDataSets, variant: "outlined", tone: 'neutral' }, currentDataSetName)));
+    }
+    onSelectedDataSetChanged(dataSetName) {
+        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(dataSetName)) {
+            this.setState({ CurrentDataSet: null });
+        }
+        else {
+            let newDataSet = this.getDataSets().find((ds) => ds.name == dataSetName);
+            this.setState({ CurrentDataSet: newDataSet });
+            this.props.onSelectDataSet(newDataSet);
+        }
+    }
+}
+function mapStateToProps(state) {
+    return {
+        CurrentDataSetName: state.System.CurrentDataSet,
+    };
+}
+function mapDispatchToProps(dispatch) {
+    return {
+        onSelectDataSet: (dataSet) => {
+            return dispatch(SystemRedux.SystemDataSetSelect(dataSet));
+        },
+    };
+}
+exports.DataSetViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(DataSetViewPanelComponent);

package/src/View/Filter/ActiveFiltersPanel.js

@@ -9,6 +9,6 @@ const AdaptableObjectCompactList_1 = require("../Components/AdaptableObjectList/
 exports.ActiveFiltersPanel = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.FilterModuleId);
-    const columnFilters = adaptable.api.filterApi.getAllColumnFilter();
+    const columnFilters = adaptable.api.layoutApi.getAllColumnFilter();
     return React.createElement(AdaptableObjectCompactList_1.AdaptableObjectCompactList, { abObjects: columnFilters, module: filterModule });
 };

package/src/View/Filter/FilterSummary.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { ModuleSummaryProps } from '../Components/SharedProps/ModuleSummaryProps';
 import { EditableConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
-import * as FilterRedux from '../../Redux/ActionsReducers/FilterRedux';
-import { ColumnFilter } from '../../PredefinedConfig/FilterState';
-export interface FilterSummaryProps extends ModuleSummaryProps<FilterSummaryComponent> {
+import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
+import { ColumnFilter } from '../../types';
+export interface FilterSummaryProps extends Omit<ModuleSummaryProps<FilterSummaryComponent>, 'onClosePopup' | 'modalContainer'> {
     ColumnFilters: ColumnFilter[];
-    onClearFilter: (columnfilter: ColumnFilter) => FilterRedux.ColumnFilterClearAction;
+    onClearFilter: (columnFilter: ColumnFilter) => LayoutRedux.LayoutFilterClearAction;
 }
 export declare class FilterSummaryComponent extends React.Component<FilterSummaryProps, EditableConfigEntityState> {
     constructor(props: FilterSummaryProps);
     render(): any;
     getDescription(columnFilter: ColumnFilter): string;
 }
-export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, any>;
+export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, Pick<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ref" | "key" | "api" | "onSuspend" | "accessLevel" | "popupParams" | "teamSharingActivated" | "moduleInfo" | "onUnSuspend" | "summarisedColumn">>;

package/src/View/Filter/FilterSummary.js

@@ -7,11 +7,12 @@ const react_redux_1 = require("react-redux");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const TeamSharingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/TeamSharingRedux"));
-const FilterRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/FilterRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const SummaryRowItem_1 = require("../Components/ModuleSummary/SummaryRowItem");
 const ModuleProfile_1 = require("../Components/ModuleProfile");
 const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
 const UIHelper_1 = require("../UIHelper");
+const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
 class FilterSummaryComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -33,18 +34,18 @@ class FilterSummaryComponent extends React.Component {
         if (columnFilter == null) {
             return 'No Column Filter Active';
         }
-        return this.props.api.filterApi.columnFilterToString(columnFilter);
+        return this.props.api.layoutApi.columnFilterToString(columnFilter);
     }
 }
 exports.FilterSummaryComponent = FilterSummaryComponent;
-function mapStateToProps(state, ownProps) {
+function mapStateToProps(state) {
     return {
-        ColumnFilters: state.Filter.ColumnFilters,
+        ColumnFilters: LayoutRedux_1.getColumnFilterSelector(state),
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onClearFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterClear(columnFilter)),
+        onClearFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterClear(columnFilter)),
         onClearPopupParams: () => dispatch(PopupRedux.PopupClearParam()),
         onShare: (entity, config) => dispatch(TeamSharingRedux.TeamSharingShare(entity, ModuleConstants.FilterModuleId, config)),
     };

package/src/View/Filter/FilterViewPanel.d.ts

@@ -1,12 +1,12 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as FilterRedux from '../../Redux/ActionsReducers/FilterRedux';
-import { ColumnFilter } from '../../PredefinedConfig/FilterState';
+import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
 import { Entitlement } from '../../PredefinedConfig/Common/Entitlement';
 import * as React from 'react';
+import { ColumnFilter } from '../../types';
 export interface FilterViewPanelComponentProps extends ViewPanelProps {
-    onHideQuickFilterBar: () => FilterRedux.QuickFilterBarHideAction;
-    onShowQuickFilterBar: () => FilterRedux.QuickFilterBarShowAction;
+    onHideQuickFilterBar: () => SystemRedux.SystemQuickFilterBarHideAction;
+    onShowQuickFilterBar: () => SystemRedux.SystemQuickFilterBarShowAction;
     ColumnFilters: ColumnFilter[];
     Columns: AdaptableColumn[];
     Entitlements: Entitlement[];

package/src/View/Filter/FilterViewPanel.js

@@ -2,50 +2,47 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterViewPanelControl = void 0;
 const tslib_1 = require("tslib");
-const FilterRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/FilterRedux"));
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
 const React = tslib_1.__importStar(require("react"));
 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");
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
-        const activeFiltersPanel = React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null);
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         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(React.Fragment, null,
-                React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [activeFiltersPanel], 
-                    //  tooltipText={'Show Filter Details'}
-                    useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 }),
-                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')))),
+            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, { 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")))));
     }
     onClearFilters() {
-        this.props.api.filterApi.clearAllColumnFilter();
+        this.props.api.layoutApi.clearAllColumnFilter();
     }
     onClearColumnFilter(columnFilter) {
-        this.props.api.filterApi.clearColumnFilterByColumn(columnFilter.ColumnId);
+        this.props.api.layoutApi.clearColumnFilterByColumn(columnFilter.ColumnId);
     }
 }
 function mapStateToProps(state) {
     return {
-        ColumnFilters: state.Filter.ColumnFilters,
-        IsQuickFilterVisible: state.Filter.IsQuickFilterVisible,
+        ColumnFilters: LayoutRedux_1.getColumnFilterSelector(state),
+        IsQuickFilterVisible: state.System.IsQuickFilterVisible,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onHideQuickFilterBar: () => dispatch(FilterRedux.QuickFilterBarHide()),
-        onShowQuickFilterBar: () => dispatch(FilterRedux.QuickFilterBarShow()),
+        onHideQuickFilterBar: () => dispatch(SystemRedux.SystemQuickFilterBarHide()),
+        onShowQuickFilterBar: () => dispatch(SystemRedux.SystemQuickFilterBarShow()),
     };
 }
 exports.FilterViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(FilterViewPanelComponent);

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

@@ -358,7 +358,7 @@ exports.FormatColumnFormatWizardSection = (props) => {
     const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const adaptable = AdaptableContext_1.useAdaptable();
     const formatColumnApi = adaptable.api.formatColumnApi;
-    const customDisplayFormatters = (_c = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.formatColumnOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters) !== null && _c !== void 0 ? _c : [];
+    const customDisplayFormatters = (_c = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.userInterfaceOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters) !== null && _c !== void 0 ? _c : [];
     const update = (updated) => {
         props.onChange(Object.assign(Object.assign({}, data), updated));
     };

package/src/View/GridInfo/GridInfoPopup.js

@@ -57,7 +57,7 @@ exports.GridInfoPopup = (props) => {
         const freeTextColumns = props.api.freeTextColumnApi
             .getAllFreeTextColumn()
             .map((c) => c.ColumnId);
-        const columnFilterDescription = props.api.filterApi.columnFiltersToString(props.api.filterApi.getAllColumnFilter());
+        const columnFilterDescription = props.api.layoutApi.columnFiltersToString(props.api.layoutApi.getAllColumnFilter());
         const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
             ? props.api.gridApi.getColumnSorts().map((gs) => {
                 return props.api.columnApi.getFriendlyNameFromColumnId(gs.ColumnId) + ': ' + gs.SortOrder;