@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

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

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../../components/DropdownButton");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const icons_1 = require("../../../../components/icons");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
@@ -66,27 +66,40 @@ const ColumnsSection = (props) => {
             abColumn: {
                 header: 'AdapTable Column',
                 render: (params) => {
-                    const availableColumns = allColumns
+                    console.log(params.data, allColumns);
+                    const columnItems = allColumns
                         .filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
-                        .map((col) => {
-                        return {
-                            ...col,
-                            onClick: () => {
-                                handleColumnMapChange({
-                                    ...params.data,
-                                    abColumn: col.value,
-                                    include: true,
-                                });
-                            },
-                        };
-                    });
-                    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { showClearButton: true, onClear: () => {
+                        .map((col) => ({
+                        label: col.label,
+                        onClick: () => {
                             handleColumnMapChange({
                                 ...params.data,
-                                abColumn: null,
-                                include: false,
+                                abColumn: col.value,
+                                include: true,
                             });
-                        }, className: "twa:w-full", columns: ['label'], items: availableColumns, children: params.data?.abColumn?.friendlyName ??
+                        },
+                    }));
+                    const items = params.data?.abColumn
+                        ? [
+                            {
+                                label: 'Clear',
+                                onClick: () => {
+                                    handleColumnMapChange({
+                                        ...params.data,
+                                        abColumn: null,
+                                        include: false,
+                                    });
+                                },
+                            },
+                            { separator: true },
+                            ...(columnItems.length
+                                ? columnItems
+                                : [{ label: 'No other columns available', disabled: true }]),
+                        ]
+                        : columnItems.length
+                            ? columnItems
+                            : [{ label: 'No other columns available', disabled: true }];
+                    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { className: "twa:w-full", items: items, children: params.data?.abColumn?.friendlyName ??
                             params.data?.abColumn?.columnId ??
                             'Select Column' }));
                 },
@@ -107,7 +120,7 @@ const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-error", children: ["No data has been imported. Go to the ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide data."] }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-destructive", children: ["No data has been imported. Go to the ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide data."] }) }));
     }
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Mapping" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Match each data field to an AdapTable column. The primary key column cannot be excluded." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field', children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
                                         valid: 'end',

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

@@ -36,7 +36,7 @@ const DataPreview = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     if (!props.data) {
-        return ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { color: 'var(--ab-color-error)', children: ["No Data has been Imported. Go to ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide Data"] }));
+        return ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { color: 'var(--ab-color-destructive)', children: ["No Data has been Imported. Go to ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide Data"] }));
     }
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
     const columns = React.useMemo(() => {

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

@@ -10,8 +10,8 @@ interface DataSetViewPanelComponentState {
     CurrentDataSet: DataSet;
 }
 declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanelComponentProps, DataSetViewPanelComponentState> {
-    getCurrentDataSet(): DataSet;
-    getDataSets(): DataSet[];
+    getCurrentDataSet(): DataSet<any>;
+    getDataSets(): DataSet<any>[];
     render(): React.JSX.Element;
     onSelectedDataSetChanged(dataSetName: string): void;
 }

package/src/View/Export/ExportDestinationPicker.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportDestinationPicker = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const NewDropdownButton_1 = require("../../components/NewDropdownButton");
+const DropdownButton_1 = require("../../components/DropdownButton");
 const icons_1 = require("../../components/icons");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const exportApi = adaptable.api.exportApi;
@@ -16,12 +15,12 @@ const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return ((0, jsx_runtime_1.jsx)(ButtonExport_1.ButtonExport, { tooltip: 'Export Report', className: (0, clsx_1.default)(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
+        return ((0, jsx_runtime_1.jsx)(ButtonExport_1.ButtonExport, { tooltip: 'Export Report', className: (0, utils_1.cn)(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,
         onClick: () => handleExport(destination),
     }));
-    return ((0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { "data-name": "report-export-selector", disabled: reportName == undefined || reportFormat == undefined, tooltip: "Export Report", variant: "text", items: destinationItems, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "export" }) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "report-export-selector", disabled: reportName == undefined || reportFormat == undefined, tooltip: "Export Report", variant: "text", items: destinationItems, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "export" }) }));
 };
 exports.ExportDestinationPicker = ExportDestinationPicker;

package/src/View/Export/ExportViewPanel.js

@@ -19,7 +19,7 @@ const ReportNameSelector_1 = require("./ReportNameSelector");
 const ReportFormatSelector_1 = require("./ReportFormatSelector");
 const ExportDestinationPicker_1 = require("./ExportDestinationPicker");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const ExportViewPanel = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const exportApi = props.api.exportApi;
@@ -38,7 +38,7 @@ const ExportViewPanel = (props) => {
         : 'Are you sure you want to delete this report?';
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__wrap twa:gap-1 twa:flex-row`, {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.cn)(`ab-${elementType}__CellSummary__wrap twa:gap-1 twa:flex-row`, {
             'twa:min-w-[486px] twa:flex-nowrap': isToolbar,
             'twa:flex-1 twa:flex-wrap': !isToolbar,
         }), children: [(0, jsx_runtime_1.jsx)(ReportNameSelector_1.ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }), (0, jsx_runtime_1.jsx)(ReportFormatSelector_1.ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, join_1.default)(accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY

package/src/View/Export/Wizard/ReportColumnsWizardSection.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Report } from '../../../AdaptableState/ExportState';
+import { AdaptableApi } from '../../../types';
 export type ReportColumnsWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const isValidReportColumnsScope: (report: Report) => true | "Column scope is not defined";
-export declare const renderReportColumnsSummary: (report: Report) => React.JSX.Element;
+export declare const renderReportColumnsSummary: (report: Report, api: AdaptableApi) => React.ReactNode;
 export declare const ReportColumnsWizardSection: (props: ReportColumnsWizardSectionProps) => React.JSX.Element;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportColumnsWizardSection = exports.renderReportColumnsSummary = exports.isValidReportColumnsScope = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const getExportColumnsViewItems_1 = require("../../../Strategy/Utilities/Export/getExportColumnsViewItems");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
@@ -14,13 +15,7 @@ const isValidReportColumnsScope = (report) => {
     return true;
 };
 exports.isValidReportColumnsScope = isValidReportColumnsScope;
-const renderReportColumnsSummary = (report) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [report.ReportColumnScope === 'AllColumns' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "all Columns" }), " in the Report"] })) : null, report.ReportColumnScope === 'VisibleColumns' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "only visible Columns" }), " in the Report"] })) : null, report.ReportColumnScope === 'ScopeColumns' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, NewScopeComponent_1.renderScopeSummary)(report.Scope, {
-                    scopeColumns: 'Report Columns',
-                    scopeWholeRow: 'not available',
-                    scopeDataTypes: 'Report will include columns with the following types',
-                }) })) : null] }));
-};
+const renderReportColumnsSummary = (report, api) => (0, getExportColumnsViewItems_1.renderExportColumnsView)(report, api);
 exports.renderReportColumnsSummary = renderReportColumnsSummary;
 const ReportColumnsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

package/src/View/Export/Wizard/ReportRowsWizardSection.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Report } from '../../../AdaptableState/ExportState';
+import { AdaptableApi } from '../../../types';
 export type ReportRowsWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const isValidReportRowsQuery: (report: Report) => true | "Rows query cannot be empty";
-export declare const renderReportRowsSummary: (report: Report) => React.JSX.Element;
+export declare const renderReportRowsSummary: (report: Report, api: AdaptableApi) => React.ReactNode;
 export declare const ReportRowsWizardSection: (props: ReportRowsWizardSectionProps) => React.JSX.Element;

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

@@ -4,8 +4,7 @@ exports.ReportRowsWizardSection = exports.renderReportRowsSummary = exports.isVa
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
-const Tag_1 = require("../../../components/Tag");
+const getExportRowsViewItems_1 = require("../../../Strategy/Utilities/Export/getExportRowsViewItems");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
@@ -17,9 +16,7 @@ const isValidReportRowsQuery = (report) => {
     return true;
 };
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
-const renderReportRowsSummary = (report) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [report.ReportRowScope === 'AllRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "all Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'VisibleRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "only visible Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'ExpressionRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include Rows matching the query:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, jsx_runtime_1.jsx)(ExpressionPreview_1.ExpressionPreview, { query: report.Query }) })] })) : null] }));
-};
+const renderReportRowsSummary = (report, api) => (0, getExportRowsViewItems_1.renderExportRowsView)(report, api);
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

package/src/View/FlashingCell/FlashingCellStyle.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { HTMLProps } from 'react';
 import { FlashingCellDefinition } from '../../types';
 import { FlexProps } from '../../components/Flex';
-export interface FlashingCellStyleProps extends Omit<FlexProps, 'data'> {
+export declare const FLASHING_CELL_STYLE_PREVIEW_CLASS = "twa:!mt-0 twa:w-[5.5rem] twa:max-w-[5.5rem] twa:shrink-0 twa:!px-1.5 twa:!py-1 twa:text-2 twa:truncate";
+export interface FlashingCellStyleProps extends Omit<HTMLProps<HTMLDivElement> & FlexProps, 'data'> {
     data: FlashingCellDefinition;
+    className?: string;
 }
 export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;