@adaptabletools/adaptable 11.1.1 → 11.1.2

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"))))),
+            showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", marginRight: 3, value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Column Info")),
+            showAdaptableObjects && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'AdaptableObjectsSummary', onChange: (_, e) => onShowGridSummaryChanged('AdaptableObjectsSummary') }, "Adaptable 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/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>;

package/src/View/Query/ExpandedQueryPopup.js

@@ -9,62 +9,47 @@ const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QueryRedux"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-class ExpandedQueryPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            namedQuery: false,
-            expression: this.props.popupParams.value,
-        };
-    }
-    render() {
-        const isExpressionValid = this.props.api.internalApi
-            .getQueryLanguageService()
-            .validateBoolean(this.state.expression, ModuleConstants_1.QueryModuleId).isValid;
-        const initialData = this.props.api.internalApi.getQueryPreviewData();
-        const namedQueryValidationError = this.state.namedQuery
-            ? this.props.api.queryApi.isValidNamedQueryName(this.state.namedQuery).message
-            : '';
-        const hasNamedQueryError = StringExtensions_1.IsNotNullOrEmpty(namedQueryValidationError);
-        return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
-                namedQuery: this.state.namedQuery,
-                setNamedQuery: (namedQuery) => this.setState({ namedQuery }),
-            } },
-            React.createElement(PanelWithButton_1.PanelWithButton, { headerText: "Current Query", bodyProps: {
-                    padding: 0,
-                    style: { display: 'flex', flexDirection: 'column' },
-                }, glyphicon: this.props.moduleInfo.Glyph },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: (expression) => this.setState({ expression }), initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getAllNamedQuery(), api: this.props.api }),
-                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-                    React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
-                            this.props.onClosePopup();
-                        } }, "CLOSE"),
-                    React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, style: {
-                            flex: 1,
-                            color: 'var(--ab-color-error)',
-                            textAlign: 'end',
-                        } }, namedQueryValidationError),
-                    React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
-                            if (this.state.namedQuery) {
-                                this.props.onAddNamedQuery(this.state.namedQuery);
-                            }
-                            this.props.onRunQuery(this.state.expression);
-                            this.props.onClosePopup();
-                        }, disabled: !isExpressionValid || StringExtensions_1.IsNullOrEmpty(this.state.expression) || hasNamedQueryError }, "Run Query")))));
-    }
-}
-function mapStateToProps() {
-    return {
-    // GridState: state.Grid,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onRunQuery: (expression) => dispatch(QueryRedux.QueryRun(expression)),
-        onAddNamedQuery: (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery)),
-    };
-}
-exports.ExpandedQueryPopup = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ExpandedQueryPopupComponent);
+exports.ExpandedQueryPopup = (props) => {
+    const dispatch = react_redux_1.useDispatch();
+    const [namedQuery, setNamedQuery] = React.useState(null);
+    const [expression, setExpression] = React.useState(props.popupProps.value);
+    const isExpressionValid = props.api.internalApi
+        .getQueryLanguageService()
+        .validateBoolean(expression, ModuleConstants_1.QueryModuleId).isValid;
+    const initialData = React.useMemo(() => props.api.internalApi.getQueryPreviewData(), []);
+    const namedQueryValidationError = namedQuery
+        ? props.api.queryApi.isValidNamedQueryName(namedQuery).message
+        : '';
+    const hasNamedQueryError = StringExtensions_1.IsNotNullOrEmpty(namedQueryValidationError);
+    const onRunQuery = (expression) => dispatch(QueryRedux.QueryRun(expression));
+    const onAddNamedQuery = (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery));
+    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
+            namedQuery: namedQuery,
+            setNamedQuery: (newQuery) => {
+                setNamedQuery(newQuery);
+            },
+        } },
+        React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: props.api.columnApi.getQueryableColumns(), namedQueries: props.api.queryApi.getAllNamedQuery(), api: props.api }),
+            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
+                React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
+                        props.onDismiss();
+                    } }, "CLOSE"),
+                React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, style: {
+                        flex: 1,
+                        color: 'var(--ab-color-error)',
+                        textAlign: 'end',
+                    } }, namedQueryValidationError),
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
+                        if (namedQuery) {
+                            onAddNamedQuery({
+                                Name: namedQuery.Name,
+                                BooleanExpression: expression,
+                            });
+                        }
+                        onRunQuery(expression);
+                        props.onDismiss();
+                    }, disabled: !isExpressionValid || StringExtensions_1.IsNullOrEmpty(expression) || hasNamedQueryError }, "Run Query")))));
+};

package/src/View/Query/QueryViewPanel.js

@@ -22,6 +22,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const react_redux_1 = require("react-redux");
+const windowFactory_1 = require("../Components/Popups/WindowPopups/windowFactory");
 class QueryViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -165,11 +166,13 @@ function mapDispatchToProps(dispatch) {
             source: 'Toolbar',
             value,
         })),
-        onExpand: (value) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.QueryModuleId, 'ExpandedQueryPopup', {
-            source: 'Toolbar',
-            value,
-        }, {
-            footer: null,
+        onExpand: (value) => dispatch(PopupRedux.PopupShowWindow({
+            Id: windowFactory_1.WINDOW_QUERY_EDITOR,
+            Title: 'Current Query',
+            Icon: 'query',
+            PopupProps: {
+                value: value,
+            },
         })),
     };
 }

package/src/agGrid/Adaptable.d.ts

@@ -150,7 +150,8 @@ export declare class Adaptable implements IAdaptable {
     private updateLayoutFromGrid;
     setSelectedCells(): SelectedCellInfo | undefined;
     setSelectedRows(): SelectedRowInfo | undefined;
-    setValue(cellDataChangedInfo: CellDataChangedInfo): void;
+    setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: RowNode): void;
+    setCellValue(cellDataChangedInfo: CellDataChangedInfo): void;
     cancelEdit(): void;
     isCellEditable(rowNode: RowNode, column: Column): boolean;
     getDistinctValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: RowNode, permittedValues?: any[]): GridCell[];