@adaptabletools/adaptable 22.1.0 → 22.1.1-canary.0

package/src/Utilities/Services/AnnotationsService.js

@@ -98,7 +98,16 @@ export class AnnotationsService {
         }
         const cellNote = this.api.noteApi.getNoteForCell(cellPosition);
         const cellComments = this.api.commentApi.getCommentThreadForCell(cellPosition);
-        if (!cellNote && !cellComments) {
+        // Notes / Comments only open on hover when explicitly opted in via
+        // `noteOptions.openNote = 'hover'` / `commentOptions.showComment =
+        // 'hover'` (the defaults). When either is set to 'menu' the popup is
+        // only opened via the Cell Menu, so we ignore that side of the
+        // annotation when deciding whether to show the popup here.
+        const openNoteMode = this.api.optionsApi.getNoteOptions()?.showNoteAction ?? 'hover';
+        const showCommentMode = this.api.optionsApi.getCommentOptions()?.showCommentAction ?? 'hover';
+        const shouldOpenForNote = !!cellNote && openNoteMode === 'hover';
+        const shouldOpenForComment = !!cellComments && showCommentMode === 'hover';
+        if (!shouldOpenForNote && !shouldOpenForComment) {
             return;
         }
         this.showPopup(cellPosition, false);

package/src/Utilities/Services/Interface/IMetamodelService.d.ts

@@ -15,7 +15,6 @@ export interface GridInfoOption {
 }
 export interface IMetamodelService extends IAdaptableService {
     getAdaptableOptions: () => AdaptableOptions;
-    getGridInfoOptions(): GridInfoOptions;
     getGridInfoNoCodeOptions(): GridInfoOptions;
     validateAdaptableOptionsValues(): void;
 }

package/src/Utilities/Services/MetamodelService.d.ts

@@ -1,10 +1,8 @@
 import { GridInfoOptions, IMetamodelService } from './Interface/IMetamodelService';
 import { AdaptableOptions } from '../../../types';
 export declare class MetamodelService implements IMetamodelService {
-    private gridInfoOptions;
     getAdaptableOptions: () => AdaptableOptions;
     constructor(getAdaptableOptions: () => AdaptableOptions, validateOptions?: boolean);
-    getGridInfoOptions(): GridInfoOptions;
     getGridInfoNoCodeOptions(): GridInfoOptions;
     validateAdaptableOptionsValues(): void;
     private validateOptionsObject;

package/src/Utilities/Services/MetamodelService.js

@@ -5,23 +5,16 @@ import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
 import { getDefaultAdaptableOptions } from '../../AdaptableOptions/DefaultAdaptableOptions';
 const supportedMetamodelTypes = ['s', 'n', 'b', 'a', 'f', 'R'];
 export class MetamodelService {
-    gridInfoOptions = new Map();
     getAdaptableOptions = () => null;
     constructor(getAdaptableOptions, validateOptions) {
         this.getAdaptableOptions = getAdaptableOptions;
-        this.gridInfoOptions = this.buildGridInfoOptions();
         if (validateOptions) {
             this.validateAdaptableOptionsValues();
         }
     }
-    getGridInfoOptions() {
-        return this.gridInfoOptions;
-    }
     getGridInfoNoCodeOptions() {
         return this.buildGridInfoOptions({
-            filterItemProperty: (itemProperty) => {
-                return itemProperty.nC === 'item';
-            },
+            filterItemProperty: (itemProperty) => itemProperty.nC === 'item',
             filterEmptyAdaptableOptions: false,
         });
     }
@@ -89,7 +82,7 @@ export class MetamodelService {
         }
     }
     buildGridInfoOptions(options) {
-        const { filterItemProperty, filterEmptyAdaptableOptions = true } = options || {};
+        const { filterItemProperty, filterEmptyAdaptableOptions = true } = options;
         const gridInfoOptions = new Map();
         const adaptableMetamodel = this.getAdaptableMetamodel();
         const adaptableOptionsMetamodel = this.getAdaptableOptionsMetamodel();
@@ -105,9 +98,10 @@ export class MetamodelService {
             containerLabel: 'Base Options',
             items: baseOptionsItems,
         });
-        // map containers
+        // map containers — any top-level property that points to another
+        // metamodel item (k === 'R') is a nested *Options object
         adaptableOptionsMetamodel.p
-            .filter((optionItem) => optionItem.g === 'container')
+            .filter((optionItem) => optionItem.k === 'R')
             .forEach((containerOptionItem) => {
             const containerMetamodelName = containerOptionItem.r;
             const adaptableOptionsName = containerOptionItem.n;
@@ -130,7 +124,7 @@ export class MetamodelService {
         });
         return gridInfoOptions;
     }
-    mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues, filter = (itemProperty) => itemProperty.g === 'item') {
+    mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues, filter) {
         return optionItemContainer.p.filter(filter).map((itemProperty) => {
             return {
                 name: itemProperty.n,

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -3,6 +3,7 @@ import HelpBlock from '../../../components/HelpBlock';
 import { ALL_MODULES } from '../../../AdaptableState/Common/Types';
 import Radio from '../../../components/Radio';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../../Utilities/Constants/GeneralConstants';
 import { ADAPTABLE_MODULE_MAP } from '../../../Utilities/Constants/ModuleConstants';
 import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 import { Box, Flex } from '../../../components/Flex';
@@ -78,7 +79,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio, { onClick: () => handleOnChange(module, 'Full'), checked: accessLevel === 'Full' }));
+                return (React.createElement(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_FULL), checked: accessLevel === ACCESS_LEVEL_FULL }));
             },
         },
         readonly: {
@@ -86,7 +87,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio, { onClick: () => handleOnChange(module, 'ReadOnly'), checked: accessLevel === 'ReadOnly' }));
+                return (React.createElement(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_READ_ONLY), checked: accessLevel === ACCESS_LEVEL_READ_ONLY }));
             },
         },
         hidden: {
@@ -94,7 +95,7 @@ const EntitlementsListForm = (props) => {
             render: (params) => {
                 const module = params.data.name;
                 const accessLevel = entitlementsMap[module];
-                return (React.createElement(Radio, { onClick: () => handleOnChange(module, 'Hidden'), checked: accessLevel === 'Hidden' }));
+                return (React.createElement(Radio, { onClick: () => handleOnChange(module, ACCESS_LEVEL_HIDDEN), checked: accessLevel === ACCESS_LEVEL_HIDDEN }));
             },
         },
     };
@@ -126,9 +127,9 @@ const DefaultEntitlementForm = (props) => {
     }, [abOptions?.entitlementOptions?.defaultAccessLevel]);
     return (React.createElement(FormLayout, { className: "twa:mb-2" },
         React.createElement(FormRow, { label: "Default Entitlement:" },
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', className: "twa:mr-3" }, "Visible"),
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', className: "twa:mr-3" }, "Read Only"),
-            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Hidden'), checked: defaultEntitlement === 'Hidden' }, "Hidden"))));
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_FULL), checked: defaultEntitlement === ACCESS_LEVEL_FULL, className: "twa:mr-3" }, "Visible"),
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_READ_ONLY), checked: defaultEntitlement === ACCESS_LEVEL_READ_ONLY, className: "twa:mr-3" }, "Read Only"),
+            React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange(ACCESS_LEVEL_HIDDEN), checked: defaultEntitlement === ACCESS_LEVEL_HIDDEN }, "Hidden"))));
 };
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;

package/src/View/Alert/AlertEmptyView.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../AdaptableContext';
 export const AlertEmptyView = (props) => {
     const adaptable = useAdaptable();
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
-    const text = accessLevel == 'ReadOnly'
+    const text = accessLevel == ACCESS_LEVEL_READ_ONLY
         ? 'You have no Alert Definitions.'
         : "Click 'New' to create a new Alert Definition - this will include the Rule which triggers the Alert, and the behaviour of the Alert.";
     return React.createElement(React.Fragment, null, text);

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -38,7 +38,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
         let statusColour = this.getStatusColour();
         let selectedColumn = this.props.BulkUpdateValidationResult.Column;
         let previewPanel = (React.createElement(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
-        const valueSelectorDisabled = this.props.accessLevel == 'ReadOnly' ||
+        const valueSelectorDisabled = this.props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY ||
             !this.props.BulkUpdateValidationResult.IsValid ||
             this.props.api.layoutApi.isCurrentLayoutPivot();
         const valueOperationDisabled = valueSelectorDisabled ||

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -44,7 +44,8 @@ class CellSummaryViewPanelComponent extends React.Component {
                 };
             });
         let cellSummaryPopover = React.createElement(CellSummaryPopover, { CellSummary: this.props.CellSummary });
-        let shouldDisable = this.props.accessLevel == 'ReadOnly' || this.props.CellSummary == null;
+        let shouldDisable = this.props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY ||
+            this.props.CellSummary == null;
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const operationValue = this.getOperationValue() ?? 'N/A';

package/src/View/Comments/CommentsEditor.js

@@ -9,6 +9,7 @@ import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
 import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 import { Box, Flex } from '../../components/Flex';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 // Edit Mode
 // [author] [edit, delete]
 // [text-editor] * this is different
@@ -25,7 +26,7 @@ export const CommentsEditor = (props) => {
         return api.optionsApi.getUserName();
     }, []);
     const commentThread = useSelector((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
-    const isReadOnlyModule = api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
+    const isReadOnlyModule = api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === ACCESS_LEVEL_READ_ONLY;
     const [activeEditingComment, setActiveEditingComment] = React.useState(() => {
         /**
          * When opening the popup and there is only one comment, we want to open it in edit mode.

package/src/View/Comments/CommentsPopup.js

@@ -6,6 +6,7 @@ import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { Box, Flex } from '../../components/Flex';
 const tableDOMProps = {
     style: {
@@ -25,7 +26,8 @@ const headerOptions = {
 };
 const CellComments = (props) => {
     const adaptable = useAdaptable();
-    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
+    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') ===
+        ACCESS_LEVEL_READ_ONLY;
     const formatDate = (date, format) => {
         return FormatHelper.DateFormatter(date, { Pattern: format });
     };

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, } from '../../../../Utilities/Constants/GeneralConstants';
 import { Box } from '../../../../components/Flex';
 import clsx from 'clsx';
 import { twMerge } from '../../../../twMerge';
@@ -13,12 +14,12 @@ export class ButtonBase extends React.Component {
         glyph: '',
         displayMode: 'Glyph+Text',
         transformGlyph: false,
-        accessLevel: 'Full',
+        accessLevel: ACCESS_LEVEL_FULL,
         showDefaultStyle: false,
     };
     render() {
         let isDisabled;
-        isDisabled = this.props.accessLevel == 'Hidden';
+        isDisabled = this.props.accessLevel == ACCESS_LEVEL_HIDDEN;
         if (this.props.overrideDisableButton || this.props.disabled) {
             isDisabled = true;
         }

package/src/View/Components/Buttons/EntityListActionButtons.js

@@ -4,6 +4,7 @@ import { ButtonClone } from './ButtonClone';
 import { ButtonDelete } from './ButtonDelete';
 import { ButtonShare } from './ButtonShare';
 import { SuspendToggleButton } from './SuspendToggleButton/SuspendToggleButton';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../../Utilities/Constants/GeneralConstants';
 import { Flex } from '../../../components/Flex';
 import clsx from 'clsx';
 const stopPropagation = (e) => {
@@ -23,7 +24,7 @@ export class EntityListActionButtons extends React.Component {
         overrideDisableShare: false,
         confirmDeleteAction: null,
         entityType: '',
-        accessLevel: 'Full',
+        accessLevel: ACCESS_LEVEL_FULL,
         editSize: 'xsmall',
         deleteSize: 'xsmall',
         shareSize: 'xsmall',
@@ -36,10 +37,10 @@ export class EntityListActionButtons extends React.Component {
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
         return (React.createElement(Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation },
-            this.props.showEdit && (React.createElement(ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-edit twa:bg-action-edit twa:fill-text-on-edit`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })),
-            this.props.showClone && (React.createElement(ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-clone twa:bg-action-clone twa:fill-text-on-clone`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })),
-            this.props.showDelete && (React.createElement(ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-text-on-delete twa:bg-action-delete twa:fill-text-on-delete`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })),
-            this.props.showShare && (React.createElement(ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-text-on-share twa:bg-action-share twa:fill-text-on-share`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })),
-            this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == 'ReadOnly' }))));
+            this.props.showEdit && (React.createElement(ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-edit twa:bg-action-edit twa:fill-text-on-edit`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })),
+            this.props.showClone && (React.createElement(ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-clone twa:bg-action-clone twa:fill-text-on-clone`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })),
+            this.props.showDelete && (React.createElement(ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-text-on-delete twa:bg-action-delete twa:fill-text-on-delete`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })),
+            this.props.showShare && (React.createElement(ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-text-on-share twa:bg-action-share twa:fill-text-on-share`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })),
+            this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == ACCESS_LEVEL_READ_ONLY }))));
     }
 }

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ToggleButton } from '../../../../components/ToggleButton';
+import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
 import clsx from 'clsx';
 export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
     const handleOnChange = React.useCallback((checked) => {
@@ -10,7 +11,7 @@ export const SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend,
             onSuspend(suspendableObject);
         }
     }, [onUnSuspend, onSuspend]);
-    const preparedDisabled = (accessLevel && accessLevel === 'ReadOnly') || disabled;
+    const preparedDisabled = (accessLevel && accessLevel === ACCESS_LEVEL_READ_ONLY) || disabled;
     const isSuspended = suspendableObject.IsSuspended;
     return (React.createElement(ToggleButton, { className: clsx(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended }, isSuspended ? 'inactive' : 'active'));
 });

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -77,7 +77,6 @@ export const ColumnFilterInput = (props) => {
             } }));
     }
     if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
-        // we use the permitted values selector
         return (React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();
@@ -97,7 +96,9 @@ export const ColumnFilterInput = (props) => {
                 borderRadius: 0,
                 border: 'none',
             }
-            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
+            : {
+                width: '100%',
+            }, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
         // autoFocus has to be FALSE because if the input receives focus in the init phase,
         // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
         autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: "twa:flex-1", onChange: (e) => {

package/src/View/Components/ColumnFilter/components/ColumnFilterInputList.js

@@ -36,7 +36,10 @@ export const ColumnFilterInputList = (props) => {
     }
     return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {
         const value = props?.predicate?.args?.[index];
-        return (React.createElement(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+        const operator = props.predicate?.operator;
+        const usePermittedValuesSelector = input === 'number' ||
+            (input === 'text' && (operator === 'Equals' || operator === 'NotEquals'));
+        return (React.createElement(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: !usePermittedValuesSelector, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
                 const args = [...props.predicate.args];
                 args.splice(index, 1);
                 const newPredicate = {

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DashboardToolbar as DashboardToolbarUI } from '../../../../components/Dashboard';
+import { ACCESS_LEVEL_FULL } from '../../../../Utilities/Constants/GeneralConstants';
 export class PanelDashboard extends React.Component {
     static defaultProps = {
         showConfigureActionButton: true,
@@ -7,7 +8,7 @@ export class PanelDashboard extends React.Component {
         headerText: 'Module',
         onClose: null,
         onConfigure: null,
-        accessLevel: 'Full',
+        accessLevel: ACCESS_LEVEL_FULL,
     };
     render() {
         const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -28,7 +28,7 @@ export const AdaptablePopup = (props) => {
     let isStandalone = false;
     let moduleViewContent = null;
     let activeItem = null;
-    let accessLevel = 'Full';
+    let accessLevel = GeneralConstants.ACCESS_LEVEL_FULL;
     const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
     const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
@@ -70,7 +70,9 @@ export const AdaptablePopup = (props) => {
         } },
         React.createElement(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isStandalone && React.createElement(TopBar, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-text-on-defaultbackground', accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '') },
+            React.createElement(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-text-on-defaultbackground', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                    ? GeneralConstants.READ_ONLY_STYLE
+                    : '') },
                 !isStandalone && (React.createElement(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(Box, { className: clsx('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', !isStandalone && 'twa:*:p-3') }, moduleViewContent)))));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
 import DropdownButton from '../../../../components/DropdownButton';
 import EmptyContent from '../../../../components/EmptyContent';
 import { Icon } from '../../../../components/icons';
@@ -66,7 +67,7 @@ export const AdaptablePopupModuleView = (props) => {
     if (moduleViewProperties?.abObjectTypes?.length) {
         const items = moduleViewProperties?.abObjectTypes.map((abObjectType) => {
             return {
-                disabled: abObjectType?.accessLevel === 'ReadOnly',
+                disabled: abObjectType?.accessLevel === ACCESS_LEVEL_READ_ONLY,
                 onClick: () => {
                     setAbObjectType(abObjectType);
                     handleOpenEditPopup();

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import kebabCase from '../../../Utilities/utils/kebabCase';
+import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
@@ -129,7 +130,7 @@ const AdaptableToolPanelComponent = (props) => {
             toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton, { "data-name": menuItem.category, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: 'Full' }));
+                    return (React.createElement(SimpleButton, { "data-name": menuItem.category, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL }));
                 }
             }));
         }
@@ -154,7 +155,7 @@ const AdaptableToolPanelComponent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel ?? createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
         });
     };
     const onSetToolPanelVisibility = (name, checked) => {

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -4,6 +4,7 @@ import { useAdaptable } from '../../AdaptableContext';
 import { createUuid } from '../../../components/utils/uuid';
 import SimpleButton from '../../../components/SimpleButton';
 import kebabCase from '../../../Utilities/utils/kebabCase';
+import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 export const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = useAdaptable();
@@ -59,7 +60,7 @@ export const CustomToolPanelContent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel ?? createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
+            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
         })))));
 };
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import kebabCase from '../../Utilities/utils/kebabCase';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
 export const CustomDashboardButton = (props) => {
     const { button } = props;
     const [componentRevision, setComponentRevision] = useState(1);
@@ -19,11 +20,11 @@ export const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton, { key: buttonLabel, "aria-label": buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton, { key: buttonLabel, "aria-label": buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => {
             button.onClick?.(button, dashboardContext);
             setTimeout(() => {
                 // mutate state to force a re-rendering
                 setComponentRevision(componentRevision + 1);
             }, 16);
-        }, accessLevel: 'Full' }, buttonLabel));
+        }, accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
 };

package/src/View/Dashboard/Dashboard.js

@@ -1,4 +1,5 @@
 import kebabCase from '../../Utilities/utils/kebabCase';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';
@@ -26,7 +27,7 @@ const DashboardComponent = (props) => {
         let visibleDashboardElements = visibleToolbarNames.map((visibleToolbarName) => {
             let customToolbar = customToolbars && customToolbars.find((ct) => ct.name == visibleToolbarName);
             if (customToolbar) {
-                if (dashboardAccessLevel != 'Hidden') {
+                if (dashboardAccessLevel != ACCESS_LEVEL_HIDDEN) {
                     return (React.createElement(Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
                         React.createElement(CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
                 }
@@ -63,7 +64,7 @@ const DashboardComponent = (props) => {
             shortcuts = shortcutsArray.map((x, index) => {
                 let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
+                    return (React.createElement(AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
                             ? {
                                 ...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
                                     'Success'),

package/src/View/Dashboard/DashboardPopup.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
+import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
 import { ModuleValueSelector } from '../Components/ModuleValueSelector';
 import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
 import { Flex } from '../../components/Flex';
@@ -56,8 +57,8 @@ class DashboardPopupComponent extends React.Component {
         const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
         const baseClassName = 'ab-Dashboard-Popup';
         const dashboardAccessLevel = this.props.api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
-        const areDashboardSettingsVisible = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
-        const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
+        const areDashboardSettingsVisible = dashboardAccessLevel == ACCESS_LEVEL_FULL || dashboardAccessLevel == ACCESS_LEVEL_READ_ONLY;
+        const isDashboardDisabled = dashboardAccessLevel === ACCESS_LEVEL_READ_ONLY;
         const isModuleCheckboxDisabled = (module) => {
             if (module === 'SettingsPanel') {
                 return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ModuleManager } from '../../components/DragAndDropContext/ModuleManager';
 import { DashboardSetPinnedToolbars } from '../../Redux/ActionsReducers/DashboardRedux';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../AdaptableContext';
 export const PinnedToolbarsSelector = (props) => {
     const { api } = useAdaptable();
     const dashboardAccessLevel = api.entitlementApi.getEntitlementAccessLevelForModule('Dashboard');
-    const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
+    const isDashboardDisabled = dashboardAccessLevel === ACCESS_LEVEL_READ_ONLY;
     const dashboardState = useSelector((state) => state.Dashboard);
     const dispatch = useDispatch();
     const pinnedToolbars = dashboardState.PinnedToolbars;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../AdaptableContext';
 import usePrevious from '../../components/utils/usePrevious';
+import { ACCESS_LEVEL_HIDDEN } from '../../Utilities/Constants/GeneralConstants';
 import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { buildActionColumnButton } from './buildActionColumnButton';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
@@ -115,7 +116,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGr
             agGridContainer: agGridContainerId,
         },
         entitlementOptions: {
-            defaultAccessLevel: 'Hidden',
+            defaultAccessLevel: ACCESS_LEVEL_HIDDEN,
         },
         actionColumnOptions: actionColumnOptions,
         initialState: {

package/src/View/Export/ExportViewPanel.js

@@ -35,7 +35,9 @@ export const ExportViewPanel = (props) => {
         }) },
         React.createElement(ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
         React.createElement(ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
-        React.createElement(Flex, { className: join(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls twa:w-full`) },
+        React.createElement(Flex, { className: join(accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+                ? GeneralConstants.READ_ONLY_STYLE
+                : '', `ab-${elementType}__Export__controls twa:w-full`) },
             React.createElement(Flex, { className: "twa:min-w-[44px]" },
                 React.createElement(ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat })),
             React.createElement(Flex, null,

package/src/View/Filter/FilterViewPanel.js

@@ -7,6 +7,7 @@ import { ButtonClear } from '../Components/Buttons/ButtonClear';
 import { CheckBox } from '../../components/CheckBox';
 import { connect } from 'react-redux';
 import { getColumnFiltersSelector } from '../../Redux/ActionsReducers/LayoutRedux';
+import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import SimpleButton from '../../components/SimpleButton';
 import join from '../../components/utils/join';
 import { Flex } from '../../components/Flex';
@@ -31,7 +32,7 @@ class FilterViewPanelComponent extends React.Component {
                 ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
                 React.createElement(ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
                 React.createElement(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
-            React.createElement(Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === 'ReadOnly' ||
+            React.createElement(Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === ACCESS_LEVEL_READ_ONLY ||
                     this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                 } }, "Filter Bar")))));