@adaptabletools/adaptable 11.1.1-canary.2 → 11.1.3

package/src/View/ColorPicker.js

@@ -4,17 +4,29 @@ exports.ColorPicker = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../components/Input"));
+const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const tinycolor = require('tinycolor2');
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value } = props, restProps = tslib_1.__rest(props, ["api", "value"]);
-    const ABcolorChoicesOptions = ColorPalette.map((x) => (React.createElement("option", { key: x, value: x }, x)));
+    const optionsMap = ColorPalette.reduce((acc, colorItem) => (Object.assign(Object.assign({}, acc), { [StyleHelper_1.getVariableColor(colorItem)]: colorItem })), {});
+    const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
+        return (React.createElement("option", { key: x, value: x }, x));
+    });
     const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
-    value = React.useMemo(() => {
-        return tinycolor(value).toHexString();
+    const preparedValue = React.useMemo(() => {
+        const color = StyleHelper_1.getVariableColor(value);
+        return tinycolor(color).toHexString();
     }, [value]);
     return (React.createElement("div", { className: 'ColorPicker' },
-        React.createElement(Input_1.default, Object.assign({}, restProps, { value: value, ref: ref, type: "color", style: {
+        React.createElement(Input_1.default, Object.assign({}, restProps, { onChange: (event) => {
+                var _a;
+                /**
+                 * The value is not in the map when the color is not in the palette.
+                 */
+                const color = (_a = optionsMap[event.target.value]) !== null && _a !== void 0 ? _a : event.target.value;
+                props.onChange(color);
+            }, value: preparedValue, ref: ref, type: "color", style: {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
             }, list: "ABcolorChoices" })),

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

@@ -15,15 +15,16 @@ const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const ValueSelector_1 = require("../ValueSelector");
+const ICON_SIZE = 26;
 exports.AdaptableObjectListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
     const [wizardStepName, setWizardStepName] = React.useState(null);
-    const viewOptions = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties();
-    const EditWizard = (_b = viewOptions.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(viewOptions, props.data.abObject);
-    const deleteAction = (_c = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
+    const viewOptions = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
+    const EditWizard = (_c = viewOptions.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
+    const deleteAction = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.data.abObject);
     const teamSharingActivated = adaptable.api.teamSharingApi.isTeamSharingActivated() &&
         adaptable.api.teamSharingApi.hasTeamSharingFullRights();
     const entityType = props.module.moduleInfo.FriendlyName;
@@ -33,46 +34,50 @@ exports.AdaptableObjectListItem = (props) => {
     const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(props.data.abObject, moduleAccessLevel);
     const baseClassName = `${props.baseClassName}__Item`;
     const itemClassName = join_1.default(baseClassName, props.data.abObject.IsSuspended && `${baseClassName}--is-suspended`);
-    const handleCloseWizard = () => {
+    const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
         setWizardStepName(null);
-    };
-    const handleOpenWizard = (sectionName) => {
-        setIsEditWizardVisible(true);
-        if (sectionName) {
-            setWizardStepName(sectionName);
+    }, []);
+    const handleOnEdit = React.useCallback((sectionName) => {
+        var _a;
+        if (EditWizard) {
+            setIsEditWizardVisible(true);
+            if (sectionName) {
+                setWizardStepName(sectionName);
+            }
         }
-    };
+        (_a = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.onOpenEditPopup) === null || _a === void 0 ? void 0 : _a.call(viewOptions, props.data.abObject);
+    }, []);
     const hasSuspend = Boolean(viewOptions.getSuspendAction);
-    const actions = (_e = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.call(_d, (component, index) => {
+    const actions = (_f = (_e = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _e === void 0 ? void 0 : _e.map) === null || _f === void 0 ? void 0 : _f.call(_e, (component, index) => {
         return React.createElement(component, {
             data: props.data.abObject,
             key: index,
         });
     });
-    const iconSize = 26;
+    const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
     return (React.createElement(rebass_1.Flex, { as: "li", mb: 3, className: itemClassName },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_f = props.data.items) === null || _f === void 0 ? void 0 : _f.map((tag, index) => {
+        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_g = props.data.items) === null || _g === void 0 ? void 0 : _g.map((tag, index) => {
             var _a;
             return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
                     tag.label || tag.name,
                     EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
-                            handleOpenWizard(tag.name);
+                            handleOnEdit(tag.name);
                         } }))),
                 React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
                     tag.view &&
                         React.createElement(tag.view, {
                             data: props.data.abObject,
                         }),
-                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
+                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
         })),
         React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
             React.createElement(rebass_1.Flex, { justifyContent: "end" },
                 actions,
-                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: iconSize, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => dispatch(TeamSharingRedux_1.TeamSharingShare(props.data.abObject, props.module.moduleInfo.ModuleName, config)) })),
-                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: iconSize, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: iconSize, disabled: !Boolean(EditWizard), accessLevel: accessLevel, onClick: () => handleOpenWizard() })),
+                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => dispatch(TeamSharingRedux_1.TeamSharingShare(props.data.abObject, props.module.moduleInfo.ModuleName, config)) })),
+                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
+                React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: isEditDisabled, accessLevel: accessLevel, onClick: () => handleOnEdit() })),
             React.createElement(rebass_1.Box, { flex: 1 }),
             hasSuspend && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
                 React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)), suspendableObject: props.data.abObject, accessLevel: accessLevel })))),

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

@@ -31,5 +31,7 @@ exports.AdaptablePopupBody = (props) => {
         moduleInfo,
     };
     const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
-    return React.createElement(BodyComponent, Object.assign({ module: props.module }, moduleProps));
+    // key is to make sure state is reset between views
+    // most of the views use the `AdaptablePopupModuleView` component
+    return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
 };

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

@@ -17,21 +17,29 @@ exports.AdaptablePopupModuleView = (props) => {
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     react_redux_1.useSelector((state) => state);
+    const [abObjectType, setAbObjectType] = React.useState(null);
+    const moduleInfo = props.module.moduleInfo;
+    const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
+    const moduleViewProperties = props.module.getViewProperties();
+    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
         var _a, _b;
         return ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit';
     });
+    const handleOpenEditPopup = React.useCallback(() => {
+        if (EditWizard) {
+            setIsWizardOpen(true);
+        }
+        if (moduleViewProperties.onOpenEditPopup) {
+            moduleViewProperties.onOpenEditPopup();
+        }
+    }, []);
     React.useEffect(() => {
         var _a, _b;
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {
-            setIsWizardOpen(true);
+            handleOpenEditPopup();
         }
-    }, [(_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action]);
-    const [abObjectType, setAbObjectType] = React.useState(null);
-    const moduleInfo = props.module.moduleInfo;
-    const items = (_b = props.module) === null || _b === void 0 ? void 0 : _b.toViewAll();
-    const moduleViewProperties = props.module.getViewProperties();
-    const EditWizard = (_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(moduleViewProperties);
+    }, [(_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action]);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -44,23 +52,23 @@ exports.AdaptablePopupModuleView = (props) => {
     // e.g. filter
     let newButton = null;
     if ((_d = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _d === void 0 ? void 0 : _d.length) {
-        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjctType) => {
+        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjectType) => {
             var _a;
             return {
-                disabled: (abObjctType === null || abObjctType === void 0 ? void 0 : abObjctType.accessLevel) === 'ReadOnly',
+                disabled: (abObjectType === null || abObjectType === void 0 ? void 0 : abObjectType.accessLevel) === 'ReadOnly',
                 onClick: () => {
-                    setAbObjectType(abObjctType);
-                    setIsWizardOpen(true);
+                    setAbObjectType(abObjectType);
+                    handleOpenEditPopup();
                 },
-                label: (_a = abObjctType.label) !== null && _a !== void 0 ? _a : abObjctType.name,
+                label: (_a = abObjectType.label) !== null && _a !== void 0 ? _a : abObjectType.name,
             };
         });
         newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: 'Create ' + moduleInfo.FriendlyName },
             React.createElement(icons_1.Icon, { name: "plus" }),
             " New"));
     }
-    else if (EditWizard) {
-        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
+    else if (EditWizard || moduleViewProperties.onOpenEditPopup) {
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
                 color: 'var(--ab-color-text-on-add)',
                 fill: 'var(--ab-color-text-on-add)',
                 background: 'var(--ab-color-action-add)',
@@ -76,5 +84,5 @@ exports.AdaptablePopupModuleView = (props) => {
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton },
         (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 && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+        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/WindowPopups/WindowPopups.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { AdaptableApi } from '../../../../../types';
 export interface WindowPopupChildProps {
     onDismiss: () => void;
     popupProps: any;
+    api: AdaptableApi;
 }
 export declare const WindowPopups: React.FunctionComponent;

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

@@ -6,6 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PanelWithImage_1 = require("../../Panels/PanelWithImage");
 const Utilities_1 = require("../Utilities");
 const windowFactory_1 = require("./windowFactory");
 const NoopComponent = () => {
@@ -13,20 +15,22 @@ const NoopComponent = () => {
 };
 exports.WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
+    const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const windowItems = react_redux_1.useSelector((state) => state.Popup.WindowPopup.PopupList);
     return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem, index) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const Component = (_a = windowFactory_1.windowFactory[windowItem.Id]) !== null && _a !== void 0 ? _a : NoopComponent;
-        const _f = windowItem.PopupProps, { windowModalProps } = _f, restPopupProps = tslib_1.__rest(_f, ["windowModalProps"]);
+        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = tslib_1.__rest(_g, ["windowModalProps"]);
         const handleDismiss = () => {
             dispatch(PopupRedux_1.PopupWindowHide(windowItem.Id));
         };
-        const size = (_c = (_b = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : Utilities_1.getWindowPopupSize();
-        const position = (_e = (_d = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _d === void 0 ? void 0 : _d.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size);
+        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : Utilities_1.getWindowPopupSize();
+        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : Utilities_1.getMiddlePosition(size);
         return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
                     setWindowModalSettings((settingsMap) => (Object.assign(Object.assign({}, settingsMap), { [windowItem.Id]: settings })));
                 }, handleSelector: '.ab-Window-Modal .ab-Panel__header', size: size, position: position }), fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(Component, { onDismiss: handleDismiss, popupProps: restPopupProps })));
+            React.createElement(PanelWithImage_1.PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" },
+                React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }))));
     })));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_LAYOUT_EDITOR = "WINDOW_LAYOUT_EDITOR";
+export declare const WINDOW_QUERY_EDITOR = "WINDOW_QUERY_EDITOR";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.WINDOW_LAYOUT_EDITOR = void 0;
+exports.windowFactory = exports.WINDOW_QUERY_EDITOR = exports.WINDOW_LAYOUT_EDITOR = void 0;
 const LayoutEditorStandalonePopup_1 = require("../../../Layout/LayoutEditorStandalonePopup");
+const ExpandedQueryPopup_1 = require("../../../Query/ExpandedQueryPopup");
 exports.WINDOW_LAYOUT_EDITOR = 'WINDOW_LAYOUT_EDITOR';
+exports.WINDOW_QUERY_EDITOR = 'WINDOW_QUERY_EDITOR';
 exports.windowFactory = {
     [exports.WINDOW_LAYOUT_EDITOR]: LayoutEditorStandalonePopup_1.LayoutEditorStandalonePopup,
+    [exports.WINDOW_QUERY_EDITOR]: ExpandedQueryPopup_1.ExpandedQueryPopup,
 };

package/src/View/Components/RangesComponent.js

@@ -63,9 +63,8 @@ class RangesComponent extends React.Component {
                                 const { value } = event.target;
                                 this.changeRangeMax(index, value);
                             }, mr: 2 }),
-                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeColor(index, value);
+                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                                this.changeRangeColor(index, color);
                             }, mr: 2, height: "100%" }),
                         this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, marginRight: 2, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
                         React.createElement(SimpleButton_1.default, { icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
@@ -84,9 +83,8 @@ class RangesComponent extends React.Component {
                             React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMaxValue(e);
                                     } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
-                            React.createElement(FormLayout_1.FormRow, { label: "Bar Colour:", first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (event) => {
-                                        const { value } = event.target;
-                                        this.changeColumnComparisonColor(value);
+                            React.createElement(FormLayout_1.FormRow, { label: "Bar Colour:", first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
+                                        this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }
     onRangesTypeChanged(checked) {

package/src/View/Components/StyleComponent.js

@@ -120,19 +120,16 @@ class StyleComponent extends React.Component {
         this.state.componentStyle.FontSize = checked ? Enums_1.FontSize.Medium : null;
         this.props.UpdateStyle(this.state.componentStyle);
     }
-    onBackColorSelectChange(event) {
-        let e = event.target;
-        this.state.componentStyle.BackColor = e.value;
+    onBackColorSelectChange(color) {
+        this.state.componentStyle.BackColor = color;
         this.props.UpdateStyle(this.state.componentStyle);
     }
-    onForeColorSelectChange(event) {
-        let e = event.target;
-        this.state.componentStyle.ForeColor = e.value;
+    onForeColorSelectChange(color) {
+        this.state.componentStyle.ForeColor = color;
         this.props.UpdateStyle(this.state.componentStyle);
     }
-    onBorderColorSelectChange(event) {
-        let e = event.target;
-        this.state.componentStyle.BorderColor = e.value;
+    onBorderColorSelectChange(color) {
+        this.state.componentStyle.BorderColor = color;
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontWeightChange(checked) {

package/src/View/Components/ValueSelector/index.d.ts

@@ -25,6 +25,7 @@ export declare namespace ValueSelector {
     };
 }
 declare type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
+    style?: React.CSSProperties;
     options: OPTION_TYPE[];
     value: ID_TYPE[];
     selectedMap?: Map<ID_TYPE, OPTION_TYPE>;

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

@@ -198,6 +198,6 @@ function ValueOptionsTags(props) {
             " ",
             remaining > 1 ? 'others' : 'other'));
     }, []);
-    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
+    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
 }
 exports.ValueOptionsTags = ValueOptionsTags;

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -11,6 +11,8 @@ exports.CustomToolbarWrapper = (props) => {
     let contentsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__contents';
     let buttonsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__buttons';
     const [contentsHTML, setContentsHTML] = react_1.useState('');
+    // dummy object which is used to force a re-render of the toolbar
+    const [revision, setRevision] = react_1.useState(1);
     const contentsDivRef = react_1.useRef(null);
     const { api } = AdaptableContext_1.useAdaptable();
     react_1.useLayoutEffect(() => {
@@ -65,7 +67,13 @@ exports.CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => (button.onClick ? button.onClick(button, dashboardContext) : null) },
+                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => {
+                        button.onClick ? button.onClick(button, dashboardContext) : null;
+                        setTimeout(() => {
+                            // mutate state to force a re-rendering
+                            setRevision(revision + 1);
+                        }, 16);
+                    } },
                     button.icon ? React.createElement("img", Object.assign({}, button.icon)) : null,
                     buttonLabel));
             }))));

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

@@ -204,11 +204,10 @@ function FormatColumnStyleWizardSection(props) {
                 PercentBarStyle: percentBarStyle,
             } }));
     };
-    const onForeColorSelectChange = (event) => {
+    const onForeColorSelectChange = (color) => {
         var _a;
-        let e = event.target;
         let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        percentBarStyle.BackColor = e.value;
+        percentBarStyle.BackColor = color;
         props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
                 PercentBarStyle: percentBarStyle,
             } }));

package/src/View/GridInfo/AdaptableObjectsSummary.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const AdaptableObjectsSummary: React.FunctionComponent;

package/src/View/GridInfo/AdaptableObjectsSummary.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableObjectsSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableObjectList_1 = require("../Components/AdaptableObjectList");
+exports.AdaptableObjectsSummary = () => {
+    const state = react_redux_1.useSelector((state) => state);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const modules = adaptable.ModuleService.getModuleCollection();
+    return (React.createElement(React.Fragment, null, [...modules].map(([moduleName, module]) => {
+        var _a;
+        if (!module.isModuleAvailable()) {
+            return null;
+        }
+        const items = (_a = module === null || module === void 0 ? void 0 : module.toViewAll) === null || _a === void 0 ? void 0 : _a.call(module);
+        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+            return null;
+        }
+        return (React.createElement("div", null,
+            React.createElement("b", null, module.moduleInfo.FriendlyName),
+            (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
+    })));
+};

package/src/View/GridInfo/GridInfoPopup.js

@@ -14,12 +14,18 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
 const version_1 = tslib_1.__importDefault(require("../../../version"));
 const ColumnInfoComponent_1 = require("./ColumnInfoComponent");
 const AdaptableOptionsComponent_1 = require("./AdaptableOptionsComponent");
+const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 exports.GridInfoPopup = (props) => {
     var _a, _b, _c;
     const entitlementService = props.api.internalApi.getEntitlementService();
     const showGridSummary = entitlementService.isGridInfoSectionVisible('GridSummary');
     const showAdaptableOptions = entitlementService.isGridInfoSectionVisible('AdaptableOptions');
     const showColumnInfo = entitlementService.isGridInfoSectionVisible('ColumnInfo');
+    /**
+     * Because it is not associated with a module yet, setting this flag to true.
+     * Needed for the logic weather to show radio buttons (buttons.length >= 2)
+     */
+    const showAdaptableObjects = true;
     const [state, setState] = React.useState({
         ActiveTab: ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) ? 'ColumnInfo'
             : showGridSummary
@@ -91,15 +97,17 @@ exports.GridInfoPopup = (props) => {
     let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
-    const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo].filter((item) => item).length > 1;
+    const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo, showAdaptableObjects].filter((item) => item).length > 1;
     return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info-sign' },
         React.createElement(rebass_1.Flex, { marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
-            showGridSummary && (React.createElement(Radio_1.default, { "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Grid Summary")),
-            showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Adaptable Options")),
-            showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Column Info"))))),
+            showGridSummary && (React.createElement(Radio_1.default, { "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
+            showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),
+            showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", marginRight: 3, value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Columns")),
+            showAdaptableObjects && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'AdaptableObjectsSummary', onChange: (_, e) => onShowGridSummaryChanged('AdaptableObjectsSummary') }, "Objects"))))),
         state.ActiveTab == 'GridSummary' && (React.createElement(rebass_1.Box, { margin: 2 },
             React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: propValueColItems, items: gridSummaries }))),
         state.ActiveTab == 'AdaptableOptions' && React.createElement(AdaptableOptionsComponent_1.AdaptableOptionsComponent, { api: props.api }),
         state.ActiveTab == 'ColumnInfo' && (React.createElement("div", null,
-            React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn })))));
+            React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn }))),
+        state.ActiveTab === 'AdaptableObjectsSummary' && React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)));
 };

package/src/View/Layout/LayoutEditorStandalonePopup.js

@@ -9,9 +9,9 @@ const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const PanelFooter_1 = require("../Components/Panels/PanelFooter");
-const PanelWithImage_1 = require("../Components/Panels/PanelWithImage");
 const LayoutEditorWizard_1 = require("./Wizard/LayoutEditorWizard");
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+const rebass_1 = require("rebass");
 exports.LayoutEditorStandalonePopup = (props) => {
     /**
      * This is here because the old code mutates the object.
@@ -69,8 +69,7 @@ exports.LayoutEditorStandalonePopup = (props) => {
         props.onDismiss();
     }, []);
     const finishDisabled = !layoutData.Name;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(PanelWithImage_1.PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: layoutModule.moduleInfo.Glyph, header: layoutModule.moduleInfo.FriendlyName, infoLink: layoutModule.moduleInfo.HelpPage, infoLinkDisabled: false, variant: "primary" },
-            React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { data: layoutData, api: adaptable.api, Layouts: layouts, moduleInfo: layoutModule.moduleInfo, onLayoutChange: setStateLayout, updateGoBackState: () => null })),
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+        React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { data: layoutData, api: adaptable.api, Layouts: layouts, moduleInfo: layoutModule.moduleInfo, onLayoutChange: setStateLayout, updateGoBackState: () => null }),
         React.createElement(PanelFooter_1.PanelFooter, { acceptDisabled: finishDisabled, onAccept: handleAccept, onCancel: handleCancel })));
 };

package/src/View/Layout/LayoutRadioSelector.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Layout } from '../../../types';
+export declare const LayoutRadioSelector: React.FunctionComponent<{
+    data: Layout;
+}>;

package/src/View/Layout/LayoutRadioSelector.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutRadioSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.LayoutRadioSelector = ({ data }) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+    const layouts = adaptable.api.layoutApi.getAllLayout();
+    const isDisabled = (layouts === null || layouts === void 0 ? void 0 : layouts.length) === 1;
+    const isSelected = currentLayout.Name === data.Name;
+    const handleToggle = React.useCallback(() => {
+        adaptable.api.layoutApi.setLayout(data.Name);
+    }, [isSelected]);
+    return React.createElement(Radio_1.default, { disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+};

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -347,10 +347,7 @@ exports.LayoutEditor = React.memo((props) => {
                                 React.createElement(icons_1.Icon, { name: "clear" }))));
                     } })),
             React.createElement(ListPanel, { className: "ab-LayoutEditor__PivotListPanel", header: React.createElement(rebass_1.Flex, { width: "100%", flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
-                    React.createElement(rebass_1.Text, null, "Pivoted Columns"),
-                    React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 0, checked: layout.EnablePivot, onChange: (checked) => {
-                            setLayout(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
-                        } }, "Enable")), bodyProps: { padding: 0 } },
+                    React.createElement(rebass_1.Text, null, "Pivoted Columns")), bodyProps: { padding: 0 } },
                 React.createElement(PivotList_1.PivotList, { pivotColumns: layout.PivotColumns, onPivotColumnsChange: onPivotColumnsChange, isDropDisabled: state.dropDisabledOnPivot, onReady: (dragEnd) => {
                         onDragEndRef.current.pivotList = dragEnd;
                     }, renderItem: (colId, clear) => {

package/src/View/Layout/Wizard/LayoutEditorWizard.js

@@ -12,6 +12,7 @@ const AdaptablePopover_1 = require("../../AdaptablePopover");
 const rebass_1 = require("rebass");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const ColumnLabels_1 = require("./LayoutEditor/ColumnLabels");
+const CheckBox_1 = require("../../../components/CheckBox");
 class LayoutEditorWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -80,7 +81,11 @@ class LayoutEditorWizard extends React.Component {
                                 ' '),
                             this.state.errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
                                 React.createElement(ErrorBox_1.default, null, this.state.errorMessage))) : null)),
-                    React.createElement(rebass_1.Flex, { flex: 1, pr: 2, alignItems: "center", justifyContent: "end" },
+                    React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center", justifyContent: "flex-end" },
+                        React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 0, checked: this.state.layout.EnablePivot, onChange: (checked) => {
+                                this.updateLayout({ EnablePivot: checked });
+                            } }, "Enable Pivot Layout")),
+                    React.createElement(rebass_1.Flex, { width: 120, pr: 2, alignItems: "center", justifyContent: "end" },
                         React.createElement(rebass_1.Text, { mr: 2 }, "Legend"),
                         React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, bodyText: [
                                 React.createElement(Panel_1.default, { variant: "modern", header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {

package/src/View/Query/ExpandedQueryPopup.d.ts

@@ -1,19 +1,3 @@
 import * as React from 'react';
-import * as QueryRedux from '../../Redux/ActionsReducers/QueryRedux';
-import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-import { NamedQuery } from '../../PredefinedConfig/QueryState';
-import { ExpressionEditorNamedQuery } from '../../components/ExpressionEditor/NamedQueryContext';
-interface ExpandedQueryPopupComponentProps extends ModuleViewPopupProps<ExpandedQueryPopupComponent> {
-    onRunQuery: (expression: string) => QueryRedux.QueryRunAction;
-    onAddNamedQuery: (namedQuery: NamedQuery) => QueryRedux.NamedQueryAddAction;
-}
-export interface ExpandedQueryPopupState {
-    namedQuery: ExpressionEditorNamedQuery;
-    expression: string;
-}
-declare class ExpandedQueryPopupComponent extends React.Component<ExpandedQueryPopupComponentProps, ExpandedQueryPopupState> {
-    constructor(props: ExpandedQueryPopupComponentProps);
-    render(): JSX.Element;
-}
-export declare let ExpandedQueryPopup: import("react-redux").ConnectedComponent<typeof ExpandedQueryPopupComponent, Pick<React.ClassAttributes<ExpandedQueryPopupComponent> & ExpandedQueryPopupComponentProps, never>>;
-export {};
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const ExpandedQueryPopup: React.FunctionComponent<WindowPopupChildProps>;