@adaptabletools/adaptable 13.0.0-canary.16 → 13.0.0-canary.18

package/src/Api/Implementation/FormatColumnApiImpl.js

@@ -27,13 +27,16 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
         return this.getAllFormatColumn().filter((formatColumn) => formatColumn.IsSuspended);
     }
     getAllFormatColumnWithStyle() {
-        return this.getAllFormatColumn().filter((fc) => fc.Style != null || fc.CellAlignment);
+        return this.getAllFormatColumn().filter((fc) => fc.Style);
+    }
+    getAllFormatColumnWithStyleAndCellAlignment() {
+        return this.getAllFormatColumn().filter((fc) => fc.Style || fc.CellAlignment);
     }
     getAllFormatColumnWithDisplayFormat() {
-        return this.getAllFormatColumn().filter((fc) => fc.DisplayFormat != null);
+        return this.getAllFormatColumn().filter((fc) => fc.DisplayFormat);
     }
     getAllFormatColumnWithCellAlignment() {
-        return this.getAllFormatColumn().filter((fc) => fc.CellAlignment != null);
+        return this.getAllFormatColumn().filter((fc) => fc.CellAlignment);
     }
     addFormatColumn(formatColumn) {
         this.addUidToAdaptableObject(formatColumn);
@@ -77,37 +80,27 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
     applyFormatColumnDisplayFormats() {
         throw 'This API method is deprecated - it is not needed anymore.';
     }
-    getActiveFormatColumnForColumn(column) {
-        const formatColumns = this.getAllActiveFormatColumn();
-        return this.getAppropriateFormatColumn(formatColumns, column);
-    }
-    getColumnFormatColumnsWithStyle(column) {
-        const formatColumns = this.getAllFormatColumnWithStyle();
-        return this.getFormatColumnInColumnScope(formatColumns, column).filter((scopedFormatColumn) => {
-            return this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope);
-        });
+    getFormatColumnsForColumn(column, config) {
+        const formatColumns = this.getAllFormatColumn().filter((formatColumn) => (config === null || config === void 0 ? void 0 : config.includeSuspended) || !formatColumn.IsSuspended);
+        return this.getFormatColumnWithColumnInScope(formatColumns, column);
     }
-    getFormatColumnForColumn(column) {
-        const formatColumns = this.getAllFormatColumn();
-        return this.getAppropriateFormatColumn(formatColumns, column);
+    getFormatColumnsWithStyleForColumn(column, config) {
+        const formatColumns = this.getAllFormatColumnWithStyleAndCellAlignment().filter((formatColumn) => (config === null || config === void 0 ? void 0 : config.includeSuspended) || !formatColumn.IsSuspended);
+        return this.getFormatColumnWithColumnInScope(formatColumns, column);
     }
-    getFormatColumnForColumnId(columnId) {
+    getFormatColumnsForColumnId(columnId, config) {
         const abColumn = this.adaptable.api.columnApi.getColumnFromId(columnId);
         if (!abColumn) {
             return undefined;
         }
-        return this.getFormatColumnForColumn(abColumn);
+        return this.getFormatColumnsForColumn(abColumn, config);
     }
-    getFormatColumnWithStyleForColumn(column) {
-        const formatColumns = this.getAllFormatColumnWithStyle();
-        return this.getAppropriateFormatColumn(formatColumns, column);
+    getFormatColumnWithStyleClassNameForColumn(column, config) {
+        return this.getFormatColumnsWithStyleForColumn(column, config).filter((formatColumn) => { var _a; return StringExtensions_1.default.IsNotNullOrEmpty((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName); });
     }
-    getFormatColumnWithStyleClassNameForColumn(column) {
-        return this.getColumnFormatColumnsWithStyle(column).filter((fc) => { var _a; return StringExtensions_1.default.IsNotNullOrEmpty((_a = fc === null || fc === void 0 ? void 0 : fc.Style) === null || _a === void 0 ? void 0 : _a.ClassName); });
-    }
-    getFormatColumnWithDisplayFormatForColumn(column) {
-        const formatColumns = this.getAllFormatColumnWithDisplayFormat();
-        return this.getAppropriateFormatColumn(formatColumns, column);
+    getFormatColumnsWithDisplayFormatForColumn(column, config) {
+        const formatColumns = this.getAllFormatColumnWithDisplayFormat().filter((formatColumn) => (config === null || config === void 0 ? void 0 : config.includeSuspended) || !formatColumn.IsSuspended);
+        return this.getFormatColumnWithColumnInScope(formatColumns, column);
     }
     getFormatColumnWithSingleColumnScope(columnId) {
         const abColumn = this.adaptable.api.columnApi.getColumnFromId(columnId);
@@ -126,7 +119,8 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
         });
         return returnFormatColumn;
     }
-    getFormatColumnInColumnScope(formatColumns, column) {
+    // TODO is this really needed, I don't think it achieves anything
+    getFormatColumnInColumnScope(formatColumns) {
         // we need to maintain the format columns order, therefore we will extract all 3 scope types in a single iteration
         return formatColumns.filter((fc) => {
             return (
@@ -138,8 +132,8 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
                 this.adaptable.api.scopeApi.scopeIsAll(fc.Scope));
         });
     }
-    getAppropriateFormatColumn(formatColumns, column) {
-        return this.getFormatColumnInColumnScope(formatColumns, column).find((scopedFormatColumn) => this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope));
+    getFormatColumnWithColumnInScope(formatColumns, column) {
+        return this.getFormatColumnInColumnScope(formatColumns).filter((scopedFormatColumn) => this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope));
     }
     hasStyleFormatColumns() {
         return ArrayExtensions_1.default.IsNotNullOrEmpty(this.getAllFormatColumnWithStyle());
@@ -214,50 +208,35 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
     getFormatColumnDefsForScope(scope) {
         return this.getFormatColumnPredicateDefs().filter((predicateDef) => this.adaptable.api.scopeApi.isScopeInScope(scope, predicateDef.columnScope));
     }
-    isFormatColumnActiveForRow(formatColumn, params) {
-        // suspedned is important to be first
+    getFormatColumnsRelevantForColumn(formatColumns, column, params) {
+        return formatColumns.filter((formatColumn) => this.isFormatColumnRelevantForColumn(formatColumn, column, params));
+    }
+    isFormatColumnRelevantForColumn(formatColumn, column, params) {
+        // suspended is important to be first
         if (formatColumn.IsSuspended) {
             return false;
         }
         if (!formatColumn.Rule) {
             return true;
         }
-        if (this.shouldRunStyle(formatColumn, params.node) &&
-            formatColumn.Rule.BooleanExpression &&
-            this.evaluateExpression(formatColumn, params.node)) {
-            return true;
-        }
-        // nothing has passed then return false
-        return false;
-    }
-    isFormatColumnActiveForColumn(formatColumn, column, params) {
-        // suspedned is important to be first
-        if (formatColumn.IsSuspended) {
+        if (!formatColumn.IncludeGroupedRows &&
+            this.adaptable.api.gridApi.isGroupRowNode(params.node)) {
             return false;
         }
-        if (!formatColumn.Rule) {
-            return true;
+        // first run the predicate
+        if (formatColumn.Rule.Predicate && formatColumn.Rule.Predicate.PredicateId) {
+            return this.evaluatePredicate({
+                formatColumn,
+                column,
+                value: params.value,
+                node: params.node,
+            });
         }
-        if (this.shouldRunStyle(formatColumn, params.node)) {
-            // first run the predicate
-            if (formatColumn.Rule.Predicate && formatColumn.Rule.Predicate.PredicateId) {
-                if (this.evaluatePredicate({
-                    formatColumn,
-                    column,
-                    value: params.value,
-                    node: params.node,
-                })) {
-                    return true;
-                }
-            }
-            else if (formatColumn.Rule.BooleanExpression) {
-                if (this.evaluateExpression(formatColumn, params.node)) {
-                    return true;
-                }
-            }
-            // nothing has passed then return false
-            return false;
+        else if (formatColumn.Rule.BooleanExpression) {
+            return this.evaluateExpression(formatColumn, params.node);
         }
+        // nothing has passed then return false
+        return false;
     }
     evaluatePredicate({ formatColumn, column, value, node, }) {
         const params = {

package/src/Api/StyledColumnApi.d.ts

@@ -2,19 +2,9 @@ import { RowNode } from '@ag-grid-community/core/dist/cjs/es5/entities/rowNode';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { StyledColumnState, StyledColumn, CellColorRange, ColumnComparison } from '../PredefinedConfig/StyledColumnState';
 /**
- * Provides run-time access to the Styled Column Module and associated state
+ * Provides run-time access to Styled Column Module and associated state
  */
 export interface StyledColumnApi {
-    /**
-     * Delete styled column
-     * @param styledColumn
-     */
-    deleteStyledColumn(styledColumn: StyledColumn): void;
-    /**
-     * Create a styled column
-     * @param styledColumn
-     */
-    addStyledColumn(styledColumn: StyledColumn): void;
     /**
      * Retrieves Styled Column section from Adaptable State
      */
@@ -48,6 +38,16 @@ export interface StyledColumnApi {
      * @returns Styled Columns
      */
     getAllSuspendedStyledColumn(): StyledColumn[];
+    /**
+     * Delete a Styled column
+     * @param styledColumn
+     */
+    deleteStyledColumn(styledColumn: StyledColumn): void;
+    /**
+     * Create a Styled column
+     * @param styledColumn
+     */
+    addStyledColumn(styledColumn: StyledColumn): void;
     /**
      * Gets the Minimum Value to display for a Styled Column
      * @param styledColumn Styled Column to check
@@ -62,13 +62,23 @@ export interface StyledColumnApi {
      * @param cellValue current Cell Value
      */
     getNumericStyleMaxValue(styledColumn: Omit<StyledColumn, 'ColumnId'>, column: AdaptableColumn, rowNode: RowNode, cellValue: any): number;
+    /**
+     * Returns the smallest number in a Range
+     * @param range Range to check
+     * @param column current Column
+     */
     getCellColorRangeMinValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
+    /**
+     * Returns the largest number in a Range
+     * @param range Range to check
+     * @param column current Column
+     */
     getCellColorRangeMaxValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
     /**
      * Retrieves the ColumnComparison property, if there, from a Styled Column
-     * @param formatColumn Styled Column to Add
+     * @param styledColumn Styled Column to Add
      */
-    getColumnComparisonForStyledColumn(formatColumn: StyledColumn): ColumnComparison | undefined;
+    getColumnComparisonForStyledColumn(styledColumn: StyledColumn): ColumnComparison | undefined;
     /**
      * Returns any ColumnIds referenced in a Column Comparison
      * @param columnComparision Column Comparison to check
@@ -88,5 +98,9 @@ export interface StyledColumnApi {
      * Publishes the CheckboxColumnClickedEvent - when the checkbox in an Checkbox Column is clicked
      */
     fireCheckboxColumnClickedEvent(columnId: string, rowData: any, primaryKeyValue: any, isChecked: boolean): void;
+    /**
+     * Returns a Styled Column for a given column
+     * @param column Column to check
+     */
     getActiveStyledColumnForColumn(column: AdaptableColumn): StyledColumn | undefined;
 }

package/src/PredefinedConfig/StyledColumnState.d.ts

@@ -13,14 +13,20 @@ export interface StyledColumnState extends ConfigState {
  * Object used in Special Column Style function
  */
 export interface StyledColumn extends SuspendableObject {
+    /**
+     * Column being styled
+     */
     ColumnId: string;
+    /**
+     * Styles a numeric column with a Gradient
+     */
     GradientStyle?: GradientStyle;
     /**
-     * Style a numeric column so each cell displays a 'bar'
+     * Styles a numeric column so each cell displays a 'bar'
      */
     PercentBarStyle?: PercentBarStyle;
     /**
-     * Style a boolean column so each cell displays a checkbox
+     * Renders a Checkbox in a boolean column
      */
     CheckBoxStyle?: boolean;
 }
@@ -33,7 +39,7 @@ export interface PercentBarStyle extends NumericStyledColumn {
      */
     CellRanges?: CellColorRange[];
     /**
-     * Compares cell values to another Column
+     * Compares Cell values to another Column
      */
     ColumnComparison?: ColumnComparison;
     /**
@@ -45,7 +51,7 @@ export interface PercentBarStyle extends NumericStyledColumn {
      */
     ToolTipText?: CellTextOptions;
     /**
-     * Back colour - only used for 'Percent Bar' Numeric style; leave unset if none required
+     * Background colour for 'Percent Bar'; leave unset if none required
      * @defaultValue Gray
      */
     BackColor?: string;

package/src/Strategy/ConditionalStyleModule.d.ts

@@ -1,6 +1,5 @@
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
 import { ConditionalStyle } from '../PredefinedConfig/ConditionalStyleState';
 import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
 import { AdaptableModuleBase } from './AdaptableModuleBase';
@@ -15,7 +14,6 @@ export declare class ConditionalStyleModule extends AdaptableModuleBase implemen
     getExplicitlyReferencedColumnIds(conditionalStyle: ConditionalStyle): string[];
     getReferencedNamedQueryNames(conditionalStyle: ConditionalStyle): string[];
     updateOldConfig(): void;
-    addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     getTeamSharingAction(): TeamSharingImportInfo<ConditionalStyle>;
     isConditionalStyleActiveForColumn(conditionalStyleForColumn: ConditionalStyle, column: AdaptableColumn, params: any): boolean;
     isConditionalStyleActiveForRow(conditionalStyleForRow: ConditionalStyle, params: any): boolean;

package/src/Strategy/ConditionalStyleModule.js

@@ -9,7 +9,6 @@ const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
 const getScopeViewItems_1 = require("./Utilities/getScopeViewItems");
-const ConditionalStyleWizard_1 = require("../View/ConditionalStyle/Wizard/ConditionalStyleWizard");
 const getRuleViewItems_1 = require("./Utilities/getRuleViewItems");
 const getStyleViewItems_1 = require("./Utilities/getStyleViewItems");
 const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
@@ -79,25 +78,6 @@ class ConditionalStyleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         });
         this.api.conditionalStyleApi.editConditionalStyles(oldConditionalStyles);
     }
-    addColumnMenuItems(column) {
-        if (column && this.isModuleEditable() && !column.isSparkline) {
-            let conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(column);
-            let firstConditionalStyle = ArrayExtensions_1.default.IsNotNullOrEmpty(conditionalStyles)
-                ? conditionalStyles.find((cs) => this.api.scopeApi.isColumnInScopeColumns(column, cs.Scope))
-                : undefined;
-            let conditionalStyleExists = firstConditionalStyle != undefined;
-            let label = conditionalStyleExists ? 'Edit ' : 'Create ';
-            let popupParam = {
-                column: column,
-                action: conditionalStyleExists ? 'Edit' : 'New',
-                source: 'ColumnMenu',
-                value: firstConditionalStyle,
-            };
-            return [
-                this.createColumnMenuItemShowPopup(label + this.moduleInfo.FriendlyName, this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam),
-            ];
-        }
-    }
     getTeamSharingAction() {
         return {
             ModuleEntities: this.api.conditionalStyleApi.getAllConditionalStyle(),
@@ -211,13 +191,7 @@ class ConditionalStyleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     getViewProperties() {
         return {
             HeaderComponent: ConditionalStylePopupHeader_1.ConditionalStylePopupHeader,
-            getDeleteAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleDelete(conditionalStyle),
-            getSuspendAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleSuspend(conditionalStyle),
-            getUnSuspendAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleUnSuspend(conditionalStyle),
-            emptyView: "Click 'New' to create a new Conditional Style Rule.  When this is met, row or cells in the Conditional Style's scope will be styled appropriately.",
-            getEditWizard() {
-                return ConditionalStyleWizard_1.ConditionalStyleWizard;
-            },
+            emptyView: '',
         };
     }
     canBeAssociatedWithLayouts() {

package/src/Strategy/FormatColumnModule.js

@@ -77,22 +77,12 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     addColumnMenuItems(column) {
         let returnColumnMenuItems = [];
         if (column && this.isModuleEditable() && !column.isSparkline) {
-            // not fullproof as might be an All but its generally pretty good
-            let formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(column);
-            let formatExists = formatColumn
-                ? this.api.scopeApi.isColumnInScopeColumns(column, formatColumn.Scope)
-                : false;
-            if (formatColumn && formatColumn.IsReadOnly && formatColumn.IsReadOnly == true) {
-                formatExists = false;
-            }
-            let label = formatExists ? 'Edit ' : 'Create ';
             let popupParam = {
                 column: column,
-                action: formatExists ? 'Edit' : 'New',
+                action: 'New',
                 source: 'ColumnMenu',
-                value: formatColumn,
             };
-            returnColumnMenuItems.push(this.createColumnMenuItemShowPopup(label + 'Format Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
+            returnColumnMenuItems.push(this.createColumnMenuItemShowPopup('Create Format Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
         }
         return returnColumnMenuItems;
     }

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,7 +32,7 @@ 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);
@@ -99,35 +99,35 @@ const AlertBehaviourWizardSection = (props) => {
     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) => {
+            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevet-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) => {
+            cellChangedAlert && (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) => {
+            cellChangedAlert && (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) => {
+            rowAddedAlert && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
                     onChange({ HighlightRow });
                 } })),
-            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
+            cellChangedAlert && (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) => {
+            rowAddedAlert && (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/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/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/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;