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

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -64,23 +64,23 @@ const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
-                        React.createElement(Radio_1.default, { mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio_1.default, { checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
                             React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
-                            React.createElement(Input_1.default, { readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
                                     const value = event.target.value;
                                     setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                 } }),
                             React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
                         duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
                                 ((_c = (_b = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'cell')), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox_1.CheckBox, { mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
                                 ((_e = (_d = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _d === void 0 ? void 0 : _d.includes) === null || _e === void 0 ? void 0 : _e.call(_d, 'row')), tabIndex: -1 }, "Row"),
-                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
                                 ((_g = (_f = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _f === void 0 ? void 0 : _f.includes) === null || _g === void 0 ? void 0 : _g.call(_f, 'aggFuncCell')), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -44,9 +44,6 @@ const FlashingCellWizard = (props) => {
         UpChangeStyle: (0, react_1.useCallback)(updateProperty('UpChangeStyle'), []),
         NeutralChangeStyle: (0, react_1.useCallback)(updateProperty('NeutralChangeStyle'), []),
     };
-    const flashStyleComponent = (React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
-            updateStyles[styleName](style);
-        } }));
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
         if (props.data) {
@@ -81,7 +78,10 @@ const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose the Flashing Styles',
-                render: () => React.createElement(rebass_1.Box, { padding: 2 }, flashStyleComponent),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                            updateStyles[styleName](style);
+                        } }))),
                 renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },

package/src/View/FormatColumn/FormatColumnSummary.js

@@ -35,7 +35,7 @@ class FormatColumnSummaryComponent extends React.Component {
         this.state = UIHelper_1.UIHelper.getEmptyConfigState();
     }
     render() {
-        let formatColumn = this.props.api.formatColumnApi.getFormatColumnForColumn(this.props.summarisedColumn);
+        const [formatColumn] = this.props.api.formatColumnApi.getFormatColumnsForColumn(this.props.summarisedColumn);
         let noFormatColumn = formatColumn == null;
         let formatColumnRow;
         if (noFormatColumn) {

package/src/View/FormatColumn/MoveFormatColumn.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, FormatColumn } from '../../types';
+export declare const MoveFormatColumn: React.FunctionComponent<{
+    data: FormatColumn;
+    id?: string;
+    accessLevel: AccessLevel;
+}>;

package/src/View/FormatColumn/MoveFormatColumn.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveFormatColumn = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const FormatColumnRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/FormatColumnRedux"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const MoveFormatColumn = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const formatColumn = adaptable.api.formatColumnApi.getAllFormatColumn();
+    const handleMoveUp = React.useCallback(() => {
+        dispatch(FormatColumnRedux.FormatColumnMoveUp(props.data));
+    }, []);
+    const handleMoveDown = React.useCallback(() => {
+        dispatch(FormatColumnRedux.FormatColumnMoveDown(props.data));
+    }, []);
+    if ((formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.length) <= 1) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SimpleButton_1.default, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }),
+        React.createElement(SimpleButton_1.default, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })));
+};
+exports.MoveFormatColumn = MoveFormatColumn;

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

@@ -100,7 +100,7 @@ exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     var _a, _b, _c;
     return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
-        React.createElement(CheckBox_1.CheckBox, { checked: (_c = (_b = data.DisplayFormat.Options.CustomDisplayFormats) === null || _b === void 0 ? void 0 : _b.some) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => item === customFormatter.id), onChange: (checked) => {
+        React.createElement(CheckBox_1.CheckBox, { "data-name": customFormatter.id, checked: (_c = (_b = data.DisplayFormat.Options.CustomDisplayFormats) === null || _b === void 0 ? void 0 : _b.some) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => item === customFormatter.id), onChange: (checked) => {
                 var _a, _b, _c;
                 let newCustomFormats = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Options) === null || _b === void 0 ? void 0 : _b.CustomDisplayFormats) !== null && _c !== void 0 ? _c : [];
                 if (checked) {
@@ -125,7 +125,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     }
     // need to see if all columns are numeric or date
     if ('ColumnIds' in scope) {
-        const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnFromId(c));
+        const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnFromId(c)).filter(Boolean);
         const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
         if (columnDataTypes.length == 1 && columnDataTypes[0] == 'Number') {
             return 'Number';
@@ -150,7 +150,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
-const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
+const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -165,7 +165,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ")."),
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
-                        React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
+                        React.createElement(Input_1.default, { "data-name": "patern", value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
                         React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options)))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
@@ -186,7 +186,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                             Size: 1,
                         },
                         {
-                            Content: (React.createElement(SimpleButton_1.default, { onClick: () => setFormatOption('Pattern', Pattern) }, "Apply")),
+                            Content: (React.createElement(SimpleButton_1.default, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern) }, "Apply")),
                             Size: 1,
                         },
                     ] })))))));
@@ -250,16 +250,16 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }))),
+                            React.createElement(Input_1.default, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }))),
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
-                            React.createElement(Input_1.default, { type: "number", min: "0", 
+                            React.createElement(Input_1.default, { "data-name": "fraction-digits", type: "number", min: "0", 
                                 // max="20"
                                 value: typeof data.DisplayFormat.Options.FractionDigits === 'number'
                                     ? data.DisplayFormat.Options.FractionDigits
@@ -267,13 +267,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                     ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
                                     : undefined) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Digits" },
-                            React.createElement(Input_1.default, { type: "number", min: "0", value: data.DisplayFormat.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', Number(e.currentTarget.value)) })),
+                            React.createElement(Input_1.default, { "data-name": "integer-digits", type: "number", min: "0", value: data.DisplayFormat.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', Number(e.currentTarget.value)) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Multiplier" },
-                            React.createElement(Input_1.default, { type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
+                            React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })))))),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -286,11 +286,11 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { margin: 2 },
                         React.createElement(FormLayout_1.FormRow, { label: "Show As:" },
-                            React.createElement(Radio_1.default, { marginLeft: 2, checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
+                            React.createElement(Radio_1.default, { "data-name": "preset-percentage", marginLeft: 2, checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-thousand", marginLeft: 3, checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Examples"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -331,15 +331,15 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                 React.createElement(rebass_1.Flex, { flexDirection: "column" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
                         React.createElement(FormLayout_1.FormRow, { label: "Case: " },
-                            React.createElement(Radio_1.default, { checked: data.DisplayFormat.Options.Case == 'Lower', onChange: (checked) => setFormatOption('Case', 'Lower') }, "Lower"),
-                            React.createElement(Radio_1.default, { marginLeft: 2, checked: data.DisplayFormat.Options.Case == 'Upper', onChange: (checked) => setFormatOption('Case', 'Upper') }, "Upper"),
-                            React.createElement(Radio_1.default, { marginLeft: 2, checked: data.DisplayFormat.Options.Case == 'Sentence', onChange: (checked) => setFormatOption('Case', 'Sentence') }, "Sentence"),
-                            React.createElement(Radio_1.default, { marginLeft: 2, checked: data.DisplayFormat.Options.Case == undefined, onChange: (checked) => setFormatOption('Case', undefined) }, "None"),
-                            React.createElement(CheckBox_1.CheckBox, { marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
+                            React.createElement(Radio_1.default, { "data-name": "case-lower", checked: data.DisplayFormat.Options.Case == 'Lower', onChange: (checked) => setFormatOption('Case', 'Lower') }, "Lower"),
+                            React.createElement(Radio_1.default, { "data-name": "case-upper", marginLeft: 2, checked: data.DisplayFormat.Options.Case == 'Upper', onChange: (checked) => setFormatOption('Case', 'Upper') }, "Upper"),
+                            React.createElement(Radio_1.default, { "data-name": "case-sentence", marginLeft: 2, checked: data.DisplayFormat.Options.Case == 'Sentence', onChange: (checked) => setFormatOption('Case', 'Sentence') }, "Sentence"),
+                            React.createElement(Radio_1.default, { "data-name": "case-none", marginLeft: 2, checked: data.DisplayFormat.Options.Case == undefined, onChange: (checked) => setFormatOption('Case', undefined) }, "None"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })))))),
+                            React.createElement(Input_1.default, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -383,13 +383,13 @@ const FormatColumnFormatWizardSection = (props) => {
         return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        return renderDateFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
+        return renderDateFormat(data, update, setFormatOption, customScopedFormatters);
     }
     if (Type === 'StringFormatter') {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
-        "Setting a Display Format is only available if ",
+        "Setting a Display Format is only possible if ",
         React.createElement("b", null, "all"),
         " the columns in Scope are Numeric, String or Date."));
 };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormatColumn } from '../../../../types';
+declare type FormatColumnRuleWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+    defaultPredicateId: string;
+};
+export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnRuleWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+function FormatColumnRuleWizardSection(props) {
+    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
+        // TODO see what is this
+        predicateDefs: api.formatColumnApi.getFormatColumnDefsForScope(data.Scope), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showPredicate: !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+            selectPredicate: 'Select a Format Column Rule - to be applied when data changes',
+            useBooleanQuery: (React.createElement(React.Fragment, null,
+                "Use an BooleanQuery if ",
+                React.createElement("i", null, "Scope"),
+                " 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 '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 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+        } }));
+}
+exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const constants_1 = require("./constants");
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -14,12 +15,29 @@ const renderFormatColumnScopeSummary = (data) => {
 };
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-            rowScope: 'Apply a style to an entire row',
+            rowScope: 'Format all columns in the row',
             columnScope: 'Select columns to format',
         }, scope: data.Scope, updateScope: (Scope) => {
-            props.onChange(Object.assign(Object.assign({}, data), { Scope }));
+            var _a;
+            const newData = Object.assign(Object.assign({}, data), { Scope });
+            const wholeRow = api.scopeApi.scopeIsAll(Scope);
+            if ((_a = newData.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) {
+                if (wholeRow) {
+                    // if scope is whole row, a predicate cannot be present, so we set the rule
+                    // to be a boolean expression
+                    delete newData.Rule.Predicate;
+                    newData.Rule.BooleanExpression = '';
+                }
+                else {
+                    // if scope is not whole row, if you have a predicate, reset it
+                    newData.Rule.Predicate = {
+                        PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                    };
+                }
+            }
+            props.onChange(newData);
         } }));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

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

@@ -6,13 +6,9 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const react_1 = require("react");
-const LoggingHelper_1 = require("../../../Utilities/Helpers/LoggingHelper");
 const Tag_1 = require("../../../components/Tag");
 let alignmentOptions = [
     { value: 'Left', label: 'Left' },
@@ -25,9 +21,6 @@ const renderFormatColumnSettingsSummary = (data) => {
         React.createElement(rebass_1.Text, null,
             "Cell alignment ",
             React.createElement(Tag_1.Tag, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
-        data.HeaderName ? (React.createElement(rebass_1.Text, { mt: 3 },
-            "Header name ",
-            React.createElement(Tag_1.Tag, null, data.HeaderName))) : null,
         React.createElement(rebass_1.Text, { mt: 3 },
             "Include grouped rows ",
             React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
@@ -41,40 +34,21 @@ const FormatColumnSettingsWizardSection = (props) => {
     const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
     };
-    const onHeaderNameChanged = (event) => {
-        let e = event.target;
-        props.onChange(Object.assign(Object.assign({}, data), { HeaderName: e.value }));
-    };
-    const [hasHeaderName, setHasHeaderName] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        const hasCustomHeaderName = StringExtensions_1.default.IsNotNullOrEmpty(data.HeaderName);
-        setHasHeaderName(hasCustomHeaderName);
-        if (hasCustomHeaderName) {
-            (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: The 'FormatColumn.HeaderName' property is deprecated; use a Layout custom Column Header instead!`);
-        }
-    }, []);
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
-                        React.createElement(DropdownButton_1.default, { style: {
+                        React.createElement(DropdownButton_1.default, { "data-name": "cell-alignment-dropdown", style: {
                                 minWidth: '15rem',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                maxWidth: 'inherit',
                             }, placeholder: "Select Option", showClearButton: !!data.CellAlignment, onClear: () => onCellAlignmentSelectChanged(null), items: alignmentOptions.map((item) => ({
                                 value: item.value,
                                 label: item.label,
                                 onClick: () => onCellAlignmentSelectChanged(item.value),
                             })), columns: ['label'] }, data.CellAlignment ? data.CellAlignment : 'Select Option')),
-                    hasHeaderName && api.scopeApi.isSingleColumnScope(data.Scope) && (React.createElement(FormLayout_1.FormRow, { label: "Header Name" },
-                        React.createElement(Input_1.default, { value: data.HeaderName, onChange: (e) => onHeaderNameChanged(e), style: { minWidth: '15rem' } }),
-                        ' ')),
                     React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-export declare const isFormatColumnStyleValid: (data: FormatColumn, api: AdaptableApi) => true | "No format applied" | "Invalid Cell Range" | "Invalid Column Comparison Range";
+export declare const isFormatColumnStyleValid: (data: FormatColumn, api: AdaptableApi) => true | "No format applied";
 declare type FormatColumnStyleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
-export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => any;
-export declare const renderFormatColumnStyleSummary: (data: FormatColumn, api: AdaptableApi) => any;
+export declare const renderFormatColumnStyleWizardSummary: (data: FormatColumn) => JSX.Element;
+export declare const renderFormatColumnStyleSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
 export declare function FormatColumnStyleWizardSection(props: FormatColumnStyleWizardSectionProps): JSX.Element;
 export {};