@adaptabletools/adaptable 12.1.7 → 12.2.0-canary.0

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

@@ -0,0 +1,280 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FinanceForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const FormBox_1 = require("../Components/FormBox");
+const LocalDropdownButton = (props) => (React.createElement(DropdownButton_1.default, Object.assign({}, props, { width: "100%", columns: ['label'] })));
+const AlertMessage = (props) => (React.createElement(rebass_1.Box, Object.assign({ color: "var(--ab-color-error)" }, props)));
+const fdc3ColumnDefinitions = {
+    instrumentColumns: {
+        fields: [
+            { label: 'Ticker', id: 'tickerColumnId' },
+            { label: 'ISIN', id: 'isinColumnId' },
+            { label: 'CUSIP', id: 'cusipColumnId' },
+            { label: 'SEDOL', id: 'sedolColumnId' },
+            { label: 'RIC', id: 'ricColumnId' },
+            { label: 'BBG', id: 'bbgColumnId' },
+            { label: 'PERMID', id: 'permidColumnId' },
+            { label: 'FIGI', id: 'figiColumnId' },
+        ],
+        intents: ['ViewChart', 'ViewQuote', 'ViewNews', 'ViewAnalysis', 'ViewInstrument'],
+    },
+    positionColumns: {
+        fields: [{ label: 'Instrument', id: 'instrumentColumnId', required: true }],
+        intents: ['ViewChart', 'ViewNews', 'ViewAnalysis'],
+    },
+    contactColumns: {
+        fields: [
+            { label: 'Email', id: 'emailColumnId' },
+            { label: 'FDS_ID', id: 'fds_idColumnId' },
+        ],
+        intents: ['StartCall', 'StartChat', 'ViewContact'],
+    },
+    countryColumns: {
+        fields: [
+            { label: 'ISOALPHA2', id: 'isoalpha2ColumnId' },
+            { label: 'ISOALPHA3', id: 'isoalpha3ColumnId' },
+        ],
+        intents: ['ViewChart'],
+    },
+    organizationColumns: {
+        fields: [
+            { label: 'LEI', id: 'leiColumnId' },
+            { label: 'PERM ID', id: 'permidColumnId' },
+            { label: 'FDS ID', id: 'fds_idColumnId' },
+        ],
+        intents: ['ViewNews', 'ViewAnalysis'],
+    },
+};
+const FDC3ColumnSelector = (props) => {
+    const options = React.useMemo(() => {
+        return props.columnOptions.map((columnOption) => (Object.assign(Object.assign({}, columnOption), { onClick: () => props.onChange(columnOption.value) })));
+    }, [props.onChange]);
+    return (React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
+            props.label,
+            " ",
+            props.required && React.createElement(AlertMessage, { as: "span" }, "*"),
+            ' ') },
+        React.createElement(LocalDropdownButton, { items: options }, StringExtensions_1.default.Humanize(props.value) || 'Select Column')));
+};
+const FDC3InstrumentColumnBuilder = (props) => {
+    const fields = fdc3ColumnDefinitions.instrumentColumns.fields;
+    return (React.createElement(rebass_1.Flex, null,
+        React.createElement(FormLayout_1.default, { mr: 2 }, fields.slice(0, 4).map((field) => {
+            var _a;
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+        })),
+        React.createElement(FormLayout_1.default, null, fields.slice(4).map((field) => {
+            var _a;
+            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
+        })),
+        React.createElement(rebass_1.Flex, { ml: 3, flexDirection: "column" }, fdc3ColumnDefinitions.instrumentColumns.intents.map((intent) => {
+            var _a, _b;
+            return (React.createElement(CheckBox_1.CheckBox, { checked: (_b = (_a = props.column.intents) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, intent), onClick: () => props.onIntentToggle(intent), key: intent }, intent));
+        }))));
+};
+const FDC3BaseColumnBuilder = (props) => {
+    const fields = fdc3ColumnDefinitions[props.fdc3ColumnType].fields;
+    const intents = fdc3ColumnDefinitions[props.fdc3ColumnType].intents;
+    return (React.createElement(rebass_1.Flex, null,
+        React.createElement(FormLayout_1.default, null,
+            fields.map((field) => {
+                var _a, _b;
+                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
+            }),
+            React.createElement(FormLayout_1.FormRow, { label: "" },
+                React.createElement(rebass_1.Flex, { flexDirection: "column" }, intents.map((intent) => {
+                    var _a, _b;
+                    return (React.createElement(CheckBox_1.CheckBox, { checked: ((_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a.intents) !== null && _b !== void 0 ? _b : []).includes(intent), onClick: () => props.onIntentToggle(intent), key: intent }, intent));
+                }))))));
+};
+const FDC3ColumnBuilder = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const handleColumnFieldChange = React.useCallback((fieldId, columnId) => {
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { [fieldId]: columnId }));
+    }, [props.fdc3Column, props.onChange]);
+    const handleIntentToggle = React.useCallback((intent) => {
+        var _a;
+        const newFDC3Column = Object.assign({}, props.fdc3Column);
+        newFDC3Column.intents = (_a = newFDC3Column.intents) !== null && _a !== void 0 ? _a : [];
+        if (newFDC3Column.intents.includes(intent)) {
+            newFDC3Column.intents = newFDC3Column.intents.filter((i) => i !== intent);
+        }
+        else {
+            newFDC3Column.intents.push(intent);
+        }
+        props.onChange(newFDC3Column);
+    }, [props.fdc3Column]);
+    const columnOptions = React.useMemo(() => {
+        return props.columnOptions.map((columnOption) => (Object.assign(Object.assign({}, columnOption), { onClick: () => {
+                props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { columnId: columnOption.value }));
+            } })));
+    }, [props.fdc3Column]);
+    const handleNameColumnIdChange = React.useCallback((event) => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { nameColumnId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
+    }, [props.fdc3Column]);
+    const handleShowBroadcastToggle = React.useCallback(() => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { showBroadcastContextMenu: !((_a = props.fdc3Column) === null || _a === void 0 ? void 0 : _a.showBroadcastContextMenu) }));
+    }, [props.fdc3Column]);
+    const handleBroadcastLabelChange = React.useCallback((event) => {
+        var _a;
+        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { broadcastContextMenuLabel: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
+    }, [props.fdc3Column]);
+    return (React.createElement(FormBox_1.NocodeWizardFormBox, null,
+        React.createElement(rebass_1.Flex, null,
+            React.createElement(FormLayout_1.default, { mr: 3, mb: 3 },
+                props.beforeContent,
+                React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
+                        "Column ",
+                        React.createElement(AlertMessage, { as: "span" }, "*"),
+                        ' ') },
+                    React.createElement(LocalDropdownButton, { disabled: props.disabled, items: columnOptions }, (_b = (_a = columnOptions.find((item) => { var _a; return item.value === ((_a = props.fdc3Column) === null || _a === void 0 ? void 0 : _a.columnId); })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : 'Select Column')),
+                React.createElement(FormLayout_1.FormRow, { label: "FDC3 Name" },
+                    React.createElement(Input_1.default, { disabled: props.disabled, onChange: handleNameColumnIdChange, value: (_d = (_c = props.fdc3Column) === null || _c === void 0 ? void 0 : _c.nameColumnId) !== null && _d !== void 0 ? _d : '' })),
+                React.createElement(FormLayout_1.FormRow, { label: "" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: props.disabled, checked: Boolean((_e = props.fdc3Column) === null || _e === void 0 ? void 0 : _e.showBroadcastContextMenu), onChange: handleShowBroadcastToggle },
+                        "Show Broadcast ",
+                        React.createElement("br", null),
+                        " Context Menu")),
+                React.createElement(FormLayout_1.FormRow, { label: "Broadcast Label" },
+                    React.createElement(Input_1.default, { disabled: props.disabled || !Boolean((_f = props.fdc3Column) === null || _f === void 0 ? void 0 : _f.showBroadcastContextMenu), onChange: handleBroadcastLabelChange, value: typeof ((_g = props.fdc3Column) === null || _g === void 0 ? void 0 : _g.broadcastContextMenuLabel) === 'string'
+                            ? (_h = props.fdc3Column) === null || _h === void 0 ? void 0 : _h.broadcastContextMenuLabel
+                            : '' }))),
+            React.createElement(rebass_1.Box, { flex: 1 }, props.fdc3ColumnType === 'instrumentColumns' ? (React.createElement(FDC3InstrumentColumnBuilder, { onIntentToggle: handleIntentToggle, onColumnFieldChange: (...args) => handleColumnFieldChange(...args), column: props.fdc3Column, columnOptions: props.columnOptions })) : (props.fdc3ColumnType && (React.createElement(FDC3BaseColumnBuilder, { onColumnFieldChange: (...args) => handleColumnFieldChange(...args), onIntentToggle: handleIntentToggle, column: props.fdc3Column, fdc3ColumnType: props.fdc3ColumnType, columnOptions: props.columnOptions }))))),
+        props.footer));
+};
+const FDC3ColumnEditor = (props) => {
+    return (React.createElement(FDC3ColumnBuilder, { columnOptions: props.columnOptions, fdc3Column: props.fdc3Column, fdc3ColumnType: props.fdc3ColumnType, onChange: props.onChange, footer: props.footer }));
+};
+const FDC3ColumnCreator = (props) => {
+    var _a, _b;
+    const [fdc3Column, setFDC3Column] = React.useState();
+    const [fdc3ColumnType, setFDC3ColumnType] = React.useState();
+    const handleOnNew = React.useCallback(() => {
+        props.onNew(fdc3ColumnType, fdc3Column);
+        setFDC3Column(null);
+        setFDC3ColumnType(null);
+    }, [fdc3Column]);
+    const fdc3ColumnOptions = React.useMemo(() => {
+        return [
+            {
+                label: 'Instrument',
+                columnField: 'instrumentColumns',
+            },
+            {
+                label: 'Position',
+                columnField: 'positionColumns',
+            },
+            {
+                label: 'Contact',
+                columnField: 'contactColumns',
+            },
+            {
+                label: 'Country',
+                columnField: 'countryColumns',
+            },
+            {
+                label: 'Organization',
+                columnField: 'organizationColumns',
+            },
+        ].map((item) => (Object.assign(Object.assign({}, item), { onClick: () => {
+                setFDC3ColumnType(item.columnField);
+                setFDC3Column({ columnId: '' });
+            } })));
+    }, []);
+    const typeSelector = (React.createElement(FormLayout_1.FormRow, { label: "FDC3 Type" },
+        React.createElement(LocalDropdownButton, { items: fdc3ColumnOptions }, (_b = (_a = fdc3ColumnOptions.find((item) => item.columnField === fdc3ColumnType)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : 'Select Column')));
+    const fieldsDisabled = !fdc3ColumnType;
+    const errors = [];
+    if (fdc3Column && !fdc3Column.columnId) {
+        errors.push('Column is required.');
+    }
+    if (fdc3Column) {
+        const fields = fdc3ColumnDefinitions[fdc3ColumnType].fields;
+        fields.forEach((field) => {
+            if (field.required && !fdc3Column[field.id]) {
+                errors.push(`${field.label} is required.`);
+            }
+        });
+    }
+    return (React.createElement(FDC3ColumnBuilder, { disabled: fieldsDisabled, columnOptions: props.columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (newFDC3Column) => setFDC3Column(newFDC3Column), beforeContent: typeSelector, footer: React.createElement(rebass_1.Flex, null,
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { ml: 2 }, error)))),
+            React.createElement(SimpleButton_1.default, { disabled: fieldsDisabled || !fdc3Column.columnId, onClick: handleOnNew, icon: "plus", variant: "raised" }, "Add FDC3 Column")) }));
+};
+const FinanceFormSectionTitle = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { mb: 2 }),
+    React.createElement(HelpBlock_1.default, null, props.children)));
+const FinanceForm = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const columnOptions = (_d = (_c = (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs) === null || _c === void 0 ? void 0 : _c.map) === null || _d === void 0 ? void 0 : _d.call(_c, (item) => {
+        var _a;
+        return ({
+            label: StringExtensions_1.default.Humanize((_a = item.headerName) !== null && _a !== void 0 ? _a : item.field),
+            value: item.field,
+        });
+    });
+    const financePlugin = (_f = (_e = props.adaptableOptions) === null || _e === void 0 ? void 0 : _e.plugins) === null || _f === void 0 ? void 0 : _f.find((item) => item.pluginId === 'finance');
+    const financePluginOptions = ((_g = financePlugin === null || financePlugin === void 0 ? void 0 : financePlugin.options) !== null && _g !== void 0 ? _g : {});
+    const fdc3Columns = (_h = financePluginOptions === null || financePluginOptions === void 0 ? void 0 : financePluginOptions.fdc3Columns) !== null && _h !== void 0 ? _h : {};
+    const handleSetFdc3Columns = (key, newFDC3Columns) => {
+        var _a;
+        // Unfurtunatly finance plugin options need to be mutated.
+        // It is the only was without instanciating the plugin again.
+        // But that would mean to inport the finance plugin inside the nocode plugin.
+        financePluginOptions.fdc3Columns = (_a = financePluginOptions.fdc3Columns) !== null && _a !== void 0 ? _a : {};
+        financePluginOptions.fdc3Columns[key] = newFDC3Columns;
+        // on change is called with a new array of plugins so the component refreshes.
+        props.onChangeadAptableOptions(Object.assign(Object.assign({}, props.adaptableOptions), { plugins: [...props.adaptableOptions.plugins] }));
+    };
+    const renderEditor = (fdc3ColumnType, fdc3ColumnsItems) => {
+        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { mb: 3 },
+            React.createElement(FDC3ColumnEditor, { key: currentFDCColumnId, columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
+                    const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
+                        if (index === currentFDCColumnId) {
+                            return editedFDC3Column;
+                        }
+                        return fdc3Column;
+                    });
+                    handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
+                }, footer: React.createElement(rebass_1.Flex, null,
+                    React.createElement(rebass_1.Box, { flex: 1 }),
+                    React.createElement(SimpleButton_1.default, { onClick: () => {
+                            const newFDC3Columns = fdc3ColumnsItems.filter((_, index) => index !== currentFDCColumnId);
+                            handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
+                        }, tone: "error", variant: "raised", icon: "delete" }, "Delete")) }))));
+    };
+    return (React.createElement(rebass_1.Box, { p: 2, className: "ab-FinanceForm" },
+        React.createElement(rebass_1.Box, { mb: 3 },
+            React.createElement(HelpBlock_1.default, { mb: 3 }, "Create FDC3 Column"),
+            React.createElement(FDC3ColumnCreator, { columnOptions: columnOptions, onNew: (type, fdc3Column) => {
+                    var _a;
+                    handleSetFdc3Columns(type, [...((_a = fdc3Columns[type]) !== null && _a !== void 0 ? _a : []), fdc3Column]);
+                } })),
+        Boolean((_j = fdc3Columns.instrumentColumns) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Instrument Columns"),
+            renderEditor('instrumentColumns', fdc3Columns.instrumentColumns))),
+        Boolean((_k = fdc3Columns.positionColumns) === null || _k === void 0 ? void 0 : _k.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Position Columns"),
+            renderEditor('positionColumns', fdc3Columns.positionColumns))),
+        Boolean((_l = fdc3Columns.contactColumns) === null || _l === void 0 ? void 0 : _l.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Contact Columns"),
+            renderEditor('contactColumns', fdc3Columns.contactColumns))),
+        Boolean((_m = fdc3Columns.countryColumns) === null || _m === void 0 ? void 0 : _m.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Country Columns"),
+            renderEditor('countryColumns', fdc3Columns.countryColumns))),
+        Boolean((_o = fdc3Columns.organizationColumns) === null || _o === void 0 ? void 0 : _o.length) && (React.createElement(rebass_1.Box, null,
+            React.createElement(FinanceFormSectionTitle, null, "Organization Columns"),
+            renderEditor('organizationColumns', fdc3Columns.organizationColumns)))));
+};
+exports.FinanceForm = FinanceForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/index.d.ts

@@ -0,0 +1 @@
+export { FinanceForm } from './FinanceForm';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FinanceForm = void 0;
+var FinanceForm_1 = require("./FinanceForm");
+Object.defineProperty(exports, "FinanceForm", { enumerable: true, get: function () { return FinanceForm_1.FinanceForm; } });

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

@@ -2,7 +2,7 @@
 import { AdaptableOptions } from '../../../types';
 interface GridOptionsFormOptions {
     adaptableOptions: AdaptableOptions;
-    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
 declare const GridOptionsForm: (props: GridOptionsFormOptions) => JSX.Element;
 export default GridOptionsForm;

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

@@ -18,7 +18,7 @@ const GridOptionsForm = (props) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.enableRangeSelection = enableRangeSelection;
-                        props.onChangeadaptableOptions(abOptions);
+                        props.onChangeadAptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
                 React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
@@ -27,21 +27,21 @@ const GridOptionsForm = (props) => {
                         abOptions.gridOptions.defaultColDef = {
                             floatingFilter,
                         };
-                        props.onChangeadaptableOptions(abOptions);
+                        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.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
-                        props.onChangeadaptableOptions(abOptions);
+                        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.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.suppressMenuHide = suppressMenuHide;
-                        props.onChangeadaptableOptions(abOptions);
+                        props.onChangeadAptableOptions(abOptions);
                     } })))));
 };
 exports.default = GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -10,6 +10,7 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLa
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormBox_1 = require("../Components/FormBox");
 const UIOptionsStatusbarForm = (props) => {
     var _a, _b, _c, _d;
     const allPanels = (_c = (_b = (_a = props.abOptions.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
@@ -82,14 +83,7 @@ const UIOptionsStatusbarForm = (props) => {
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Status Bar"),
         React.createElement(rebass_1.Box, { p: 2 },
-            React.createElement(rebass_1.Box, { style: {
-                    border: '1px solid var(--ab-color-primarydark)',
-                    borderRadius: 'var(--ab__border-radius)',
-                    marginBottom: 'var(--ab-space-2)',
-                    paddingBottom: 'var(--ab-space-1)',
-                    backgroundColor: 'var(--ab-color-defaultbackground)',
-                    padding: 'var(--ab-space-2)',
-                } },
+            React.createElement(FormBox_1.NocodeWizardFormBox, null,
                 React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
                 React.createElement(FormLayout_1.default, { mt: 2 },
                     React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AdaptableOptions } from '../../../../types';
 interface UIElementsOptionsProps {
     adaptableOptions: AdaptableOptions;
-    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
 export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
 export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -9,8 +9,8 @@ const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
     let abOptions = props.adaptableOptions;
     return (React.createElement(React.Fragment, null,
-        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
-        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
-        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions })));
+        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
+        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions }),
+        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })));
 };
 exports.UIElementsForm = UIElementsForm;

package/src/View/AdaptableWizardView/Wizard.js

@@ -94,8 +94,8 @@ const Wizard = (props) => {
     }, []);
     const ddEnabled = (_a = props.ddEnabled) !== null && _a !== void 0 ? _a : !props.fetchData;
     return (React.createElement(React.Fragment, null,
-        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-nocode-wizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
-        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-nocode-wizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
+        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-NocodeWizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
+        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
         wizard));
 };
 exports.Wizard = Wizard;

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -14,6 +14,5 @@ export declare class CalculatedColumnSummaryComponent extends React.Component<Ca
     onEdit(calculatedColumn: CalculatedColumn): void;
     onCloseWizard(): void;
     onFinishWizard: (calculatedColumn: CalculatedColumn) => void;
-    canFinishWizard(): boolean;
 }
 export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "ref" | "key" | "api" | "onSuspend" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "moduleInfo" | "onUnSuspend" | "modalContainer" | "onShare" | "onEdit" | "summarisedColumn" | "CalculatedColumns" | "onDeleteConfirm">>;

package/src/View/CalculatedColumn/CalculatedColumnSummary.js

@@ -9,7 +9,6 @@ const CalculatedColumnRedux = tslib_1.__importStar(require("../../Redux/ActionsR
 const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableConfigEntityState");
 const UIHelper_1 = require("../UIHelper");
 const ModuleDetail_1 = require("../Components/ModuleSummary/ModuleDetail");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CalculatedColumnWizard_1 = require("./Wizard/CalculatedColumnWizard");
 class CalculatedColumnSummaryComponent extends React.Component {
     constructor(props) {
@@ -26,10 +25,9 @@ class CalculatedColumnSummaryComponent extends React.Component {
     }
     render() {
         let detailRow;
-        let sharing = this.props.teamSharingActivated;
         this.props.CalculatedColumns.map((item, index) => {
             if (item.ColumnId == this.props.summarisedColumn.columnId) {
-                detailRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: 'UF' + index, item1: this.props.moduleInfo.FriendlyName, item2: this.props.api.queryLanguageApi.getAdaptableQueryExpression(item.Query), configEnity: item, showShare: this.props.teamSharingActivated, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(item), onShare: (config) => this.props.onShare(item, config), onDelete: CalculatedColumnRedux.CalculatedColumnDelete(item), showBold: true, accessLevel: this.props.accessLevel }));
+                detailRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: 'UF' + index, item1: this.props.moduleInfo.FriendlyName, item2: this.props.api.internalApi.getAdaptableQueryExpressionText(item.Query), configEnity: item, showShare: this.props.teamSharingActivated, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(item), onShare: (config) => this.props.onShare(item, config), onDelete: CalculatedColumnRedux.CalculatedColumnDelete(item), showBold: true, accessLevel: this.props.accessLevel }));
             }
         });
         return (React.createElement("div", null,
@@ -50,11 +48,6 @@ class CalculatedColumnSummaryComponent extends React.Component {
             wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
         });
     }
-    canFinishWizard() {
-        let calculatedColumn = this.state.editedAdaptableObject;
-        return (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(calculatedColumn.ColumnId) &&
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.api.queryLanguageApi.getAdaptableQueryExpression(calculatedColumn.Query)));
-    }
 }
 exports.CalculatedColumnSummaryComponent = CalculatedColumnSummaryComponent;
 function mapStateToProps(state) {

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingsTags.d.ts

@@ -0,0 +1,2 @@
+import { CalculatedColumnSettings } from '../../../types';
+export declare const getCalculatedColumnSettingsTags: (settings: CalculatedColumnSettings) => string[];

package/src/View/CalculatedColumn/Utilities/{getCalculatedColumnSettingTags.js → getCalculatedColumnSettingsTags.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCalculatedColumnSettingTags = void 0;
-const getCalculatedColumnSettingTags = (settings) => {
+exports.getCalculatedColumnSettingsTags = void 0;
+const getCalculatedColumnSettingsTags = (settings) => {
     const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings !== null && settings !== void 0 ? settings : {};
     const colTypes = (settings === null || settings === void 0 ? void 0 : settings.ColumnTypes) ? settings.ColumnTypes.join(', ') : '';
     return [
@@ -16,4 +16,4 @@ const getCalculatedColumnSettingTags = (settings) => {
         colTypes ? `Column Types: ${colTypes}` : null,
     ].filter(Boolean);
 };
-exports.getCalculatedColumnSettingTags = getCalculatedColumnSettingTags;
+exports.getCalculatedColumnSettingsTags = getCalculatedColumnSettingsTags;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
+export declare type CalculatedColumnDefinitionWizardSectionProps = {
+    onChange: (data: CalculatedColumn) => void;
+    isEdit: boolean;
+};
+export declare const renderCalculatedColumnDefinitionSummary: (data: CalculatedColumn) => JSX.Element;
+export declare const isValidCalculatedColumnDefinition: (data: CalculatedColumn, api: AdaptableApi) => true | string;
+export declare const CalculatedColumnDefinitionWizardSection: (props: CalculatedColumnDefinitionWizardSectionProps) => JSX.Element;

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalculatedColumnDefinitionWizardSection = exports.isValidCalculatedColumnDefinition = exports.renderCalculatedColumnDefinitionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const renderCalculatedColumnDefinitionSummary = (data) => {
+    var _a;
+    return (React.createElement(rebass_1.Box, { fontSize: 2 },
+        React.createElement(rebass_1.Box, null,
+            "Column Identifier: ",
+            React.createElement(Tag_1.Tag, null, data.ColumnId)),
+        data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
+            "Column Name: ",
+            React.createElement(Tag_1.Tag, null, (_a = data.FriendlyName) !== null && _a !== void 0 ? _a : data.ColumnId))) : null));
+};
+exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefinitionSummary;
+const isValidCalculatedColumnDefinition = (data, api) => {
+    const columns = api.columnApi.getColumns();
+    if (!data.ColumnId) {
+        return 'Column Id cannot be empty';
+    }
+    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
+    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
+    return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
+};
+exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
+const CalculatedColumnDefinitionWizardSection = (props) => {
+    var _a;
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const handleColumnIdChange = (event) => {
+        let e = event.target;
+        props.onChange(Object.assign(Object.assign({}, data), { ColumnId: e.value }));
+    };
+    const handleColumnNameChange = (event) => {
+        let e = event.target;
+        props.onChange(Object.assign(Object.assign({}, data), { FriendlyName: e.value }));
+    };
+    const inEdit = props.isEdit;
+    const validCheck = exports.isValidCalculatedColumnDefinition(data, api);
+    const ErrorMessage = validCheck === true ? null : validCheck;
+    const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
+    const ColumnName = data.FriendlyName;
+    const ColumnId = data.ColumnId;
+    const { ShowToolTip, HeaderToolTip } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
+    const handleSpecialColumnSettingsChange = (settings) => {
+        props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
+    };
+    return (React.createElement(rebass_1.Box, { "data-name": 'calculated-column-definition' },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, null,
+                        React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
+                            React.createElement(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
+                                    setColumnNameFocused(true);
+                                }, onBlur: () => {
+                                    setColumnNameFocused(false);
+                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', width: 300, type: "text", placeholder: "Enter column name", onChange: handleColumnNameChange })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
+                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                    HeaderToolTip: e.target.value,
+                                }) })),
+                        ' ',
+                        React.createElement(FormLayout_1.FormRow, { label: "" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
+        ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null));
+};
+exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;

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

@@ -11,10 +11,11 @@ const Tabs_1 = require("../../../components/Tabs");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const renderCalculatedColumnExpressionSummary = (data) => {
-    var _a;
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
-        "Column scalar expression: ",
-        React.createElement(CodeBlock_1.CodeBlock, null, (_a = data.Query) === null || _a === void 0 ? void 0 : _a.ScalarExpression)));
+        "Column scalar expression:",
+        ' ',
+        React.createElement(CodeBlock_1.CodeBlock, null, api.internalApi.getAdaptableQueryExpressionText(data.Query))));
 };
 exports.renderCalculatedColumnExpressionSummary = renderCalculatedColumnExpressionSummary;
 const isValidCalculatedColumnExpression = (data, api) => {
@@ -46,18 +47,24 @@ QueryTab.defaultProps = {
 const CalculatedColumnExpressionWizardSection = (props) => {
     const { api, data, moduleInfo } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const initialData = react_1.useMemo(() => api.internalApi.getQueryPreviewData(), []);
-    const type = data.Query.AggregatedScalarExpression != undefined
-        ? 'AggregatedScalarExpression'
-        : 'ScalarExpression';
-    const [selectedTab, setSelectedTab] = React.useState(type);
-    const setType = (type) => {
-        setSelectedTab(type);
-        if (type === 'ScalarExpression') {
+    const [selectedTab, setSelectedTab] = React.useState(() => {
+        return data.Query.AggregatedScalarExpression == undefined
+            ? 'ScalarExpression'
+            : api.internalApi
+                .getQueryLanguageService()
+                .isCumulativeAggregate(data.Query.AggregatedScalarExpression)
+                ? 'CumulativeAggregateExpression'
+                : 'AggregatedScalarExpression';
+    });
+    const updateExpressionType = (expressionType) => {
+        setSelectedTab(expressionType);
+        if (expressionType === 'ScalarExpression') {
             props.onChange(Object.assign(Object.assign({}, data), { Query: {
                     ScalarExpression: '',
                 } }));
         }
         else {
+            // CumulativeAggregateExpression & AggregatedScalarExpression use the same property
             props.onChange(Object.assign(Object.assign({}, data), { Query: {
                     AggregatedScalarExpression: '',
                 } }));
@@ -68,12 +75,15 @@ const CalculatedColumnExpressionWizardSection = (props) => {
         const dataType = calculatedColumnExpressionService.getCalculatedColumnDataType(calculatedColumnQuery);
         props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
-        React.createElement(QueryTab, { value: "ScalarExpression", type: type, label: "Scalar" }),
+    return (React.createElement(Tabs_1.Tabs, { onValueChange: updateExpressionType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
+        React.createElement(QueryTab, { value: "ScalarExpression", type: selectedTab, label: "Scalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'ScalarExpression' },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),
-        React.createElement(QueryTab, { value: "AggregatedScalarExpression", type: type, label: "AggregatedScalar" }),
+        React.createElement(QueryTab, { value: "AggregatedScalarExpression", type: selectedTab, label: "AggregatedScalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedScalarExpression' },
-            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedScalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api }))));
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedScalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),
+        React.createElement(QueryTab, { value: "CumulativeAggregateExpression", type: selectedTab, label: "CumulativeAggregatedScalar" }),
+        React.createElement(Tabs_1.Tabs.Content, { value: 'CumulativeAggregateExpression' },
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'cumulativeAggregatedScalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.AggregatedScalarExpression, onChange: (AggregatedScalarExpression) => setCalculatedColumnExpression({ AggregatedScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api }))));
 };
 exports.CalculatedColumnExpressionWizardSection = CalculatedColumnExpressionWizardSection;