@adaptabletools/adaptable 13.0.0-canary.17 → 13.0.0-canary.19

package/src/View/Components/StyleComponent.js

@@ -25,7 +25,7 @@ class StyleComponent extends React.Component {
         };
     }
     render() {
-        const Cmp = this.props.headless ? React.Fragment : Panel_1.default;
+        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
         const cmpProps = this.props.headless
             ? {}
             : {
@@ -36,15 +36,15 @@ class StyleComponent extends React.Component {
         const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
-        return (React.createElement(Cmp, Object.assign({}, cmpProps),
+        return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
             ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio_1.default, { value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
+                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
                 ' ',
-                React.createElement(Radio_1.default, { marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
+                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
                 React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(DropdownButton_1.default, { margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
+                React.createElement(DropdownButton_1.default, { "data-name": "select-class-anme", margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
                         minWidth: '15rem',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
@@ -64,35 +64,30 @@ class StyleComponent extends React.Component {
                             coloursSpellingVariant),
                         React.createElement(FormLayout_1.default, { columns: [1, 2] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                     "Set Back ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                     "Set Fore ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                     "Set Border ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
                         React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
                         React.createElement(FormLayout_1.default, { columns: [1] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-weight-bold", margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-style-italic", margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-size", margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
                             React.createElement(FormLayout_1.FormRow, null, this.state.componentStyle.FontSize != null && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(DropdownButton_1.default, { style: {
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        maxWidth: 'inherit',
-                                    }, mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                React.createElement(DropdownButton_1.default, { mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
                                         value: enumName,
                                         label: enumName,
                                         onClick: () => this.onFontSizeChange(enumName),

package/src/View/ConditionalStyle/Wizard/ConditionalStyleSettingsWizardSettings.js

@@ -24,6 +24,6 @@ const ConditionalStyleSettingsWizardSettings = (props) => {
                 React.createElement(FormLayout_1.default, null,
                     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": "inlcude-grouped-rows", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
 };
 exports.ConditionalStyleSettingsWizardSettings = ConditionalStyleSettingsWizardSettings;

package/src/View/DataSet/DataSetSelector.js

@@ -14,6 +14,6 @@ const DataSetSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.dataSetApi.setDataSet(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": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
 exports.DataSetSelector = DataSetSelector;

package/src/View/Export/ExportViewPanel.js

@@ -84,7 +84,7 @@ class ExportViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, width: "100%", fontSize: "small", items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
             React.createElement(rebass_1.Flex, { className: (0, join_1.default)(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isCustomReport(currentReport), accessLevel: accessLevel }),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isServerReport(currentReport), accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),
                 React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
                 this.props.api.internalApi
@@ -102,9 +102,9 @@ class ExportViewPanelComponent extends React.Component {
             ...this.props.api.exportApi.getAvailableSystemReports(),
             ...this.props.UserReports.map((r) => r.Name),
         ];
-        const customReports = this.props.api.exportApi.getAllCustomReports();
-        if (ArrayExtensions_1.default.IsNotNullOrEmpty(customReports)) {
-            reportNames.push(...customReports.map((r) => r.name));
+        const serverReports = this.props.api.exportApi.getAllServerReports();
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(serverReports)) {
+            reportNames.push(...serverReports.map((r) => r.name));
         }
         return reportNames;
     }

package/src/View/Export/ReportExportDropdown.js

@@ -32,7 +32,7 @@ const ReportExportDropdown = (props) => {
     if ((report === null || report === void 0 ? void 0 : report.Name) === GeneralConstants_1.VISUAL_DATA_REPORT) {
         destinationItems.forEach((item) => (item.disabled = item.label === Enums_1.ExportDestination.Excel ? false : true));
     }
-    return (React.createElement(DropdownButton_1.default, { columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
+    return (React.createElement(DropdownButton_1.default, { "data-name": "export-dropdown", columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
         React.createElement(icons_1.Icon, { name: "export" })));
 };
 exports.ReportExportDropdown = ReportExportDropdown;

package/src/View/Export/Wizard/ReportNameWizardSection.js

@@ -33,16 +33,15 @@ const ReportNameWizardSection = (props) => {
     const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const validCheck = (0, exports.isValidReportName)(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, null,
-            React.createElement(FormLayout_1.default, { columns: [1, 2] },
-                React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
-                    React.createElement(Input_1.default, { width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
-                            props.onChange(Object.assign(Object.assign({}, data), { Name: e.target.value }));
-                        } })),
-                React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(React.Fragment, null),
-                    ErrorMessage ? React.createElement(ErrorBox_1.default, null, ErrorMessage) : null)))));
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(FormLayout_1.default, { columns: [1, 2] },
+            React.createElement(FormLayout_1.FormRow, null,
+                React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
+                React.createElement(Input_1.default, { "data-name": "export-name", width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { Name: e.target.value }));
+                    } })),
+            React.createElement(FormLayout_1.FormRow, null,
+                React.createElement(React.Fragment, null),
+                ErrorMessage ? React.createElement(ErrorBox_1.default, null, ErrorMessage) : null))));
 };
 exports.ReportNameWizardSection = ReportNameWizardSection;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -8,13 +8,13 @@ const StylePreview_1 = require("../../components/StylePreview");
 const FlashingCellStyle = (props) => {
     const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
     return (react_1.default.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row" }, boxProps),
-        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
             "Up ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
             "Down",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { flex: 1, styleObject: props.data.NeutralChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
             "Neutral ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };

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/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) {
@@ -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,7 +383,7 @@ 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);

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

@@ -40,12 +40,8 @@ const FormatColumnSettingsWizardSection = (props) => {
             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,
@@ -53,6 +49,6 @@ const FormatColumnSettingsWizardSection = (props) => {
                             })), columns: ['label'] }, data.CellAlignment ? data.CellAlignment : 'Select Option')),
                     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.js

@@ -28,7 +28,7 @@ const renderFormatColumnStyleWizardSummary = (data) => {
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
-    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) {

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/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/ColumnsSection.js

@@ -159,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 },
@@ -168,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/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/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) {