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

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)

package/src/View/Components/StyleComponent.js

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

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

@@ -24,6 +24,6 @@ const ConditionalStyleSettingsWizardSettings = (props) => {
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "inlcude-grouped-rows", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
 };
 exports.ConditionalStyleSettingsWizardSettings = ConditionalStyleSettingsWizardSettings;

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

@@ -16,7 +16,6 @@ const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
-const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
 const ConditionalStyleSettingsWizardSettings_1 = require("./ConditionalStyleSettingsWizardSettings");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const ConditionalStyleWizard = (props) => {
@@ -43,16 +42,7 @@ const ConditionalStyleWizard = (props) => {
         return conditionalStyle;
     });
     const dispatch = (0, react_redux_1.useDispatch)();
-    const handleFinish = () => {
-        if (data) {
-            dispatch(ConditionalStyleRedux.ConditionalStyleEdit(conditionalStyle));
-        }
-        else {
-            dispatch(ConditionalStyleRedux.ConditionalStyleAdd(conditionalStyle));
-        }
-        props.onCloseWizard();
-    };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, sections: [
             {
                 title: 'Style',
                 details: 'Specify the Style to be applied conditionally',

package/src/View/DataSet/DataSetSelector.js

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

package/src/View/Export/ReportExportDropdown.js

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

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

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

package/src/View/FlashingCell/FlashingCellStyle.js

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

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

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

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

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

package/src/View/FormatColumn/FormatColumnSummary.js

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