@adaptabletools/adaptable 13.0.0-canary.9 → 13.0.1

package/src/Utilities/ObjectFactory.d.ts

@@ -28,6 +28,7 @@ import { ColumnFilter, CustomDisplayFormatterContext, FlashingCellDefinition, Gr
 import { RowNode } from '@ag-grid-community/core';
 import { AdaptableApi } from '../../types';
 import { ToastOptions } from '../components/Toastify';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
 export declare function CreateEmptyCustomSort(): CustomSort;
 export declare function CreateEmptyCalculatedColumn(): CalculatedColumn;
 export declare function CreateEmptyNamedQuery(expression?: string): NamedQuery;
@@ -39,7 +40,7 @@ export declare function CreateEmptyAlertDefinition(): AlertDefinition;
 export declare function CreateEmptyFlashingCellDefinition(): FlashingCellDefinition;
 export declare function CreateInternalAlertDefinitionForMessages(messageType: AdaptableMessageType, alertProperties?: AlertProperties): AlertDefinition;
 export declare function CreateEmptyReport(): Report;
-export declare function CreateCustomReport(reportName: string): Report;
+export declare function CreateServerReport(reportName: string): Report;
 export declare function CreateEmptyBaseSchedule(scheduleType: ScheduleType): BaseSchedule;
 export declare function CreateEmptyReminderSchedule(): ReminderSchedule;
 export declare function CreateEmptyReportSchedule(): ReportSchedule;
@@ -64,6 +65,7 @@ export declare function CreateEmptyStyle(): AdaptableStyle;
 export declare function CreateSystemStatusMessageInfo(message: string, type: AdaptableMessageType, furtherInfo?: string): SystemStatusMessageInfo;
 export declare function CreateEmptyCellSummmary(): CellSummmary;
 export declare function CreateColumnFilter(ColumnId: string, PredicateId: SystemFilterPredicateId, Inputs: any[]): ColumnFilter;
+export declare function CreateEmptyStyledColumn(): StyledColumn;
 export declare function CreateCustomDisplayFormatterContext(value: any, node: RowNode, abColumn: AdaptableColumn, api: AdaptableApi): CustomDisplayFormatterContext;
 export declare function CreateToastOptions(notificationsOptions: NotificationsOptions, { onClose, containerId }: {
     onClose?: VoidFunction;
@@ -80,7 +82,7 @@ export declare const ObjectFactory: {
     CreateEmptyAlertDefinition: typeof CreateEmptyAlertDefinition;
     CreateEmptyFlashingCellDefinition: typeof CreateEmptyFlashingCellDefinition;
     CreateInternalAlertDefinitionForMessages: typeof CreateInternalAlertDefinitionForMessages;
-    CreateCustomReport: typeof CreateCustomReport;
+    CreateServerReport: typeof CreateServerReport;
     CreateEmptyReport: typeof CreateEmptyReport;
     CreateEmptyBaseSchedule: typeof CreateEmptyBaseSchedule;
     CreateEmptyReminderSchedule: typeof CreateEmptyReminderSchedule;
@@ -106,5 +108,6 @@ export declare const ObjectFactory: {
     CreateSystemStatusMessageInfo: typeof CreateSystemStatusMessageInfo;
     CreateToastOptions: typeof CreateToastOptions;
     CreateCustomDisplayFormatterContext: typeof CreateCustomDisplayFormatterContext;
+    CreateEmptyStyledColumn: typeof CreateEmptyStyledColumn;
 };
 export default ObjectFactory;

package/src/Utilities/ObjectFactory.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplayFormatterContext = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateCustomReport = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
+exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplayFormatterContext = exports.CreateEmptyStyledColumn = exports.CreateColumnFilter = exports.CreateEmptyCellSummmary = exports.CreateSystemStatusMessageInfo = exports.CreateEmptyStyle = exports.CreateEmptyLayout = exports.CreateEmptyFreeTextColumn = exports.CreateEmptyFormatColumn = exports.CreateEmptyConditionalStyle = exports.CreateEmptyShortcut = exports.CreateEmptySchedule = exports.CreateReportSchedule = exports.CreateGlue42Schedule = exports.CreateIPushPullSchedule = exports.CreateEmptyOpenFinSchedule = exports.CreateEmptyGlue42Schedule = exports.CreateEmptyIPushPullSchedule = exports.CreateEmptyOpenFinReport = exports.CreateEmptyGlue42Report = exports.CreateEmptyIPushPullReport = exports.CreateEmptyReportSchedule = exports.CreateEmptyReminderSchedule = exports.CreateEmptyBaseSchedule = exports.CreateServerReport = exports.CreateEmptyReport = exports.CreateInternalAlertDefinitionForMessages = exports.CreateEmptyFlashingCellDefinition = exports.CreateEmptyAlertDefinition = exports.CreateRowChangedAlert = exports.CreateCellChangedAlert = exports.CreateGenericAlert = exports.CreateEmptyPlusMinusNudge = exports.CreateEmptyNamedQuery = exports.CreateEmptyCalculatedColumn = exports.CreateEmptyCustomSort = void 0;
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const GeneralConstants_1 = require("./Constants/GeneralConstants");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
@@ -130,7 +130,7 @@ function CreateEmptyReport() {
     };
 }
 exports.CreateEmptyReport = CreateEmptyReport;
-function CreateCustomReport(reportName) {
+function CreateServerReport(reportName) {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
         Name: reportName,
@@ -140,7 +140,7 @@ function CreateCustomReport(reportName) {
         Query: undefined,
     };
 }
-exports.CreateCustomReport = CreateCustomReport;
+exports.CreateServerReport = CreateServerReport;
 function CreateEmptyBaseSchedule(scheduleType) {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
@@ -327,8 +327,8 @@ function CreateEmptyStyle() {
         BackColor: undefined,
         ForeColor: undefined,
         BorderColor: undefined,
-        FontWeight: Enums_1.FontWeight.Normal,
-        FontStyle: Enums_1.FontStyle.Normal,
+        FontWeight: undefined,
+        FontStyle: undefined,
         FontSize: undefined,
         ClassName: GeneralConstants_1.EMPTY_STRING,
     };
@@ -367,6 +367,13 @@ function CreateColumnFilter(ColumnId, PredicateId, Inputs) {
     };
 }
 exports.CreateColumnFilter = CreateColumnFilter;
+function CreateEmptyStyledColumn() {
+    return {
+        Uuid: (0, Uuid_1.createUuid)(),
+        ColumnId: GeneralConstants_1.EMPTY_STRING,
+    };
+}
+exports.CreateEmptyStyledColumn = CreateEmptyStyledColumn;
 function CreateCustomDisplayFormatterContext(value, node, abColumn, api) {
     return {
         adaptableColumn: abColumn,
@@ -440,7 +447,7 @@ exports.ObjectFactory = {
     CreateEmptyAlertDefinition,
     CreateEmptyFlashingCellDefinition,
     CreateInternalAlertDefinitionForMessages,
-    CreateCustomReport,
+    CreateServerReport,
     CreateEmptyReport,
     CreateEmptyBaseSchedule,
     CreateEmptyReminderSchedule,
@@ -466,5 +473,6 @@ exports.ObjectFactory = {
     CreateSystemStatusMessageInfo,
     CreateToastOptions,
     CreateCustomDisplayFormatterContext,
+    CreateEmptyStyledColumn,
 };
 exports.default = exports.ObjectFactory;

package/src/Utilities/Services/ModuleService.js

@@ -87,8 +87,6 @@ class ModuleService {
                 return learnUrl + 'handbook-calculated-column';
             case 'CellSummary':
                 return learnUrl + 'handbook-summarising#cell-summary-information';
-            case 'ConditionalStyle':
-                return learnUrl + 'handbook-conditional-styling';
             case 'CustomSort':
                 return learnUrl + 'handbook-sorting';
             case 'Dashboard':
@@ -141,6 +139,8 @@ class ModuleService {
                 return learnUrl + 'integrations-ipushpull';
             case 'OpenFin':
                 return learnUrl + 'integrations-openfin';
+            case 'StyledColumn':
+                return learnUrl + 'handbook-styled-column-overview';
             default:
                 return 'good';
         }

package/src/Utilities/Services/QueryLanguageService.js

@@ -185,7 +185,7 @@ class QueryLanguageService {
             if (evaluationResult.type !== 'aggregationBoolean') {
                 const result = {
                     isValid: false,
-                    errorMessage: 'provided AggregatedBBoolean expression does not evaluate to a supported aggregation',
+                    errorMessage: 'provided AggregatedBoolean expression does not evaluate to a supported aggregation',
                 };
                 this.cacheAggregatedBooleanValidation.set(cacheKey, result);
                 return result;

package/src/Utilities/Services/ReportService.js

@@ -91,7 +91,7 @@ class ReportService {
     }
     GetReportColumnScopeShortDescription(report) {
         var _a, _b;
-        if (this.adaptableApi.exportApi.isCustomReport(report)) {
+        if (this.adaptableApi.exportApi.isServerReport(report)) {
             return ['[Custom Columns]'];
         }
         switch (report.ReportColumnScope) {
@@ -109,7 +109,7 @@ class ReportService {
         }
     }
     GetReportColumnScopeLongDescription(report) {
-        if (this.adaptableApi.exportApi.isCustomReport(report)) {
+        if (this.adaptableApi.exportApi.isServerReport(report)) {
             return '[Custom Columns]';
         }
         switch (report.ReportColumnScope) {
@@ -124,7 +124,7 @@ class ReportService {
         }
     }
     GetReportExpressionDescription(report, cols) {
-        if (this.adaptableApi.exportApi.isCustomReport(report)) {
+        if (this.adaptableApi.exportApi.isServerReport(report)) {
             return '[Custom Data]';
         }
         if (this.IsSystemReport(report.Name)) {
@@ -160,7 +160,7 @@ class ReportService {
     GetReportColumnsForReport(report, includePrimaryKey = false) {
         let reportColumns = [];
         let gridColumns = this.adaptableApi.columnApi.getColumns();
-        if (this.adaptableApi.exportApi.isCustomReport(report)) {
+        if (this.adaptableApi.exportApi.isServerReport(report)) {
             return reportColumns;
         }
         // first get the cols depending on the Column Scope
@@ -204,8 +204,8 @@ class ReportService {
             friendlyName: column.friendlyName,
             dataType: column.dataType,
         }));
-        if (this.adaptableApi.exportApi.isCustomReport(report)) {
-            return this.adaptableApi.exportApi.runCustomReport(report.Name);
+        if (this.adaptableApi.exportApi.isServerReport(report)) {
+            return this.adaptableApi.exportApi.runServerReport(report.Name);
         }
         if (ArrayExtensions_1.default.IsNullOrEmpty(columns)) {
             return { columns: [], rows: [] };

package/src/View/AdaptablePopover/index.js

@@ -36,7 +36,7 @@ class AdaptablePopover extends React.Component {
         return (React.createElement(rebass_1.Flex, { alignItems: "center", className: this.props.className },
             React.createElement(OverlayTrigger_1.default, { showTriangle: true, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
                     overflow: 'visible',
-                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
+                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
                 this.props.children,
                 showIcon && React.createElement(icons_1.Icon, { name: icon }))))));
     }

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

@@ -32,15 +32,14 @@ const HighlightStyle = (props) => {
             },
         },
     ];
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(rebass_1.Box, { "data-name": props.dataName },
         React.createElement(rebass_1.Flex, null,
             React.createElement(CheckBox_1.CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
                     props.onChange(checked);
                 } }, props.label),
             Boolean(props.highlight) && (React.createElement(DropdownButton_1.default, { items: options, columns: ['label'] }, typeof props.highlight === 'boolean' ? (React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 },
-                "Use Message Type's",
-                ' ',
-                (0, AdaptableContext_1.useAdaptable)().api.internalApi.getCorrectEnglishVariant('Colour'))) : (React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "Create a Custom Style"))))),
+                "Use Message Type's ",
+                adaptable.api.internalApi.getCorrectEnglishVariant('Colour'))) : (React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "Create a Custom Style"))))),
         typeof props.highlight === 'object' && (React.createElement(Panel_1.default, { margin: 2 },
             React.createElement(rebass_1.Box, { paddingLeft: 3 },
                 React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
@@ -93,41 +92,43 @@ const AlertBehaviourWizardSection = (props) => {
     const rowAddedAlert = api.internalApi.isAlertDefinitionForAddedRowChangeEvent(data);
     const rowRemovedAlert = api.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
     const cellChangedAlert = !rowAddedAlert && !rowRemovedAlert;
+    const hasPreventCellEdit = cellChangedAlert;
+    const hasHighlightCell = cellChangedAlert;
+    const hasHighlightRow = cellChangedAlert || rowAddedAlert;
+    const hasJumpToCell = cellChangedAlert;
+    const hasJumpToRow = cellChangedAlert || rowAddedAlert;
     const onChange = (AlertProperties) => {
         props.onChange(Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), AlertProperties) }));
     };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
         React.createElement(Tabs_1.Tabs.Content, null,
-            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
+            hasPreventCellEdit && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
                     onChange({
                         PreventEdit,
                     });
                 } },
                 "Prevent Cell Edit",
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
-            cellChangedAlert && (React.createElement(HighlightStyle, { highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
+            hasHighlightCell && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
                     onChange({ HighlightCell });
                 } })),
-            cellChangedAlert && (React.createElement(HighlightStyle, { highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
+            hasHighlightRow && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
                     onChange({ HighlightRow });
                 } })),
-            rowAddedAlert && (React.createElement(HighlightStyle, { highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
-                    onChange({ HighlightRow });
-                } })),
-            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
+            hasJumpToCell && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-cell", checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
                     onChange({ JumpToCell });
                 } }, "Jump To Cell")),
-            rowAddedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
+            hasJumpToRow && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
                     onChange({ JumpToRow });
                 } }, "Jump To Row")),
-            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
+            React.createElement(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
                     onChange({ ShowInDiv });
                 } },
                 "Show in separate ",
                 React.createElement(CodeBlock_1.CodeBlock, null, `<div />`),
                 " element"),
-            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
+            React.createElement(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
                     onChange({ LogToConsole });
                 } }, "Log To Console"))));
 };

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

@@ -17,9 +17,32 @@ const AlertButtonsEditor = (props) => {
     const onChange = (newButtons) => {
         props.onChange(newButtons);
     };
+    const alertDefinition = adaptableAlert.alertDefinition;
+    const rowAddedAlert = api.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
+    const rowRemovedAlert = api.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
+    const cellChangedAlert = !rowAddedAlert && !rowRemovedAlert;
+    const hasHighlightCell = cellChangedAlert;
+    const hasHighlightRow = cellChangedAlert || rowAddedAlert;
+    const hasJumpToCell = cellChangedAlert;
+    const hasJumpToRow = cellChangedAlert || rowAddedAlert;
+    const hasUndo = cellChangedAlert;
     const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
     const buttonActions = [];
-    buttonActions.push('highlight-row', 'jump-to-row', 'highlight-cell', 'jump-to-cell', 'undo');
+    if (hasHighlightRow) {
+        buttonActions.push('highlight-row');
+    }
+    if (hasJumpToRow) {
+        buttonActions.push('jump-to-row');
+    }
+    if (hasHighlightCell) {
+        buttonActions.push('highlight-cell');
+    }
+    if (hasJumpToCell) {
+        buttonActions.push('jump-to-cell');
+    }
+    if (hasUndo) {
+        buttonActions.push('undo');
+    }
     buttonActions.push('suspend');
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },

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

@@ -12,6 +12,7 @@ const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAle
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const DEFAULT_BUTTONS = [
     {
         Label: 'OK',
@@ -53,7 +54,7 @@ const AlertPreview = (_a) => {
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
         React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
 };
 exports.AlertPreview = AlertPreview;
@@ -73,7 +74,7 @@ const AlertDisplayWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
@@ -83,7 +84,7 @@ const AlertDisplayWizardSection = (props) => {
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
-        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Trigger and Condition)"),
@@ -91,7 +92,7 @@ const AlertDisplayWizardSection = (props) => {
                 React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageText, 
                     // onChange={(e: any) => onPredicateInputChange(e, index)}
                     onChange: (e) => onMessageTextChange(e) }))),
-        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Display options"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
@@ -104,7 +105,7 @@ const AlertDisplayWizardSection = (props) => {
                 ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { AlertButtons: ((_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons) || DEFAULT_BUTTONS, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
                     } }))) : null)),
-        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { autoFocus: false },
+        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Alert preview"),
             React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };

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

@@ -14,15 +14,15 @@ const BaseAlertRulesWizardSection = (props) => {
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
             useObservableQuery: (React.createElement(React.Fragment, null,
                 "Use an ObservableQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
             useAggregationQuery: (React.createElement(React.Fragment, null,
                 "Use an AggregatedBooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };
 exports.BaseAlertRulesWizardSection = BaseAlertRulesWizardSection;

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

@@ -11,8 +11,8 @@ const BaseAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
         React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-                rowScope: 'Changes anywhere in the row will trigger an alert',
-                columnScope: 'Changes in selected columns will trigger an alert',
+                rowScope: 'Changes in any Column in the row will trigger an Alert',
+                columnScope: 'Changes in selected Columns will trigger an Alert',
             }, scope: data.Scope, updateScope: (Scope) => {
                 const newData = Object.assign(Object.assign({}, data), { Scope });
                 if (newData.Rule.Predicate) {
@@ -47,7 +47,7 @@ const renderBaseAlertScopeSummary = (data) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Box, null,
             React.createElement(rebass_1.Text, { fontSize: 2 }, scopeApi.scopeIsAll(data.Scope)
-                ? 'Changes anywhere in the row will trigger an alert'
+                ? 'Changes to any Column in the row will trigger an Alert'
                 : null)),
         React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: columnsInScope.length ? 2 : 0 }, "Changes in selected columns will trigger an alert"),

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

@@ -38,7 +38,7 @@ const isValidAlertRules = (alert, api, context) => {
     if (valid && alert.Rule.AggregatedBooleanExpression) {
         valid = api.queryLanguageApi.isValidAggregatedBooleanExpression(alert.Rule.AggregatedBooleanExpression, ModuleConstants_1.AlertModuleId);
         if (!valid) {
-            return 'The Expression is not a valid Aggregation Expression';
+            return 'The Expression is not a valid AggregatedBoolean Expression';
         }
     }
     return true;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -56,7 +56,7 @@ class BulkUpdatePopupComponent extends React.Component {
                         ' ',
                         "Select from existing column values")),
                 React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.dataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.dataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
+                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "bulk-update", style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.dataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.dataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();

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

@@ -15,4 +15,4 @@ export declare class CalculatedColumnSummaryComponent extends React.Component<Ca
     onCloseWizard(): void;
     onFinishWizard: (calculatedColumn: CalculatedColumn) => void;
 }
-export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "key" | "ref" | "onSuspend" | "api" | "CalculatedColumns" | "modalContainer" | "moduleInfo" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "onShare" | "onEdit" | "summarisedColumn" | "onDeleteConfirm">>;
+export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "CalculatedColumns" | "moduleInfo" | "onShare" | "onUnSuspend" | "teamSharingActivated" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "onEdit" | "summarisedColumn" | "onDeleteConfirm">>;

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -31,7 +31,7 @@ const AdaptableObjectListItemView = (props) => {
             return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
                     labelEl,
-                    props.showEditButton && (React.createElement(SimpleButton_1.default, { accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
                             props.handleOnEdit(tag.name);
                         } }))),
                 React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },

package/src/View/Components/AdaptableObjectRow/index.js

@@ -8,12 +8,7 @@ const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 class AdaptableObjectRow extends React.Component {
     render() {
-        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { key: index, fontSize: 'var(--ab-font-size-3)', title: typeof colItem.Content === 'string' ? colItem.Content : undefined, style: {
-                flex: colItem.Size,
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-            }, "data-name": "list-group-cell", paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
+        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { className: "ab-AdaptableObjectRow__cell", "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined, flex: colItem.Size, paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
         const className = (0, join_1.default)('ab-AdaptableObjectRow', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended');
         return (React.createElement(rebass_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
     }

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

@@ -4,6 +4,4 @@ export interface InfoButtonProps extends SimpleButtonProps {
     glyph?: string;
     tooltip?: string;
 }
-export declare class ButtonInfo extends React.Component<InfoButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare const ButtonInfo: React.FunctionComponent<InfoButtonProps>;

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

@@ -4,9 +4,7 @@ exports.ButtonInfo = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-class ButtonInfo extends React.Component {
-    render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "info", iconSize: 20, icon: "info", variant: "text" }, this.props)));
-    }
-}
+const ButtonInfo = (props) => {
+    return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent" }, props)));
+};
 exports.ButtonInfo = ButtonInfo;

package/src/View/Components/EntityRulesEditor/index.js

@@ -161,7 +161,8 @@ const EntityRulesEditor = (props) => {
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
+    const baseClassName = 'ab-EntityRulesEditor';
+    return (React.createElement(rebass_1.Flex, Object.assign({ className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
         children,
         React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
             showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
@@ -170,15 +171,9 @@ const EntityRulesEditor = (props) => {
                 React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
                 React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
-            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { value: "Predicate" },
+            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
                 React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, descriptions.selectPredicate),
-                React.createElement(DropdownButton_1.default, { style: {
-                        minWidth: '15rem',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        maxWidth: 'inherit',
-                    }, placeholder: "Select Rule", showClearButton: !!((_e = data.Rule) === null || _e === void 0 ? void 0 : _e.Predicate), onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_f = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _f === void 0 ? void 0 :
+                React.createElement(DropdownButton_1.default, { "data-name": "entity-rules-editor-predicate-dropdown", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!((_e = data.Rule) === null || _e === void 0 ? void 0 : _e.Predicate), onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_f = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _f === void 0 ? void 0 :
                 _f.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
                     index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
                     React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
@@ -189,20 +184,16 @@ const EntityRulesEditor = (props) => {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,
                     } },
-                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                            color: 'var(--ab-color-text-on-add)',
-                            fill: 'var(--ab-color-text-on-add)',
-                            background: 'var(--ab-color-action-add)',
-                        }, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
                     "See Predicate documentation for more details and examples")))) : null,
             showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
-            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { value: 'BooleanExpression', paddingLeft: 0 },
+            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_h = data.Rule) === null || _h === void 0 ? void 0 : _h.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
-            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { value: 'ObservableExpression', paddingLeft: 0 },
+            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_j = data.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
-            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedBooleanExpression', paddingLeft: 0 },
+            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_k = data.Rule) === null || _k === void 0 ? void 0 : _k.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
 };
 exports.EntityRulesEditor = EntityRulesEditor;

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

@@ -137,15 +137,14 @@ class FilterFormComponent extends React.Component {
         let closeButton = (React.createElement(ButtonClose_1.ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
         let clearFilterButton = (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
         const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
-        return (React.createElement("div", { "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
-            this.state.showTab && (React.createElement("div", null,
-                React.createElement(Radio_1.default, { marginLeft: 1, flex: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
+        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
+            this.state.showTab && (React.createElement(React.Fragment, null,
+                React.createElement(Radio_1.default, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
-                React.createElement(Radio_1.default, { marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
+                React.createElement(Radio_1.default, { "data-name": "predicates", marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
-            this.state.currentTab === 'values' && (React.createElement("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
-            this.state.currentTab === 'predicates' && (React.createElement("div", null,
+            this.state.currentTab === 'values' && (React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })),
+            this.state.currentTab === 'predicates' && (React.createElement(React.Fragment, null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
                 predicateDefs
@@ -156,15 +155,15 @@ class FilterFormComponent extends React.Component {
         var _a;
         const { editedColumnFilter } = this.state;
         const checked = ((_a = editedColumnFilter === null || editedColumnFilter === void 0 ? void 0 : editedColumnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId) === predicateDef.id;
-        return (React.createElement(rebass_1.Flex, { key: index, flexDirection: "column" },
-            React.createElement(Radio_1.default, { disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
+        return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate", key: index, flexDirection: "column" },
+            React.createElement(Radio_1.default, { "data-name": predicateDef.id, disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
+            React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate_inputs", flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
     }
     renderPredicateInput(predicateDef, filter) {
         var _a;
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: true, false, all(indeterminate)
-            return (React.createElement(rebass_1.Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
+            return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate-input", flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
                 React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
                         ? true
                         : filter.Predicate.Inputs[0] === 'false'
@@ -181,11 +180,7 @@ class FilterFormComponent extends React.Component {
                     } })));
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
-                    marginBottom: 5,
-                    flex: 1,
-                    fontSize: 'var( --ab-font-size-2)',
-                } }))));
+            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
     }
     isFilterDisabled() {
         var _a;