@adaptabletools/adaptable 19.2.3 → 20.0.0-canary.0

package/src/View/Dashboard/CustomToolbar.js

@@ -18,12 +18,9 @@ export const CustomToolbarCmp = (props) => {
         const adaptableApi = api;
         if (props.customToolbar.render) {
             const html = props.customToolbar.render({
-                visible: true,
                 phase: 'onMount',
                 element,
-                adaptableApi,
-                userName: adaptableApi.optionsApi.getUserName(),
-                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                ...adaptableApi.internalApi.buildBaseContext(),
             });
             setRenderedContentHTML(html);
         }
@@ -35,12 +32,9 @@ export const CustomToolbarCmp = (props) => {
         return () => {
             if (props.customToolbar.render) {
                 props.customToolbar.render({
-                    visible: false,
                     phase: 'onDestroy',
                     element,
-                    adaptableApi,
-                    userName: adaptableApi.optionsApi.getUserName(),
-                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                    ...adaptableApi.internalApi.buildBaseContext(),
                 });
             }
         };
@@ -52,14 +46,12 @@ export const CustomToolbarCmp = (props) => {
             adaptableApi.internalApi.createFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
         }
         const destroyUnsubscribe = adaptableApi.eventApi.on('AdaptableDestroy', () => {
-            var _a;
-            (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
+            adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
         });
         return () => {
-            var _a;
             destroyUnsubscribe();
             if (props.customToolbar.frameworkComponent) {
-                (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
+                adaptableApi?.internalApi?.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
             }
         };
     }, []);
@@ -70,10 +62,8 @@ export const CustomToolbarCmp = (props) => {
         props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
             const dashboardContext = {
                 customToolbar: props.customToolbar,
-                adaptableApi: api,
-                userName: api.optionsApi.getUserName(),
-                adaptableId: api.optionsApi.getAdaptableId(),
                 dashboardState: api.dashboardApi.getDashboardState(),
+                ...api.internalApi.buildBaseContext(),
             };
             const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
             let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
@@ -85,7 +75,7 @@ export const CustomToolbarCmp = (props) => {
             const disabled = button.disabled && button.disabled(button, dashboardContext);
             let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
             let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
+            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
                     button.onClick ? button.onClick(button, dashboardContext) : null;
                     setTimeout(() => {
                         // mutate state to force a re-rendering
@@ -97,10 +87,13 @@ export const CustomToolbarCmp = (props) => {
 };
 export const CustomToolbarWrapper = (props) => {
     const { api } = useAdaptable();
-    return (React.createElement(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
-            props.customToolbar.showConfigureButton == true, showCloseButton: props.customToolbar.showCloseButton != null && props.customToolbar.showCloseButton == true, onConfigure: () => {
-            const customToolbarConfiguredInfo = Object.assign(Object.assign({}, api.internalApi.buildBaseContext()), { customToolbar: props.customToolbar });
+    return (React.createElement(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'Configure') !=
+            undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'Close') != undefined, onConfigure: () => {
+            const customToolbarConfiguredInfo = {
+                ...api.internalApi.buildBaseContext(),
+                customToolbar: props.customToolbar,
+            };
             api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
         }, accessLevel: api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard') },
-        React.createElement(CustomToolbarCmp, Object.assign({}, props))));
+        React.createElement(CustomToolbarCmp, { ...props })));
 };

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

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import * as Redux from 'redux';
+import * as React from 'react';
 import { SystemStatusMessageInfo } from '../../PredefinedConfig/Common/SystemStatusMessageInfo';
 import { AdaptableCoordinate, DashboardState } from '../../PredefinedConfig/DashboardState';
-import { GridState } from '../../PredefinedConfig/GridState';
+import { InternalState } from '../../PredefinedConfig/InternalState';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+import type { Action } from 'redux';
 interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     DashboardRevision: number;
     DashboardState: DashboardState;
-    GridState: GridState;
+    InternalState: InternalState;
     SystemStatusMessageInfos: SystemStatusMessageInfo[];
     QuickSearchText: string;
-    dispatch: (action: Redux.Action) => Redux.Action;
+    dispatch: (action: Action) => Action;
     onSetActiveTabIndex: (ActiveTabIndex: number | null) => DashboardRedux.DashboardSetActiveTabIndexAction;
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
@@ -23,5 +23,7 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;
     onShowDashboardPopup: () => PopupRedux.PopupShowScreenAction;
 }
-export declare let Dashboard: import("react-redux").ConnectedComponent<(props: DashboardComponentProps) => JSX.Element, any>;
+export declare let Dashboard: import("react-redux").ConnectedComponent<(props: DashboardComponentProps) => React.JSX.Element, {
+    [x: string]: any;
+}>;
 export {};

package/src/View/Dashboard/Dashboard.js

@@ -57,18 +57,21 @@ const DashboardComponent = (props) => {
         let shortcutsArray = props.DashboardState.ModuleButtons;
         let shortcuts = null;
         const alwaysShowInDashboard = props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-        const shouldAddSettingsPanel = alwaysShowInDashboard &&
-            !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
+        const shouldAddSettingsPanel = alwaysShowInDashboard && !props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
         if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
             shortcutsArray.push('SettingsPanel');
         }
         if (shortcutsArray) {
             shortcuts = shortcutsArray.map((x, index) => {
-                var _a, _b, _c;
-                let menuItem = props.GridState.ModuleButtonMenuItems.find((y) => y.isVisible && y.module == x);
+                let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${(_a = menuItem.module) !== null && _a !== void 0 ? _a : 'custom-' + index}`, key: menuItem.label, variant: menuItem.module === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.module === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.module === 'SystemStatus'
-                            ? Object.assign(Object.assign({}, UIHelper.getStyleForMessageType((_c = (_b = props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()) === null || _b === void 0 ? void 0 : _b.statusType) !== null && _c !== void 0 ? _c : 'Success')), { border: 0 }) : {} }));
+                    return (React.createElement(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
+                            ? {
+                                ...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
+                                    'Success'),
+                                border: 0,
+                            }
+                            : {} }));
                 }
             });
         }
@@ -79,7 +82,7 @@ const DashboardComponent = (props) => {
             .getCustomDashboardButtons()
             .filter(Boolean);
         let customDashboardButtons = null;
-        if (dashboardButtonsArray === null || dashboardButtonsArray === void 0 ? void 0 : dashboardButtonsArray.length) {
+        if (dashboardButtonsArray?.length) {
             customDashboardButtons = dashboardButtonsArray.map((button, index) => (React.createElement(CustomDashboardButton, { key: `${button.label}-${index}`, button: button, api: props.api, accessLevel: props.accessLevel })));
         }
         return customDashboardButtons;
@@ -123,10 +126,10 @@ const DashboardComponent = (props) => {
 };
 function mapStateToProps(state, ownProps) {
     return {
-        DashboardRevision: state.System.DashboardRevision,
+        DashboardRevision: state.Internal.Dashboard.DashboardRevision,
         DashboardState: state.Dashboard,
-        GridState: state.Grid,
-        SystemStatusMessageInfos: state.System.SystemStatusMessages,
+        InternalState: state.Internal,
+        SystemStatusMessageInfos: state.Internal.SystemStatusMessages,
         QuickSearchText: state.QuickSearch.QuickSearchText,
     };
 }

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-import { GridState } from '../../PredefinedConfig/GridState';
+import { InternalState } from '../../PredefinedConfig/InternalState';
 import { DashboardState, DashboardTab } from '../../PredefinedConfig/DashboardState';
 interface DashboardPopupComponentProps extends ModuleViewPopupProps<DashboardPopupComponent> {
     DashboardState: DashboardState;
-    GridState: GridState;
+    InternalState: InternalState;
     IsCollapsed: boolean;
     IsHidden: boolean;
     IsFloating: boolean;
@@ -25,8 +25,10 @@ export interface DashboardPopupState {
 }
 declare class DashboardPopupComponent extends React.Component<DashboardPopupComponentProps, DashboardPopupState> {
     constructor(props: DashboardPopupComponentProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onDashboardConfigViewChanged(event: React.FormEvent<any>): void;
 }
-export declare let DashboardPopup: import("react-redux").ConnectedComponent<typeof DashboardPopupComponent, any>;
+export declare let DashboardPopup: import("react-redux").ConnectedComponent<typeof DashboardPopupComponent, {
+    [x: string]: any;
+}>;
 export {};

package/src/View/Dashboard/DashboardPopup.js

@@ -42,16 +42,16 @@ class DashboardPopupComponent extends React.Component {
                     ? true
                     : this.props.api.internalApi.getModuleService().isModuleAvailable(vt);
             });
-            return Object.assign(Object.assign({}, tab), { Toolbars });
+            return { ...tab, Toolbars };
         });
         let selectedModuleButtons = [];
         this.props.DashboardState.ModuleButtons.forEach((x) => {
-            let menuItem = this.props.GridState.SettingPanelModuleMenuItems.find((m) => m.module == x);
-            if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.isVisible) {
+            let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == x);
+            if (menuItem?.isVisible) {
                 selectedModuleButtons.push(x);
             }
         });
-        const allModuleButtons = this.props.GridState.SettingPanelModuleMenuItems.map((x) => x.module);
+        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
         const baseClassName = 'ab-Dashboard-Popup';
         const dashboardAccessLevel = this.props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
         const areDashboardSettingsVisible = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
@@ -94,7 +94,7 @@ class DashboardPopupComponent extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         DashboardState: state.Dashboard,
-        GridState: state.Grid,
+        InternalState: state.Internal,
         IsCollapsed: state.Dashboard.IsCollapsed,
         IsHidden: state.Dashboard.IsHidden,
         IsFloating: state.Dashboard.IsFloating,

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -24,7 +24,7 @@ const SystemDashboardToolbarFactory = (props) => {
     return moduleToolbarElement;
 };
 const CustomDashboardToolbarFactory = (props) => {
-    const revision = useSelector((state) => state.System.DashboardRevision);
+    const revision = useSelector((state) => state.Internal.Dashboard.DashboardRevision);
     const adaptable = useAdaptable();
     const customToolbars = adaptable.api.dashboardApi.getCustomToolbars();
     const customToolbar = customToolbars && customToolbars.find((ct) => ct.name == props.toolbarName);

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

@@ -11,7 +11,9 @@ export interface DashboardViewPanelComponentProps extends ViewPanelProps {
 }
 declare class DashboardViewPanelComponent extends React.Component<DashboardViewPanelComponentProps, {}> {
     constructor(props: DashboardViewPanelComponentProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
-export declare let DashboardViewPanelControl: import("react-redux").ConnectedComponent<typeof DashboardViewPanelComponent, any>;
+export declare let DashboardViewPanelControl: import("react-redux").ConnectedComponent<typeof DashboardViewPanelComponent, {
+    [x: string]: any;
+}>;
 export {};

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

@@ -6,4 +6,4 @@ export interface ModuleToolbarWrapperProps {
     accessLevel: AccessLevel;
     children: React.ReactNode;
 }
-export declare const ModuleToolbarWrapper: (props: ModuleToolbarWrapperProps) => JSX.Element;
+export declare const ModuleToolbarWrapper: (props: ModuleToolbarWrapperProps) => React.JSX.Element;

package/src/View/Dashboard/ModuleToolbarWrapper.js

@@ -8,7 +8,7 @@ export const ModuleToolbarWrapper = (props) => {
     const moduleFriendlyName = props.moduleInfo.FriendlyName;
     const { api } = useAdaptable();
     const isConfigurable = moduleName !== 'OpenFin' && moduleName !== 'IPushPull';
-    return (React.createElement(PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureButton: isConfigurable, onConfigure: () => {
+    return (React.createElement(PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureActionButton: isConfigurable, onConfigure: () => {
             const maxWidth = api.internalApi.getModuleService().getPopupMaxWidth(moduleName);
             const popupParams = maxWidth
                 ? { maxWidth, source: 'Toolbar' }

package/src/View/Dashboard/PinnedDashboard.js

@@ -4,10 +4,9 @@ import { Box, Flex } from 'rebass';
 import { useAdaptable } from '../AdaptableContext';
 import { DashboardToolbarFactory } from './DashboardToolbarFactory';
 export const PinnedDashboard = (props) => {
-    var _a;
     const adaptable = useAdaptable();
     const dashboardState = useSelector((state) => state.Dashboard);
-    const pinnedToolbars = ((_a = dashboardState.PinnedToolbars) !== null && _a !== void 0 ? _a : []).filter((tb) => adaptable.api.dashboardApi.internalApi.isToolbarCustom(tb) ||
+    const pinnedToolbars = (dashboardState.PinnedToolbars ?? []).filter((tb) => adaptable.api.dashboardApi.internalApi.isToolbarCustom(tb) ||
         adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -26,7 +26,7 @@ export const PinnedToolbarsSelector = (props) => {
         return [
             {
                 Name: 'Pinned Toolbars',
-                Items: pinnedToolbars !== null && pinnedToolbars !== void 0 ? pinnedToolbars : [],
+                Items: pinnedToolbars ?? [],
             },
         ];
     }, [pinnedToolbars]);

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChangedInfo';
 export interface DataChangeHistoryData {
     primaryKey: string;
@@ -14,4 +14,4 @@ export interface DataChangeHistoryGridProps {
     onUndoChange: (changeKey: string) => void;
     onClearRow: (changeKey: string) => void;
 }
-export declare const DataChangeHistoryGrid: (props: DataChangeHistoryGridProps) => JSX.Element;
+export declare const DataChangeHistoryGrid: (props: DataChangeHistoryGridProps) => React.JSX.Element;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -17,7 +17,7 @@ export const DataChangeHistoryGrid = (props) => {
     useEffect(() => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
-            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
+            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
             const modules = mainAdaptableInstance.getAgGridRegisteredModules();
             const dataChangeHistoryAdaptableApi = await AdaptableAgGrid._initInternal({
                 variant: 'vanilla',
@@ -30,8 +30,9 @@ export const DataChangeHistoryGrid = (props) => {
         initializeAdaptableGrid();
         return () => {
             requestAnimationFrame(() => {
-                var _a;
-                (_a = adaptableApiRef.current) === null || _a === void 0 ? void 0 : _a.internalApi.getAdaptableInstance().destroy({ unmount: true, destroyAgGrid: true });
+                adaptableApiRef.current?.internalApi
+                    .getAdaptableInstance()
+                    .destroy({ unmount: true, destroyAgGrid: true });
             });
         };
     }, []);
@@ -72,21 +73,20 @@ export const DataChangeHistoryGrid = (props) => {
     }, [changeHistoryLog]);
     return React.createElement(React.Fragment, null);
 };
-const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow) => {
-    var _a, _b, _c;
+const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow) => {
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
     const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
     const undoRowNode = (rowNode) => {
-        const rowData = rowNode === null || rowNode === void 0 ? void 0 : rowNode.data;
-        const changeKey = rowData === null || rowData === void 0 ? void 0 : rowData['changeKey'];
+        const rowData = rowNode?.data;
+        const changeKey = rowData?.['changeKey'];
         changeKey && onUndoChange(changeKey);
     };
     const clearRow = (rowNode) => {
-        const rowData = rowNode === null || rowNode === void 0 ? void 0 : rowNode.data;
-        const changeKey = rowData === null || rowData === void 0 ? void 0 : rowData['changeKey'];
+        const rowData = rowNode?.data;
+        const changeKey = rowData?.['changeKey'];
         changeKey && onClearRow(changeKey);
     };
-    const actionColumnButton = buildActionColumnButton((_a = mainAdaptableInstance.adaptableOptions) === null || _a === void 0 ? void 0 : _a.dataChangeHistoryOptions, mainAdaptableInstance.api, undoRowNode, clearRow);
+    const actionColumnButton = buildActionColumnButton(mainAdaptableInstance.adaptableOptions?.dataChangeHistoryOptions, mainAdaptableInstance.api, undoRowNode, clearRow);
     let actionColumnOptions = undefined;
     if (actionColumnButton) {
         actionColumnOptions = {
@@ -116,15 +116,6 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         entitlementOptions: {
             defaultAccessLevel: 'Hidden',
         },
-        columnFilterOptions: {
-            quickFilterOptions: {
-                quickFilterTrigger: 'click',
-            },
-        },
-        layoutOptions: {
-            createDefaultLayout: false,
-            autoSizeColumnsInLayout: true,
-        },
         actionColumnOptions: actionColumnOptions,
         predefinedConfig: {
             Layout: {
@@ -133,7 +124,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                 Layouts: [
                     {
                         Name: 'DataChangeHistoryLayout',
-                        Columns: [
+                        TableColumns: [
                             'changeInfo.primaryKeyValue',
                             'changedColumnLabel',
                             'changeInfo.oldValue',
@@ -148,12 +139,13 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                                 SortOrder: 'Desc',
                             },
                         ],
-                        ColumnWidthMap: {
+                        ColumnWidths: {
                             undoActionColumn: 110,
                         },
-                        PinnedColumnsMap: {
+                        ColumnPinning: {
                             undoActionColumn: 'right',
                         },
+                        AutoSizeColumns: true,
                     },
                 ],
             },
@@ -167,7 +159,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                         DisplayFormat: {
                             Formatter: 'DateFormatter',
                             Options: {
-                                Pattern: `${(_c = (_b = mainAdaptableOptions.userInterfaceOptions) === null || _b === void 0 ? void 0 : _b.dateInputOptions) === null || _c === void 0 ? void 0 : _c.dateFormat} HH:mm:ss`,
+                                Pattern: `${mainAdaptableOptions.userInterfaceOptions?.dateInputOptions?.dateFormat} HH:mm:ss`,
                             },
                         },
                     },
@@ -180,20 +172,20 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         },
     };
     if (!undoChangeEnabled) {
-        const layoutColumns = options.predefinedConfig.Layout.Layouts[0].Columns;
+        const layoutColumns = options.predefinedConfig.Layout.Layouts[0]
+            .TableColumns;
         if (layoutColumns.includes('undoActionColumn')) {
             // remove action column from layout
-            options.predefinedConfig.Layout.Layouts[0].Columns =
+            options.predefinedConfig.Layout.Layouts[0].TableColumns =
                 layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
         }
     }
     return options;
 };
 const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
-    var _a, _b;
-    const mainPrimaryKeyColumnHeader = (_b = (_a = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()) === null || _a === void 0 ? void 0 : _a.friendlyName) !== null && _b !== void 0 ? _b : 'Row ID';
+    const mainPrimaryKeyColumnHeader = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()?.friendlyName ?? 'Row ID';
     const options = {
-        suppressLoadingOverlay: true,
+        loading: false,
         overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-text-on-primary);">No Data Changes</div>',
         defaultColDef: {
             floatingFilter: true,
@@ -215,13 +207,13 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
         columnDefs: [
             {
                 field: 'primaryKey',
-                type: ['abColDefString'],
+                cellDataType: 'text',
                 hide: true,
             },
             {
                 headerName: `Row (${mainPrimaryKeyColumnHeader})`,
                 field: 'changeInfo.primaryKeyValue',
-                type: ['abColDefString'],
+                cellDataType: 'text',
                 suppressAutoSize: false,
                 flex: 3,
                 initialFlex: 3,
@@ -229,7 +221,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
             {
                 headerName: 'Column',
                 field: 'changedColumnLabel',
-                type: ['abColDefString'],
+                cellDataType: 'text',
                 suppressAutoSize: false,
                 flex: 3,
                 initialFlex: 3,
@@ -237,7 +229,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
             {
                 headerName: 'Previous',
                 field: 'changeInfo.oldValue',
-                type: ['abColDefString'],
+                cellDataType: 'text',
                 suppressAutoSize: false,
                 flex: 3,
                 initialFlex: 3,
@@ -245,7 +237,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
             {
                 headerName: 'New',
                 field: 'changeInfo.newValue',
-                type: ['abColDefString'],
+                cellDataType: 'text',
                 suppressAutoSize: false,
                 flex: 3,
                 initialFlex: 3,
@@ -253,7 +245,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
             {
                 headerName: 'Changed',
                 field: 'changeInfo.changedAt',
-                type: ['abColDefDate'],
+                cellDataType: 'date',
                 suppressAutoSize: false,
                 flex: 3,
                 initialFlex: 3,
@@ -261,7 +253,7 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
             {
                 headerName: 'Source',
                 field: 'changeTriggerLabel',
-                type: ['abColDefString'],
+                cellDataType: 'text',
                 suppressAutoSize: false,
                 flex: 2,
                 initialFlex: 2,
@@ -271,7 +263,9 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
         cellSelection: true,
         suppressColumnVirtualisation: false,
         sideBar: false,
-        rowSelection: 'multiple',
+        rowSelection: {
+            mode: 'multiRow',
+        },
         skipHeaderOnAutoSize: true,
     };
     return options;
@@ -290,9 +284,8 @@ const mapChangeHistoryRowData = (changeHistoryLog = {}, mainAdaptableInstance) =
 // memoize headers to avoid unnecessary main grid lookups
 const headerMap = new Map();
 const getColumnHeaderLabel = (columnId, mainAdaptableInstance) => {
-    var _a, _b;
     if (!headerMap.has(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);
+        headerMap.set(columnId, mainAdaptableInstance.api.columnApi.getColumnWithColumnId(columnId)?.friendlyName ?? columnId);
     }
     return headerMap.get(columnId);
 };

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

@@ -1,25 +1,27 @@
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import * as React from 'react';
 import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChangedInfo';
-import { SystemDataChangeHistoryDisableAction, SystemDataChangeHistoryEnableAction, SystemDataChangeHistoryResumeAction, SystemDataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/SystemRedux';
-import { DataChangeHistoryMode } from '../../PredefinedConfig/SystemState';
+import { DataChangeHistoryDisableAction, DataChangeHistoryEnableAction, DataChangeHistoryResumeAction, DataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/InternalRedux';
+import { DataChangeHistoryMode } from '../../PredefinedConfig/InternalState';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHistoryPopupComponent> {
     changeHistoryLog: Record<string, CellDataChangedInfo>;
     changeHistoryMode: DataChangeHistoryMode;
     activationTime: Date;
     suspensionTime: Date;
-    onChangeHistoryEnable: () => SystemDataChangeHistoryEnableAction;
-    onChangeHistoryDisable: () => SystemDataChangeHistoryDisableAction;
-    onChangeHistorySuspend: () => SystemDataChangeHistorySuspendAction;
-    onChangeHistoryResume: () => SystemDataChangeHistoryResumeAction;
+    onChangeHistoryEnable: () => DataChangeHistoryEnableAction;
+    onChangeHistoryDisable: () => DataChangeHistoryDisableAction;
+    onChangeHistorySuspend: () => DataChangeHistorySuspendAction;
+    onChangeHistoryResume: () => DataChangeHistoryResumeAction;
 }
 interface DataChangeHistoryPopupState {
     dataChangeHistoryAdaptableApi: AdaptableApi | undefined;
 }
 declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps, DataChangeHistoryPopupState> {
     constructor(props: DataChangeHistoryPopupProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
-export declare let DataChangeHistoryPopup: import("react-redux").ConnectedComponent<typeof DataChangeHistoryPopupComponent, any>;
+export declare let DataChangeHistoryPopup: import("react-redux").ConnectedComponent<typeof DataChangeHistoryPopupComponent, {
+    [x: string]: any;
+}>;
 export {};

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { DataChangeHistoryGrid } from './DataChangeHistoryGrid';
-import { SystemDataChangeHistoryDisable, SystemDataChangeHistoryEnable, SystemDataChangeHistoryResume, SystemDataChangeHistorySuspend, } from '../../Redux/ActionsReducers/SystemRedux';
+import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
 import { Flex, Text } from 'rebass';
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
@@ -72,18 +72,18 @@ class DataChangeHistoryPopupComponent extends React.Component {
 }
 function mapStateToProps(state, ownProps) {
     return {
-        changeHistoryLog: state.System.DataChangeHistory.logs,
-        changeHistoryMode: state.System.DataChangeHistory.currentMode,
-        activationTime: state.System.DataChangeHistory.enableTime,
-        suspensionTime: state.System.DataChangeHistory.suspendTime,
+        changeHistoryLog: state.Internal.DataChangeHistory.logs,
+        changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
+        activationTime: state.Internal.DataChangeHistory.enableTime,
+        suspensionTime: state.Internal.DataChangeHistory.suspendTime,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onChangeHistoryEnable: () => dispatch(SystemDataChangeHistoryEnable()),
-        onChangeHistoryDisable: () => dispatch(SystemDataChangeHistoryDisable()),
-        onChangeHistorySuspend: () => dispatch(SystemDataChangeHistorySuspend()),
-        onChangeHistoryResume: () => dispatch(SystemDataChangeHistoryResume()),
+        onChangeHistoryEnable: () => dispatch(DataChangeHistoryEnable()),
+        onChangeHistoryDisable: () => dispatch(DataChangeHistoryDisable()),
+        onChangeHistorySuspend: () => dispatch(DataChangeHistorySuspend()),
+        onChangeHistoryResume: () => dispatch(DataChangeHistoryResume()),
     };
 }
 export let DataChangeHistoryPopup = connect(mapStateToProps, mapDispatchToProps)(DataChangeHistoryPopupComponent);

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { SystemDataChangeHistoryDisable, SystemDataChangeHistoryEnable, SystemDataChangeHistoryResume, SystemDataChangeHistorySuspend, } from '../../Redux/ActionsReducers/SystemRedux';
+import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
 import { Box, Flex, Text } from 'rebass';
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
@@ -11,26 +11,25 @@ import { useAdaptable } from '../AdaptableContext';
 import SimpleButton from '../../components/SimpleButton';
 import { Icon } from '../../components/icons';
 export const DataChangeHistoryViewPanelControl = (props) => {
-    var _a, _b;
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
-    const onChangeHistoryEnable = React.useCallback(() => dispatch(SystemDataChangeHistoryEnable()), []);
-    const onChangeHistoryDisable = React.useCallback(() => dispatch(SystemDataChangeHistoryDisable()), []);
-    const onChangeHistorySuspend = React.useCallback(() => dispatch(SystemDataChangeHistorySuspend()), []);
-    const onChangeHistoryResume = React.useCallback(() => dispatch(SystemDataChangeHistoryResume()), []);
+    const onChangeHistoryEnable = React.useCallback(() => dispatch(DataChangeHistoryEnable()), []);
+    const onChangeHistoryDisable = React.useCallback(() => dispatch(DataChangeHistoryDisable()), []);
+    const onChangeHistorySuspend = React.useCallback(() => dispatch(DataChangeHistorySuspend()), []);
+    const onChangeHistoryResume = React.useCallback(() => dispatch(DataChangeHistoryResume()), []);
     const handleOpenPopup = React.useCallback(() => {
         adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
     }, []);
     const { changeHistoryMode, activationTime, suspensionTime } = useSelector((state) => ({
-        changeHistoryMode: state.System.DataChangeHistory.currentMode,
-        activationTime: state.System.DataChangeHistory.enableTime,
-        suspensionTime: state.System.DataChangeHistory.suspendTime,
+        changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
+        activationTime: state.Internal.DataChangeHistory.enableTime,
+        suspensionTime: state.Internal.DataChangeHistory.suspendTime,
     }));
     const enabled = changeHistoryMode === 'ACTIVE';
     const disabled = changeHistoryMode === 'INACTIVE';
     const suspended = changeHistoryMode === 'SUSPENDED';
-    const gap = (_a = props.gap) !== null && _a !== void 0 ? _a : 'var(--ab-space-1)';
-    const buttonsPaddingY = (_b = props.buttonsPaddingY) !== null && _b !== void 0 ? _b : 2;
+    const gap = props.gap ?? 'var(--ab-space-1)';
+    const buttonsPaddingY = props.buttonsPaddingY ?? 2;
     const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
         disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
         suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),