@adaptabletools/adaptable 20.0.0-canary.9 → 20.0.0

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -80,9 +80,11 @@ export const AlertNotificationWizardSection = (props) => {
                                 api.alertApi.internalApi.getDefaultAlertNotificationForm();
                         }
                         // make sure we have at least one button
-                        if (typeof newAlertDefinition.AlertForm === 'object' && (!newAlertDefinition.AlertForm?.Buttons || newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
+                        if (typeof newAlertDefinition.AlertForm === 'object' &&
+                            (!newAlertDefinition.AlertForm?.Buttons ||
+                                newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
                             newAlertDefinition.AlertForm.Buttons = [
-                                api.alertApi.internalApi.getDefaultButton()
+                                api.alertApi.internalApi.getDefaultButton(),
                             ];
                         }
                         props.onChange(newAlertDefinition);

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 export declare const getRuleStepDescription: (alertType: AlertType) => "" | React.JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => React.JSX.Element;

package/src/View/Alert/Wizard/AlertScopeWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 type AlertScopeWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;

package/src/View/Alert/Wizard/AlertSelectQueryWizard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 export interface AlertSelectQueryWizardProps extends AdaptableWizardStepProps<AlertDefinition> {
 }
 export interface AlertSelectQueryWizardState {

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { FlashingCellDefinition } from '../../../../types';
 export declare const renderScopeSummary: (data: AlertDefinition | FlashingCellDefinition) => React.JSX.Element;

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StatusColour } from '../../PredefinedConfig/Common/Enums';
+import { StatusColour } from '../../AdaptableState/Common/Enums';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { Flex } from 'rebass';
 import join from '../../components/utils/join';

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ModuleSummaryProps } from '../Components/SharedProps/ModuleSummaryProps';
 import { EditableConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
-import { CalculatedColumn } from '../../PredefinedConfig/CalculatedColumnState';
+import { CalculatedColumn } from '../../AdaptableState/CalculatedColumnState';
 import type { Action } from 'redux';
 export interface CalculatedColumnSummaryProps extends ModuleSummaryProps<CalculatedColumnSummaryComponent> {
     CalculatedColumns: CalculatedColumn[];

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
+import { CalculatedColumn } from '../../../AdaptableState/CalculatedColumnState';
 export type CalculatedColumnDefinitionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
+import { CalculatedColumn } from '../../../AdaptableState/CalculatedColumnState';
 export type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;

package/src/View/CellSummary/CellSummaryDetails.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 interface CellSummaryDetailsProps extends React.ClassAttributes<CellSummaryDetails> {
     CellSummary: CellSummmaryInfo;
 }

package/src/View/CellSummary/CellSummaryPopover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 export interface CellSummaryPopoverProps {
     CellSummary: CellSummmaryInfo;
 }

package/src/View/CellSummary/CellSummaryPopup.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { EditableConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 interface CellSummaryPopupProps extends ModuleViewPopupProps<CellSummaryPopupComponent> {
     CellSummary: CellSummmaryInfo;
     onCreateCellSummary: () => InternalRedux.CreateCellSummaryInfoAction;

package/src/View/CellSummary/CellSummaryViewPanel.d.ts

@@ -1,9 +1,9 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import * as React from 'react';
-import { SummaryOperation } from '../../PredefinedConfig/Common/Enums';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { SummaryOperation } from '../../AdaptableState/Common/Enums';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
-import { SelectedCellInfo } from '../../PredefinedConfig/Selection/SelectedCellInfo';
+import { SelectedCellInfo } from '../../AdaptableState/Selection/SelectedCellInfo';
 export interface CellSummaryViewPanelComponentProps extends ViewPanelProps {
     SelectedCellInfo: SelectedCellInfo;
     CellSummaryOperation: SummaryOperation | string;

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
-import { SummaryOperation } from '../../PredefinedConfig/Common/Enums';
+import { SummaryOperation } from '../../AdaptableState/Common/Enums';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { CellSummaryPopover } from './CellSummaryPopover';
 import { Flex } from 'rebass';

package/src/View/Charting/ChartingStatusBarPopover.js

@@ -5,8 +5,7 @@ import { useChartingElements } from './useChartingElements';
 import { Box, Flex } from 'rebass';
 export const ChartingStatusBarPopover = (props) => {
     const adaptable = useAdaptable();
-    const accessLevel = adaptable.api.entitlementApi
-        .getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
+    const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
     const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = useChartingElements({
         elementType: 'Statusbar',
         accessLevel: accessLevel,

package/src/View/Charting/ChartingWizard/ChartingWizard.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { ExternalChartDefinition } from '../../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../../AdaptableState/ChartingState';
 import { ChartDefinition } from '../../../types';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 export interface AgChargingWizardProps extends AdaptableOnePageWizardProps<ChartDefinition | ExternalChartDefinition> {

package/src/View/Charting/ChartingWizard/ChartingWizard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isAgChartDefinition, } from '../../../PredefinedConfig/ChartingState';
+import { isAgChartDefinition, } from '../../../AdaptableState/ChartingState';
 import { AgChargingWizard } from './AgChargingWizard';
 import { ExternalChartingWizard } from './ExternalChartingWizard';
 export const ChartingWizard = (props) => {

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExternalChartDefinition } from '../../../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
 import { AdaptableOnePageWizardProps } from '../../../Wizard/Interface/IAdaptableWizard';
 export interface ExternalChartingWizardProps extends AdaptableOnePageWizardProps<ExternalChartDefinition> {
 }

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExternalChartDefinition } from '../../../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
 import { AdaptableApi } from '../../../../types';
 export declare const isSettingsValid: (chartDefinition: ExternalChartDefinition, api: AdaptableApi) => true | string;
 export interface SettingsSectionProps {

package/src/View/Charting/DeleteChartButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessLevel, ChartDefinition } from '../../types';
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 export interface ButtonDeleteProps {
     chart: ChartDefinition | ExternalChartDefinition;
     accessLevel: AccessLevel;

package/src/View/Charting/DeleteChartButton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
-import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { isAgChartDefinition } from '../../AdaptableState/ChartingState';
 export const DeleteChartButton = (props) => {
     return (React.createElement(ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: isAgChartDefinition(props.chart)
             ? ChartingRedux.ChartingDeleteChart(props.chart)

package/src/View/Charting/EditChartButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessLevel, ChartDefinition } from '../../types';
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 export interface EditChartButtonProps {
     chart: ChartDefinition | ExternalChartDefinition;
     accessLevel: AccessLevel;

package/src/View/Charting/ShowChartButton.js

@@ -3,7 +3,7 @@ import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import DropdownButton from '../../components/DropdownButton';
 import { AG_GRID_CHART_WINDOW } from '../../Utilities/Constants/GeneralConstants';
-import { isAgChartDefinition, isExternalChartDefinition, } from '../../PredefinedConfig/ChartingState';
+import { isAgChartDefinition, isExternalChartDefinition, } from '../../AdaptableState/ChartingState';
 import { useAgChartState } from './useAgChartState';
 import { useExternalChartState } from './useExternalChartState';
 const BaseShowChartButton = (props) => {

package/src/View/Charting/useChartingElements.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 import { AccessLevel, ChartDefinition } from '../../types';
 export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
     elementType: string;

package/src/View/Charting/useChartingElements.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { Select } from '../../components/Select';
 import SimpleButton from '../../components/SimpleButton';
-import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { isAgChartDefinition } from '../../AdaptableState/ChartingState';
 import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { useAdaptable } from '../AdaptableContext';

package/src/View/Charting/useExternalChartState.d.ts

@@ -1,4 +1,4 @@
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 import { ChartContainer } from '../../types';
 export declare const useExternalChartState: (chartDefinition?: ExternalChartDefinition) => {
     showChart: (container?: ChartContainer) => void;

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);
@@ -215,7 +214,7 @@ export const ColumnInfo = (props) => {
                 React.createElement(FormRow, { label: "Select Column" },
                     React.createElement(ColumnSelector, { filterColumn: (column) => !column.alwaysHidden, value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
         selectedColumnId && (React.createElement(Tabs, { mb: 3 },
-            React.createElement(Tabs.Tab, null, "Config"),
+            React.createElement(Tabs.Tab, null, "State"),
             React.createElement(Tabs.Tab, null, "Column Summary"),
             React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
                 return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: 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/AdaptableObjectList/AdaptableObjectList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Action } from 'redux';
-import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
+import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
 import { AdaptableObjectItemView, AdaptableObjectView, IModule } from '../../../Strategy/Interface/IModule';
 import { AccessLevel, AdaptableSharedEntityConfig } from '../../../types';
 export declare const AdaptableObjectListItemView: React.FunctionComponent<{

package/src/View/Components/Buttons/ButtonBase/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonProps as BtnProps } from 'rebass';
-import { AccessLevel } from '../../../../PredefinedConfig/Common/Entitlement';
+import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
 export interface ButtonBaseProps extends BtnProps {
     overrideDisableButton?: boolean;
     transformGlyph?: boolean;

package/src/View/Components/Buttons/ButtonShare.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
-import { AdaptableSharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
+import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
 interface ButtonShareProps extends SimpleButtonProps {
     onShare: (config: AdaptableSharedEntityConfig) => void;
     Header: string;

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as Redux from 'redux';
-import { AccessLevel } from '../../../PredefinedConfig/Common/Entitlement';
-import { AdaptableSharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
-import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
-import { SuspendableObject } from '../../../PredefinedConfig/Common/SuspendableObject';
+import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
+import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
+import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
+import { SuspendableObject } from '../../../AdaptableState/Common/SuspendableObject';
 export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
     editClick?: () => void;
     cloneClick?: () => void;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../../PredefinedConfig/Common/AdaptableObject';
-import { AccessLevel } from '../../../../PredefinedConfig/Common/Entitlement';
-import { SuspendableObject } from '../../../../PredefinedConfig/Common/SuspendableObject';
+import { AdaptableObject } from '../../../../AdaptableState/Common/AdaptableObject';
+import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
+import { SuspendableObject } from '../../../../AdaptableState/Common/SuspendableObject';
 interface EntityListSuspendButtonProps {
     onSuspend: (adaptableObject: AdaptableObject) => void;
     onUnSuspend: (adaptableObject: AdaptableObject) => void;

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

@@ -4,6 +4,7 @@ export interface AdaptableColumnFilterProps {
     columnId: string;
     padding?: BoxProps['p'];
     wrapperProps?: BoxProps;
+    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

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

@@ -7,5 +7,8 @@ import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
  */
 export const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId);
-    return (React.createElement(ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange }));
+    return (React.createElement(ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
+            handlePredicateChange(predicate);
+            props.onChange?.();
+        }, [handlePredicateChange, props.onChange]) }));
 };

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
 export interface AdaptableColumnFilterProps extends ColumnFilterProps {
+    onClear?: () => void;
+    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

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

@@ -9,6 +9,14 @@ import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
 export const AdaptableFloatingFilter = (props) => {
     const adaptable = useAdaptable();
     const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId);
+    const onClear = React.useCallback(() => {
+        handleClear();
+        props.onClear?.();
+    }, [handleClear, props.onClear]);
+    const onPredicateChange = React.useCallback((newPredicate) => {
+        handlePredicateChange(newPredicate);
+        props.onChange?.();
+    }, [handlePredicateChange, props.onChange]);
     if (!column) {
         return null;
     }
@@ -24,8 +32,7 @@ export const AdaptableFloatingFilter = (props) => {
                         Inputs: [],
                     },
                 ]);
+                props.onChange?.();
             }
-        }, onClear: handleClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: (newPredicate) => {
-            handlePredicateChange(newPredicate);
-        } }));
+        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange }));
 };

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

@@ -31,7 +31,7 @@ export const FloatingFilter = (props) => {
         label = '';
     }
     const showQuickFilterDropdown = adaptable.api.filterApi.columnFilterApi.internalApi.showQuickFilterDropdown(props.columnId);
-    const handleClear = () => props.onClear();
+    const handleClear = () => props.onClear?.();
     const showEvent = 'click';
     const hideEvent = 'blur';
     let filterDropdown = null;
@@ -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/components/ColumnFilterInput.d.ts

@@ -16,7 +16,7 @@ type ColumnFilterEditorChangeProps = {
     value: string;
     onChange: (value: string) => void;
 };
-export declare const ColumnFilterInput: ({ type, value, onChange: onChangeProp, onClear, disabled, onKeyDown, filterType, usePrimitiveInputs, columnId, }: {
+export declare const ColumnFilterInput: ({ type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs, columnId, }: {
     disabled: boolean;
     onClear: () => void;
     onKeyDown?: (event: React.KeyboardEventHandler<HTMLInputElement>) => void;

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

@@ -9,7 +9,7 @@ import { useCallback } from 'react';
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? debounce(fn, time) : fn;
 }
-export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, }) => {
+export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, }) => {
     const [liveValue, setLiveValue] = React.useState(value);
     const [hasFocus, setHasFocus] = React.useState(false);
     const onFocus = useCallback(() => {
@@ -39,6 +39,12 @@ export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear
             onChangeProp(value);
         }, debounceTime);
     }, [onChangeProp, debounceTime]);
+    // the onClear needs to have the same debounce time as the onChange
+    const onClear = React.useMemo(() => {
+        return debounceOrImmediate(() => {
+            onClearProp();
+        }, debounceTime);
+    }, [onClearProp, debounceTime]);
     if (type === 'boolean') {
         return (React.createElement(CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
                 ? true

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

@@ -63,11 +63,13 @@ export const qlPredicateToString = (qlPredicate, predicateDefs) => {
     if (!predicateDef.hasOwnProperty('toString')) {
         return predicateDef.label;
     }
-    const str = predicateDef.toString({ inputs: qlPredicate.args.filter((arg) => arg != undefined) });
+    const str = predicateDef.toString({
+        inputs: (qlPredicate.args || []).filter((arg) => arg != undefined),
+    });
     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 +78,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/EntityRulesEditor/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FlexProps } from 'rebass';
 import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, ColumnScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
-import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
+import { AdaptableQuery } from '../../../AdaptableState/Common/AdaptableQuery';
 export type RuleType = XOR<{
     Predicates: AdaptableColumnPredicate[];
 }, AdaptableQuery>;