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

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) {

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -99,14 +99,14 @@ const ScheduleScheduleWizard = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Frequency" },
-                        React.createElement(Radio_1.default, { mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
-                        React.createElement(Radio_1.default, { checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-recurring", mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
                     props.isOneOff ? (React.createElement(FormLayout_1.FormRow, { label: "Date" },
-                        React.createElement(AdaptableInput_1.default, { width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: ((_e = data.Schedule) === null || _e === void 0 ? void 0 : _e.OneOffDate) || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => {
+                        React.createElement(AdaptableInput_1.default, { "data-name": "one-off-date", width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: ((_e = data.Schedule) === null || _e === void 0 ? void 0 : _e.OneOffDate) || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => {
                         var _a, _b;
-                        return (React.createElement(CheckBox_1.CheckBox, { width: "33%", ml: 2, value: day.value, checked: (_b = (_a = data.Schedule) === null || _a === void 0 ? void 0 : _a.DaysOfWeek) === null || _b === void 0 ? void 0 : _b.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label));
+                        return (React.createElement(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, width: "33%", ml: 2, value: day.value, checked: (_b = (_a = data.Schedule) === null || _a === void 0 ? void 0 : _a.DaysOfWeek) === null || _b === void 0 ? void 0 : _b.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label));
                     }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Time" },
-                        React.createElement(AdaptableInput_1.default, { width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
+                        React.createElement(AdaptableInput_1.default, { "data-name": "time", width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
 };
 exports.ScheduleScheduleWizard = ScheduleScheduleWizard;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsGlue42.js

@@ -20,6 +20,6 @@ const ScheduleSettingsGlue42 = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { width: 300, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.glue42) === null || _a === void 0 ? void 0 : _a.Glue42Report) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", width: 300, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.glue42) === null || _a === void 0 ? void 0 : _a.Glue42Report) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
 };
 exports.ScheduleSettingsGlue42 = ScheduleSettingsGlue42;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsIPushPull.js

@@ -33,14 +33,14 @@ const ScheduleSettingsIPushPull = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _a === void 0 ? void 0 : _a.IPushPullReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _a === void 0 ? void 0 : _a.IPushPullReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Folder" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, ((_d = (_c = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _c === void 0 ? void 0 : _c.IPushPullReport) === null || _d === void 0 ? void 0 : _d.Folder) || 'Select Folder')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, ((_d = (_c = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _c === void 0 ? void 0 : _c.IPushPullReport) === null || _d === void 0 ? void 0 : _d.Folder) || 'Select Folder')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Page" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, ((_f = (_e = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _e === void 0 ? void 0 : _e.IPushPullReport) === null || _f === void 0 ? void 0 : _f.Page) || 'Select Page')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, ((_f = (_e = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _e === void 0 ? void 0 : _e.IPushPullReport) === null || _f === void 0 ? void 0 : _f.Page) || 'Select Page')),
                     React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
-                        React.createElement(Radio_1.default, { mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
-                        React.createElement(Radio_1.default, { value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
+                        React.createElement(Radio_1.default, { "data-name": "data-type", mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
+                        React.createElement(Radio_1.default, { "data-name": "data-live", value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(OnePageAdaptableWizard_1.FormDescriptionText, null, "Choose whether to send ipushpull Data as 'Snapshot' (One-off report) or 'Live Data' (updating as Grid updates)")))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsOpenFin.js

@@ -20,6 +20,6 @@ const ScheduleSettingsOpenFin = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.openFin) === null || _a === void 0 ? void 0 : _a.OpenFinReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.openFin) === null || _a === void 0 ? void 0 : _a.OpenFinReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
 };
 exports.ScheduleSettingsOpenFin = ScheduleSettingsOpenFin;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -39,14 +39,14 @@ const ScheduleSettingsReminder = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header (optional)", type: "string", value: (_a = props.reminderSchedule) === null || _a === void 0 ? void 0 : _a.Header })),
+                        React.createElement(Input_1.default, { "data-name": "header", width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header (optional)", type: "string", value: (_a = props.reminderSchedule) === null || _a === void 0 ? void 0 : _a.Header })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },
-                        React.createElement(Input_1.default, { width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
+                        React.createElement(Input_1.default, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
                     React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                        React.createElement(DropdownButton_1.default, { style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "message-type", style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "display-notification", checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "display-system-status", checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
 };
 exports.ScheduleSettingsReminder = ScheduleSettingsReminder;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -29,8 +29,8 @@ const ScheduleSettingsReport = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Export" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Destination" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-destination", columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
 };
 exports.ScheduleSettingsReport = ScheduleSettingsReport;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -65,17 +65,17 @@ const ShortcutSettingsWizard = (props) => {
                 React.createElement(FormLayout_1.default, { width: 400 },
                     React.createElement(FormLayout_1.FormRow, { label: "Key" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-key", style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: "Shortcut: Key", bodyText: ['The keyboard key that, when pressed, triggers the shortcut.'] }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Operation" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-operation", style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Operation', bodyText: [
                                     "The mathematical operation that is performed on the cell's current value - using the shortcut's 'value' - in order to calculate the new total for the cell.",
                                 ] }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Value" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
+                            React.createElement(Input_1.default, { "data-name": "shortcut-value", flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Value', bodyText: [
                                     "The number that is used - together with the shortcut's mathematical 'operation' and the current cell value - in order to calculate the new total for the cell.",
                                 ] }))))))));

package/src/View/SmartEdit/SmartEditPopup.js

@@ -59,11 +59,11 @@ class SmartEditPopupComponent extends React.Component {
                 }
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
-                React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
+                React.createElement(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
                     ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
-                React.createElement(Input_1.default, { value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
-                React.createElement(SimpleButton_1.default, { tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                React.createElement(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
+                React.createElement(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
                         this.submit();

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -38,17 +38,17 @@ const SpecialColumnSettingsWizardStep = (props) => {
                             { size: '30%', name: 'third' },
                         ] },
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
                                     .enableFilterOnSpecialColumns }, "Filterable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                             React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
         Boolean(possibleColumnTypes === null || possibleColumnTypes === void 0 ? void 0 : possibleColumnTypes.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
@@ -56,8 +56,8 @@ const SpecialColumnSettingsWizardStep = (props) => {
                 React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (_b = (0, chunk_1.default)(possibleColumnTypes !== null && possibleColumnTypes !== void 0 ? possibleColumnTypes : [], 2)) === null || _b === void 0 ? void 0 : _b.map(([first, second]) => {
                     var _a, _b, _c, _d, _e, _f;
                     return (React.createElement(FormLayout_1.FormRow, { key: first },
-                        first && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
-                        second && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
+                        first && (React.createElement(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
+                        second && (React.createElement(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
                 })))))));
 };
 exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;

package/src/View/StateManagement/StateManagementPopup.js

@@ -15,18 +15,18 @@ const StateManagementPopup = (props) => {
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
             React.createElement(HelpBlock_1.default, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
-            React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
+            React.createElement(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "predefined-config", header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
             ' ',
-            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json) }, "Load Predefined Config")),
+            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), "data-name": "load-predefined-config-button" }, "Load Predefined Config")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "initial-predefined-config", header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination"))));
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-initial-predefined-config-dropdown" }, "Select Export Destination"))));
 };
 exports.StateManagementPopup = StateManagementPopup;