@adaptabletools/adaptable 22.1.0-canary.1 → 22.1.1-canary.0

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -7,6 +7,7 @@ import Panel from '../../../components/Panel';
 import { Tabs } from '../../../components/Tabs';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
+import { getDefaultAdaptableOptions } from '../../../AdaptableOptions/DefaultAdaptableOptions';
 import clsx from 'clsx';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
@@ -36,6 +37,7 @@ export const GridInfoPopup = (props) => {
     if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
         keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
     }
+    keyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
     keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
     keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
     keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
@@ -68,16 +70,187 @@ export const GridInfoPopup = (props) => {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
     };
+    // Variant used by the Grid Options tab — the Value column allows newlines
+    // in the rendered string (preserved via `white-space: pre-line`), so a
+    // nested *Options object can show one `"key": value` per line.
+    const optionsColumnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: {
+            field: 'Value',
+            header: 'Value',
+            defaultFlex: 3,
+            render: ({ value }) => (React.createElement("span", { style: {
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'anywhere',
+                    display: 'block',
+                    lineHeight: '18px',
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                } }, String(value ?? ''))),
+        },
+    };
+    // ---- Grid Options tab: build one InfiniteTableGrid section per non-empty
+    // ---- options group on the AdaptableOptions object.
+    const titleCase = (camel) => camel
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/^./, (c) => c.toUpperCase())
+        .replace(/\s./g, (c) => c.toUpperCase());
+    // Renders a single primitive / function / array / nested-object value
+    // (used for the inner key:value pairs when expanding a nested options
+    // object). Short objects/arrays stay on one line; longer ones get
+    // pretty-printed across multiple lines so they don't blow past the cell.
+    const ONE_LINE_MAX = 60;
+    const fnReplacer = (_k, val) => typeof val === 'function' ? '[Function]' : val;
+    const formatValuePart = (v) => {
+        if (typeof v === 'function')
+            return '[Function]';
+        if (v === undefined)
+            return 'undefined';
+        if (v === null)
+            return 'null';
+        if (typeof v === 'string')
+            return JSON.stringify(v);
+        if (Array.isArray(v) || typeof v === 'object') {
+            try {
+                const oneLine = JSON.stringify(v, fnReplacer);
+                if (oneLine !== undefined && oneLine.length <= ONE_LINE_MAX)
+                    return oneLine;
+                return JSON.stringify(v, fnReplacer, 2);
+            }
+            catch {
+                return String(v);
+            }
+        }
+        return String(v);
+    };
+    const displayValue = (v) => {
+        if (typeof v === 'function')
+            return '[Function]';
+        if (v === undefined)
+            return '(undefined)';
+        if (v === null)
+            return '(null)';
+        if (Array.isArray(v)) {
+            // Top-level array values (e.g. `colorPalette`, `systemFilterPredicates`).
+            // Short arrays stay on one line; longer ones get pretty-printed across
+            // multiple lines so they don't blow past the cell.
+            return formatValuePart(v);
+        }
+        if (typeof v === 'object') {
+            // Nested options-style object → render as one `key: value` per line.
+            // `undefined` entries are filtered out so empty defaults don't show up.
+            const entries = Object.entries(v).filter(([, val]) => val !== undefined);
+            if (entries.length === 0)
+                return '{}';
+            return entries.map(([k, val]) => `${k}: ${formatValuePart(val)}`).join('\n');
+        }
+        return String(v);
+    };
+    const gridOptionsSections = (() => {
+        const opts = api.optionsApi.getAdaptableOptions();
+        const defaults = getDefaultAdaptableOptions();
+        const baseRows = [];
+        const groupSections = [];
+        // A function value should only be displayed when it has been explicitly
+        // provided by the user. AdapTable ships a handful of identity-function
+        // defaults (e.g. `stateOptions.applyState`) that are not interesting to
+        // surface here — we suppress those by reference-comparing against the
+        // values returned from `getDefaultAdaptableOptions()`.
+        const isUserProvidedFunction = (groupKey, propKey, fn) => {
+            if (typeof fn !== 'function')
+                return false;
+            const defaultGroup = defaults[groupKey];
+            if (!defaultGroup || typeof defaultGroup !== 'object')
+                return true;
+            return defaultGroup[propKey] !== fn;
+        };
+        Object.keys(opts).forEach((key) => {
+            if (key === 'licenseKey' || key === 'initialState')
+                return;
+            const value = opts[key];
+            if (value == null)
+                return;
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                const rows = Object.keys(value)
+                    .filter((sk) => {
+                    const sv = value[sk];
+                    // skip empties (undefined / null)
+                    if (sv == null)
+                        return false;
+                    // suppress AdapTable's default callback implementations — keep
+                    // only user-provided overrides
+                    if (typeof sv === 'function' && !isUserProvidedFunction(key, sk, sv)) {
+                        return false;
+                    }
+                    return true;
+                })
+                    .map((sk) => ({ Key: sk, Value: displayValue(value[sk]) }));
+                if (rows.length === 0)
+                    return;
+                groupSections.push({ title: titleCase(key), rows });
+            }
+            else {
+                // top-level function defaults aren't a concern (none exist on the
+                // root of `AdaptableOptions`), but apply the same rule for safety
+                if (typeof value === 'function' && defaults[key] === value)
+                    return;
+                baseRows.push({ Key: key, Value: displayValue(value) });
+            }
+        });
+        const sections = [];
+        if (baseRows.length > 0)
+            sections.push({ title: 'Base Properties', rows: baseRows });
+        sections.push(...groupSections);
+        return sections;
+    })();
+    // Variable row height for Grid Options sections — counts the number of
+    // lines in the formatted value string (including visual wraps for very
+    // long unbroken lines) and grows the row to fit.
+    const VALUE_CHARS_PER_LINE = 70; // rough estimate at the Value column width
+    const visualLineCount = (text) => {
+        if (!text)
+            return 1;
+        return text
+            .split('\n')
+            .reduce((acc, line) => acc + Math.max(1, Math.ceil(line.length / VALUE_CHARS_PER_LINE)), 0);
+    };
+    const calculateRowHeight = (row) => {
+        const lines = visualLineCount(String(row?.Value ?? ''));
+        if (lines <= 1)
+            return 32;
+        return lines * 18 + 12;
+    };
+    const sectionHeight = (rows) => {
+        const total = rows.reduce((acc, r) => acc + calculateRowHeight(r), 0);
+        // 40px header, capped so a single huge group can't dominate the popup
+        return Math.min(total + 40, 400);
+    };
+    // Which tabs the user has opted in to. Falls back to all three (matching
+    // the default in `DefaultAdaptableOptions`) when the option isn't set.
+    const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
+        ['Grid Options', 'Grid Summary', 'Grid State'];
+    const showSummary = enabledTabs.includes('Grid Summary');
+    const showState = enabledTabs.includes('Grid State');
+    const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
     return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
         React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
             React.createElement(Panel.FlexBody, null,
                 React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
-                    React.createElement(Tabs.Tab, null, "Grid Summary"),
-                    React.createElement(Tabs.Tab, null, "Grid State"),
-                    React.createElement(Tabs.Content, null,
+                    showSummary ? React.createElement(Tabs.Tab, null, "Grid Summary") : null,
+                    showState ? React.createElement(Tabs.Tab, null, "Grid State") : null,
+                    showOptions ? React.createElement(Tabs.Tab, null, "Grid Options") : null,
+                    showSummary ? (React.createElement(Tabs.Content, null,
                         React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
-                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }))),
-                    React.createElement(Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
+                            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap })))) : null,
+                    showState ? (React.createElement(Tabs.Content, null,
+                        React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }))) : null,
+                    showOptions ? (React.createElement(Tabs.Content, null,
+                        React.createElement("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4" }, gridOptionsSections.map((section) => (React.createElement("div", { key: section.title },
+                            React.createElement("h4", { className: "twa:font-semibold twa:mb-1" }, section.title),
+                            React.createElement(DataSource, { data: section.rows, primaryKey: "Key" },
+                                React.createElement(InfiniteTableGrid, { domProps: {
+                                        style: { height: sectionHeight(section.rows), width: '100%' },
+                                    }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap })))))))) : null)))));
 };

package/src/View/Layout/LayoutCloneButton.js

@@ -2,9 +2,10 @@ import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 export const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = useAdaptable();
-    const isDisabled = accessLevel === 'ReadOnly';
+    const isDisabled = accessLevel === ACCESS_LEVEL_READ_ONLY;
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, isPivotLayout(data) ? 'pivot' : 'table', 'Clone');
     }, []);

package/src/View/Layout/LayoutViewPanel.js

@@ -41,7 +41,9 @@ const LayoutViewPanelComponent = (props) => {
     return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
         React.createElement(Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
             React.createElement(Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
-        React.createElement(Flex, { flexDirection: "row", className: join(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
+        React.createElement(Flex, { flexDirection: "row", className: join(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                ? GeneralConstants.READ_ONLY_STYLE
+                : '', `ab-${elementType}__Layout__wrap`) },
             React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
             React.createElement(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
             React.createElement(DropdownButton, { variant: "text", tooltip: LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [

package/src/View/Layout/TransposedPopup.js

@@ -5,6 +5,7 @@ import { useAdaptable } from '../AdaptableContext';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 import { Box, Flex } from '../../components/Flex';
+import { ACCESS_LEVEL_HIDDEN } from '../../Utilities/Constants/GeneralConstants';
 import { ExportModuleId } from '../../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
@@ -23,7 +24,7 @@ function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns
             adaptableContainer: ADAPTABLE_CONTAINER_ID,
             agGridContainer: AG_GRID_CONTAINER_ID,
         },
-        entitlementOptions: { defaultAccessLevel: 'Hidden' },
+        entitlementOptions: { defaultAccessLevel: ACCESS_LEVEL_HIDDEN },
         initialState: {
             Layout: {
                 Revision: Date.now(),

package/src/View/Layout/Wizard/sections/RowSelectionSection.js

@@ -104,17 +104,17 @@ export const RowSelectionSection = (props) => {
         !rowSelection && React.createElement(HelpBlock, null, "There is no Row Selection configured for this Layout"),
         rowSelection && (React.createElement(React.Fragment, null,
             React.createElement(Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Row Selection Column"),
+                React.createElement(Tabs.Tab, null, "Row Selection Column Checkboxes"),
                 React.createElement(Tabs.Content, null,
                     React.createElement(Flex, { flexDirection: "row", className: "twa:gap-6" },
-                        React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Show Row Selection Checkboxes"),
-                        mode === 'multiRow' && (React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }) }, "Show Header Checkbox (to enable Select All)"))))),
+                        React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Checkboxes in Column Cells"),
+                        mode === 'multiRow' && (React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }) }, "Checkbox in Column Header (to enable Select All)"))))),
             (rowSelection.Checkboxes ?? true) && (React.createElement(Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Row Grouping"),
+                React.createElement(Tabs.Tab, null, "Row Grouping Selection Checkboxes"),
                 React.createElement(Tabs.Content, null,
                     React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
-                        React.createElement(Radio, { value: false }, "Show Row Selection Checkbox in dedicated Selection Column"),
-                        React.createElement(Radio, { value: true }, "Show Row Selection Checkbox in Row Grouped Column"))))),
+                        React.createElement(Radio, { value: false }, "Display in dedicated Selection Column"),
+                        React.createElement(Radio, { value: true }, "Display in Row Grouped Column"))))),
             React.createElement(Tabs, { className: "twa:mt-2" },
                 React.createElement(Tabs.Tab, null, "Row Click Selection (when user clicks on Row outside of Selection Checkbox)"),
                 React.createElement(Tabs.Content, null,

package/src/View/Note/NotePopup.js

@@ -7,6 +7,7 @@ import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -31,7 +32,8 @@ export const NotePopup = (props) => {
         ? adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId)
         : StringExtensions.Humanize(adaptable.adaptableOptions.primaryKey);
     const allNotes = useSelector((state) => GetAllNotesSelector(state.Note));
-    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
+    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') ===
+        ACCESS_LEVEL_READ_ONLY;
     const formatDate = (date, format) => {
         return FormatHelper.DateFormatter(date, { Pattern: format });
     };

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -6,6 +6,7 @@ import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import Input from '../../components/Input';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { ButtonApply } from '../Components/Buttons/ButtonApply';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
@@ -62,7 +63,7 @@ class SmartEditViewPanelComponent extends React.Component {
             color: statusColour,
             fill: 'currentColor',
         };
-        let shouldDisable = this.props.accessLevel == 'ReadOnly' ||
+        let shouldDisable = this.props.accessLevel == ACCESS_LEVEL_READ_ONLY ||
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -8,7 +8,9 @@ import { Flex } from '../../components/Flex';
 export const StateManagementViewPanel = (props) => {
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: join(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__StateManagement__wrap twa:min-h-input`) },
+    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: join(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+            ? GeneralConstants.READ_ONLY_STYLE
+            : '', `ab-${elementType}__StateManagement__wrap twa:min-h-input`) },
         React.createElement(Flex, { flexDirection: "row" },
             React.createElement(LoadButton, { tooltip: "Load Initial Adaptable State", variant: "text", icon: "upload", onLoad: (json) => props.api.stateApi.reloadInitialState(json), accessLevel: props.accessLevel }, !isToolbar && 'Load'),
             React.createElement(ClearButton, { icon: "delete", tooltip: "Clear User State", variant: "text", onClick: () => props.api.stateApi.reloadInitialState(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),

package/src/View/StatusBar/StatusBarPopup.js

@@ -6,6 +6,7 @@ import { ALL_STATUS_SUB_PANELS } from '../../AdaptableState/Common/Types';
 import { getStatusPanelsSelector } from '../../Redux/ActionsReducers/StatusBarRedux';
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 export const StatusBarPopup = (props) => {
     const statusPanels = useSelector(getStatusPanelsSelector);
     const adaptable = useAdaptable();
@@ -32,7 +33,7 @@ export const StatusBarPopup = (props) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };
     });
-    const disabled = props.accessLevel === 'ReadOnly';
+    const disabled = props.accessLevel === ACCESS_LEVEL_READ_ONLY;
     return (React.createElement(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() }, statusPanels.length ? (React.createElement(ModuleManager, { permittedActions: {
             createTab: false,
             dragAndDropTab: false,

package/src/View/Theme/ThemeEditor.js

@@ -8,6 +8,7 @@ import Panel from '../../components/Panel';
 import { Field } from './ThemeField';
 import { VariantSelector } from './VariantSelector';
 import { getAccessLevelForObject } from '../../Utilities/Helpers/AdaptableHelper';
+import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
 import { Box, Flex } from '../../components/Flex';
 const fields = [
     {
@@ -53,7 +54,7 @@ export const ThemeEditor = (props) => {
         return adaptable.api.themeApi.getCurrentThemeObject();
     });
     const currentThemeAccessLevel = getAccessLevelForObject(currentThemeObject, props.accessLevel);
-    const currentThemeIsReadOnly = currentThemeAccessLevel !== 'Full';
+    const currentThemeIsReadOnly = currentThemeAccessLevel !== ACCESS_LEVEL_FULL;
     // THEME variables
     const themeVariables = currentThemeObject?.CSSVariables;
     const valuesFromTheme = fields.reduce((acc, field) => {

package/src/View/Theme/ThemePopup.js

@@ -6,6 +6,7 @@ import FormLayout, { FormRow } from '../../components/FormLayout';
 import DropdownButton from '../../components/DropdownButton';
 import { ThemeEditor } from './ThemeEditor';
 import ObjectFactory from '../../Utilities/ObjectFactory';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import SimpleButton from '../../components/SimpleButton';
 import { Icon } from '../../components/icons';
 import { ThemeSelector } from './ThemeSelector';
@@ -15,7 +16,7 @@ class ThemePopupComponent extends React.Component {
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
-        const disabled = this.props.accessLevel === 'ReadOnly';
+        const disabled = this.props.accessLevel === ACCESS_LEVEL_READ_ONLY;
         const newButton = (React.createElement(DropdownButton, { className: "twa:ml-2", disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
                 {
                     label: 'Dark',

package/src/View/Theme/ThemeSelector.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Select } from '../../components/Select';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { ThemeModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { useAdaptable } from '../AdaptableContext';
 export const ThemeSelector = (props) => {
@@ -9,7 +10,8 @@ export const ThemeSelector = (props) => {
     const dispatch = useDispatch();
     const availableThemes = adaptable.api.themeApi.getThemes();
     const currentTheme = useSelector((state) => state.Theme.CurrentTheme);
-    const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ThemeModuleId) === 'ReadOnly';
+    const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ThemeModuleId) ===
+        ACCESS_LEVEL_READ_ONLY;
     const optionThemes = availableThemes.map((theme) => {
         if (typeof theme === 'string') {
             // protection against old state, which could be string

package/src/View/Theme/ThemeViewPanel.js

@@ -4,6 +4,8 @@ import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { ThemeSelector } from './ThemeSelector';
 export const ThemeViewPanelControl = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement("div", { className: join(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
+    return (React.createElement("div", { className: join(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+            ? GeneralConstants.READ_ONLY_STYLE
+            : '', `ab-${elementType}__Theme__wrap`) },
         React.createElement(ThemeSelector, null)));
 };

package/src/View/Wizard/OnePageWizards.js

@@ -5,6 +5,7 @@ import Dialog from '../../components/Dialog';
 import SimpleButton from '../../components/SimpleButton';
 import useProperty from '../../components/utils/useProperty';
 import { isMacLike } from '../../Utilities/isMacLike';
+import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
 import { KeyHint } from '../KeyHint';
 import { Icon } from '../../components/icons';
 import { useResizeObserver } from '../../components/ResizeObserver';
@@ -176,8 +177,8 @@ export const OnePageWizard = (props) => {
                                 "to navigate")),
                         React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1" }, renderSection(currentSection))),
                     React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2" },
-                        React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
+                        React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: ACCESS_LEVEL_FULL }, props.closeText ?? 'CLOSE'),
                         React.createElement(KeyHint, { className: "twa:ml-2" }, "Esc"),
                         React.createElement(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-error twa:text-end" }, firstErrorMessage),
-                        React.createElement(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, props.finishText ?? 'Finish')))))));
+                        React.createElement(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: ACCESS_LEVEL_FULL }, props.finishText ?? 'Finish')))))));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -26,7 +26,7 @@ import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import { RowFormService } from '../Utilities/Services/RowFormService';
-import { GridCellWithChildren, GridCellWithCount } from '../AdaptableState/Selection/GridCell';
+import { CellUpdateRequest, GridCellWithChildren, GridCellWithCount } from '../AdaptableState/Selection/GridCell';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { PivotLayoutModel, TableLayoutModel } from '../layout-manager/src/LayoutManagerModel';
@@ -300,7 +300,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getRowNodesForPrimaryKeys(primaryKeyValues: any[]): any[];
     getRowNodeByIndex(index: number): IRowNode;
     getAgGridStatusPanels(): StatusPanelDef[];
-    setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: IRowNode): void;
+    updateCell(cellUpdateRequest: CellUpdateRequest): void;
     forAllRowNodesDo(func: (rowNode: IRowNode, rowIndex: number) => void, config?: {
         includeGroupRows?: boolean;
         filterFn?: (rowNode: IRowNode) => boolean;

package/src/agGrid/AdaptableAgGrid.js

@@ -3301,38 +3301,16 @@ export class AdaptableAgGrid {
     getAgGridStatusPanels() {
         return this.agGridAdapter.getGridOption('statusBar')?.statusPanels ?? [];
     }
-    setDataValue(value, column, primaryKeyValue, rowNode) {
+    updateCell(cellUpdateRequest) {
         // note: because we use RowNode.setDataValue() this will cause Validation to fire
         // see https://www.ag-grid.com/javascript-data-grid/change-detection/#triggering-value-change-detection
-        let newValue;
-        let dataType = column.dataType;
-        newValue = dataType == 'number' ? Number(value) : value;
-        if (dataType == undefined) {
-            return; // no point continuing as probably a wrong column
-        }
-        if (rowNode) {
-            rowNode.setDataValue(column.columnId, newValue);
-        }
-        else {
-            if (this.useRowNodeLookUp) {
-                const rowNode = this.agGridAdapter.getAgGridApi().getRowNode(primaryKeyValue);
-                if (rowNode != null) {
-                    rowNode.setDataValue(column.columnId, newValue);
-                }
-            }
-            else {
-                let isUpdated = false;
-                // prefer not to use this method but if we do then at least we can prevent further lookups once we find
-                this.agGridAdapter.getAgGridApi().forEachNode((rowNode) => {
-                    if (!isUpdated) {
-                        if (primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
-                            rowNode.setDataValue(column.columnId, newValue);
-                            isUpdated = true;
-                        }
-                    }
-                });
-            }
+        const rowNode = cellUpdateRequest.rowNode ?? this.getRowNodeForPrimaryKey(cellUpdateRequest.primaryKeyValue);
+        if (!rowNode) {
+            this.logger.warn(`updateCell() - rowNode not found for primaryKeyValue: ${cellUpdateRequest.primaryKeyValue}`);
+            return;
         }
+        // update the row node and set it as an edit (for AG Grid Cell Change Detection)
+        rowNode.setDataValue(cellUpdateRequest.columnId, cellUpdateRequest.newValue, 'edit');
     }
     forAllRowNodesDo(func, config) {
         this.agGridAdapter.getAgGridApi().forEachNode((rowNode, rowIndex) => {

package/src/agGrid/AgGridAdapter.js

@@ -1,6 +1,6 @@
 import { ColumnApiModule, } from 'ag-grid-enterprise';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
-import { ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME } from '../Utilities/Constants/GeneralConstants';
+import { ACCESS_LEVEL_HIDDEN, ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME, } from '../Utilities/Constants/GeneralConstants';
 import { createUuid } from '../AdaptableState/Uuid';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
@@ -746,7 +746,7 @@ export class AgGridAdapter {
     }
     isColumnFilterable(colDef) {
         // follow agGrid logic which is that ONLY filterable if explicitly set
-        if (this.adaptableApi.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ColumnFilterModuleId) == 'Hidden') {
+        if (this.adaptableApi.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ColumnFilterModuleId) == ACCESS_LEVEL_HIDDEN) {
             return false;
         }
         return colDef != null && colDef.filter != null && colDef.filter != false;

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,4 +1,5 @@
 import kebabCase from '../Utilities/utils/kebabCase';
+import { resolveDisplayFormat } from '../AdaptableState/Common/AdaptableFormatPresets';
 import merge from '../Utilities/utils/merge';
 import { convertAdaptableStyleToCSS, getVariableColor, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
@@ -730,8 +731,14 @@ export class AgGridColumnAdapter {
                     // ALL FormatColumns are conditional and NONE of them are relevant for this row
                     return value;
                 }
-                const formatterOptions = mostRelevantFormatColumn.DisplayFormat.Options;
-                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
+                // Resolve once: a preset name (e.g. 'Dollar') is materialised
+                // into the concrete AdaptableFormat for this render call.
+                const resolvedDisplayFormat = resolveDisplayFormat(mostRelevantFormatColumn.DisplayFormat);
+                if (!resolvedDisplayFormat) {
+                    return value;
+                }
+                const formatterOptions = resolvedDisplayFormat.Options;
+                if (resolvedDisplayFormat.Formatter === 'NumberFormatter') {
                     // change the Number format - if the scope allows it
                     if (this.adaptableApi.columnScopeApi.isColumnInNumericScope(abColumn, mostRelevantFormatColumn.Scope)) {
                         let cellValue = params.value;
@@ -743,7 +750,7 @@ export class AgGridColumnAdapter {
                         return this.adaptableApi.formatColumnApi.internalApi.getNumberFormattedValue(cellValue, params.node, abColumn, formatterOptions);
                     }
                 }
-                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'DateFormatter') {
+                if (resolvedDisplayFormat.Formatter === 'DateFormatter') {
                     // change the Date format - if the scope allows it
                     if (this.adaptableApi.columnScopeApi.isColumnInDateScope(abColumn, mostRelevantFormatColumn.Scope)) {
                         let cellValue = params.value;
@@ -755,7 +762,7 @@ export class AgGridColumnAdapter {
                         return this.adaptableApi.formatColumnApi.internalApi.getDateFormattedValue(cellValue, params.node, abColumn, formatterOptions);
                     }
                 }
-                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'StringFormatter') {
+                if (resolvedDisplayFormat.Formatter === 'StringFormatter') {
                     // change the String format - if the scope allows it
                     if (this.adaptableApi.columnScopeApi.isColumnInTextScope(abColumn, mostRelevantFormatColumn.Scope)) {
                         let cellValue = params.value;

package/src/agGrid/AgGridExportAdapter.js

@@ -1,5 +1,6 @@
 import tinycolor from 'tinycolor2';
 import { inferSchema, initParser } from 'udsv';
+import { resolveDisplayFormat } from '../AdaptableState/Common/AdaptableFormatPresets';
 import { createUuid } from '../AdaptableState/Uuid';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 import { ExportModuleId } from '../Utilities/Constants/ModuleConstants';
@@ -639,9 +640,10 @@ export class AgGridExportAdapter {
                     const abColumn = getAdaptableColumnWithColumnId(column.getColId());
                     if (!dateFormatPattern) {
                         const mostRelevantFormatColumn = this.adaptableApi.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(getFormatColumnsWithDisplayFormatForColumn(column.getColId()), abColumn, { node, value: rawValue });
+                        const resolvedDisplayFormat = resolveDisplayFormat(mostRelevantFormatColumn?.DisplayFormat);
                         dateFormatPattern =
-                            mostRelevantFormatColumn?.DisplayFormat?.Formatter === 'DateFormatter' &&
-                                mostRelevantFormatColumn?.DisplayFormat?.Options?.Pattern;
+                            resolvedDisplayFormat?.Formatter === 'DateFormatter' &&
+                                resolvedDisplayFormat?.Options?.Pattern;
                     }
                     if (dateFormatPattern) {
                         const customDateFormatPattern = typeof dateFormatPattern === 'function'

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useRerender } from '../../components/utils/useRerender';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import { LAYOUT_SELECT } from '../../Redux/ActionsReducers/LayoutRedux';
+import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
 const ActionButtons = (props) => {
     const { buttons, adaptableApi, context, rerender } = props;
     return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
@@ -30,7 +31,7 @@ const ActionButtons = (props) => {
             button.icon?.name ??
             button.tooltip ??
             `${index + 1}`;
-        return (React.createElement(SimpleButton, { key: button.Uuid, "data-name": `action-button-${identifier}`, variant: buttonStyle?.variant ?? 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? 'none', onClick: handleClick, className: buttonStyle?.className, accessLevel: 'Full' }, buttonLabel));
+        return (React.createElement(SimpleButton, { key: button.Uuid, "data-name": `action-button-${identifier}`, variant: buttonStyle?.variant ?? 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? 'none', onClick: handleClick, className: buttonStyle?.className, accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
     })));
 };
 export const ReactActionColumnRenderer = (props) => {

package/src/components/Dashboard/Dashboard.js

@@ -4,6 +4,7 @@ import join from '../utils/join';
 import useProperty from '../utils/useProperty';
 import { DashboardToolbar } from './DashboardToolbar';
 import DropdownButton from '../DropdownButton';
+import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
 export function Dashboard(props) {
     const { title, children, left, right, onShowDashboardPopup } = props;
     const [activeTabIndex, setActiveTabIndex] = useProperty(props, 'activeTabIndex', 0);
@@ -64,7 +65,7 @@ export function Dashboard(props) {
             !floating && renderTabs()),
         floating ? (React.createElement("div", { className: "ab-Dashboard__title", ref: handleRef, key: "title-drag", style: { cursor: 'move' } }, title)) : (React.createElement("div", { className: "ab-Dashboard__title", key: "title" }, title)),
         React.createElement("div", { className: "ab-Dashboard__header-right" }, right)));
-    const renderHomeToolbar = () => (React.createElement(DashboardToolbar, { onConfigure: onShowDashboardPopup, className: "ab-Dashboard__home-toolbar", title: title, tooltip: `Configure Dashboard`, showConfigure: true, showClose: false, accessLevel: 'Full' },
+    const renderHomeToolbar = () => (React.createElement(DashboardToolbar, { onConfigure: onShowDashboardPopup, className: "ab-Dashboard__home-toolbar", title: title, tooltip: `Configure Dashboard`, showConfigure: true, showClose: false, accessLevel: ACCESS_LEVEL_FULL },
         left,
         right,
         children && children.length > 1,