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

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -4,333 +4,39 @@ exports.FormatColumnStyleWizardSection = exports.renderFormatColumnStyleSummary
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const CheckBox_1 = require("../../../components/CheckBox");
 const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const RangesComponent_1 = require("../../Components/RangesComponent");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const ColorPicker_1 = require("../../ColorPicker");
-const UIHelper_1 = tslib_1.__importStar(require("../../UIHelper"));
-const StyleVisualItem_1 = require("../../Components/StyleVisualItem");
+const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const isFormatColumnStyleValid = (data, api) => {
-    var _a, _b, _c, _d, _e;
-    if (!data.ColumnStyle &&
-        data.Style &&
+    if (data.Style &&
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
         data.DisplayFormat === undefined &&
-        data.HeaderName === undefined &&
         data.CellAlignment === undefined &&
         !api.scopeApi.isSingleBooleanColumnScope(data.Scope)) {
         return 'No format applied';
     }
-    if ((_c = (_b = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle) === null || _b === void 0 ? void 0 : _b.CellRanges) === null || _c === void 0 ? void 0 : _c.length) {
-        if (data.ColumnStyle.PercentBarStyle.CellRanges.some((cellRange) => cellRange.Min == undefined || cellRange.Max == undefined)) {
-            return 'Invalid Cell Range';
-        }
-    }
-    if ((_e = (_d = data.ColumnStyle) === null || _d === void 0 ? void 0 : _d.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.ColumnComparison) {
-        if (data.ColumnStyle.PercentBarStyle.ColumnComparison.MinValue == undefined ||
-            data.ColumnStyle.PercentBarStyle.ColumnComparison.MaxValue == undefined) {
-            return 'Invalid Column Comparison Range';
-        }
-    }
     return true;
 };
 exports.isFormatColumnStyleValid = isFormatColumnStyleValid;
 const toStyle = (style) => {
     return Object.assign(Object.assign({}, (0, StyleHelper_1.convertAdaptableStyleToCSS)(style !== null && style !== void 0 ? style : {})), { borderWidth: (style === null || style === void 0 ? void 0 : style.BorderColor) ? 2 : 0, borderStyle: 'solid' });
 };
-const getRanges = (ranges) => {
-    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { mr: 1 },
-            r.Min,
-            " to ",
-            r.Max,
-            ' '),
-        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
-                BackColor: r.Color,
-                ForeColor: r.Color,
-            } }))));
-};
-const getColumnComparison = (columnComparison, api) => {
-    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { mr: 1 },
-            "Min Value:",
-            ' ',
-            isNaN(Number(columnComparison.MinValue))
-                ? '[' + api.columnApi.getFriendlyNameFromColumnId(String(columnComparison.MinValue)) + ']'
-                : columnComparison.MinValue,
-            ' ',
-            ", Max Value:",
-            ' ',
-            isNaN(Number(columnComparison.MaxValue))
-                ? '[' + api.columnApi.getFriendlyNameFromColumnId(String(columnComparison.MaxValue)) + ']'
-                : columnComparison.MaxValue,
-            ' '),
-        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
-                BackColor: columnComparison.Color,
-                ForeColor: columnComparison.Color,
-            } })));
-};
 const renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (0, exports.renderFormatColumnStyleSummary)(data, api);
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
-    if (data.ColumnStyle) {
-        if (data.ColumnStyle.CheckBoxStyle) {
-            return 'Checkbox Style';
-        }
-        if (data.ColumnStyle.GradientStyle) {
-            if (data.ColumnStyle.GradientStyle.CellRanges) {
-                return getRanges(data.ColumnStyle.GradientStyle.CellRanges);
-            }
-            if (data.ColumnStyle.GradientStyle.ColumnComparison) {
-                return getColumnComparison(data.ColumnStyle.GradientStyle.ColumnComparison, api);
-            }
-        }
-        if (data.ColumnStyle.PercentBarStyle) {
-            if (data.ColumnStyle.PercentBarStyle.CellRanges) {
-                return getRanges(data.ColumnStyle.PercentBarStyle.CellRanges);
-            }
-            if (data.ColumnStyle.PercentBarStyle.ColumnComparison) {
-                return getColumnComparison(data.ColumnStyle.PercentBarStyle.ColumnComparison, api);
-            }
-        }
-        if (data.Style == null || UIHelper_1.default.IsEmptyStyle(data.Style)) {
-            return '[None]';
-        }
-        return React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: data.Style });
-    }
-    return (React.createElement(rebass_1.Text, { padding: 2, style: toStyle(data.Style) }, "Preview result"));
+    return (React.createElement(rebass_1.Text, { className: "ab-FormatPreview", padding: 2, style: toStyle(data.Style) }, "Preview result"));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const singleNumericColumn = api.scopeApi.isSingleNumericColumnScope(data.Scope);
-    const onlyBooleanColumnsInScope = api.scopeApi.areAllBooleanColumnsInScope(data.Scope) ||
-        api.scopeApi.scopeHasOnlyBooleanDataType(data.Scope);
-    const onPercentBarCellTextCellValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.CellText) {
-                percentBarStyle.CellText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.CellText.push('CellValue');
-            }
-        }
-        else {
-            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('PercentageValue')) {
-                percentBarStyle.CellText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.CellText = [];
-            }
-        }
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onPercentBarCellTextPercentValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.CellText) {
-                percentBarStyle.CellText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.CellText.push('PercentageValue');
-            }
-        }
-        else {
-            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('CellValue')) {
-                percentBarStyle.CellText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.CellText = [];
-            }
-        }
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onPercentBarToolTipTextCellValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.ToolTipText) {
-                percentBarStyle.ToolTipText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText.push('CellValue');
-            }
-        }
-        else {
-            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('PercentageValue')) {
-                percentBarStyle.ToolTipText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText = [];
-            }
-        }
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        if (checked) {
-            if (!percentBarStyle.ToolTipText) {
-                percentBarStyle.ToolTipText = ['PercentageValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText.push('PercentageValue');
-            }
-        }
-        else {
-            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('CellValue')) {
-                percentBarStyle.ToolTipText = ['CellValue'];
-            }
-            else {
-                percentBarStyle.ToolTipText = [];
-            }
-        }
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
-        let ColumnStyle = {
-            PercentBarStyle: {
-                ColumnComparison: columnComparison,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onUsePercentStyleColorCheckChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onForeColorSelectChange = (color) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        percentBarStyle.BackColor = color;
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onUpdatePercentBarStyleRanges = (ranges) => {
-        let ColumnStyle = {
-            PercentBarStyle: {
-                CellRanges: ranges,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onUpdateGradientStyleRanges = (ranges) => {
-        let ColumnStyle = {
-            GradientStyle: {
-                CellRanges: ranges,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
-        let ColumnStyle = {
-            GradientStyle: {
-                ColumnComparison: columnComparison,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onStyleTypeChanged = (event) => {
-        let e = event.target;
-        if (e.value == 'Gradient') {
-            props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                    GradientStyle: {
-                        CellRanges: api.scopeApi.createCellColorRangesForScope(data.Scope),
-                    },
-                } }));
-        }
-        else if (e.value == 'PercentBar') {
-            props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                    PercentBarStyle: {
-                        CellRanges: api.scopeApi.createCellColorRangesForScope(data.Scope),
-                    },
-                } }));
-        }
-        else if (e.value == 'None') {
-            const newData = Object.assign({}, data);
-            delete newData.ColumnStyle;
-            props.onChange(newData);
-        }
-    };
     return (React.createElement(React.Fragment, null,
-        onlyBooleanColumnsInScope && (React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "CheckBox Column"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2 }, "Shows each cell in the Column as a Checkbox"),
-                ' ',
-                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, checked: !!((_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle), onChange: (CheckBoxStyle) => {
-                        const formatColumn = Object.assign(Object.assign({}, data), { ColumnStyle: {
-                                CheckBoxStyle,
-                            } });
-                        if (!CheckBoxStyle) {
-                            delete formatColumn.ColumnStyle;
-                        }
-                        props.onChange(formatColumn);
-                    } }, "Display Column As CheckBox")))),
-        singleNumericColumn ? (React.createElement(React.Fragment, null,
-            React.createElement(Tabs_1.Tabs, null,
-                React.createElement(Tabs_1.Tabs.Tab, null, "Create a Format Column Style"),
-                React.createElement(Tabs_1.Tabs.Content, null,
-                    React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                        React.createElement(Radio_1.default, { marginLeft: 2, value: "None", checked: !data.ColumnStyle, onChange: (checked, e) => onStyleTypeChanged(e) }, "Standard"),
-                        ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Gradient", checked: !!((_b = data.ColumnStyle) === null || _b === void 0 ? void 0 : _b.GradientStyle), onChange: (checked, e) => onStyleTypeChanged(e) }, "Gradient"),
-                        ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "PercentBar", checked: !!((_c = data.ColumnStyle) === null || _c === void 0 ? void 0 : _c.PercentBarStyle), onChange: (checked, e) => onStyleTypeChanged(e) },
-                            "Percent Bar",
-                            ' '),
-                        ' '))),
-            ((_d = data.ColumnStyle) === null || _d === void 0 ? void 0 : _d.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { api: api, scope: data === null || data === void 0 ? void 0 : data.Scope, showRangeDirection: true, ranges: (_f = (_e = data.ColumnStyle) === null || _e === void 0 ? void 0 : _e.GradientStyle) === null || _f === void 0 ? void 0 : _f.CellRanges, columnComparison: (_h = (_g = data === null || data === void 0 ? void 0 : data.ColumnStyle) === null || _g === void 0 ? void 0 : _g.GradientStyle) === null || _h === void 0 ? void 0 : _h.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
-            ((_j = data.ColumnStyle) === null || _j === void 0 ? void 0 : _j.PercentBarStyle) && (React.createElement(React.Fragment, null,
-                React.createElement(RangesComponent_1.RangesComponent, { api: api, scope: data === null || data === void 0 ? void 0 : data.Scope, showRangeDirection: false, ranges: (_l = (_k = data.ColumnStyle) === null || _k === void 0 ? void 0 : _k.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.CellRanges, columnComparison: (_o = (_m = data === null || data === void 0 ? void 0 : data.ColumnStyle) === null || _m === void 0 ? void 0 : _m.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
-                React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
-                    React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, checked: (_r = (_q = (_p = data.ColumnStyle) === null || _p === void 0 ? void 0 : _p.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.CellText) === null || _r === void 0 ? void 0 : _r.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
-                        ' ',
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 3, checked: (_u = (_t = (_s = data.ColumnStyle) === null || _s === void 0 ? void 0 : _s.PercentBarStyle) === null || _t === void 0 ? void 0 : _t.CellText) === null || _u === void 0 ? void 0 : _u.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
-                            "Percent Value",
-                            ' '),
-                        ' '),
-                    React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, checked: (_x = (_w = (_v = data.ColumnStyle) === null || _v === void 0 ? void 0 : _v.PercentBarStyle) === null || _w === void 0 ? void 0 : _w.ToolTipText) === null || _x === void 0 ? void 0 : _x.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
-                        ' ',
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 3, checked: (_0 = (_z = (_y = data.ColumnStyle) === null || _y === void 0 ? void 0 : _y.PercentBarStyle) === null || _z === void 0 ? void 0 : _z.ToolTipText) === null || _0 === void 0 ? void 0 : _0.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
-                            "Percent Value",
-                            ' '),
-                        ' '),
-                    React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { checked: !!((_2 = (_1 = data.ColumnStyle) === null || _1 === void 0 ? void 0 : _1.PercentBarStyle) === null || _2 === void 0 ? void 0 : _2.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
-                            ((_4 = (_3 = data.ColumnStyle) === null || _3 === void 0 ? void 0 : _3.PercentBarStyle) === null || _4 === void 0 ? void 0 : _4.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_6 = (_5 = data.ColumnStyle) === null || _5 === void 0 ? void 0 : _5.PercentBarStyle) === null || _6 === void 0 ? void 0 : _6.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))),
-                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 }))))) : null,
-        !data.ColumnStyle ? (React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_7 = data.Style) !== null && _7 !== void 0 ? _7 : {}, UpdateStyle: (Style) => {
+        React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_a = data.Style) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (Style) => {
                 props.onChange(Object.assign(Object.assign({}, data), { Style }));
-            } })) : null));
+            } })));
 }
 exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -17,6 +17,9 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const FormatColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FormatColumnRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
+const constants_1 = require("./constants");
 const adjustDisplayFormat = (formatColumn, api) => {
     formatColumn = Object.assign({}, formatColumn);
     const formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
@@ -62,13 +65,6 @@ const adjustDisplayFormat = (formatColumn, api) => {
 };
 const adjustFormatColumn = (formatColumn, api) => {
     formatColumn = adjustDisplayFormat(formatColumn, api);
-    if (!api.scopeApi.isSingleNumericColumnScope(formatColumn.Scope) &&
-        !(api.scopeApi.areAllBooleanColumnsInScope(formatColumn.Scope) ||
-            api.scopeApi.scopeHasOnlyBooleanDataType(formatColumn.Scope))) {
-        // when people change the scope and select more than one (numeric) column
-        // we have to discard any column style we might have
-        delete formatColumn.ColumnStyle;
-    }
     return formatColumn;
 };
 function FormatColumnWizard(props) {
@@ -105,7 +101,7 @@ function FormatColumnWizard(props) {
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Scope',
-                details: 'Apply formatting to: one or more Columns or Data Types or the whole row',
+                details: 'Select which Columns will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
                 render: () => {
@@ -113,9 +109,19 @@ function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                isValid: (abObject, api, context) => {
+                    return abObject.Rule ? (0, EntityRulesEditor_1.isRuleValid)(abObject, api, context) : true;
+                },
+                title: 'Condition',
+                details: 'Build a Rule when the Format Column should be applied',
+                render: () => {
+                    return (React.createElement(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
+                },
+            },
             {
                 title: 'Style',
-                details: 'Format Column Style',
+                details: 'Create a Style for the Format Column',
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
                 renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
                 render: () => {

package/src/View/FormatColumn/Wizard/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = "NonBlanks";

package/src/View/FormatColumn/Wizard/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = void 0;
+exports.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = 'NonBlanks';

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -106,15 +106,15 @@ const FreeTextColumnSettingsWizardSection = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout_1.default, null,
             React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
-                React.createElement(Input_1.default, { autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
+                React.createElement(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
             React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
-                React.createElement(Input_1.default, { autoFocus: inEdit, onFocus: () => {
+                React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                         setColumnNameFocused(true);
                     }, onBlur: () => {
                         setColumnNameFocused(false);
                     }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
             React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                React.createElement(DropdownButton_1.default, { style: {
+                React.createElement(DropdownButton_1.default, { "data-name": "column-type-dropdown", style: {
                         width: '300px',
                         whiteSpace: 'normal',
                         overflow: 'hidden',
@@ -124,9 +124,9 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                         label: item.label,
                         onClick: () => handleDataTypeChange(item.value),
                     })) }, data.DataType ? data.DataType : 'Select Data Type')),
-            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.DataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.DataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                     props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
-                } })) : (React.createElement(AdaptableInput_1.default, { value: data.DataType === 'Date' && data.DefaultValue
+                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.DataType === 'Date' && data.DefaultValue
                     ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.DataType === 'Number' ? 'number' : data.DataType === 'Date' ? 'date' : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
             React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
@@ -135,8 +135,8 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                     }) })),
             ' ',
             data.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
-                React.createElement(Radio_1.default, { value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
-                React.createElement(Radio_1.default, { value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
+                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
+                React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
         ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
         React.createElement(rebass_1.Box, { mt: 2 },
             React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));

package/src/View/Layout/LayoutRadioSelector.js

@@ -14,6 +14,6 @@ const LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return React.createElement(Radio_1.default, { id: data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+    return (React.createElement(Radio_1.default, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
 exports.LayoutRadioSelector = LayoutRadioSelector;

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -15,5 +15,5 @@ declare class LayoutViewPanelComponent extends React.Component<LayoutViewPanelCo
     render(): any;
     private onSaveLayout;
 }
-export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "Layouts" | "moduleInfo" | "accessLevel" | "viewType" | "onSelectLayout" | "onSaveLayout" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
+export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Layouts" | "viewType" | "onSelectLayout" | "onSaveLayout" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
 export {};

package/src/View/Layout/Wizard/Components/ColumnLabels.js

@@ -19,7 +19,7 @@ const ColumnLabels = (props) => {
     const flexProps = {
         [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
     };
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
+    return (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-LayoutEditor__Legend", flexDirection: flexDirection }, flexProps, { width: "100%" }),
         showTitle ? (React.createElement(rebass_1.Text, { mr: 2 }, (0, AdaptableContext_1.useAdaptable)().api.internalApi.getCorrectEnglishVariant('Behaviours:'))) : null,
         labels.map((l, index) => {
             const enabled = !!l;

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -33,7 +33,7 @@ const AggregationsSectionSummary = () => {
     let content = null;
     if (entires.length) {
         content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId) },
-            React.createElement(Tag_1.Tag, null, aggregation /* TODO fix for Bogdan */))))));
+            React.createElement(Tag_1.Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
     }
     else {
         content = React.createElement(Tag_1.Tag, null, "No Aggregations");

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -39,7 +39,8 @@ const ColumnsSectionSummary = () => {
             const header = (_b = (_a = layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : '';
             const columnWidth = (_c = layout.ColumnWidthMap) === null || _c === void 0 ? void 0 : _c[columnId];
             const columnPinning = (_d = layout.PinnedColumnsMap) === null || _d === void 0 ? void 0 : _d[columnId];
-            const agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            let agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            agg = typeof agg === 'object' ? agg.type : agg;
             const sortIndex = ((_f = layout === null || layout === void 0 ? void 0 : layout.ColumnSorts) !== null && _f !== void 0 ? _f : []).findIndex((sort) => sort.ColumnId === columnId);
             const sortOrder = sortIndex != -1
                 ? {
@@ -158,7 +159,7 @@ const ColumnRow = (props) => {
     const behaviourHeader = 'Column ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviours');
     // width
     const columnWidth = (_d = props.layout.ColumnWidthMap) === null || _d === void 0 ? void 0 : _d[props.column.columnId];
-    return (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow" },
+    return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
         React.createElement(rebass_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
             React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" }, initialHeader),
             props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
@@ -167,24 +168,24 @@ const ColumnRow = (props) => {
             React.createElement(rebass_1.Flex, { mr: 2 },
                 React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
             React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(SimpleButton_1.default, { ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
+            React.createElement(SimpleButton_1.default, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
         isExpanded && (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
             React.createElement(rebass_1.Flex, { mb: 2 },
                 React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
                     React.createElement(FormLayout_1.FormRow, { label: "Column ID" },
                         React.createElement(Tag_1.Tag, null, props.column.friendlyName)),
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                        React.createElement(Input_1.default, { className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
+                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
                             }, value: columnWidth })),
                     React.createElement(FormLayout_1.FormRow, { label: "Pinning" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
 const ColumnsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();

package/src/View/Layout/Wizard/sections/SettingsSection.js

@@ -45,7 +45,7 @@ const SettingsSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Grid Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
-                    React.createElement(Radio_1.default, { onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
+                    React.createElement(Radio_1.default, { "data-name": "layout-type-table", onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
+                    React.createElement(Radio_1.default, { "data-name": "layout-type-pivot", onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
 };
 exports.SettingsSection = SettingsSection;

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.js

@@ -36,7 +36,7 @@ function PlusMinusRuleWizardSection(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: null,
             useAggregationQuery: null,
         } }));

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -50,11 +50,11 @@ const PlusMinusSettingsWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Nudge Value" },
-                        React.createElement(Input_1.default, { flex: 1, marginRight: 3, onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: (_a = data.NudgeValue) !== null && _a !== void 0 ? _a : '' })),
+                        React.createElement(Input_1.default, { "data-name": "nudge-value", flex: 1, marginRight: 3, onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: (_a = data.NudgeValue) !== null && _a !== void 0 ? _a : '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Nudge Type" },
                         React.createElement(rebass_1.Flex, null,
-                            React.createElement(Radio_1.default, { value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
-                            React.createElement(Radio_1.default, { marginLeft: 3, value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
+                            React.createElement(Radio_1.default, { "data-name": "nudge-type-always", value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
+                            React.createElement(Radio_1.default, { "data-name": "nudge-type-condition", marginLeft: 3, value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
         props.hasCondition && (React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }))));
 };
 exports.PlusMinusSettingsWizardSection = PlusMinusSettingsWizardSection;

package/src/View/Query/QueryViewPanel.d.ts

@@ -26,5 +26,5 @@ declare class QueryViewPanelComponent extends React.Component<QueryViewPanelComp
     onSelectedQueryChanged(queryName: string): void;
     runQuery(expression?: string): void;
 }
-export declare let QueryViewPanelControl: import("react-redux").ConnectedComponent<typeof QueryViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<QueryViewPanelComponent> & QueryViewPanelComponentProps, "api" | "NamedQueries" | "CurrentQuery" | "moduleInfo" | "accessLevel" | "CachedQueries" | "viewType" | "onAddCachedQuery" | "onRunQuery" | "onShowNamedQueries">>;
+export declare let QueryViewPanelControl: import("react-redux").ConnectedComponent<typeof QueryViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<QueryViewPanelComponent> & QueryViewPanelComponentProps, "api" | "accessLevel" | "NamedQueries" | "CurrentQuery" | "moduleInfo" | "CachedQueries" | "viewType" | "onAddCachedQuery" | "onRunQuery" | "onShowNamedQueries">>;
 export {};

package/src/View/Query/Wizard/NamedQuerySettingsWizardSection.js

@@ -36,7 +36,7 @@ const NamedQuerySettingsWizardSection = (props) => {
     return (React.createElement(WizardPanel_1.default, { "data-name": 'named-query-settings' },
         React.createElement(FormLayout_1.default, null,
             React.createElement(FormLayout_1.FormRow, { label: "Name" },
-                React.createElement(AdaptableInput_1.default, { value: data.Name, autoFocus: true, width: 300, type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) })),
+                React.createElement(AdaptableInput_1.default, { "data-name": "query-name", value: data.Name, autoFocus: true, width: 300, type: "text", placeholder: "Enter Named Query Name", onChange: (e) => handleColumnNameChange(e) })),
             ' ',
             errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
                 React.createElement(ErrorBox_1.default, null, errorMessage))) : null)));

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -34,13 +34,13 @@ const QuickSearchPopupComponent = (props) => {
         React.createElement(Panel_1.default, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(FormLayout_1.default, null,
-                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", marginLeft: 2, marginRight: 5, padding: 20, style: { height: '100%' }, placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, value: searchText, OnTextChange: search }))),
+                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { "data-name": "quick-search-text", type: "text", marginLeft: 2, marginRight: 5, padding: 20, style: { height: '100%' }, placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, value: searchText, OnTextChange: search }))),
         React.createElement(Panel_1.default, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(rebass_1.Flex, { flexDirection: "column" },
                 React.createElement(FormLayout_1.default, { columns: [1, 2] },
                     React.createElement(FormLayout_1.FormRow, null,
-                        React.createElement(CheckBox_1.CheckBox, { value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter Quick Search Results"))))),
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter Quick Search Results"))))),
         React.createElement(StyleComponent_1.StyleComponent, { style: { height: '100%' }, api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
 };
 function mapStateToProps(state, ownProps) {