@adaptabletools/adaptable 20.0.0-canary.2 → 20.0.0-canary.20

package/src/Redux/Store/AdaptableStore.js

@@ -1,7 +1,7 @@
 import * as Redux from 'redux';
 import * as PluginsRedux from '../ActionsReducers/PluginsRedux';
 import * as PopupRedux from '../ActionsReducers/PopupRedux';
-import { PROGRESS_INDICATOR_HIDE, PROGRESS_INDICATOR_SHOW, } from '../ActionsReducers/PopupRedux';
+import { PROGRESS_INDICATOR_HIDE, PROGRESS_INDICATOR_SHOW } from '../ActionsReducers/PopupRedux';
 import { createEngine as createEngineLocal } from './AdaptableReduxLocalStorageEngine';
 import { mergeReducer } from './AdaptableReduxMerger';
 import { isAdaptableCellChangedAlert, isAdaptableRowChangedAlert, } from '../../PredefinedConfig/Common/AdaptableAlert';
@@ -500,7 +500,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     let returnAction = next(action);
                     adaptable.api.gridApi.refreshAllCells(true);
                     // if set then return a query on the text
-                    if (adaptable.adaptableOptions.quickSearchOptions.filterResultsAfterQuickSearch) {
+                    if (adaptable.adaptableOptions.quickSearchOptions.filterGridAfterQuickSearch) {
                         const actionTyped = action;
                         const searchText = actionTyped.quickSearchText;
                         if (StringExtensions.IsNotNullOrEmpty(searchText)) {
@@ -660,7 +660,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     }
                     return ret;
                 }
-                case InternalRedux.HIGHLIGHT_CELL_DELETE_ALL: {
+                case InternalRedux.HIGHLIGHT_ROW_DELETE_ALL: {
                     const rowHighlightInfos = middlewareAPI.getState().Internal.RowHighlightInfo;
                     const ret = next(action);
                     rowHighlightInfos.forEach((rowHighlightInfo) => {

package/src/Strategy/ColumnFilterModule.js

@@ -55,7 +55,7 @@ export class ColumnFilterModule extends AdaptableModuleBase {
             }
             const existingColumnFilter = this.api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
             if (existingColumnFilter) {
-                columnFilterMenuItems.push(this.createMenuItemReduxAction('column-filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter)));
+                columnFilterMenuItems.push(this.createMenuItemReduxAction('column-filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter.ColumnId)));
                 columnFilterMenuItems.push(this.createMenuItemReduxAction(existingColumnFilter.IsSuspended ? 'column-filter-unsuspend' : 'column-filter-suspend', existingColumnFilter.IsSuspended ? 'Unsuspend Filter' : 'Suspend Filter', existingColumnFilter.IsSuspended ? 'resume' : 'pause', existingColumnFilter.IsSuspended
                     ? LayoutRedux.LayoutColumnFilterUnSuspend(existingColumnFilter)
                     : LayoutRedux.LayoutColumnFilterSuspend(existingColumnFilter)));
@@ -88,7 +88,7 @@ export class ColumnFilterModule extends AdaptableModuleBase {
                 }
                 else {
                     return [
-                        this.createMenuItemReduxAction('column-filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter)),
+                        this.createMenuItemReduxAction('column-filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter.ColumnId)),
                         this.createMenuItemClickFunction(existingColumnFilter.IsSuspended
                             ? 'column-filter-unsuspend'
                             : 'column-filter-suspend', existingColumnFilter.IsSuspended ? 'Unsuspend Filter' : 'Suspend Filter', existingColumnFilter.IsSuspended ? 'resume' : 'pause', existingColumnFilter.IsSuspended
@@ -145,8 +145,8 @@ export class ColumnFilterModule extends AdaptableModuleBase {
             getCompactUnSuspendAction: (columnFilter) => LayoutRedux.LayoutColumnFilterUnSuspend(columnFilter),
             getSuspendAllAction: () => LayoutRedux.LayoutColumnFilterSuspendAll(),
             getUnSuspendAllAction: () => LayoutRedux.LayoutColumnFilterUnSuspendAll(),
-            getDeleteAction: LayoutRedux.LayoutColumnFilterClear,
-            getCompactDeleteAction: LayoutRedux.LayoutColumnFilterClear,
+            getDeleteAction: (columnFilter) => LayoutRedux.LayoutColumnFilterClear(columnFilter.ColumnId),
+            getCompactDeleteAction: (columnFilter) => LayoutRedux.LayoutColumnFilterClear(columnFilter.ColumnId),
             getDeleteAllAction: LayoutRedux.LayoutColumnFilterClearAll,
             emptyView: `
         There are no Column Filters applied. \n

package/src/Strategy/StyledColumnModule.js

@@ -35,12 +35,12 @@ export class StyledColumnModule extends AdaptableModuleBase {
                     // because if just one then it was created in AG Grid and we dont want to edit it
                 }
                 else {
-                    const hasSparklineStyle = styledColumn != null && styledColumn.SparkLineStyle != null;
+                    const hasSparklineStyle = styledColumn != null && styledColumn.SparklineStyle != null;
                     if (!hasSparklineStyle) {
                         styledColumn = {
                             ...ObjectFactory.CreateEmptyStyledColumn(),
                             ColumnId: column.columnId,
-                            SparkLineStyle: {},
+                            SparklineStyle: {},
                         };
                     }
                     let label = hasSparklineStyle ? 'Edit ' : 'Create ';
@@ -48,7 +48,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
                         ? 'styled-column-sparkline-edit'
                         : 'styled-column-sparkline-add';
                     let popupParam = {
-                        action: sparklineColumnExists ? 'Edit' : 'New',
+                        action: hasSparklineStyle ? 'Edit' : 'New',
                         source: 'ColumnMenu',
                         value: styledColumn,
                         config: {
@@ -161,7 +161,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
         else if (styledColumn.PercentBarStyle) {
             return 'percent';
         }
-        else if (styledColumn.SparkLineStyle) {
+        else if (styledColumn.SparklineStyle) {
             return 'spark-line';
         }
         else if (styledColumn.BadgeStyle) {
@@ -248,7 +248,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
         else if (styledColumn.PercentBarStyle) {
             type = 'Percent Bar';
         }
-        else if (styledColumn.SparkLineStyle) {
+        else if (styledColumn.SparklineStyle) {
             type = 'Spark Line';
         }
         else if (styledColumn.BadgeStyle) {
@@ -264,7 +264,7 @@ export class StyledColumnModule extends AdaptableModuleBase {
         else if (styledColumn.PercentBarStyle) {
             type = 'styled-column-percent-bar-edit';
         }
-        else if (styledColumn.SparkLineStyle) {
+        else if (styledColumn.SparklineStyle) {
             type = 'styled-column-sparkline-edit';
         }
         else if (styledColumn.BadgeStyle) {

package/src/Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions.js

@@ -2,7 +2,7 @@ import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluation
 import { SumArray } from '../Extensions/ArrayExtensions';
 import { getTypedKeys } from '../Extensions/TypeExtensions';
 import { extractColumnParameter, extractColumnParameters, extractParameter, getNumericValue, handleColumnFunction, validateColumnType, } from './expressionFunctionUtils';
-import isAfter from 'date-fns/isAfter';
+import { isAfter } from 'date-fns';
 import { parseDateValue } from '../Helpers/DateHelper';
 export const aggregatedExpressionFunctions = [
     'SUM',

package/src/Utilities/ExpressionFunctions/booleanExpressionFunctions.js

@@ -1,6 +1,6 @@
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isEqual from 'date-fns/isEqual';
+import { isAfter } from 'date-fns';
+import { isBefore } from 'date-fns';
+import { isEqual } from 'date-fns';
 import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluationError';
 import { getStringValue, getStringValues } from './expressionFunctionUtils';
 import { getTypedKeys } from '../Extensions/TypeExtensions';

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -1,17 +1,17 @@
 import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluationError';
-import parseISO from 'date-fns/parseISO';
-import startOfDay from 'date-fns/startOfDay';
-import startOfWeek from 'date-fns/startOfWeek';
-import startOfMonth from 'date-fns/startOfMonth';
-import startOfYear from 'date-fns/startOfYear';
-import addDays from 'date-fns/addDays';
-import addWeeks from 'date-fns/addWeeks';
-import addMonths from 'date-fns/addMonths';
-import addYears from 'date-fns/addYears';
-import differenceInDays from 'date-fns/differenceInDays';
-import differenceInWeeks from 'date-fns/differenceInWeeks';
-import differenceInMonths from 'date-fns/differenceInMonths';
-import differenceInYears from 'date-fns/differenceInYears';
+import { parseISO } from 'date-fns';
+import { startOfDay } from 'date-fns';
+import { startOfWeek } from 'date-fns';
+import { startOfMonth } from 'date-fns';
+import { startOfYear } from 'date-fns';
+import { addDays } from 'date-fns';
+import { addWeeks } from 'date-fns';
+import { addMonths } from 'date-fns';
+import { addYears } from 'date-fns';
+import { differenceInDays } from 'date-fns';
+import { differenceInWeeks } from 'date-fns';
+import { differenceInMonths } from 'date-fns';
+import { differenceInYears } from 'date-fns';
 import { evaluateExpressionNode, getNumericValue, isTextSearchCaseInsensitive, } from './expressionFunctionUtils';
 import { normalizeDateParams } from './dateUtils';
 import StringExtensions from '../Extensions/StringExtensions';

package/src/Utilities/Helpers/AdaptableHelper.d.ts

@@ -4,6 +4,7 @@ import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
 export declare function initPredefinedConfigWithUuids(predefinedConfig: PredefinedConfig): PredefinedConfig;
 export declare function getAccessLevelForObject(adaptableObject: AdaptableObject, moduleAccessLevel: AccessLevel): AccessLevel;
 export declare function addAdaptableObjectPrimitives<T extends AdaptableObject>(adaptableObject: T): T;
+export declare function removeAdaptableObjectPrimitivesInline(target: any): any;
 export declare function removeAdaptableObjectPrimitives<T extends AdaptableObject>(adaptableObject: T): T;
 export declare function isAdaptableObject(object: unknown): object is AdaptableObject;
 export declare const AdaptableHelper: {
@@ -11,6 +12,7 @@ export declare const AdaptableHelper: {
     getAccessLevelForObject: typeof getAccessLevelForObject;
     addAdaptableObjectPrimitives: typeof addAdaptableObjectPrimitives;
     removeAdaptableObjectPrimitives: typeof removeAdaptableObjectPrimitives;
+    removeAdaptableObjectPrimitivesInline: typeof removeAdaptableObjectPrimitivesInline;
     isAdaptableObject: typeof isAdaptableObject;
 };
 export default AdaptableHelper;

package/src/Utilities/Helpers/AdaptableHelper.js

@@ -43,6 +43,15 @@ export function addAdaptableObjectPrimitives(adaptableObject) {
     adaptableObject.AdaptableVersion = GET_CURRENT_VERSION();
     return adaptableObject;
 }
+export function removeAdaptableObjectPrimitivesInline(target) {
+    if (!target || typeof target !== 'object') {
+        return target;
+    }
+    delete target.Source;
+    delete target.Uuid;
+    delete target.AdaptableVersion;
+    return target;
+}
 export function removeAdaptableObjectPrimitives(adaptableObject) {
     const clonedObject = structuredClone(adaptableObject);
     const sanitiseObject = (object) => {
@@ -70,6 +79,7 @@ export const AdaptableHelper = {
     getAccessLevelForObject,
     addAdaptableObjectPrimitives,
     removeAdaptableObjectPrimitives,
+    removeAdaptableObjectPrimitivesInline,
     isAdaptableObject,
 };
 export default AdaptableHelper;

package/src/Utilities/Helpers/DateHelper.js

@@ -1,5 +1,4 @@
-import parseISO from 'date-fns/parseISO';
-import parse from 'date-fns/parse';
+import { parseISO, parse } from 'date-fns';
 import { DateFormatter } from './FormatHelper';
 import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
 export const isValidDate = (date) => {

package/src/Utilities/Helpers/FormatHelper.js

@@ -1,9 +1,9 @@
 // TODO inspect why the following is erroring on angular build
-// import dateFnsFormat from 'date-fns/format';
-import dateFnsFormat from 'date-fns/format';
+import { format as dateFnsFormat } from 'date-fns';
 import { sentenceCase } from 'sentence-case';
 import { DEFAULT_DATE_FORMAT_PATTERN } from '../Constants/GeneralConstants';
 import Helper from './Helper';
+import StringExtensions from '../Extensions/StringExtensions';
 export function NumberFormatter(input, options = {}, rowNode, column, api) {
     let preparedInput;
     if (options.Content) {
@@ -111,20 +111,33 @@ export function DateFormatter(input, options, strictFormatting = false) {
     }
 }
 export function StringFormatter(input, options = {}, rowNode, column, api) {
+    let normalisedTextInput = input;
+    if (input != undefined && typeof input !== 'string') {
+        const warningMessage = column
+            ? `StringFormatter: input '${input}' from column ${column.columnId} (${column.dataType}) is not a string, but a ${typeof input}`
+            : `StringFormatter: input '${input}' is not a string, received ${typeof input}`;
+        if (api) {
+            api.logWarn(warningMessage);
+        }
+        else {
+            console.warn(warningMessage);
+        }
+        normalisedTextInput = `${input}`;
+    }
     let preparedInput;
     if (options.Content) {
         const context = {
             column,
             rowNode,
-            input,
+            input: normalisedTextInput,
             api,
         };
         preparedInput = formatPlaceholder(options.Content, context);
     }
     else {
-        preparedInput = input;
+        preparedInput = normalisedTextInput;
     }
-    if (preparedInput == null || preparedInput == undefined) {
+    if (StringExtensions.IsNullOrEmptyOrWhiteSpace(preparedInput)) {
         return undefined;
     }
     if (options.Empty) {

package/src/Utilities/ObjectFactory.js

@@ -162,6 +162,7 @@ export function CreateEmptyReportSchedule() {
         Schedule: CreateEmptySchedule(),
         ReportName: EMPTY_STRING,
         ReportFormat: EMPTY_STRING,
+        ExportDestination: 'Download',
     };
 }
 export function CreateEmptyIPushPullReport() {

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

@@ -1,7 +1,7 @@
 import { IAdaptableService } from './Interface/IAdaptableService';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { Fdc3Options } from '../../AdaptableOptions/Fdc3Options';
-import { AppIdentifier, DesktopAgent, IntentResolution } from '@finos/fdc3';
+import { AppIdentifier, Channel, DesktopAgent, IntentResolution } from '@finos/fdc3';
 import { Context } from '@finos/fdc3/dist/context/ContextTypes';
 export declare class Fdc3Service implements IAdaptableService {
     private adaptableApi;
@@ -15,7 +15,7 @@ export declare class Fdc3Service implements IAdaptableService {
     destroy(): void;
     raiseIntent(intent: string, context: Context, app?: AppIdentifier): Promise<IntentResolution>;
     raiseIntentForContext(context: Context, app?: AppIdentifier): Promise<IntentResolution>;
-    broadcast(context: Context): Promise<void>;
+    broadcast(context: Context, channel?: Channel): Promise<void>;
     private logFdc3Event;
     private logFdc3Error;
     private getFdc3Api;

package/src/Utilities/Services/Fdc3Service.js

@@ -131,7 +131,7 @@ export class Fdc3Service {
             this.logFdc3Error(error);
         }
     }
-    broadcast(context) {
+    broadcast(context, channel) {
         if (!this.getDesktopAgent()) {
             return;
         }
@@ -144,7 +144,12 @@ export class Fdc3Service {
                 context,
             };
             this.adaptableApi.eventApi.emit('Fdc3Message', payload);
-            return this.getDesktopAgent().broadcast(context);
+            if (channel) {
+                return channel.broadcast(context);
+            }
+            else {
+                return this.getDesktopAgent().broadcast(context);
+            }
         }
         catch (error) {
             this.logFdc3Error(error);

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

@@ -5,10 +5,10 @@ export declare class ThemeService implements IThemeService {
     private unsubscribe;
     private styleSheetObject;
     constructor(api: AdaptableApi);
+    destroy(): void;
     subscribe(): void;
     onThemeChanged: () => void;
     applyNewThemeVariables(theme: AdaptableTheme): void;
-    destroy(): void;
     showMissingThemeFiles(theme: AdaptableTheme): void;
     getDOMPrefferedColorScheme(): 'dark' | 'light';
     mapOsTheme(theme: AdaptableTheme | string): AdaptableTheme;

package/src/Utilities/Services/ThemeService.js

@@ -20,6 +20,11 @@ export class ThemeService {
             ];
         }
     }
+    destroy() {
+        this.api = null;
+        this.unsubscribe();
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
+    }
     subscribe() {
         const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
         const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
@@ -44,11 +49,6 @@ export class ThemeService {
         str += '}';
         this.styleSheetObject.replaceSync(str);
     }
-    destroy() {
-        this.api = null;
-        this.unsubscribe();
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
-    }
     showMissingThemeFiles(theme) {
         // run time defined theme
         // because it may be an empty theme

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

@@ -42,6 +42,47 @@ export const ConfigurationWizard = (props) => {
                 delete newColumn.caption;
                 return newColumn;
             });
+            const columnDefs = adaptableConfig.gridOptions.columnDefs;
+            // handle the layout creation
+            let Layouts = newAdaptableOptions.predefinedConfig?.Layout?.Layouts || [];
+            const NewLayout = {
+                TableColumns: columnDefs.map((col) => col.colId ?? col.field),
+                Name: 'Default Layout',
+            };
+            let currentLayoutName = NewLayout.Name;
+            let found = false;
+            if (!Layouts.length) {
+                // no layouts, make this the only one
+                Layouts = [NewLayout];
+            }
+            else {
+                Layouts = Layouts.map((layout) => {
+                    if (found) {
+                        return layout;
+                    }
+                    if (layout.TableColumns?.length === 0) {
+                        // when finding the first empty layout
+                        // set its column to be those of the new layout
+                        found = true;
+                        // and grab the name so we can put it in the Layout.CurrentLayout state
+                        currentLayoutName = layout.Name;
+                        layout = { ...layout };
+                        layout.TableColumns = NewLayout.TableColumns;
+                    }
+                    return layout;
+                });
+                if (!found) {
+                    Layouts.push(NewLayout);
+                }
+            }
+            newAdaptableOptions.predefinedConfig = {
+                ...newAdaptableOptions.predefinedConfig,
+                Layout: {
+                    ...newAdaptableOptions.predefinedConfig.Layout,
+                    Layouts: Layouts,
+                    CurrentLayout: currentLayoutName,
+                },
+            };
             newAdaptableOptions.primaryKey = columnsHandle.current.getPrimaryKey();
         }
         const newAdaptableConfig = {

package/src/View/ColumnInfo/ColumnInfo.js

@@ -205,7 +205,6 @@ const ModuleView = (props) => {
             }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };
 export const ColumnInfo = (props) => {
-    //  const state = useSelector((state: AdaptableState) => state);
     const adaptable = useAdaptable();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);

package/src/View/Comments/CommentsEditor.js

@@ -8,7 +8,7 @@ import * as CommentsRedux from '../../Redux/ActionsReducers/CommentsRedux';
 import { CommentsAndNotesSelector } from '../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
-import dateFnsFormat from 'date-fns/format';
+import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 // Edit Mode
 // [author] [edit, delete]
 // [text-editor] * this is different
@@ -48,6 +48,9 @@ export const CommentsEditor = (props) => {
     if (!commentThread) {
         return null;
     }
+    const formatDate = (date, format) => {
+        return FormatHelper.DateFormatter(date, { Pattern: format });
+    };
     return (React.createElement(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
@@ -75,7 +78,7 @@ export const CommentsEditor = (props) => {
                     React.createElement(Flex, { mb: 2, alignItems: "center" },
                         React.createElement(Box, null,
                             React.createElement(Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, dateFnsFormat(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
+                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
                         React.createElement(Box, { flex: 1 }),
                         React.createElement(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
                         React.createElement(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {

package/src/View/Comments/CommentsPopup.js

@@ -3,10 +3,10 @@ import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
 import { Box, Flex } from 'rebass';
-import dateFnsFormat from 'date-fns/format';
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
+import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -16,6 +16,9 @@ const tableDOMProps = {
 const CellComments = (props) => {
     const adaptable = useAdaptable();
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
+    const formatDate = (date, format) => {
+        return FormatHelper.DateFormatter(date, { Pattern: format });
+    };
     const columnsMap = React.useMemo(() => {
         const columns = {
             author: {
@@ -27,7 +30,7 @@ const CellComments = (props) => {
                 field: 'Timestamp',
                 maxWidth: 150,
                 valueGetter: (params) => {
-                    return dateFnsFormat(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
+                    return formatDate(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
                 },
             },
             text: {

package/src/View/Components/ColumnFilter/ColumnFilter.d.ts

@@ -6,7 +6,7 @@ interface ColumnFilterComponentProps {
     disabled?: boolean;
     predicate?: QlPredicate;
     predicateDefs: QlPredicateDef[];
-    onPredicateChange: (predicate: QlPredicate) => void;
+    onPredicateChange: (predicate: QlPredicate | null) => void;
     wrapperProps?: BoxProps;
 }
 export declare const ColumnFilterComponent: React.FunctionComponent<ColumnFilterComponentProps>;

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

@@ -69,7 +69,9 @@ export const ColumnFilterComponent = (props) => {
         setPredicateNotYetApplied(undefined);
     };
     const onPredicateChange = (predicate) => {
-        if (autoApplyColumnFilter) {
+        // even if autoApplyColumnFilter is false, when we explicitly clear the filter
+        // we want to apply the filter immediately
+        if (autoApplyColumnFilter || !predicate) {
             props.onPredicateChange(predicate);
         }
         else {
@@ -112,7 +114,7 @@ export const ColumnFilterComponent = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Flex, { m: 2 },
             React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
-            React.createElement(SimpleButton, { ml: 2, onClick: () => onPredicateChange({ operator: 'AND', args: [] }) }, "Clear All")),
+            React.createElement(SimpleButton, { ml: 2, onClick: () => onPredicateChange(null) }, "Clear All")),
         React.createElement(Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
             React.createElement(Box, { flex: 1, style: { overflow: 'auto' } },
                 currentPredicate.args.map((predicate, index) => {

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -78,7 +78,7 @@ export const FloatingFilter = (props) => {
                 } }))),
         isInlineEditable && (React.createElement(SimpleButton, { px: 0, onClick: () => {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
-            }, icon: "expand", variant: "text" })),
+            }, "data-name": "expand-filter", icon: "expand", variant: "text" })),
         (isMultiple ||
             !isPredicateEmpty(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton, { "data-name": "clear-filter", p: 0, variant: "text", onClick: handleClear, icon: "close" }))));
 };

package/src/View/Components/ColumnFilter/LayoutColumnFilter.js

@@ -17,7 +17,7 @@ export const LayoutColumnFilter = (props) => {
             ...props.columnFilter,
             ColumnId: props.columnFilter.ColumnId,
             Predicates: newAdaptablePredicates,
-            PredicatesLogic: newPredicate.operator,
+            PredicatesOperator: newPredicate.operator,
         };
         props.onColumnFilterChange(newFilter);
     };

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.d.ts

@@ -6,7 +6,7 @@ export declare const useAdaptableFilterWrapper: (columnId: string, handleOnChang
     qlPredicateDefs: import("@adaptabletools/adaptable/src/parser/src/predicate/types").QlPredicateDef[];
     columnFilter: ColumnFilter;
     handleClear: () => LayoutRedux.LayoutColumnFilterClearAction;
-    handlePredicateChange: (newPredicate: QlPredicate) => void;
+    handlePredicateChange: (newPredicate: QlPredicate | null) => void;
     handleOnChange: (adaptablePredicate: AdaptablePredicate[], logic?: QlLogicalOperator) => void;
     column: import("../../../types").AdaptableColumn<any>;
 };

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.js

@@ -31,7 +31,7 @@ export const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
             ...columnFilter,
             ColumnId: columnId,
             Predicates: adaptablePredicate,
-            PredicatesLogic: logic,
+            PredicatesOperator: logic,
         };
         if (handleOnChangeOverride) {
             handleOnChangeOverride(newFilter);
@@ -42,11 +42,15 @@ export const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
                 : LayoutRedux.LayoutColumnFilterAdd(newFilter));
         }
     };
-    const handleClear = () => dispatch(LayoutRedux.LayoutColumnFilterClear(columnFilter));
+    const handleClear = React.useCallback(() => dispatch(LayoutRedux.LayoutColumnFilterClear(columnId)), [columnId]);
     /**
      * Converts a QlPredicate to an AdaptablePredicate and dispatches the change.
      */
     const handlePredicateChange = React.useCallback((newPredicate) => {
+        if (!newPredicate) {
+            handleClear();
+            return;
+        }
         const newAdaptablePredicates = newPredicate.args.map(mapQlPredicateToAdaptablePredicate);
         handleOnChange(newAdaptablePredicates, newPredicate.operator);
     }, [columnId]);

package/src/View/Components/ColumnFilter/utils.js

@@ -67,7 +67,7 @@ export const qlPredicateToString = (qlPredicate, predicateDefs) => {
     return str;
 };
 export const isPredicateEmpty = (predicate, predicateDef) => {
-    if (!predicateDef.inputs || predicateDef.inputs.length === 0) {
+    if (!predicateDef?.inputs || predicateDef.inputs.length === 0) {
         return false;
     }
     return (!predicate ||
@@ -76,7 +76,7 @@ export const isPredicateEmpty = (predicate, predicateDef) => {
         predicate.args.every((arg) => arg == undefined));
 };
 export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, columnFilterOptions) => {
-    const combinator = columnFilter?.PredicatesLogic ?? 'AND';
+    const combinator = columnFilter?.PredicatesOperator ?? 'AND';
     const qlPredicate = {
         operator: combinator,
         args: (columnFilter?.Predicates ?? []).map?.(mapAdaptablePredicateToQlPredicate),

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import isDatesEqual from 'date-fns/isEqual';
+import { isEqual } from 'date-fns';
 import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 import join from '../../../components/utils/join';
 import { Select } from '../../../components/Select';
@@ -13,7 +13,7 @@ export const ColumnValuesSelect = (props) => {
         let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = selectedColumnValues.some((dateStr) => isDatesEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
+            isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
         }
         const columnLabel = distinctValue.label;
         if (StringExtensions.IsNullOrEmpty(columnLabel)) {
@@ -24,7 +24,7 @@ export const ColumnValuesSelect = (props) => {
         }
         return true;
     });
-    const component = (React.createElement(Select, { isMulti: true, searchable: true, closeMenuOnSelect: false, size: "small", menuStyle: {
+    const component = (React.createElement(Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, size: "small", menuStyle: {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 260px))`,
         }, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
     return (React.createElement("div", { className: join(baseClassName, props.isLoading && `${baseClassName}--loading`), onKeyDownCapture: (e) => {

package/src/View/Dashboard/CustomToolbar.js

@@ -87,8 +87,8 @@ export const CustomToolbarCmp = (props) => {
 };
 export const CustomToolbarWrapper = (props) => {
     const { api } = useAdaptable();
-    return (React.createElement(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'Configure') !=
-            undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'Close') != undefined, onConfigure: () => {
+    return (React.createElement(PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'configure') !=
+            undefined, showCloseActionButton: props.customToolbar.toolbarActions?.find((b) => b == 'close') != undefined, onConfigure: () => {
             const customToolbarConfiguredInfo = {
                 ...api.internalApi.buildBaseContext(),
                 customToolbar: props.customToolbar,

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -54,7 +54,10 @@ class DataChangeHistoryPopupComponent extends React.Component {
                 this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeUndone);
             }
         };
-        const currentAgGridTheme = this.props.api.themeApi.getAgGridCurrentThemeName();
+        const agGridThemeMode = this.props.api.internalApi
+            .getAdaptableInstance()
+            .agGridThemeAdapter.getAgGridThemeMode();
+        const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
         return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
                 React.createElement(Flex, { style: {