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

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -32,7 +32,7 @@ const HighlightStyle = (props) => {
             },
         },
     ];
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(rebass_1.Box, { "data-name": props.dataName },
         React.createElement(rebass_1.Flex, null,
             React.createElement(CheckBox_1.CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
                     props.onChange(checked);
@@ -99,35 +99,35 @@ const AlertBehaviourWizardSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
         React.createElement(Tabs_1.Tabs.Content, null,
-            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
+            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevet-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
                     onChange({
                         PreventEdit,
                     });
                 } },
                 "Prevent Cell Edit",
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
-            cellChangedAlert && (React.createElement(HighlightStyle, { highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
+            cellChangedAlert && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
                     onChange({ HighlightCell });
                 } })),
-            cellChangedAlert && (React.createElement(HighlightStyle, { highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
+            cellChangedAlert && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
                     onChange({ HighlightRow });
                 } })),
-            rowAddedAlert && (React.createElement(HighlightStyle, { highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
+            rowAddedAlert && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
                     onChange({ HighlightRow });
                 } })),
-            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
+            cellChangedAlert && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-cell", checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
                     onChange({ JumpToCell });
                 } }, "Jump To Cell")),
-            rowAddedAlert && (React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
+            rowAddedAlert && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
                     onChange({ JumpToRow });
                 } }, "Jump To Row")),
-            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
+            React.createElement(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
                     onChange({ ShowInDiv });
                 } },
                 "Show in separate ",
                 React.createElement(CodeBlock_1.CodeBlock, null, `<div />`),
                 " element"),
-            React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
+            React.createElement(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
                     onChange({ LogToConsole });
                 } }, "Log To Console"))));
 };

package/src/View/Alert/Wizard/AlertDisplayWizardSection.js

@@ -12,6 +12,7 @@ const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAle
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const DEFAULT_BUTTONS = [
     {
         Label: 'OK',
@@ -53,7 +54,7 @@ const AlertPreview = (_a) => {
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
         React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
 };
 exports.AlertPreview = AlertPreview;
@@ -73,7 +74,7 @@ const AlertDisplayWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
@@ -83,7 +84,7 @@ const AlertDisplayWizardSection = (props) => {
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
-        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Trigger and Condition)"),
@@ -91,7 +92,7 @@ const AlertDisplayWizardSection = (props) => {
                 React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageText, 
                     // onChange={(e: any) => onPredicateInputChange(e, index)}
                     onChange: (e) => onMessageTextChange(e) }))),
-        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Display options"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
@@ -104,7 +105,7 @@ const AlertDisplayWizardSection = (props) => {
                 ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { AlertButtons: ((_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons) || DEFAULT_BUTTONS, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
                     } }))) : null)),
-        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { autoFocus: false },
+        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Alert preview"),
             React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -56,7 +56,7 @@ class BulkUpdatePopupComponent extends React.Component {
                         ' ',
                         "Select from existing column values")),
                 React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.dataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.dataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
+                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "bulk-update", style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.dataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.dataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -31,7 +31,7 @@ const AdaptableObjectListItemView = (props) => {
             return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
                     labelEl,
-                    props.showEditButton && (React.createElement(SimpleButton_1.default, { accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
                             props.handleOnEdit(tag.name);
                         } }))),
                 React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },

package/src/View/Components/AdaptableObjectRow/index.js

@@ -8,12 +8,7 @@ const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 class AdaptableObjectRow extends React.Component {
     render() {
-        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { key: index, fontSize: 'var(--ab-font-size-3)', title: typeof colItem.Content === 'string' ? colItem.Content : undefined, style: {
-                flex: colItem.Size,
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-            }, "data-name": "list-group-cell", paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
+        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { className: "ab-AdaptableObjectRow__cell", "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined, flex: colItem.Size, paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
         const className = (0, join_1.default)('ab-AdaptableObjectRow', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended');
         return (React.createElement(rebass_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
     }

package/src/View/Components/Buttons/ButtonInfo.d.ts

@@ -4,6 +4,4 @@ export interface InfoButtonProps extends SimpleButtonProps {
     glyph?: string;
     tooltip?: string;
 }
-export declare class ButtonInfo extends React.Component<InfoButtonProps, {}> {
-    render(): JSX.Element;
-}
+export declare const ButtonInfo: React.FunctionComponent<InfoButtonProps>;

package/src/View/Components/Buttons/ButtonInfo.js

@@ -4,9 +4,7 @@ exports.ButtonInfo = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-class ButtonInfo extends React.Component {
-    render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "info", iconSize: 20, icon: "info", variant: "text" }, this.props)));
-    }
-}
+const ButtonInfo = (props) => {
+    return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent" }, props)));
+};
 exports.ButtonInfo = ButtonInfo;

package/src/View/Components/EntityRulesEditor/index.js

@@ -161,7 +161,8 @@ const EntityRulesEditor = (props) => {
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
+    const baseClassName = 'ab-EntityRulesEditor';
+    return (React.createElement(rebass_1.Flex, Object.assign({ className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
         children,
         React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
             showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
@@ -170,15 +171,9 @@ const EntityRulesEditor = (props) => {
                 React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
                 React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
-            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { value: "Predicate" },
+            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
                 React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, descriptions.selectPredicate),
-                React.createElement(DropdownButton_1.default, { style: {
-                        minWidth: '15rem',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        maxWidth: 'inherit',
-                    }, placeholder: "Select Rule", showClearButton: !!((_e = data.Rule) === null || _e === void 0 ? void 0 : _e.Predicate), onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_f = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _f === void 0 ? void 0 :
+                React.createElement(DropdownButton_1.default, { "data-name": "entity-rules-editor-predicate-dropdown", className: `${baseClassName}__predicate-dropdown`, placeholder: "Select Rule", showClearButton: !!((_e = data.Rule) === null || _e === void 0 ? void 0 : _e.Predicate), onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_f = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _f === void 0 ? void 0 :
                 _f.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
                     index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
                     React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
@@ -189,20 +184,16 @@ const EntityRulesEditor = (props) => {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,
                     } },
-                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                            color: 'var(--ab-color-text-on-add)',
-                            fill: 'var(--ab-color-text-on-add)',
-                            background: 'var(--ab-color-action-add)',
-                        }, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
                     "See Predicate documentation for more details and examples")))) : null,
             showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
-            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { value: 'BooleanExpression', paddingLeft: 0 },
+            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_h = data.Rule) === null || _h === void 0 ? void 0 : _h.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
-            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { value: 'ObservableExpression', paddingLeft: 0 },
+            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_j = data.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
-            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedBooleanExpression', paddingLeft: 0 },
+            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_k = data.Rule) === null || _k === void 0 ? void 0 : _k.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
 };
 exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/FilterForm/FilterForm.js

@@ -137,15 +137,14 @@ class FilterFormComponent extends React.Component {
         let closeButton = (React.createElement(ButtonClose_1.ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
         let clearFilterButton = (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
         const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
-        return (React.createElement("div", { "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
-            this.state.showTab && (React.createElement("div", null,
-                React.createElement(Radio_1.default, { marginLeft: 1, flex: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
+        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
+            this.state.showTab && (React.createElement(React.Fragment, null,
+                React.createElement(Radio_1.default, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
-                React.createElement(Radio_1.default, { marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
+                React.createElement(Radio_1.default, { "data-name": "predicates", marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
-            this.state.currentTab === 'values' && (React.createElement("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
-            this.state.currentTab === 'predicates' && (React.createElement("div", null,
+            this.state.currentTab === 'values' && (React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })),
+            this.state.currentTab === 'predicates' && (React.createElement(React.Fragment, null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
                 predicateDefs
@@ -156,15 +155,15 @@ class FilterFormComponent extends React.Component {
         var _a;
         const { editedColumnFilter } = this.state;
         const checked = ((_a = editedColumnFilter === null || editedColumnFilter === void 0 ? void 0 : editedColumnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId) === predicateDef.id;
-        return (React.createElement(rebass_1.Flex, { key: index, flexDirection: "column" },
-            React.createElement(Radio_1.default, { disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
+        return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate", key: index, flexDirection: "column" },
+            React.createElement(Radio_1.default, { "data-name": predicateDef.id, disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
+            React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate_inputs", flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
     }
     renderPredicateInput(predicateDef, filter) {
         var _a;
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: true, false, all(indeterminate)
-            return (React.createElement(rebass_1.Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
+            return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate-input", flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
                 React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
                         ? true
                         : filter.Predicate.Inputs[0] === 'false'
@@ -181,11 +180,7 @@ class FilterFormComponent extends React.Component {
                     } })));
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
-                    marginBottom: 5,
-                    flex: 1,
-                    fontSize: 'var( --ab-font-size-2)',
-                } }))));
+            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
     }
     isFilterDisabled() {
         var _a;

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -142,21 +142,15 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', alignHorizontal: "left", targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", style: {
-                    overflowY: 'auto',
-                    fontSize: 'var(--ab-font-size-2)',
-                    border: '1px solid var(--ab-color-primarydark)',
-                    background: 'var(--ab-color-defaultbackground)',
-                }, render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "quick-filter" },
-                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(React.Fragment, null,
-                        React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
-                            React.createElement("span", { style: { width: 20, marginRight: 10 } },
-                                React.createElement(icons_1.Icon, { name: "delete" })),
-                            "Clear"))),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', alignHorizontal: "left", targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "quick-filter" },
+                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
+                        React.createElement("span", { style: { width: 20, marginRight: 10 } },
+                            React.createElement(icons_1.Icon, { name: "delete" })),
+                        "Clear")),
+                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { style: {
+                React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),

package/src/View/Components/NewScopeComponent.js

@@ -144,6 +144,6 @@ const NewScopeComponent = (props) => {
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
             React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
                 React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged }))),
-        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { key: dataTypeOption.value, "data-name": "scope", checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
+        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
 };
 exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/PanelWithButton.js

@@ -21,11 +21,7 @@ class PanelWithButton extends React.Component {
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
                 this.props.headerText,
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                    }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
             React.createElement(rebass_1.Box, { style: { flex: 1 } }),
             buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,

package/src/View/Components/Panels/PanelWithImage.js

@@ -26,11 +26,7 @@ class PanelWithImageCmp extends React.Component {
                     React.createElement(rebass_1.Box, { marginRight: 2 }),
                     this.props.header,
                     React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                            color: 'var(--ab-color-text-on-add)',
-                            fill: 'var(--ab-color-text-on-add)',
-                            background: 'var(--ab-color-action-add)',
-                        }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
                 React.createElement(rebass_1.Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -71,9 +71,9 @@ const AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+            React.createElement(rebass_1.Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
                 !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts

@@ -8,4 +8,5 @@ export declare const AdaptablePopupDialog: React.FunctionComponent<React.PropsWi
     onHide: () => void;
     style?: React.CSSProperties;
     modalContainer?: string | HTMLElement;
+    dataName?: string;
 }>>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -46,19 +46,6 @@ const PopupDialog = (props) => {
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
-    const elementRef = React.useMemo(() => {
-        if (!modalContainer) {
-            return null;
-        }
-        let ref = null;
-        if (typeof modalContainer === 'string') {
-            ref = globalThis.document.querySelector(modalContainer);
-        }
-        else {
-            ref = modalContainer;
-        }
-        return ref;
-    }, [modalContainer]);
     if (modalContainer) {
         let ref = null;
         if (typeof modalContainer === 'string') {
@@ -67,15 +54,15 @@ const AdaptablePopupDialog = (props) => {
         else {
             ref = modalContainer;
         }
-        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
-        return (React.createElement(WindowDialog, { settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
+        return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
     }
     else {
         const modalStyle = Object.assign(Object.assign({}, style), (isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }));
-        return (React.createElement(PopupDialog, { onHide: onHide, style: modalStyle, className: className }, children));
+        return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
     }
 };
 exports.AdaptablePopupDialog = AdaptablePopupDialog;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -15,7 +15,7 @@ const PopupPanel = (props) => {
                 React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
                 React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
             React.createElement(rebass_1.Box, { style: { flex: 1 } }),
             props.button),

package/src/View/Components/Popups/AdaptablePopupTeamSharing.js

@@ -34,17 +34,17 @@ const AdaptablePopupTeamSharing = (props) => {
                             ": a \"live\" share that is automatically updated with every local change"))),
                 React.createElement(FormLayout_1.default, { padding: 2 },
                     React.createElement(FormLayout_1.FormRow, { label: "Name: " },
-                        React.createElement(Input_1.default, { autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
+                        React.createElement(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Share: " },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Radio_1.default, { checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
                             ' ',
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
                             ' '))),
                 React.createElement(rebass_1.Box, { marginTop: 3 },
                     React.createElement(rebass_1.Flex, { padding: 2 },
-                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onClose(), "data-name": "cancel" }, "Cancel"),
+                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
                         React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+                        React.createElement(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };
 exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

package/src/View/Components/ScopeComponent.js

@@ -41,22 +41,22 @@ class ScopeComponent extends React.Component {
                         React.createElement(DualListBoxEditor_1.DualListBoxEditor, { style: { flex: 1, overflow: 'hidden', height: '250px' }, AvailableValues: availableValues, SelectedValues: this.state.selectedColumnValues, HeaderAvailable: "Columns", HeaderSelected: "Columns In Style", onChange: (SelectedValues) => this.onColumnsSelectedChanged(SelectedValues) }))),
                     this.state.ScopeChoice == 'DataType' && (React.createElement(Panel_1.default, { "data-name": "datatype-scope", variant: "modern" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "date", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Date'), marginLeft: 2, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Date') }, "Date")),
-                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "number", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Number'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Number') }, "Number")),
-                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "string", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('String'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'String') }, "String")),
-                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)

package/src/View/Components/Selectors/ColumnValueSelector.js

@@ -74,8 +74,8 @@ class ColumnValueSelector extends React.Component {
             ]
             : this.state.distinctColumnValues;
         const dd = (React.createElement("div", null,
-            React.createElement(DropdownButton_1.default, { className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
-        const input = (React.createElement(AdaptableInput_1.default, { type: this.props.selectedColumn
+            React.createElement(DropdownButton_1.default, { "data-name": "bulkupdate-value-selector", className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
+        const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: this.props.selectedColumn
                 ? UIHelper_1.default.getDescriptionForDataType(this.props.selectedColumn.dataType)
                 : 'text', placeholder: this.props.selectedColumn
                 ? UIHelper_1.default.getPlaceHolderforDataType(this.props.selectedColumn.dataType)