@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

package/src/View/Components/ToolPanel/AdaptableToolPanel.d.ts

@@ -24,20 +24,14 @@ interface AdaptableToolPanelProps {
     onCollapseToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelCollapseToolPanelAction;
 }
 export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => JSX.Element, import("react-redux").Omit<AdaptableToolPanelProps, "onClick" | "Columns" | "ModuleButtons" | "ToolPanels" | "MainMenuItems" | "onNewColumnListOrder" | "onShowToolPanel" | "onHideToolPanel" | "onExpandToolPanel" | "onCollapseToolPanel">>;
-export declare const getAdaptableToolPanelAgGridComponent: (adaptable?: IAdaptable) => {
-    new (): {
-        gui: HTMLElement;
-        init(params?: IToolPanelParams): void;
-        getGui(): HTMLElement;
-        refresh(): void;
-    };
-};
-export declare const AdaptableToolPanelAgGridComponent: {
+export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => JSX.Element) | {
     new (): {
         gui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params?: IToolPanelParams): void;
         getGui(): HTMLElement;
         refresh(): void;
+        destroy(): void;
     };
 };
 export {};

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableToolPanelAgGridComponent = exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
+exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const react_redux_1 = require("react-redux");
-const react_dom_1 = require("react-dom");
 const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
@@ -167,7 +166,7 @@ const AdaptableToolPanelComponent = (props) => {
         });
     };
     const onSetColumnVisibility = (name) => {
-        let changedColumn = props.api.columnApi.getColumnFromId(name);
+        let changedColumn = props.api.columnApi.getColumnWithColumnId(name);
         let columns = [].concat(props.Columns);
         changedColumn = Object.assign({}, changedColumn, {
             Visible: !changedColumn.visible,
@@ -226,19 +225,32 @@ function mapDispatchToProps(dispatch) {
     };
 }
 exports.ConnectedAdaptableToolPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+const toolPanelContainerStyle = {
+    width: '100%',
+    overflow: 'auto',
+};
 const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+    function getContainerId() {
+        return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return () => {
+            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
+        };
+    }
     return class AdaptableToolPanelAgGridComponent {
         init(params) {
-            const agGridApi = params.api;
-            const Adaptable = agGridApi.__adaptable || adaptable;
-            const api = Adaptable.api;
+            const api = adaptable.api;
             this.gui = document.createElement('div');
-            this.gui.id = 'adaptable-tool-panel_' + Adaptable.adaptableOptions.adaptableId;
+            this.gui.id = getContainerId();
             // preserve ag-grid naming convention
             this.gui.className = 'ag-adaptable-panel';
-            this.gui.style.width = '100%';
-            this.gui.style.overflow = 'auto';
-            (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), Adaptable), this.gui);
+            Object.keys(toolPanelContainerStyle).forEach((key) => {
+                //@ts-ignore
+                this.gui.style[key] = toolPanelContainerStyle[key];
+            });
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -249,7 +261,10 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         refresh() {
             // no refresh logic needed
         }
+        destroy() {
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
     };
 };
 exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;
-exports.AdaptableToolPanelAgGridComponent = (0, exports.getAdaptableToolPanelAgGridComponent)();

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -34,7 +34,7 @@ const CustomToolPanelContent = (props) => {
             if (hasCustomRenderFn(customToolPanel)) {
                 customToolPanel.render({ visible: false, element, adaptableApi: api });
             }
-            else if (hasCustomFrameworkComponent(customToolPanel)) {
+            else if (hasCustomFrameworkComponent(customToolPanel) && !api.isDestroyed()) {
                 api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
             }
         };

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -23,5 +23,5 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
     onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
     onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
-export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "modalContainer" | "moduleInfo" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "ToolPanelState" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
+export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "moduleInfo" | "onUnSuspend" | "teamSharingActivated" | "ToolPanelState" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
 export {};

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -26,7 +26,6 @@ class ToolPanelPopupComponent extends React.Component {
         };
     }
     render() {
-        const moduleService = this.props.api.internalApi.getModuleService();
         const entitlementService = this.props.api.internalApi.getEntitlementService();
         // 1. process module buttons
         const selectedModuleButtons = [];

package/src/View/CustomSort/CustomSortSummary.js

@@ -37,7 +37,7 @@ class CustomSortSummaryComponent extends React.Component {
     }
     render() {
         const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
-        const columnSortComparer = this.props.api.internalApi.getCustomSortComparer(this.props.summarisedColumn);
+        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn);
         let noCustomSort = customSort == null && columnSortComparer == null;
         let customSortRow;
         if (!this.props.summarisedColumn.sortable) {

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -12,7 +12,7 @@ const renderCustomSortColumn = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
         "Custom sort column: ",
-        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameFromColumnId(data.ColumnId))));
+        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };
 exports.renderCustomSortColumn = renderCustomSortColumn;
 const isValidCustomSortColumn = (data) => {
@@ -27,7 +27,7 @@ const CustomSortColumnWizardSection = (props) => {
     const sortableCols = React.useMemo(() => {
         var _a, _b;
         const sortableColumns = api.columnApi.getSortableColumns();
-        const customSorts = api.customSortApi.getAllCustomSort();
+        const customSorts = api.customSortApi.getCustomSorts();
         const columnSortComparers = ((_b = (_a = api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.customSortComparers) || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),

package/src/View/CustomSort/Wizard/CustomSortSummaryWizard.js

@@ -12,7 +12,7 @@ class CustomSortSummaryWizard extends React.Component {
         let keyValuePairs = [
             {
                 Key: 'Column',
-                Value: this.props.api.columnApi.getFriendlyNameFromColumnId(this.props.data.ColumnId),
+                Value: this.props.api.columnApi.getFriendlyNameForColumnId(this.props.data.ColumnId),
             },
             { Key: 'Values', Value: this.props.data.SortedValues.join(', ') },
         ];

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -33,7 +33,7 @@ const CustomSortValuesWizardSection = (props) => {
         (async () => {
             // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
-            const newValues = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.columnApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
+            const newValues = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
             if (!isMounted) {
                 return;
             }

package/src/View/Dashboard/Dashboard.js

@@ -102,7 +102,7 @@ const DashboardComponent = (props) => {
         return (React.createElement(rebass_1.Box, { ml: 2 },
             React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
-    let instanceName = props.api.internalApi.setToolbarTitle();
+    let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.internalApi.getAdaptableOptions().dashboardOptions;
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
         props.api.internalApi.getModuleService().getModuleById(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
@@ -125,8 +125,9 @@ const DashboardComponent = (props) => {
             }
         }, left: React.createElement(React.Fragment, null,
             React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: "ab-Dashboard__application-icon" }),
-            dashboardOptions.buttonsLocation === 'left' && renderModuleButtons()), right: React.createElement(React.Fragment, null,
-            renderDashboardButtons(),
+            dashboardOptions.buttonsLocation === 'left' && renderModuleButtons(),
+            dashboardOptions.buttonsLocation === 'left' && renderDashboardButtons()), right: React.createElement(React.Fragment, null,
+            dashboardOptions.buttonsLocation === 'right' && renderDashboardButtons(),
             dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
             shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
         props.DashboardState.Tabs.map((tab, index) => (React.createElement(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));

package/src/View/Dashboard/DashboardPopup.js

@@ -72,7 +72,7 @@ class DashboardPopupComponent extends React.Component {
         };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Views', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
+                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
                     React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
                     ' ',
                     this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -281,7 +281,7 @@ const headerMap = new Map();
 const getColumnHeaderLabel = (columnId, mainAdaptableInstance) => {
     var _a, _b;
     if (!headerMap.has(columnId)) {
-        headerMap.set(columnId, (_b = (_a = mainAdaptableInstance.api.columnApi.getColumnFromId(columnId)) === null || _a === void 0 ? void 0 : _a.friendlyName) !== null && _b !== void 0 ? _b : columnId);
+        headerMap.set(columnId, (_b = (_a = mainAdaptableInstance.api.columnApi.getColumnWithColumnId(columnId)) === null || _a === void 0 ? void 0 : _a.friendlyName) !== null && _b !== void 0 ? _b : columnId);
     }
     return headerMap.get(columnId);
 };

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -12,6 +12,8 @@ const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
 const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
 const AdaptableContext_1 = require("../AdaptableContext");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const icons_1 = require("../../components/icons");
 const DataChangeHistoryViewPanelControl = (props) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -20,6 +22,9 @@ const DataChangeHistoryViewPanelControl = (props) => {
     const onChangeHistoryDisable = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistoryDisable)()), []);
     const onChangeHistorySuspend = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistorySuspend)()), []);
     const onChangeHistoryResume = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistoryResume)()), []);
+    const handleOpenPopup = React.useCallback(() => {
+        adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
+    }, []);
     const { changeHistoryMode, activationTime, suspensionTime } = (0, react_redux_1.useSelector)((state) => ({
         changeHistoryMode: state.System.DataChangeHistory.currentMode,
         activationTime: state.System.DataChangeHistory.enableTime,
@@ -44,6 +49,10 @@ const DataChangeHistoryViewPanelControl = (props) => {
         disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate data tracking"))));
     return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
         buttonPanel,
-        statusPanel));
+        statusPanel,
+        React.createElement(rebass_1.Flex, { ml: 2, alignItems: "center" },
+            React.createElement(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text" },
+                React.createElement(icons_1.Icon, { name: "open-in-new" }),
+                React.createElement(rebass_1.Box, { ml: 1 }, "Show")))));
 };
 exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;

package/src/View/DataSet/DataSetSelector.js

@@ -7,13 +7,13 @@ const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const DataSetSelector = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const dataSets = adaptable.api.dataSetApi.getAllDataSets();
+    const dataSets = adaptable.api.dataSetApi.getDataSets();
     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 });
+    return (React.createElement(Radio_1.default, { "data-name": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
 exports.DataSetSelector = DataSetSelector;

package/src/View/DataSet/DataSetStatusPanelPopover.js

@@ -7,7 +7,7 @@ const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
 const DataSetStatusPanelPopover = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const dataSets = adaptable.api.dataSetApi.getAllDataSets();
+    const dataSets = adaptable.api.dataSetApi.getDataSets();
     const handleDataSetChange = React.useCallback((option) => {
         adaptable.api.dataSetApi.setDataSet(option.label);
     }, []);

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

@@ -15,5 +15,5 @@ declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanel
     render(): JSX.Element;
     onSelectedDataSetChanged(dataSetName: string): void;
 }
-export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "api" | "moduleInfo" | "accessLevel" | "viewType" | "CurrentDataSetName" | "onSelectDataSet">>;
+export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "viewType" | "CurrentDataSetName" | "onSelectDataSet">>;
 export {};

package/src/View/DataSet/DataSetViewPanel.js

@@ -15,7 +15,7 @@ class DataSetViewPanelComponent extends React.Component {
             : this.getDataSets().find((ds) => ds.name == this.props.CurrentDataSetName);
     }
     getDataSets() {
-        return this.props.api.dataSetApi.getAllDataSets();
+        return this.props.api.dataSetApi.getDataSets();
     }
     render() {
         var _a, _b;

package/src/View/Export/ExportSelector.js

@@ -21,7 +21,7 @@ const ExportSelector = () => {
     const handleReportChange = (report) => {
         adaptable.api.exportApi.selectReport(report);
     };
-    const allReports = adaptable.api.exportApi.getAllReports();
+    const allReports = adaptable.api.exportApi.getReports();
     const allReportNames = allReports.map((report) => report.Name);
     const reportItems = allReportNames.map((report) => {
         return {
@@ -43,7 +43,7 @@ const ExportSelector = () => {
             label: destination,
             onClick: () => handleDestinationChange(destination),
         })),
-        ...adaptable.api.exportApi.getAllCustomDestination().map((destination) => ({
+        ...adaptable.api.exportApi.getCustomDestinations().map((destination) => ({
             label: destination.name,
             onClick: () => handleDestinationChange(destination.name),
         })),

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

@@ -25,5 +25,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" | "Columns" | "CurrentReport" | "CurrentDestination" | "moduleInfo" | "accessLevel" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
+export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "CurrentReport" | "CurrentDestination" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
 export {};

package/src/View/Export/ExportViewPanel.js

@@ -51,7 +51,7 @@ class ExportViewPanelComponent extends React.Component {
                 label: destination,
                 onClick: () => this.onSelectedDestinationChanged(destination),
             })),
-            ...this.props.api.exportApi.getAllCustomDestination().map((destination) => ({
+            ...this.props.api.exportApi.getCustomDestinations().map((destination) => ({
                 label: destination.name,
                 onClick: () => this.onSelectedDestinationChanged(destination.name),
             })),
@@ -84,7 +84,7 @@ class ExportViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, 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: (0, 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 || this.props.api.exportApi.isCustomReport(currentReport), 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.isServerReport(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
@@ -102,9 +102,9 @@ class ExportViewPanelComponent extends React.Component {
             ...this.props.api.exportApi.getAvailableSystemReports(),
             ...this.props.UserReports.map((r) => r.Name),
         ];
-        const customReports = this.props.api.exportApi.getAllCustomReports();
-        if (ArrayExtensions_1.default.IsNotNullOrEmpty(customReports)) {
-            reportNames.push(...customReports.map((r) => r.name));
+        const serverReports = this.props.api.exportApi.getServerReports();
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(serverReports)) {
+            reportNames.push(...serverReports.map((r) => r.name));
         }
         return reportNames;
     }

package/src/View/Export/ReportExportDropdown.js

@@ -22,7 +22,7 @@ const ReportExportDropdown = (props) => {
             label: destination,
             onClick: () => handleExport(destination),
         })),
-        ...adaptable.api.exportApi.getAllCustomDestination().map((destination) => ({
+        ...adaptable.api.exportApi.getCustomDestinations().map((destination) => ({
             label: destination.name,
             onClick: () => {
                 handleExport(destination.name);
@@ -32,7 +32,7 @@ const ReportExportDropdown = (props) => {
     if ((report === null || report === void 0 ? void 0 : report.Name) === GeneralConstants_1.VISUAL_DATA_REPORT) {
         destinationItems.forEach((item) => (item.disabled = item.label === Enums_1.ExportDestination.Excel ? false : true));
     }
-    return (React.createElement(DropdownButton_1.default, { columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
+    return (React.createElement(DropdownButton_1.default, { "data-name": "export-dropdown", columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
         React.createElement(icons_1.Icon, { name: "export" })));
 };
 exports.ReportExportDropdown = ReportExportDropdown;

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

@@ -21,7 +21,7 @@ const isValidReportName = (report, api) => {
         return 'Report name cannot be empty';
     }
     const reportsWithSameNameCount = api.exportApi
-        .getAllReports()
+        .getReports()
         .filter((r) => report.Name === r.Name).length;
     const hasAlreadyExistingName = report.Uuid
         ? reportsWithSameNameCount > 1
@@ -33,16 +33,15 @@ const ReportNameWizardSection = (props) => {
     const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const validCheck = (0, exports.isValidReportName)(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, null,
-            React.createElement(FormLayout_1.default, { columns: [1, 2] },
-                React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
-                    React.createElement(Input_1.default, { width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
-                            props.onChange(Object.assign(Object.assign({}, data), { Name: e.target.value }));
-                        } })),
-                React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(React.Fragment, null),
-                    ErrorMessage ? React.createElement(ErrorBox_1.default, null, ErrorMessage) : null)))));
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(FormLayout_1.default, { columns: [1, 2] },
+            React.createElement(FormLayout_1.FormRow, null,
+                React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
+                React.createElement(Input_1.default, { "data-name": "export-name", width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { Name: e.target.value }));
+                    } })),
+            React.createElement(FormLayout_1.FormRow, null,
+                React.createElement(React.Fragment, null),
+                ErrorMessage ? React.createElement(ErrorBox_1.default, null, ErrorMessage) : null))));
 };
 exports.ReportNameWizardSection = ReportNameWizardSection;

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

@@ -70,6 +70,6 @@ const ReportRowsWizardSection = (props) => {
                         props.onChange(Object.assign(Object.assign({}, data), { Query: {
                                 BooleanExpression,
                             } }));
-                    }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api })))));
+                    }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api })))));
 };
 exports.ReportRowsWizardSection = ReportRowsWizardSection;

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

@@ -12,4 +12,4 @@ export declare class FilterSummaryComponent extends React.Component<FilterSummar
     render(): any;
     getDescription(columnFilter: ColumnFilter): string;
 }
-export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onClearPopupParams" | "onShare" | "onClearFilter">>;
+export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onShare" | "onClearPopupParams" | "onClearFilter">>;

package/src/View/Filter/FilterSummary.js

@@ -34,7 +34,7 @@ class FilterSummaryComponent extends React.Component {
         if (columnFilter == null) {
             return 'No Column Filter Active';
         }
-        return this.props.api.filterApi.columnFilterToString(columnFilter);
+        return this.props.api.filterApi.internalApi.columnFilterToString(columnFilter);
     }
 }
 exports.FilterSummaryComponent = FilterSummaryComponent;

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

@@ -18,5 +18,5 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
     private onClearFilters;
     private onClearColumnFilter;
 }
-export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "api" | "Columns" | "ColumnFilters" | "moduleInfo" | "accessLevel" | "IsQuickFilterVisible" | "viewType" | "onHideQuickFilterBar" | "onShowQuickFilterBar" | "Entitlements">>;
+export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Columns" | "ColumnFilters" | "IsQuickFilterVisible" | "viewType" | "onHideQuickFilterBar" | "onShowQuickFilterBar" | "Entitlements">>;
 export {};

package/src/View/Filter/FilterViewPanel.js

@@ -47,7 +47,7 @@ class FilterViewPanelComponent extends React.Component {
         this.props.api.filterApi.clearColumnFilters();
     }
     onClearColumnFilter(columnFilter) {
-        this.props.api.filterApi.clearColumnFilterByColumn(columnFilter.ColumnId);
+        this.props.api.filterApi.clearColumnFilterForColumn(columnFilter.ColumnId);
     }
 }
 function mapStateToProps(state) {

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -8,13 +8,13 @@ const StylePreview_1 = require("../../components/StylePreview");
 const FlashingCellStyle = (props) => {
     const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
     return (react_1.default.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row" }, boxProps),
-        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
             "Up ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
             "Down",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { flex: 1, styleObject: props.data.NeutralChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
             "Neutral ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -36,15 +36,15 @@ const FlashingAlertRulesWizardSection = (props) => {
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
             useObservableQuery: (React.createElement(React.Fragment, null,
                 "Use an ObservableQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
             useAggregationQuery: (React.createElement(React.Fragment, null,
                 "Use an AggregatedBooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };
 exports.FlashingAlertRulesWizardSection = FlashingAlertRulesWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -14,11 +14,11 @@ const FlashingAlertScopeWizardSection = (props) => {
                 columnScope: 'Changes in selected columns will trigger an Flashing Cell',
             }, scope: data.Scope, updateScope: (Scope) => {
                 const newData = Object.assign(Object.assign({}, data), { Scope });
-                if (newData.Rule.Predicate) {
+                if (newData.Rule.Predicates) {
                     // when scope is changed, reset the rule to predicate of any
                     // if it was set to a predicate before
                     newData.Rule = {
-                        Predicate: { PredicateId: 'Any' },
+                        Predicates: [{ PredicateId: 'Any' }],
                     };
                 }
                 props.onChange(newData);

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -64,23 +64,23 @@ const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
-                        React.createElement(Radio_1.default, { mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio_1.default, { checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
                             React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
-                            React.createElement(Input_1.default, { readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
                                     const value = event.target.value;
                                     setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                 } }),
                             React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
                         duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
                                 ((_c = (_b = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'cell')), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox_1.CheckBox, { mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
                                 ((_e = (_d = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _d === void 0 ? void 0 : _d.includes) === null || _e === void 0 ? void 0 : _e.call(_d, 'row')), tabIndex: -1 }, "Row"),
-                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
                                 ((_g = (_f = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _f === void 0 ? void 0 : _f.includes) === null || _g === void 0 ? void 0 : _g.call(_f, 'aggFuncCell')), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -22,11 +22,13 @@ const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection"
 const FlashingCellWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const [flashingCell, setFlashingCell] = (0, react_1.useState)(() => {
+        var _a, _b;
         let flashingCell = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
-        flashingCell = api.flashingCellApi.mergeFlashingCellDefinitionWithDefaults(flashingCell);
-        if (!flashingCell.Rule.BooleanExpression && !flashingCell.Rule.Predicate) {
+        flashingCell =
+            api.flashingCellApi.internalApi.mergeFlashingCellDefinitionWithDefaults(flashingCell);
+        if (!flashingCell.Rule.BooleanExpression && !((_b = (_a = flashingCell.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length)) {
             flashingCell.Rule.BooleanExpression = '';
         }
         return flashingCell;
@@ -44,9 +46,6 @@ const FlashingCellWizard = (props) => {
         UpChangeStyle: (0, react_1.useCallback)(updateProperty('UpChangeStyle'), []),
         NeutralChangeStyle: (0, react_1.useCallback)(updateProperty('NeutralChangeStyle'), []),
     };
-    const flashStyleComponent = (React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
-            updateStyles[styleName](style);
-        } }));
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
         if (props.data) {
@@ -81,7 +80,10 @@ const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose the Flashing Styles',
-                render: () => React.createElement(rebass_1.Box, { padding: 2 }, flashStyleComponent),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                            updateStyles[styleName](style);
+                        } }))),
                 renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },