@adaptabletools/adaptable-cjs 23.0.0-canary.6 → 23.0.0-canary.8

package/src/View/Dashboard/DashboardPopup.js

@@ -1,84 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardPopup = exports.DashboardConfigView = void 0;
+exports.DashboardPopup = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
-const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
-const Flex_1 = require("../../components/Flex");
-const ToggleButton_1 = require("../../components/ToggleButton");
-const Tabs_1 = require("../../components/Tabs");
-const Card_1 = require("../../components/Card");
-var DashboardConfigView;
-(function (DashboardConfigView) {
-    DashboardConfigView["Toolbars"] = "Toolbars";
-    DashboardConfigView["Buttons"] = "Buttons";
-    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
-})(DashboardConfigView || (exports.DashboardConfigView = DashboardConfigView = {}));
+const DashboardPopupSections_1 = require("./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 == GeneralConstants_1.ACCESS_LEVEL_FULL || dashboardAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
         const isDashboardDisabled = dashboardAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-        const isModuleCheckboxDisabled = (module) => {
-            if (module === 'SettingsPanel') {
-                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-            }
-            return false;
-        };
-        const contentCls = '';
-        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [areDashboardSettingsVisible && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { gap: 8, children: "Display Settings" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { gap: 2, className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3", children: [(0, jsx_runtime_1.jsx)(ToggleButton_1.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 ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.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 ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.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] }) })] }) })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Contents" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "pinned-toolbars", children: "Pinned Toolbars" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars", children: "Tabs & Toolbars" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "buttons", children: "Buttons" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls, children: (0, jsx_runtime_1.jsx)(PinnedToolbarsSelector_1.PinnedToolbarsSelector, {}) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls, children: (0, jsx_runtime_1.jsx)(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls, children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.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 ((0, jsx_runtime_1.jsx)(PopupPanel_1.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: (0, jsx_runtime_1.jsx)(DashboardPopupSections_1.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,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardPopupSections = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
+const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
+const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
+const Flex_1 = require("../../components/Flex");
+const Tag_1 = require("../../components/Tag");
+const ToggleButton_1 = require("../../components/ToggleButton");
+const AdaptableContext_1 = require("../AdaptableContext");
+const CollapsibleWizardCard_1 = require("../Wizard/CollapsibleWizardCard");
+const DashboardSettingsToggles = ({ isHidden, isCollapsed, isFloating, hasTabs, canFloat, className, onSetHidden, onSetCollapsed, onSetFloating, }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: className ?? 'twa:gap-3 twa:p-1', children: [(0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (visible) => onSetHidden(!visible), checked: !isHidden, "data-name": "dashboard-visibility", children: isHidden ? 'Hidden' : 'Visible' }), hasTabs ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { disabled: isFloating, className: "twa:w-24", onChange: (expanded) => onSetCollapsed(!expanded), checked: !isCollapsed, "data-name": "expand-state", children: isCollapsed ? 'Collapsed' : 'Expanded' })) : null, canFloat ? ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (pinned) => onSetFloating(!pinned), checked: !isFloating, "data-name": "floating", children: isFloating ? 'Floating' : 'Pinned' })) : null] }));
+const DashboardPopupSections = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { bindCard } = (0, CollapsibleWizardCard_1.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 = ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: pinnedToolbarTitles.map((title, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: title }, `${title}-${index}`))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Pinned Toolbars" }));
+    const tabsSummary = tabs.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: tabs.map((tab) => {
+            const toolbarTitles = tab.Toolbars.map((toolbarId) => toolbarTitleById.get(toolbarId) ?? toolbarId);
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Tab: ", tab.Name] }), toolbarTitles.map((title, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: title }, `${tab.Name}-${title}-${index}`)))] }, tab.Uuid ?? tab.Name));
+        }) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Tabs Configured" }));
+    const moduleButtonsSummary = moduleButtonLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: label }, label))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Module Buttons" }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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 })), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(PinnedToolbarsSelector_1.PinnedToolbarsSelector, {}) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(DashboardManager_1.default, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
+};
+exports.DashboardPopupSections = DashboardPopupSections;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -36,13 +36,13 @@ const PinnedToolbarsSelector = (props) => {
             },
         ];
     }, [pinnedToolbars]);
-    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { className: "twa:flex-1", permittedActions: {
+    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { dragScope: "dashboard-pinned", layout: "strip", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,
             editTabName: false,
         }, onTabsChange: (tabs) => {
             dispatch((0, DashboardRedux_1.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 }));
 };
 exports.PinnedToolbarsSelector = PinnedToolbarsSelector;

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

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const DataChangeHistoryGrid_1 = require("./DataChangeHistoryGrid");
+const DataChangeHistoryTable_1 = require("./DataChangeHistoryTable");
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
 const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
@@ -14,42 +14,30 @@ const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
 const Flex_1 = require("../../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 = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.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 && ((0, jsx_runtime_1.jsx)(ButtonPause_1.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) && ((0, jsx_runtime_1.jsx)(ButtonStop_1.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 = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.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 && ((0, jsx_runtime_1.jsx)(ButtonPause_1.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) && ((0, jsx_runtime_1.jsx)(ButtonStop_1.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 = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
                             color: 'var(--ab-dashboard__color)',
                             background: 'var(--ab-dashboard__background)',
-                        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: [(0, jsx_runtime_1.jsx)("div", { id: adaptableContainerId }), (0, jsx_runtime_1.jsx)("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }), (0, jsx_runtime_1.jsx)(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })] })] }) }));
+                        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel] }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column', children: (0, jsx_runtime_1.jsx)(DataChangeHistoryTable_1.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,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataChangeHistoryTable = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const Flex_1 = require("../../components/Flex");
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableButtonView_1 = require("../Components/AdaptableButton/AdaptableButtonView");
+const buildActionColumnButton_1 = require("./buildActionColumnButton");
+const dataChangeHistoryHelpers_1 = require("./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,
+};
+const DataChangeHistoryTable = (props) => {
+    const { changeHistoryLog, onUndoChange, onClearRow } = props;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const undoChangeEnabled = adaptable.api.entitlementApi.isModuleFullEntitlement(ModuleConstants_1.DataChangeHistoryModuleId);
+    const rowData = React.useMemo(() => (0, dataChangeHistoryHelpers_1.mapChangeHistoryRowData)(changeHistoryLog, adaptable), [changeHistoryLog, adaptable]);
+    const changeHistoryButtons = React.useMemo(() => (0, buildActionColumnButton_1.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) => (0, dataChangeHistoryHelpers_1.getChangeHistoryRowChangeInfo)(params.data)?.primaryKeyValue ?? '',
+            },
+            changedColumnLabel: {
+                field: 'changedColumnLabel',
+                header: 'Column',
+            },
+            oldValue: {
+                header: 'Previous',
+                valueGetter: (params) => (0, dataChangeHistoryHelpers_1.formatChangeHistoryCellValue)((0, dataChangeHistoryHelpers_1.getChangeHistoryRowChangeInfo)(params.data)?.oldValue),
+            },
+            newValue: {
+                header: 'New',
+                valueGetter: (params) => (0, dataChangeHistoryHelpers_1.formatChangeHistoryCellValue)((0, dataChangeHistoryHelpers_1.getChangeHistoryRowChangeInfo)(params.data)?.newValue),
+            },
+            changedAt: {
+                header: 'Changed',
+                valueGetter: (params) => {
+                    const changedAt = (0, dataChangeHistoryHelpers_1.getChangeHistoryRowChangeInfo)(params.data)?.changedAt;
+                    return changedAt != null
+                        ? FormatHelper_1.default.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 (!(0, dataChangeHistoryHelpers_1.getChangeHistoryRowChangeInfo)(rowData)) {
+                        return null;
+                    }
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "ab-ActionColumn twa:gap-0.5", children: changeHistoryButtons.map((button, index) => ((0, jsx_runtime_1.jsx)(AdaptableButtonView_1.AdaptableButtonView, { button: button, context: (0, buildActionColumnButton_1.buildDataChangeHistoryContext)(rowData, adaptable.api, onUndoChange, onClearRow), api: adaptable.api, defaults: AdaptableButtonView_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn }, index))) }));
+                },
+            };
+        }
+        return columns;
+    }, [
+        changeHistoryButtons,
+        dateFormat,
+        onClearRow,
+        onUndoChange,
+        primaryKeyHeader,
+        showActionColumn,
+        adaptable.api,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: rowData, primaryKey: "primaryKey", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap, columnPinning: showActionColumn ? { actions: 'end' } : undefined }) }));
+};
+exports.DataChangeHistoryTable = DataChangeHistoryTable;

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,8 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildActionColumnButton = void 0;
-const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode, clearRow) => {
-    let changeHistoryButtons = options.changeHistoryButton;
+exports.buildChangeHistoryButtons = exports.buildDataChangeHistoryContext = void 0;
+const STUB_ACTION_COLUMN = {
+    columnId: 'undoActionColumn',
+    actionColumnButton: [],
+};
+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,
+    };
+};
+exports.buildDataChangeHistoryContext = buildDataChangeHistoryContext;
+const buildChangeHistoryButtons = (options, parentAdapTableApi, onUndoChange, onClearRow) => {
+    let changeHistoryButtons = options?.changeHistoryButton;
     if (!changeHistoryButtons ||
         (Array.isArray(changeHistoryButtons) && changeHistoryButtons.length === 0)) {
         return null;
@@ -10,78 +31,49 @@ const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode, clear
     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,
     }));
 };
-exports.buildActionColumnButton = buildActionColumnButton;
+exports.buildChangeHistoryButtons = buildChangeHistoryButtons;

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

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

@@ -69,7 +69,7 @@ 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;
             }, {})