@adaptabletools/adaptable 10.0.4-canary.5 → 11.0.0-canary.3

package/src/View/AdaptableView.js

@@ -5,13 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const PopupRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/PopupRedux"));
-const SystemRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/SystemRedux"));
 const AdaptablePopup_1 = require("./Components/Popups/AdaptablePopup");
 const AdaptablePopupPrompt_1 = require("./Components/Popups/AdaptablePopupPrompt");
 const Dashboard_1 = require("./Dashboard/Dashboard");
 const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopupConfirmation");
-const AdaptableChart_1 = require("./Components/Popups/AdaptableChart");
-const ChartEnums_1 = require("../PredefinedConfig/Common/ChartEnums");
 const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
 const License_1 = require("./License");
@@ -20,18 +17,17 @@ const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressInd
 const react_toastify_1 = require("react-toastify");
 class AdaptableView extends React.Component {
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
         return (React.createElement("div", null,
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
-            this.props.SystemState.ChartVisibility != ChartEnums_1.ChartVisibility.Hidden && (React.createElement(AdaptableChart_1.AdaptableChart, { api: this.props.AdaptableApi, onClose: this.props.onCloseChartPopup, showChart: this.props.SystemState.ChartVisibility == ChartEnums_1.ChartVisibility.Maximised, showModal: (_e = this.props.AdaptableApi.pluginsApi.getChartsPluginApi()) === null || _e === void 0 ? void 0 : _e.getPluginOptions().showModal })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
             React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, showPopup: this.props.PopupState.PromptPopup.ShowPromptPopup }),
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
             React.createElement(ExportCustomDestinationFormPopups_1.ExportCustomDestinationFormPopups, { api: this.props.AdaptableApi }),
             React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
-                    .maxNotifications, closeButton: false }),
+                    .maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(ProgressIndicator_1.ProgressIndicator, null)));
     }
@@ -40,7 +36,6 @@ function mapStateToProps(state, ownProps) {
     return {
         PopupState: state.Popup,
         SystemState: state.System,
-        ChartState: state.Chart,
         AdaptableApi: ownProps.Adaptable.api,
     };
 }
@@ -48,7 +43,6 @@ function mapDispatchToProps(dispatch) {
     return {
         onCloseScreenPopup: () => dispatch(PopupRedux.PopupHideScreen()),
         onCloseAlertPopup: () => dispatch(PopupRedux.PopupHideAlert()),
-        onCloseChartPopup: () => dispatch(SystemRedux.ChartSetChartVisibility(ChartEnums_1.ChartVisibility.Hidden)),
         onClosePromptPopup: () => dispatch(PopupRedux.PopupHidePrompt()),
         onConfirmPromptPopup: (inputText) => dispatch(PopupRedux.PopupConfirmPrompt(inputText)),
         onConfirmConfirmationPopup: (comment) => dispatch(PopupRedux.PopupConfirmConfirmation(comment)),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-interface Column {
-    field: string;
-    type: string;
+import { ColDef } from '@ag-grid-community/all-modules';
+interface Column extends Partial<ColDef> {
+    field?: string;
+    type?: string | string[];
     caption?: string;
 }
 declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, }: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -216,6 +216,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
         },
     ];
     const items = columns.map((col) => {
+        var _a;
         const isPrimaryKey = col.field === primaryKeyField;
         const cItems = colItems.map((c) => (Object.assign({}, c)));
         cItems[0].Content = (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
@@ -235,7 +236,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
         cItems[2].Content = (React.createElement(Input_1.default, { style: inputStyle, defaultValue: col.caption != undefined ? col.caption : humanized, placeholder: humanized, onChange: (event) => {
                 setColumnCaption(event.target.value, col.field);
             } }));
-        cItems[3].Content = (React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: col.type, onChange: onColumnTypeChange.bind(null, col) }));
+        cItems[3].Content = (React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = col === null || col === void 0 ? void 0 : col.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, col) }));
         cItems[4].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(col.field), onChange: (sortable) => {
                 sortable ? setSortableColumn(col.field) : setUnsortableColumn(col.field);
             } }));

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationForm.js

@@ -16,7 +16,7 @@ const ConfigurationForm = (props) => {
     const searchOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.searchOptions), abOptions.searchOptions);
     const filterOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.filterOptions), abOptions.filterOptions);
     // we are 'hard-coding' this to use AG Grid but so does helper so ok for now and we can refactor when Adaptable Grid is ready
-    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.agGridOptions), abOptions.agGridOptions);
+    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "General Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
@@ -32,29 +32,29 @@ const ConfigurationForm = (props) => {
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.agGridOptions = Object.assign({}, abOptions.agGridOptions);
-                        abOptions.agGridOptions.enableRangeSelection = enableRangeSelection;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.enableRangeSelection = enableRangeSelection;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.floatingFilter, onChange: (floatingFilter) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.agGridOptions = Object.assign({}, abOptions.agGridOptions);
-                        abOptions.agGridOptions.floatingFilter = floatingFilter;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.floatingFilter = floatingFilter;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.agGridOptions = Object.assign({}, abOptions.agGridOptions);
-                        abOptions.agGridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.agGridOptions = Object.assign({}, abOptions.agGridOptions);
-                        abOptions.agGridOptions.suppressMenuHide = suppressMenuHide;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.suppressMenuHide = suppressMenuHide;
                         props.onChangeadaptableOptions(abOptions);
                     } }))),
         React.createElement(HelpBlock_1.default, null, "Layout Options"),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/index.js

@@ -29,8 +29,8 @@ const ConfigurationDialog = (props) => {
     };
     const onFinish = () => {
         const newABOptions = Object.assign({}, abOptions);
-        newABOptions.agGridOptions = Object.assign({}, abOptions.agGridOptions);
-        newABOptions.agGridOptions.columnDefs = columnsHandle.current.getColumns().map((c) => {
+        newABOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+        newABOptions.gridOptions.columnDefs = columnsHandle.current.getColumns().map((c) => {
             const col = Object.assign(Object.assign({}, c), { headerName: c.caption || StringExtensions_1.default.Humanize(c.field) });
             delete col.caption;
             return col;
@@ -50,7 +50,7 @@ const ConfigurationDialog = (props) => {
                         React.createElement(Input_1.default, { value: abOptions.adaptableId, onChange: onadaptableIdChange, style: { minWidth: '20rem' } })))),
             React.createElement(ColumnsList_1.default, { handle: columnsHandle, onValidityChange: (valid) => {
                     setFinishEnabled(valid);
-                }, columns: abOptions.agGridOptions.columnDefs }))));
+                }, columns: abOptions.gridOptions.columnDefs }))));
     const stepTwo = (React.createElement(React.Fragment, null,
         React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", style: { flex: 1, overflow: 'auto' } },
             React.createElement(ConfigurationForm_1.default, { adaptableOptions: abOptions, onChangeadaptableOptions: (abOptions) => {

package/src/View/AdaptableWizardView/index.js

@@ -65,7 +65,7 @@ const Wizard = (props) => {
         const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
-        adaptableOptions.agGridOptions = gridOptions;
+        adaptableOptions.gridOptions = gridOptions;
         if (dataSourceInfo.primaryKey) {
             adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
         }

package/src/View/Alert/AlertEmptyView.js

@@ -11,6 +11,6 @@ exports.AlertEmptyView = (props) => {
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const text = accessLevel == 'ReadOnly'
         ? 'You have no Alert Definitions.'
-        : "Click 'New' to start creating Alert Definitions. An alert will be triggered whenever an edit - or external data change - matches the condition in the Alert Definition.";
+        : "Click 'New' to start creating Alert Definitions. An Alert is triggered whenever an edit - or external data change - matches the Rule in the Alert Definition.";
     return React.createElement(React.Fragment, null, text);
 };

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -2,6 +2,7 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 declare type AlertRulesWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
+    module: 'alert';
 };
 export declare const AlertRulesWizardSection: (props: AlertRulesWizardSectionProps) => JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;

package/src/View/Alert/Wizard/AlertWizard.js

@@ -60,16 +60,16 @@ exports.AlertWizard = (props) => {
                     React.createElement("b", null, "when"),
                     " the Alert should trigger")),
                 isValid: isValidAlertRules_1.isValidAlertRules,
-                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition }),
+                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition, module: "alert" }),
                 renderSummary: AlertRulesWizardSection_1.renderAlertRulesSummary,
-                title: 'Condition',
+                title: 'Rule',
             },
             {
                 details: "Select the Alert's Message Type and Notification option",
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(AlertDisplayWizardSection_1.AlertDisplayWizardSection, { onChange: setAlertDefinition }))),
                 renderSummary: AlertDisplayWizardSection_1.renderAlertDisplaySummary,
-                title: 'Type and Display',
+                title: 'Type & Display',
             },
             {
                 details: 'Configure behaviour for the Alert',

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../types';
-import { FlashingCellDefinition } from '../../../../types';
 export interface BaseAlertRulesWizardSectionProps<T> {
     onChange: (data: T) => void;
+    module: 'alert';
     wholeRowScope?: boolean;
     children?: React.ReactNode;
 }
-export declare const BaseAlertRulesWizardSection: <T extends AlertDefinition | FlashingCellDefinition>(props: BaseAlertRulesWizardSectionProps<T>) => JSX.Element;
+export declare const BaseAlertRulesWizardSection: <T extends AlertDefinition>(props: BaseAlertRulesWizardSectionProps<T>) => JSX.Element;

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.js

@@ -8,7 +8,8 @@ const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.BaseAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const wholeRowScope = props.wholeRowScope != null ? props.wholeRowScope : api.scopeApi.scopeIsAll(data.Scope);
-    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: api.alertApi.getAlertPredicateDefsForScope(data.Scope), onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
+    const predicateDefs = api.alertApi.getAlertPredicateDefsForScope(data.Scope);
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
             selectPredicate: 'Select an Alert Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingTags.js

@@ -11,7 +11,6 @@ exports.getCalculatedColumnSettingTags = (settings) => {
         Resizable ? 'Resizable' : null,
         Groupable ? 'Groupable' : null,
         Sortable ? 'Sortable' : null,
-        Pivotable ? 'Pivotable' : null,
         Aggregatable ? 'Aggregatable' : null,
     ].filter(Boolean);
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -3,6 +3,7 @@ import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
 export declare type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
+    isEdit: boolean;
 };
 export declare const renderCalculatedColumnSettingsSummary: (data: CalculatedColumn) => JSX.Element;
 export declare const isValidCalculatedColumnSettings: (data: CalculatedColumn, api: AdaptableApi) => true | string;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -16,6 +16,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const ValueSelector_1 = require("../../Components/ValueSelector");
 const Tag_1 = require("../../../components/Tag");
 const getCalculatedColumnSettingTags_1 = require("../Utilities/getCalculatedColumnSettingTags");
+const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 exports.renderCalculatedColumnSettingsSummary = (data) => {
     var _a;
     const options = getCalculatedColumnSettingTags_1.getCalculatedColumnSettingTags(data.CalculatedColumnSettings);
@@ -59,7 +60,7 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
         const aggregatable = dataType == 'Number' ? (_a = data.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.Aggregatable : false;
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Aggregatable: aggregatable }) }));
     };
-    const inEdit = !!data.Uuid;
+    const inEdit = props.isEdit;
     const validCheck = exports.isValidCalculatedColumnSettings(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
     let options = [
@@ -72,17 +73,15 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
     const ColumnName = data.FriendlyName;
     const ColumnId = data.ColumnId;
     let { DataType: dataType } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
-    const { Width, Filterable, ShowToolTip, Resizable, Groupable, Sortable, Pivotable, Aggregatable, } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
-    const onSettingsChange = (values) => {
-        props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), values) }));
+    const { Width, ShowToolTip } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
+    const handleSpecialColumnSettingsChange = (settings) => {
+        props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
     };
     React.useEffect(() => {
         var _a;
         if (!dataType) {
             const computedDataType = calculatedColumnExpressionService.GetCalculatedColumnDataType((_a = data.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression);
-            onSettingsChange({
-                DataType: computedDataType,
-            });
+            handleSpecialColumnSettingsChange(Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.CalculatedColumnSettings), { DataType: computedDataType }));
         }
     }, []);
     return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-settings' },
@@ -111,23 +110,11 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
                                     onClick: () => handleDataTypeChange(item.value),
                                 })) }, dataType ? dataType : 'Select Data Type')),
                         React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                            React.createElement(Input_1.default, { type: "number", width: 300, value: Width || '', onChange: (e) => onSettingsChange({ Width: Number(e.target.value) }) })),
+                            React.createElement(Input_1.default, { type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                    Width: Number(e.target.value),
+                                }) })),
                         React.createElement(FormLayout_1.FormRow, { label: "" },
-                            React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => onSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Tooltip")))))),
+                            React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Tooltip")))))),
         ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, " Column Properties"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { style: { width: '100%' }, columns: [{ name: 'first', size: '30%' }, { name: 'second' }] },
-                        React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !api.internalApi.getAdaptableOptions().filterOptions
-                                    .enableFilterOnSpecialColumns }, "Filterable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable")),
-                        React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable")),
-                        React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable"))))))));
+        React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -14,14 +14,26 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const CalculatedColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CalculatedColumnRedux"));
 exports.CalculatedColumnWizard = (props) => {
+    var _a;
     const adaptable = AdaptableContext_1.useAdaptable();
+    const allCalculatedColumns = react_redux_1.useSelector((state) => state.CalculatedColumn.CalculatedColumns);
     const [calculatedColumn, setCalculatedColumn] = react_1.useState(() => {
-        return (props === null || props === void 0 ? void 0 : props.data) ? Helper_1.cloneObject(props.data)
-            : ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns);
+        var _a;
+        if (props.data) {
+            return Helper_1.cloneObject(props.data);
+        }
+        if ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) {
+            const calculatedColumn = allCalculatedColumns.find((calculatedColumn) => calculatedColumn.ColumnId === props.popupParams.column.columnId);
+            if (calculatedColumn) {
+                return calculatedColumn;
+            }
+        }
+        return ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns);
     });
     const dispatch = react_redux_1.useDispatch();
+    const isEdit = Boolean(props.data) || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
     const handleFinish = () => {
-        if (props.data) {
+        if (isEdit) {
             dispatch(CalculatedColumnRedux.CalculatedColumnEdit(calculatedColumn));
         }
         else {
@@ -46,7 +58,7 @@ exports.CalculatedColumnWizard = (props) => {
                 renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
                 render: () => {
                     return (React.createElement(rebass_1.Box, { padding: 2 },
-                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { onChange: setCalculatedColumn })));
+                        React.createElement(CalculatedColumnSettingsWizardSection_1.CalculatedColumnSettingsWizardSection, { isEdit: isEdit, onChange: setCalculatedColumn })));
                 },
             },
             '-',

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickFilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
@@ -16,7 +16,7 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
-const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 class QuickFilterFormComponent extends React.Component {

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { ValueSelectorProps } from '../ValueSelector';
 import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
-export declare type ModuleValueSelectorProps = Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'>;
+export interface ModuleValueSelectorProps extends Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'> {
+    isDisabled?: (module: AdaptableModule) => boolean;
+}
 export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => JSX.Element;

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

@@ -30,5 +30,5 @@ exports.ModuleValueSelector = (props) => {
     const sortedOptions = react_1.useMemo(() => {
         return sortWithOrder_1.sortWithOrderArray(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition })));
+    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
 };

package/src/View/Components/NewScopeComponent.js

@@ -132,7 +132,7 @@ exports.NewScopeComponent = (props) => {
         React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
             React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Columns")),
         React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "DataTypes")),
+            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types")),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, props.descriptions.rowScope))),
         React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },

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

@@ -21,8 +21,9 @@ const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 exports.AdaptablePopup = (props) => {
     var _a, _b, _c, _d, _e;
     const adaptable = AdaptableContext_1.useAdaptable();
-    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const dispatch = react_redux_1.useDispatch();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
     // Navigation
     const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; });
     const menuItems = React.useMemo(() => {
@@ -71,11 +72,12 @@ exports.AdaptablePopup = (props) => {
     const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
     const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
     // action popups + non-primary module popups
-    const isActionModule = DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
-        (props.componentName && props.componentName !== moduleInfo.Popup);
+    const isActionModule = moduleInfo &&
+        (DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+            (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
     const baseClassName = 'ab-Adaptable-Popup';
-    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.type) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
-    const isWindowModal = settingsPanelOptions.type === 'window';
+    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.popupType) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const isWindowModal = settingsPanelOptions.popupType === 'window';
     let style = { maxWidth: 1400, maxHeight: 1200 };
     if (isWindowModal) {
         style = { height: '100%' };
@@ -83,7 +85,7 @@ exports.AdaptablePopup = (props) => {
     else if (isActionModule) {
         style = { maxWidth: 800, maxHeight: 450 };
     }
-    const settingsKey = isActionModule ? `action-${moduleInfo.FriendlyName}` : 'settings';
+    const settingsKey = isActionModule ? `action-${moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.FriendlyName}` : 'settings';
     let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsKey]; });
     if (!popupSettings) {
         const size = isActionModule
@@ -112,7 +114,7 @@ exports.AdaptablePopup = (props) => {
                 position: popupSettings.position,
                 onChange: handleWindowSettings,
             }, style: style, padding: 0, height: isWindowModal ? null : '90vh', width: isWindowModal ? null : '90vw', className: className, onDismiss: props.onHide, isOpen: true, showCloseButton: true }, props.moduleProps),
-            !isActionModule && (React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelOptions.title)),
+            !isActionModule && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
             React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
                 !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, moduleInfo: moduleInfo, activeCustomSettingPanel: customSettingsPanel, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, isCustomSettingsPanel ? (React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel })) : (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide })))))));

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { AccessLevel, AdaptableApi } from '../../../../../types';
 import { IModule } from '../../../../Strategy/Interface/IModule';
-export interface AdaptablePopupModuleViewProps {
+import { ModuleParams, ModuleViewPopupProps } from '../../SharedProps/ModuleViewPopupProps';
+export interface AdaptablePopupModuleViewProps extends ModuleViewPopupProps<typeof AdaptablePopupModuleView> {
     module: IModule;
     api: AdaptableApi;
     accessLevel: AccessLevel;
+    popupParams?: ModuleParams;
 }
 export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;

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

@@ -11,18 +11,27 @@ const AdaptableObjectList_1 = require("../../AdaptableObjectList");
 const ButtonNew_1 = require("../../Buttons/ButtonNew");
 const PopupPanel_1 = require("./PopupPanel");
 exports.AdaptablePopupModuleView = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     /**
      * This triggers an render for each redux change.
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     react_redux_1.useSelector((state) => state);
-    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    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';
+    });
+    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);
+        }
+    }, [(_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action]);
     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 items = (_b = props.module) === null || _b === void 0 ? void 0 : _b.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 EditWizard = (_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(moduleViewProperties);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -34,7 +43,7 @@ exports.AdaptablePopupModuleView = (props) => {
     // Some modules do not have new button
     // e.g. filter
     let newButton = null;
-    if ((_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _c === void 0 ? void 0 : _c.length) {
+    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) => {
             var _a;
             return {
@@ -58,10 +67,14 @@ exports.AdaptablePopupModuleView = (props) => {
             } }));
     }
     const handleWizardClose = () => {
+        var _a;
         setAbObjectType(null);
         setIsWizardOpen(false);
+        if (['Toolbar', 'ContextMenu', 'ColumnMenu'].includes((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.source)) {
+            props.onClosePopup();
+        }
     };
     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, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };

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

@@ -53,7 +53,7 @@ exports.Navigation = (props) => {
             const className = join_1.default(baseClassName, isActive && `${baseClassName}--active`);
             let customIcon = (_f = (_e = (_d = (_c = props.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find) === null || _d === void 0 ? void 0 : _d.call(_c, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : null;
             return (React.createElement("li", { className: className, key: menuItem.label },
-                React.createElement("button", { className: `${baseClassName}__Button`, onClick: () => {
+                React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
                     } },
                     menuItem.icon && (React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: menuItem.icon })),

package/src/View/Components/SharedProps/ModuleViewPopupProps.d.ts

@@ -4,7 +4,7 @@ import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColum
 import { ModuleInfo } from '../../../Strategy/Interface/IModule';
 import { AdaptableObject } from '../../../types';
 export interface ModuleViewPopupProps<View> extends BaseProps<View> {
-    popupParams: ModuleParams;
+    popupParams?: ModuleParams;
     onClearPopupParams: () => PopupRedux.PopupClearParamAction;
     teamSharingActivated: boolean;
     onClosePopup: () => void;