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

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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-import type { AdaptablePredicate, AdaptablePredicateDef, AdaptableScope, AdaptableApi, AdaptableModule } from '../../../types';
+import type { AdaptableApi, AdaptableModule, AdaptablePredicate, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
@@ -13,6 +13,7 @@ export declare const isRuleValid: (abObject: {
 declare type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
+    showNoRule?: boolean;
     showPredicate?: boolean;
     showObservable?: boolean;
     showAggregation?: boolean;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityRulesEditor = exports.EntityRulesSummary = exports.isRuleValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -13,7 +14,6 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
-const react_1 = require("react");
 const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
 const isRuleValid = (abObject, api, context) => {
     var _a, _b, _c, _d, _e, _f;
@@ -52,20 +52,26 @@ const EntityRulesSummary = (props) => {
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const EntityRulesEditor = (props) => {
-    var _a, _b;
-    const { data, children, descriptions, predicateDefs, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const type = data.Rule.BooleanExpression != undefined
-        ? 'BooleanExpression'
-        : data.Rule.ObservableExpression != undefined && showObservable
-            ? 'ObservableExpression'
-            : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
-                ? 'AggregatedBooleanExpression'
-                : 'Predicate';
+    const type = data.Rule == undefined
+        ? 'NoRule'
+        : data.Rule.BooleanExpression != undefined
+            ? 'BooleanExpression'
+            : data.Rule.ObservableExpression != undefined && showObservable
+                ? 'ObservableExpression'
+                : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
+                    ? 'AggregatedBooleanExpression'
+                    : 'Predicate';
     const [selectedTab, setSelectedTab] = React.useState(type);
     const setType = (type) => {
         setSelectedTab(type);
-        if (type === 'BooleanExpression' && showBoolean) {
+        if (type === 'NoRule' && showNoRule) {
+            delete data.Rule;
+            props.onChange(Object.assign({}, data));
+        }
+        else if (type === 'BooleanExpression' && showBoolean) {
             props.onChange(Object.assign(Object.assign({}, data), { Rule: {
                     BooleanExpression: '',
                 } }));
@@ -88,8 +94,8 @@ const EntityRulesEditor = (props) => {
                 } }));
         }
     };
-    const predicateId = data.Rule.Predicate != undefined ? data.Rule.Predicate.PredicateId : undefined;
-    const predicateInputs = predicateId ? (_a = data.Rule.Predicate.Inputs) !== null && _a !== void 0 ? _a : [] : [];
+    const predicateId = ((_a = data.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) != undefined ? (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.Predicate.PredicateId : undefined;
+    const predicateInputs = predicateId ? (_d = (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.Predicate.Inputs) !== null && _d !== void 0 ? _d : [] : [];
     const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
     const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
     const predicateDefsOptions = predicateDefs
@@ -155,44 +161,39 @@ 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 } },
+                React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'NoRule' }, "No Condition"))) : null,
+            showNoRule ? (React.createElement(Tabs_1.Tabs.Content, { value: 'NoRule' },
+                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: !!data.Rule.Predicate, onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 :
-                _b.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
+                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) })))),
                 isValuesPredicateDef(currentPredicateDef) &&
                     'ColumnIds' in data.Scope &&
-                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: data.Rule.Predicate, scope: data.Scope })),
+                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: (_g = data.Rule) === null || _g === void 0 ? void 0 : _g.Predicate, scope: data.Scope })),
                 showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
                         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 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: data.Rule.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+            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 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: data.Rule.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+            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 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
+            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/ListBoxFilterForm.js

@@ -27,7 +27,7 @@ const ListBoxFilterForm = (props) => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
     const renderItemForAgGridStyle = (props) => {
-        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1 })));
+        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
     };
     const onClickItemColumnValue = (item) => {
         const index = UiSelectedColumnValues.indexOf(item);
@@ -59,6 +59,7 @@ const ListBoxFilterForm = (props) => {
                 checked: isActive,
                 onChange: () => onClickItemColumnValue(distinctValue.value),
                 disabled: props.disabled,
+                style: { width: '100%' },
             });
         }
         return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));

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

@@ -130,9 +130,9 @@ const NewScopeComponent = (props) => {
     }
     return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "Whole Row"))),
+            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
         React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Columns")),
+            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns")),
         React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
             React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types")),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
@@ -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/AdaptablePopupModuleView.js

@@ -111,6 +111,7 @@ const AdaptablePopupModuleView = (props) => {
                 "s not available in current Layout")));
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+        moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
         toggleButtonShowLayoutAssociatedObjects(),
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));

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/RangesComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison } from '../../PredefinedConfig/FormatColumnState';
+import { CellColorRange, ColumnComparison } from '../../PredefinedConfig/StyledColumnState';
 import { AdaptableScope } from '../../PredefinedConfig/Common/AdaptableScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -10,6 +10,11 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;
     updateColumnComparison: (columnComparison?: ColumnComparison) => void;
+    minMaxRangeValues: {
+        min: number;
+        max: number;
+    };
+    disabled?: boolean;
 }
 export interface RangesComponentState {
     ranges: CellColorRange[];
@@ -25,6 +30,8 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     changeRangeColor(index: number, value: string): void;
     changeRangeDirectionUp(index: number, checked: boolean): void;
     removeRange(index: number): void;
+    setRangeColMin(range: CellColorRange): void;
+    setRangeColMax(range: CellColorRange): void;
     addRange(): void;
     changeColumnComparisonMinValue(event: React.FormEvent<any>): void;
     private onMinColumnSelectedChanged;