@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.7

package/src/View/Dashboard/DashboardPopup.js

@@ -1,80 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
-import { ModuleValueSelector } from '../Components/ModuleValueSelector';
-import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
-import { Flex } from '../../components/Flex';
-import { ToggleButton } from '../../components/ToggleButton';
-import { Tabs } from '../../components/Tabs';
-import { Card } from '../../components/Card';
-export var DashboardConfigView;
-(function (DashboardConfigView) {
-    DashboardConfigView["Toolbars"] = "Toolbars";
-    DashboardConfigView["Buttons"] = "Buttons";
-    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
-})(DashboardConfigView || (DashboardConfigView = {}));
+import { DashboardPopupSections } from './DashboardPopupSections';
 class DashboardPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            DashboardConfigView: DashboardConfigView.Toolbars,
-        };
-    }
     render() {
-        const systemToolbars = this.props.api.dashboardApi.internalApi
-            .getModuleToolbars()
-            .map((toolbar) => ({
-            Id: toolbar.id,
-            Title: toolbar.friendlyName,
-        }));
-        const customToolbars = this.props.api.dashboardApi.getCustomToolbars().map((ct) => ({
-            Id: ct.name,
-            Title: ct.title ? ct.title : ct.name,
-        }));
-        const tabs = this.props.DashboardState.Tabs.map((tab) => {
-            const Toolbars = tab.Toolbars.filter((vt) => {
-                let customToolbar = this.props.api.dashboardApi
-                    .getCustomToolbars()
-                    .find((ct) => ct.name === vt);
-                return customToolbar
-                    ? true
-                    : this.props.api.internalApi
-                        .getModuleService()
-                        .isAdapTableModulePresent(vt);
-            });
-            return { ...tab, Toolbars };
-        });
-        let selectedModuleButtons = [];
-        this.props.DashboardState.ModuleButtons.forEach((x) => {
-            let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == x);
-            if (menuItem?.isVisible) {
-                selectedModuleButtons.push(x);
-            }
-        });
-        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 == ACCESS_LEVEL_FULL || dashboardAccessLevel == ACCESS_LEVEL_READ_ONLY;
         const isDashboardDisabled = dashboardAccessLevel === ACCESS_LEVEL_READ_ONLY;
-        const isModuleCheckboxDisabled = (module) => {
-            if (module === 'SettingsPanel') {
-                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-            }
-            return false;
-        };
-        const contentCls = '';
-        return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [areDashboardSettingsVisible && (_jsx(_Fragment, { children: _jsxs(Card, { children: [_jsx(Card.Title, { gap: 8, children: "Display Settings" }), _jsx(Card.Body, { gap: 2, className: "twa:p-2", children: _jsxs("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3", children: [_jsx(ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility", children: this.props.IsHidden ? 'Hidden' : 'Visible' }), this.props.DashboardState.Tabs?.length > 0 ? (_jsx(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state", children: this.props.IsCollapsed ? 'Collapsed' : 'Expanded' })) : null, this.props.api.optionsApi.getDashboardOptions().canFloat ? (_jsx(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating", children: this.props.IsFloating ? 'Floating' : 'Pinned' })) : null] }) })] }) })), _jsxs(Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0, children: [_jsx(Card.Title, { children: "Contents" }), _jsx(Card.Body, { className: "twa:p-2", children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "pinned-toolbars", children: "Pinned Toolbars" }), _jsx(Tabs.Tab, { value: "tabbed-toolbars", children: "Tabs & Toolbars" }), _jsx(Tabs.Tab, { value: "buttons", children: "Buttons" }), _jsx(Tabs.Content, { value: "pinned-toolbars", className: contentCls, children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(Tabs.Content, { value: "tabbed-toolbars", className: contentCls, children: _jsx(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api }) }), _jsx(Tabs.Content, { value: "buttons", className: contentCls, children: _jsx(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }) })] }) })] })] }) }));
-    }
-    onDashboardConfigViewChanged(event) {
-        let e = event.target;
-        let dashboardConfigView = e.value;
-        this.setState({
-            DashboardConfigView: dashboardConfigView,
-        });
+        return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsx(DashboardPopupSections, { DashboardState: this.props.DashboardState, InternalState: this.props.InternalState, IsCollapsed: this.props.IsCollapsed, IsHidden: this.props.IsHidden, IsFloating: this.props.IsFloating, isDashboardDisabled: isDashboardDisabled, areDashboardSettingsVisible: areDashboardSettingsVisible, canFloat: this.props.api.optionsApi.getDashboardOptions().canFloat ?? false, onDashboardSetModuleButtons: this.props.onDashboardSetModuleButtons, onDashboardSetTabs: this.props.onDashboardSetTabs, onSetDashboardCollapsed: this.props.onSetDashboardCollapsed, onSetDashboardHidden: this.props.onSetDashboardHidden, onSetDashboardFloating: this.props.onSetDashboardFloating }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { InternalState } from '../../AdaptableState/InternalState';
+import { DashboardState, DashboardTab } from '../../AdaptableState/DashboardState';
+import { AdaptableModuleButtons } from '../../AdaptableState/Common/Types';
+export interface DashboardPopupSectionsProps {
+    DashboardState: DashboardState;
+    InternalState: InternalState;
+    IsCollapsed: boolean;
+    IsHidden: boolean;
+    IsFloating: boolean;
+    isDashboardDisabled: boolean;
+    areDashboardSettingsVisible: boolean;
+    canFloat: boolean;
+    onDashboardSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => void;
+    onDashboardSetTabs: (tabs: DashboardTab[]) => void;
+    onSetDashboardCollapsed: (isCollapsed: boolean) => void;
+    onSetDashboardHidden: (isHidden: boolean) => void;
+    onSetDashboardFloating: (isFloating: boolean) => void;
+}
+export declare const DashboardPopupSections: React.FunctionComponent<DashboardPopupSectionsProps>;

package/src/View/Dashboard/DashboardPopupSections.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
+import { ModuleValueSelector } from '../Components/ModuleValueSelector';
+import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
+import { Flex } from '../../components/Flex';
+import { Tag } from '../../components/Tag';
+import { ToggleButton } from '../../components/ToggleButton';
+import { useAdaptable } from '../AdaptableContext';
+import { CollapsibleWizardCard, renderCompactColumnTags, useWizardCardAccordion, } from '../Wizard/CollapsibleWizardCard';
+const DashboardSettingsToggles = ({ isHidden, isCollapsed, isFloating, hasTabs, canFloat, className, onSetHidden, onSetCollapsed, onSetFloating, }) => (_jsxs(Flex, { alignItems: "center", className: className ?? 'twa:gap-3 twa:p-1', children: [_jsx(ToggleButton, { className: "twa:w-24", onChange: (visible) => onSetHidden(!visible), checked: !isHidden, "data-name": "dashboard-visibility", children: isHidden ? 'Hidden' : 'Visible' }), hasTabs ? (_jsx(ToggleButton, { disabled: isFloating, className: "twa:w-24", onChange: (expanded) => onSetCollapsed(!expanded), checked: !isCollapsed, "data-name": "expand-state", children: isCollapsed ? 'Collapsed' : 'Expanded' })) : null, canFloat ? (_jsx(ToggleButton, { className: "twa:w-24", onChange: (pinned) => onSetFloating(!pinned), checked: !isFloating, "data-name": "floating", children: isFloating ? 'Floating' : 'Pinned' })) : null] }));
+export const DashboardPopupSections = (props) => {
+    const { api } = useAdaptable();
+    const { bindCard } = useWizardCardAccordion(null);
+    const systemToolbars = api.dashboardApi.internalApi.getModuleToolbars().map((toolbar) => ({
+        Id: toolbar.id,
+        Title: toolbar.friendlyName,
+    }));
+    const customToolbars = api.dashboardApi.getCustomToolbars().map((ct) => ({
+        Id: ct.name,
+        Title: ct.title ? ct.title : ct.name,
+    }));
+    const allToolbars = [...systemToolbars, ...customToolbars];
+    const toolbarTitleById = React.useMemo(() => allToolbars.reduce((map, toolbar) => {
+        map.set(toolbar.Id, toolbar.Title);
+        return map;
+    }, new Map()), [allToolbars]);
+    const tabs = props.DashboardState.Tabs.map((tab) => {
+        const Toolbars = tab.Toolbars.filter((vt) => {
+            const customToolbar = api.dashboardApi
+                .getCustomToolbars()
+                .find((ct) => ct.name === vt);
+            return customToolbar
+                ? true
+                : api.internalApi.getModuleService().isAdapTableModulePresent(vt);
+        });
+        return { ...tab, Toolbars };
+    });
+    const selectedModuleButtons = [];
+    props.DashboardState.ModuleButtons?.forEach((module) => {
+        const menuItem = props.InternalState.SettingsPanelModuleEntries.find((entry) => entry.category === module);
+        if (menuItem?.isVisible) {
+            selectedModuleButtons.push(module);
+        }
+    });
+    const allModuleButtons = props.InternalState.SettingsPanelModuleEntries.map((entry) => entry.category);
+    const isModuleCheckboxDisabled = (module) => {
+        if (module === 'SettingsPanel') {
+            return api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
+        }
+        return false;
+    };
+    const pinnedToolbarIds = props.DashboardState.PinnedToolbars ?? [];
+    const pinnedToolbarTitles = pinnedToolbarIds.map((id) => toolbarTitleById.get(id) ?? id);
+    const moduleButtonLabels = selectedModuleButtons.map((module) => api.internalApi.getModuleService().getModuleFriendlyName(module) ?? module);
+    const tabsCompactLabels = tabs.flatMap((tab) => {
+        const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
+        return [`Tab: ${tab.Name}`, ...toolbarTitles];
+    });
+    const settingsToggles = (_jsx(DashboardSettingsToggles, { isHidden: props.IsHidden, isCollapsed: props.IsCollapsed, isFloating: props.IsFloating, hasTabs: tabs.length > 0, canFloat: props.canFloat, onSetHidden: props.onSetDashboardHidden, onSetCollapsed: props.onSetDashboardCollapsed, onSetFloating: props.onSetDashboardFloating }));
+    const pinnedSummary = pinnedToolbarTitles.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: pinnedToolbarTitles.map((title, index) => (_jsx(Tag, { children: title }, `${title}-${index}`))) })) : (_jsx(Tag, { children: "No Pinned Toolbars" }));
+    const tabsSummary = tabs.length > 0 ? (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: tabs.map((tab) => {
+            const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
+            return (_jsxs(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [_jsxs(Tag, { children: ["Tab: ", tab.Name] }), toolbarTitles.map((title, index) => (_jsx(Tag, { children: title }, `${tab.Name}-${title}-${index}`)))] }, tab.Uuid ?? tab.Name));
+        }) })) : (_jsx(Tag, { children: "No Tabs Configured" }));
+    const moduleButtonsSummary = moduleButtonLabels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => (_jsx(Tag, { children: label }, label))) })) : (_jsx(Tag, { children: "No Module Buttons" }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && (_jsx(CollapsibleWizardCard, { ...bindCard('settings'), "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", compactSummary: settingsToggles, compactSummaryInteractive: true, summary: settingsToggles, className: "twa:overflow-hidden", children: settingsToggles })), _jsx(CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: renderCompactColumnTags(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: renderCompactColumnTags(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: _jsx(DashboardManagerUI, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: renderCompactColumnTags(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
+};

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -32,12 +32,12 @@ export const PinnedToolbarsSelector = (props) => {
             },
         ];
     }, [pinnedToolbars]);
-    return (_jsx(ModuleManager, { className: "twa:flex-1", permittedActions: {
+    return (_jsx(ModuleManager, { dragScope: "dashboard-pinned", layout: "strip", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,
             editTabName: false,
         }, onTabsChange: (tabs) => {
             dispatch(DashboardSetPinnedToolbars(tabs[0].Items));
-        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, filterOutSelectedItems: true, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbars", dragItemText: "Drag into the Panel below" }));
+        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, filterOutSelectedItems: true }));
 };

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
 import { DataChangeHistoryDisableAction, DataChangeHistoryEnableAction, DataChangeHistoryResumeAction, DataChangeHistorySuspendAction } from '../../Redux/ActionsReducers/InternalRedux';
 import { DataChangeHistoryMode } from '../../AdaptableState/InternalState';
-import { AdaptableApi } from '../../Api/AdaptableApi';
 interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHistoryPopupComponent> {
     changeHistoryLog: Record<string, CellDataChangedInfo>;
     changeHistoryMode: DataChangeHistoryMode;
@@ -14,11 +13,7 @@ interface DataChangeHistoryPopupProps extends ModuleViewPopupProps<DataChangeHis
     onChangeHistorySuspend: () => DataChangeHistorySuspendAction;
     onChangeHistoryResume: () => DataChangeHistoryResumeAction;
 }
-interface DataChangeHistoryPopupState {
-    dataChangeHistoryAdaptableApi: AdaptableApi | undefined;
-}
-declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps, DataChangeHistoryPopupState> {
-    constructor(props: DataChangeHistoryPopupProps);
+declare class DataChangeHistoryPopupComponent extends React.Component<DataChangeHistoryPopupProps> {
     render(): React.JSX.Element;
 }
 export declare let DataChangeHistoryPopup: import("react-redux").ConnectedComponent<typeof DataChangeHistoryPopupComponent, {

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import { DataChangeHistoryGrid } from './DataChangeHistoryGrid';
+import { DataChangeHistoryTable } from './DataChangeHistoryTable';
 import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
@@ -10,42 +10,30 @@ import { ButtonStop } from '../Components/Buttons/ButtonStop';
 import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
 import { Box, Flex } from '../../components/Flex';
 class DataChangeHistoryPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            dataChangeHistoryAdaptableApi: undefined,
-        };
-    }
     render() {
-        const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
-        const adaptableContainerId = 'dataChangeHistoryAdaptableContainer';
-        const agGridContainerId = 'dataChangeHistoryAgGridContainer';
+        const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, changeHistoryLog, } = this.props;
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume(), children: "Resume" })), enabled && (_jsx(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend(), children: "Suspend" })), (enabled || suspended) && (_jsx(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable(), children: "Deactivate" }))] }));
+        const buttonPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && (_jsx(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume(), children: "Resume" })), enabled && (_jsx(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend(), children: "Suspend" })), (enabled || suspended) && (_jsx(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable(), children: "Deactivate" }))] }));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
         const statusPanel = (_jsxs(Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && (_jsxs(Box, { className: "twa:text-2 twa:italic", children: ["(since ", DateFormatter(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && _jsx(Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
         const handleChangeUndo = (changeKey) => {
-            const changeToBeUndone = this.props.changeHistoryLog[changeKey];
+            const changeToBeUndone = changeHistoryLog[changeKey];
             if (changeToBeUndone) {
                 this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
             }
         };
         const handleClearRow = (changeKey) => {
-            const changeToBeUndone = this.props.changeHistoryLog[changeKey];
-            if (changeToBeUndone) {
-                this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeUndone);
+            const changeToBeCleared = changeHistoryLog[changeKey];
+            if (changeToBeCleared) {
+                this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeCleared);
             }
         };
-        const agGridThemeMode = this.props.api.internalApi
-            .getAdaptableInstance()
-            .agGridThemeAdapter.getAgGridThemeMode();
-        const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
         return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsxs(Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column", children: [_jsx(Flex, { style: {
                             color: 'var(--ab-dashboard__color)',
                             background: 'var(--ab-dashboard__background)',
-                        }, children: _jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), _jsxs(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: [_jsx("div", { id: adaptableContainerId }), _jsx("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }), _jsx(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })] })] }) }));
+                        }, children: _jsxs(Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), _jsx(Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: _jsx(DataChangeHistoryTable, { changeHistoryLog: changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow }) })] }) }));
     }
 }
 function mapStateToProps(state, ownProps) {

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
+export interface DataChangeHistoryTableProps {
+    changeHistoryLog: Record<string, CellDataChangedInfo>;
+    onUndoChange: (changeKey: string) => void;
+    onClearRow: (changeKey: string) => void;
+}
+export declare const DataChangeHistoryTable: React.FunctionComponent<DataChangeHistoryTableProps>;

package/src/View/DataChangeHistory/DataChangeHistoryTable.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
+import { Flex } from '../../components/Flex';
+import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
+import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import { useAdaptable } from '../AdaptableContext';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton/AdaptableButtonView';
+import { buildChangeHistoryButtons, buildDataChangeHistoryContext, } from './buildActionColumnButton';
+import { formatChangeHistoryCellValue, getChangeHistoryRowChangeInfo, mapChangeHistoryRowData, } from './dataChangeHistoryHelpers';
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+    },
+};
+const columnTypes = {
+    default: {
+        align: 'start',
+        defaultFlex: 1,
+        defaultSortable: false,
+        style: { fontSize: 'var(--ab-font-size-3)' },
+    },
+};
+const headerOptions = {
+    alwaysReserveSpaceForSortIcon: false,
+};
+export const DataChangeHistoryTable = (props) => {
+    const { changeHistoryLog, onUndoChange, onClearRow } = props;
+    const adaptable = useAdaptable();
+    const undoChangeEnabled = adaptable.api.entitlementApi.isModuleFullEntitlement(DataChangeHistoryModuleId);
+    const rowData = React.useMemo(() => mapChangeHistoryRowData(changeHistoryLog, adaptable), [changeHistoryLog, adaptable]);
+    const changeHistoryButtons = React.useMemo(() => buildChangeHistoryButtons(adaptable.adaptableOptions?.dataChangeHistoryOptions, adaptable.api, onUndoChange, onClearRow), [adaptable, onUndoChange, onClearRow]);
+    const showActionColumn = undoChangeEnabled && !!changeHistoryButtons?.length;
+    const primaryKeyHeader = adaptable.api.columnApi.getPrimaryKeyColumn()?.friendlyName ?? 'Row ID';
+    const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
+    const columnsMap = React.useMemo(() => {
+        const columns = {
+            primaryKeyValue: {
+                header: `Row (${primaryKeyHeader})`,
+                valueGetter: (params) => getChangeHistoryRowChangeInfo(params.data)?.primaryKeyValue ?? '',
+            },
+            changedColumnLabel: {
+                field: 'changedColumnLabel',
+                header: 'Column',
+            },
+            oldValue: {
+                header: 'Previous',
+                valueGetter: (params) => formatChangeHistoryCellValue(getChangeHistoryRowChangeInfo(params.data)?.oldValue),
+            },
+            newValue: {
+                header: 'New',
+                valueGetter: (params) => formatChangeHistoryCellValue(getChangeHistoryRowChangeInfo(params.data)?.newValue),
+            },
+            changedAt: {
+                header: 'Changed',
+                valueGetter: (params) => {
+                    const changedAt = getChangeHistoryRowChangeInfo(params.data)?.changedAt;
+                    return changedAt != null
+                        ? FormatHelper.DateFormatter(changedAt, { Pattern: dateFormat })
+                        : '';
+                },
+            },
+            changeTriggerLabel: {
+                field: 'changeTriggerLabel',
+                header: 'Source',
+                defaultFlex: 0.75,
+            },
+        };
+        if (showActionColumn && changeHistoryButtons) {
+            columns.actions = {
+                header: ' ',
+                defaultWidth: 110,
+                render: (params) => {
+                    const rowData = params.data;
+                    if (!getChangeHistoryRowChangeInfo(rowData)) {
+                        return null;
+                    }
+                    return (_jsx(Flex, { className: "ab-ActionColumn twa:gap-0.5", children: changeHistoryButtons.map((button, index) => (_jsx(AdaptableButtonView, { button: button, context: buildDataChangeHistoryContext(rowData, adaptable.api, onUndoChange, onClearRow), api: adaptable.api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn }, index))) }));
+                },
+            };
+        }
+        return columns;
+    }, [
+        changeHistoryButtons,
+        dateFormat,
+        onClearRow,
+        onUndoChange,
+        primaryKeyHeader,
+        showActionColumn,
+        adaptable.api,
+    ]);
+    return (_jsx(DataSource, { data: rowData, primaryKey: "primaryKey", children: _jsx(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap, columnPinning: showActionColumn ? { actions: 'end' } : undefined }) }));
+};

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

@@ -1,3 +1,5 @@
-import { IRowNode } from 'ag-grid-enterprise';
-import { ActionColumnContext, AdaptableApi, AdaptableButton, DataChangeHistoryOptions } from '../../types';
-export declare const buildActionColumnButton: (options: DataChangeHistoryOptions, parentAdapTableApi: AdaptableApi, undoRowNode: (rowNode: IRowNode) => void, clearRow: (rowNode: IRowNode) => void) => AdaptableButton<ActionColumnContext<any>>[];
+import { DataChangeHistoryContext } from '../../AdaptableOptions/DataChangeHistoryOptions';
+import { AdaptableApi, AdaptableButton, DataChangeHistoryOptions } from '../../types';
+import { DataChangeHistoryData } from './dataChangeHistoryHelpers';
+export declare const buildDataChangeHistoryContext: (rowData: DataChangeHistoryData, parentAdapTableApi: AdaptableApi, onUndoChange: (changeKey: string) => void, onClearRow: (changeKey: string) => void) => DataChangeHistoryContext;
+export declare const buildChangeHistoryButtons: (options: DataChangeHistoryOptions, parentAdapTableApi: AdaptableApi, onUndoChange: (changeKey: string) => void, onClearRow: (changeKey: string) => void) => AdaptableButton<DataChangeHistoryContext>[] | null;

package/src/View/DataChangeHistory/buildActionColumnButton.js

@@ -1,5 +1,25 @@
-export const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode, clearRow) => {
-    let changeHistoryButtons = options.changeHistoryButton;
+const STUB_ACTION_COLUMN = {
+    columnId: 'undoActionColumn',
+    actionColumnButton: [],
+};
+export const buildDataChangeHistoryContext = (rowData, parentAdapTableApi, onUndoChange, onClearRow) => {
+    const undoDataChange = () => onUndoChange(rowData.changeKey);
+    const clearRow = () => onClearRow(rowData.changeKey);
+    return {
+        actionColumn: STUB_ACTION_COLUMN,
+        primaryKeyValue: rowData.changeInfo.primaryKeyValue,
+        rowNode: undefined,
+        data: rowData,
+        ...parentAdapTableApi.internalApi.buildBaseContext(),
+        isGroupNode: false,
+        undoDataChange,
+        clearRow,
+        dataChangedInfo: rowData.changeInfo,
+        parentAdapTableApi,
+    };
+};
+export const buildChangeHistoryButtons = (options, parentAdapTableApi, onUndoChange, onClearRow) => {
+    let changeHistoryButtons = options?.changeHistoryButton;
     if (!changeHistoryButtons ||
         (Array.isArray(changeHistoryButtons) && changeHistoryButtons.length === 0)) {
         return null;
@@ -7,76 +27,47 @@ export const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode
     if (!Array.isArray(changeHistoryButtons)) {
         changeHistoryButtons = [changeHistoryButtons];
     }
-    const isGroupNode = (context) => context.adaptableApi.gridApi.isGroupRowNode(context.rowNode);
-    const onUndo = (context) => {
-        const rowNode = context.rowNode;
-        if (context.adaptableApi.gridApi.isGroupRowNode(rowNode)) {
-            // undo all children
-            const childrenNodes = context.rowNode?.childrenAfterFilter;
-            if (childrenNodes) {
-                childrenNodes.forEach((childNode) => undoRowNode(childNode));
-            }
-        }
-        else {
-            undoRowNode(rowNode);
-        }
-    };
-    const onClearRow = (context) => {
-        const rowNode = context.rowNode;
-        clearRow(rowNode);
-    };
-    const buildContext = (context) => {
-        const dataChangedInfo = context.rowNode.data.changeInfo;
-        return {
-            ...context,
-            isGroupNode: isGroupNode(context),
-            undoDataChange: () => onUndo(context),
-            clearRow: () => onClearRow(context),
-            dataChangedInfo,
-            parentAdapTableApi,
-        };
-    };
     return changeHistoryButtons.map((actionColumnOption) => ({
         label: (button, context) => {
             if (typeof actionColumnOption.label !== 'function') {
                 return actionColumnOption.label;
             }
-            return actionColumnOption.label(button, buildContext(context));
+            return actionColumnOption.label(button, context);
         },
         buttonStyle: (button, context) => {
             if (typeof actionColumnOption.buttonStyle !== 'function') {
                 return actionColumnOption.buttonStyle;
             }
-            return actionColumnOption.buttonStyle(button, buildContext(context));
+            return actionColumnOption.buttonStyle(button, context);
         },
         tooltip: (button, context) => {
             if (typeof actionColumnOption.tooltip !== 'function') {
                 return actionColumnOption.tooltip;
             }
-            return actionColumnOption.tooltip(button, buildContext(context));
+            return actionColumnOption.tooltip(button, context);
         },
         disabled: (button, context) => {
             if (typeof actionColumnOption.disabled !== 'function') {
                 return actionColumnOption.disabled;
             }
-            return actionColumnOption.disabled(button, buildContext(context));
+            return actionColumnOption.disabled(button, context);
         },
         onClick: (button, context) => {
             if (actionColumnOption.action === 'undo') {
-                onUndo(buildContext(context));
+                context.undoDataChange();
             }
             if (actionColumnOption.action === 'clear') {
-                onClearRow(buildContext(context));
+                context.clearRow();
             }
             if (typeof actionColumnOption.onClick === 'function') {
-                actionColumnOption.onClick(button, buildContext(context));
+                actionColumnOption.onClick(button, context);
             }
         },
         hidden: (button, context) => {
             if (typeof actionColumnOption.hidden !== 'function') {
                 return actionColumnOption.hidden;
             }
-            return actionColumnOption.hidden(button, buildContext(context));
+            return actionColumnOption.hidden(button, context);
         },
         icon: actionColumnOption.icon,
     }));

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

@@ -0,0 +1,15 @@
+import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
+import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
+export interface DataChangeHistoryData {
+    primaryKey: string;
+    changeKey: string;
+    changeTriggerLabel: string;
+    changedColumnLabel: string;
+    changeInfo: CellDataChangedInfo;
+}
+export declare const getColumnHeaderLabel: (columnId: string, mainAdaptableInstance: IAdaptable) => string;
+export declare const getChangeTriggerLabel: (changeInfo: CellDataChangedInfo) => string;
+export declare const isValidChangeHistoryLogEntry: (changeInfo: CellDataChangedInfo | undefined) => changeInfo is CellDataChangedInfo;
+export declare const mapChangeHistoryRowData: (changeHistoryLog: Record<string, CellDataChangedInfo>, mainAdaptableInstance: IAdaptable) => DataChangeHistoryData[];
+export declare const getChangeHistoryRowChangeInfo: (rowData: Partial<DataChangeHistoryData> | undefined) => CellDataChangedInfo | undefined;
+export declare const formatChangeHistoryCellValue: (value: unknown) => string;

package/src/View/DataChangeHistory/dataChangeHistoryHelpers.js

@@ -0,0 +1,37 @@
+const headerMap = new Map();
+export const getColumnHeaderLabel = (columnId, mainAdaptableInstance) => {
+    if (!headerMap.has(columnId)) {
+        headerMap.set(columnId, mainAdaptableInstance.api.columnApi.getColumnWithColumnId(columnId)?.friendlyName ?? columnId);
+    }
+    return headerMap.get(columnId);
+};
+export const getChangeTriggerLabel = (changeInfo) => {
+    return changeInfo.trigger === 'tick' ? 'Ticking' : 'User Edit';
+};
+export const isValidChangeHistoryLogEntry = (changeInfo) => {
+    return !!changeInfo?.column?.columnId && changeInfo.changedAt != null;
+};
+export const mapChangeHistoryRowData = (changeHistoryLog = {}, mainAdaptableInstance) => {
+    return Object.entries(changeHistoryLog)
+        .filter(([, changeInfo]) => isValidChangeHistoryLogEntry(changeInfo))
+        .map(([changeKey, changeInfo]) => ({
+        primaryKey: `${changeKey}::${changeInfo.changedAt}`,
+        changeKey,
+        changeTriggerLabel: getChangeTriggerLabel(changeInfo),
+        changedColumnLabel: getColumnHeaderLabel(changeInfo.column.columnId, mainAdaptableInstance),
+        changeInfo,
+    }))
+        .sort((a, b) => b.changeInfo.changedAt - a.changeInfo.changedAt);
+};
+export const getChangeHistoryRowChangeInfo = (rowData) => {
+    if (!isValidChangeHistoryLogEntry(rowData?.changeInfo)) {
+        return undefined;
+    }
+    return rowData.changeInfo;
+};
+export const formatChangeHistoryCellValue = (value) => {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return String(value);
+};

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -65,7 +65,7 @@ export const DataImportWizard = (props) => {
         return columnsMap
             ? columnsMap.reduce((acc, colMap) => {
                 if (colMap.include && !colMap.abColumn) {
-                    acc[colMap.field] = `Field ${colMap.field} does not have a coresponding column.`;
+                    acc[colMap.field] = `Field ${colMap.field} does not have a corresponding column.`;
                 }
                 return acc;
             }, {})