@adaptabletools/adaptable 11.1.1 → 11.1.4

package/src/View/DataSource/DataSourceViewPanel.js

@@ -8,6 +8,7 @@ const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions"
 const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const react_redux_1 = require("react-redux");
+const PopupRedux_1 = require("../../Redux/ActionsReducers/PopupRedux");
 class DataSourceViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -22,11 +23,7 @@ class DataSourceViewPanelComponent extends React.Component {
         let currentDataSourceName = this.state.CurrentDataSource == null
             ? selectDataSourceString
             : this.state.CurrentDataSource.Name;
-        let availableDataSources = this.props.DataSources
-            // .filter(
-            //   s => s.Name != currentDataSourceName
-            // )
-            .map((dataSource, index) => {
+        let availableDataSources = this.props.DataSources.map((dataSource) => {
             return {
                 value: dataSource.Name,
                 label: dataSource.Name,
@@ -44,16 +41,11 @@ class DataSourceViewPanelComponent extends React.Component {
         else {
             let newDataSource = this.props.DataSources.find((ds) => ds.Name == dataSourceName);
             this.setState({ CurrentDataSource: newDataSource });
-            if (newDataSource.Form) {
-                alert('have params');
-            }
-            else {
-                this.props.onSelectDataSource(newDataSource);
-            }
+            this.props.onSelectDataSource(newDataSource);
         }
     }
 }
-function mapStateToProps(state, ownProps) {
+function mapStateToProps(state) {
     return {
         CurrentDataSourceName: state.DataSource.CurrentDataSource,
         DataSources: state.DataSource.DataSources,
@@ -61,7 +53,17 @@ function mapStateToProps(state, ownProps) {
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onSelectDataSource: (dataSource) => dispatch(DataSourceRedux.DataSourceSelect(dataSource)),
+        onSelectDataSource: (dataSource) => {
+            if (dataSource.Form) {
+                return dispatch(PopupRedux_1.PopupShowForm({
+                    Id: 'data-source-form',
+                    Form: dataSource.Form,
+                }));
+            }
+            else {
+                return dispatch(DataSourceRedux.DataSourceSelect(dataSource));
+            }
+        },
     };
 }
 exports.DataSourceViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(DataSourceViewPanelComponent);

package/src/View/Export/ExportViewPanel.d.ts

@@ -1,8 +1,7 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import { ExportCustomDestinationPopup, Report, ReportSchedule } from '../../PredefinedConfig/ExportState';
+import { Report, ReportSchedule } from '../../PredefinedConfig/ExportState';
 import { ExportDestination } from '../../PredefinedConfig/Common/Enums';
 import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
 import * as React from 'react';
@@ -13,7 +12,6 @@ export interface ExportViewPanelComponentProps extends ViewPanelProps {
     onNewReport: (popup: string) => PopupRedux.PopupShowScreenAction;
     onEditReport: (popup: string) => PopupRedux.PopupShowScreenAction;
     onNewReportSchedule: (reportSchedule: ReportSchedule) => PopupRedux.PopupShowScreenAction;
-    showCustomDestinationForm: (data: ExportCustomDestinationPopup) => SystemRedux.SystemExportCustomDestinationPopupShowAction;
     Columns: AdaptableColumn[];
     Reports: Report[] | undefined;
     CurrentReport: string | undefined;

package/src/View/Export/ExportViewPanel.js

@@ -4,7 +4,6 @@ exports.ExportViewPanelControl = void 0;
 const tslib_1 = require("tslib");
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ExportRedux"));
-const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
@@ -74,22 +73,8 @@ class ExportViewPanelComponent extends React.Component {
         if (currentReport != null) {
             deleteMessage = deleteMessage + currentReport.Name + "'?";
         }
-        const getCurrentCustomDestination = () => {
-            return this.isCustomDestination(currentDestination) ? currentDestination : undefined;
-        };
         const onApplyExport = () => {
-            const currentCustomDestination = getCurrentCustomDestination();
-            if (currentCustomDestination === null || currentCustomDestination === void 0 ? void 0 : currentCustomDestination.form) {
-                this.props.showCustomDestinationForm({
-                    ExportDestination: currentCustomDestination,
-                    ReportName: this.props.CurrentReport,
-                });
-            }
-            else {
-                this.props.onApplyExport(currentReport, this.isCustomDestination(currentDestination)
-                    ? currentDestination.name
-                    : currentDestination);
-            }
+            this.props.onApplyExport(currentReport, this.isCustomDestination(currentDestination) ? currentDestination.name : currentDestination);
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
@@ -153,7 +138,6 @@ function mapDispatchToProps(dispatch) {
             source: 'Toolbar',
             value: reportSchedule,
         })),
-        showCustomDestinationForm: (data) => dispatch(SystemRedux.SystemExportCustomDestinationPopupShow(data)),
     };
 }
 exports.ExportViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ExportViewPanelComponent);

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>;

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/View/SmartEdit/SmartEditPopup.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
 import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-import { MathOperation } from '../../PredefinedConfig/Common/Enums';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
+import { SmartEditOperation } from '../../AdaptableOptions/SmartEdit';
 interface SmartEditPopupProps extends ModuleViewPopupProps<SmartEditPopupComponent> {
     SmartEditValue: number;
-    MathOperation: 'Add' | 'Subtract' | 'Multiply' | 'Divide';
+    SmartEditOperation: SmartEditOperation;
     PreviewInfo: PreviewInfo;
     onSmartEditValueChange: (value: number) => SystemRedux.SmartEditChangeValueAction;
-    onSmartEditOperationChange: (MathOperation: MathOperation) => SystemRedux.SmartEditChangeOperationAction;
+    onSmartEditOperationChange: (SmartEditOperation: SmartEditOperation) => SystemRedux.SmartEditChangeOperationAction;
     onSmartEditCheckSelectedCells: () => SystemRedux.SmartEditCheckCellSelectionAction;
     onRunSmartEdit: () => SmartEditRedux.SmartEditRunAction;
 }

package/src/View/SmartEdit/SmartEditPopup.js

@@ -27,6 +27,7 @@ class SmartEditPopupComponent extends React.Component {
         this.props.onSmartEditCheckSelectedCells();
     }
     render() {
+        var _a, _b, _c;
         let col;
         if (this.props.PreviewInfo) {
             col = this.props.PreviewInfo.column;
@@ -34,7 +35,7 @@ class SmartEditPopupComponent extends React.Component {
         let globalValidationMessage = PreviewHelper_1.PreviewHelper.GetValidationMessage(this.props.PreviewInfo, `${this.props.SmartEditValue}`);
         let showPanel = this.props.PreviewInfo && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`);
         let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { style: { flex: '1 1 100%', overflow: 'initial', height: '100%' }, previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
-        let operationMenuItems = EnumExtensions_1.EnumExtensions.getNames(Enums_1.MathOperation).map((mathOperation, index) => {
+        const operationMenuItems = EnumExtensions_1.EnumExtensions.getNames(Enums_1.MathOperation).map((mathOperation, index) => {
             return {
                 label: mathOperation,
                 onClick: () => {
@@ -42,6 +43,15 @@ class SmartEditPopupComponent extends React.Component {
                 },
             };
         });
+        const customOperations = (_c = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.editOptions) === null || _b === void 0 ? void 0 : _b.smartEdit) === null || _c === void 0 ? void 0 : _c.customOperations;
+        if (customOperations === null || customOperations === void 0 ? void 0 : customOperations.length) {
+            operationMenuItems.push(...customOperations.map((operation) => {
+                return {
+                    onClick: () => this.props.onSmartEditOperationChange(operation),
+                    label: operation.Name,
+                };
+            }));
+        }
         return (React.createElement(PanelWithImage_1.PanelWithImage, { flex: 1, style: { height: '100%' }, variant: "primary", bodyProps: {
                 style: { display: 'flex', flexFlow: 'column' },
             }, bodyScroll: true, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), onKeyDown: (e) => {
@@ -50,7 +60,9 @@ class SmartEditPopupComponent extends React.Component {
                 }
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
-                React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, Enums_1.MathOperation[this.props.MathOperation]),
+                React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
+                    ? this.props.SmartEditOperation.Name
+                    : this.props.SmartEditOperation),
                 React.createElement(Input_1.default, { value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
                 React.createElement(SimpleButton_1.default, { tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo &&
@@ -87,7 +99,7 @@ class SmartEditPopupComponent extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         SmartEditValue: state.System.SmartEditValue,
-        MathOperation: state.System.SmartEditOperation,
+        SmartEditOperation: state.System.SmartEditOperation,
         PreviewInfo: state.System.SmartEditPreviewInfo,
     };
 }

package/src/View/SmartEdit/SmartEditViewPanel.d.ts

@@ -2,16 +2,16 @@ import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
-import { MathOperation } from '../../PredefinedConfig/Common/Enums';
 import * as React from 'react';
+import { SmartEditOperation } from '../../AdaptableOptions/SmartEdit';
 export interface SmartEditViewPanelComponentProps extends ViewPanelProps {
     SmartEditValue: number | undefined;
-    MathOperation: 'Add' | 'Subtract' | 'Multiply' | 'Divide' | undefined;
+    SmartEditOperation: SmartEditOperation | undefined;
     IsValidSelection: boolean;
     PreviewInfo: PreviewInfo;
     InPivotMode: Boolean;
     onSmartEditValueChange: (value: number) => SystemRedux.SmartEditChangeValueAction;
-    onSmartEditOperationChange: (MathOperation: MathOperation) => SystemRedux.SmartEditChangeOperationAction;
+    onSmartEditOperationChange: (MathOperation: SmartEditOperation) => SystemRedux.SmartEditChangeOperationAction;
     onSmartEditCheckSelectedCells: () => SystemRedux.SmartEditCheckCellSelectionAction;
     onRunSmartEdit: () => SmartEditRedux.SmartEditRunAction;
 }
@@ -28,7 +28,6 @@ declare class SmartEditViewPanelComponent extends React.Component<SmartEditViewP
     private onSmartEditValueChange;
     private getStatusColour;
     private onApplyClick;
-    private onchangeMathOperation;
     onApplySmartEdit(): any;
 }
 export declare let SmartEditViewPanelControl: import("react-redux").ConnectedComponent<typeof SmartEditViewPanelComponent, any>;

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -39,17 +39,27 @@ class SmartEditViewPanelComponent extends React.Component {
         (_a = this.cleanupEvent) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     render() {
+        var _a, _b, _c;
         let statusColour = this.getStatusColour();
         let selectedColumn = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.state.SelectedColumnId)
             ? this.props.api.columnApi.getColumnFromId(this.state.SelectedColumnId)
             : null;
         let previewPanel = (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
-        let operationMenuItems = EnumExtensions_1.EnumExtensions.getNames(Enums_1.MathOperation).map((mathOperation, index) => {
+        const operationMenuItems = EnumExtensions_1.EnumExtensions.getNames(Enums_1.MathOperation).map((mathOperation, index) => {
             return {
                 onClick: () => this.props.onSmartEditOperationChange(mathOperation),
                 label: mathOperation,
             };
         });
+        const customOperations = (_c = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.editOptions) === null || _b === void 0 ? void 0 : _b.smartEdit) === null || _c === void 0 ? void 0 : _c.customOperations;
+        if (customOperations === null || customOperations === void 0 ? void 0 : customOperations.length) {
+            operationMenuItems.push(...customOperations.map((operation) => {
+                return {
+                    onClick: () => this.props.onSmartEditOperationChange(operation),
+                    label: operation.Name,
+                };
+            }));
+        }
         const applyButtonStyle = {
             color: statusColour,
             fill: 'currentColor',
@@ -60,7 +70,9 @@ class SmartEditViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { className: `ab-${elementType}__SmartEdit__select`, marginRight: 2, items: operationMenuItems, style: { fontSize: 'small' }, columns: ['label'], disabled: shouldDisable, variant: "outlined" }, this.props.MathOperation),
+                React.createElement(DropdownButton_1.default, { className: `ab-${elementType}__SmartEdit__select`, marginRight: 2, items: operationMenuItems, style: { fontSize: 'small' }, columns: ['label'], disabled: shouldDisable, variant: "outlined" }, typeof this.props.SmartEditOperation === 'object'
+                    ? this.props.SmartEditOperation.Name
+                    : this.props.SmartEditOperation),
                 React.createElement(Input_1.default, { style: {
                         width: '5rem',
                     }, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable, marginRight: 2 })),
@@ -94,9 +106,6 @@ class SmartEditViewPanelComponent extends React.Component {
     onApplyClick() {
         this.onApplySmartEdit();
     }
-    onchangeMathOperation(mathOperation) {
-        this.props.onSmartEditOperationChange(mathOperation);
-    }
     onApplySmartEdit() {
         this.props.onRunSmartEdit();
     }
@@ -104,7 +113,7 @@ class SmartEditViewPanelComponent extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         SmartEditValue: state.System.SmartEditValue,
-        MathOperation: state.System.SmartEditOperation,
+        SmartEditOperation: state.System.SmartEditOperation,
         IsValidSelection: state.System.IsValidSmartEditSelection,
         PreviewInfo: state.System.SmartEditPreviewInfo,
         InPivotMode: state.Grid.IsGridInPivotMode,