@adaptabletools/adaptable 15.4.2 → 16.0.0-canary.0

package/src/Utilities/Services/QueryLanguageService.js

@@ -26,6 +26,8 @@ class QueryLanguageService {
         return parser.evaluate(expression, {
             node: rowNode,
             adaptableApi: this.adaptableApi,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
             functions: booleanAndScalarFunctions,
             evaluateCustomQueryVariable: this.evaluateCustomQueryVariable,
         });
@@ -39,6 +41,8 @@ class QueryLanguageService {
         return parser.evaluate(expression, {
             node: null,
             adaptableApi: this.adaptableApi,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
             functions: aggregatedScalarFunctions,
             evaluateCustomQueryVariable: this.evaluateCustomQueryVariable,
         });
@@ -49,6 +53,8 @@ class QueryLanguageService {
         const reactiveExpression$ = parser.evaluate(reactiveExpression, {
             node: reactiveExpression,
             adaptableApi: this.adaptableApi,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
             functions: moduleExpressionFunctions.observableFunctions,
             whereClauseFunctions: booleanAndScalarFunctions,
             evaluateCustomQueryVariable: this.evaluateCustomQueryVariable,
@@ -61,6 +67,8 @@ class QueryLanguageService {
         const aggregationEvaluation = parser.evaluate(aggregationExpression, {
             node: aggregationExpression,
             adaptableApi: this.adaptableApi,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
             functions: moduleExpressionFunctionsMap.aggregatedBooleanFunctions,
             whereClauseFunctions: booleanAndScalarFunctions,
             evaluateCustomQueryVariable: this.evaluateCustomQueryVariable,
@@ -301,6 +309,8 @@ class QueryLanguageService {
         if (typeof expressionOptions.moduleExpressionFunctions === 'function') {
             const context = {
                 adaptableApi: this.adaptableApi,
+                userName: this.adaptableApi.optionsApi.getUserName(),
+                adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
                 module,
                 availableBooleanFunctionNames: (0, TypeExtensions_1.getTypedKeys)(generalBooleanExpressionFunctions),
                 availableScalarFunctionNames: (0, TypeExtensions_1.getTypedKeys)(generalScalarExpressionFunctions),
@@ -327,6 +337,8 @@ class QueryLanguageService {
         const systemFunctionNames = typeof systemFunctions === 'function'
             ? systemFunctions({
                 adaptableApi: this.adaptableApi,
+                userName: this.adaptableApi.optionsApi.getUserName(),
+                adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
                 availableExpressionFunctionNames: (0, TypeExtensions_1.getTypedKeys)(availableExpressionFunctions),
             })
             : systemFunctions;
@@ -346,6 +358,8 @@ class QueryLanguageService {
         const customFunctionDefinitions = typeof customFunctions === 'function'
             ? customFunctions({
                 adaptableApi: this.adaptableApi,
+                userName: this.adaptableApi.optionsApi.getUserName(),
+                adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
                 availableExpressionFunctionNames: (0, TypeExtensions_1.getTypedKeys)(generalExpressionFunctions),
             })
             : customFunctions;
@@ -358,6 +372,8 @@ class QueryLanguageService {
         var _a, _b, _c;
         const context = {
             adaptableApi: this.adaptableApi,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
             args,
         };
         const customQueryVariableDefinition = (_c = (_b = (_a = this.adaptableApi.optionsApi.getAdaptableQLOptions()) === null || _a === void 0 ? void 0 : _a.expressionOptions) === null || _b === void 0 ? void 0 : _b.customQueryVariables) === null || _c === void 0 ? void 0 : _c[functionName];

package/src/Utilities/Services/ReportService.js

@@ -120,7 +120,7 @@ class ReportService {
     }
     GetReportColumnScopeShortDescription(report) {
         var _a, _b;
-        if (this.adaptableApi.exportApi.isServerReport(report)) {
+        if (this.adaptableApi.exportApi.isExternalReport(report)) {
             return ['[Custom Columns]'];
         }
         switch (report.ReportColumnScope) {
@@ -138,7 +138,7 @@ class ReportService {
         }
     }
     GetReportColumnScopeLongDescription(report) {
-        if (this.adaptableApi.exportApi.isServerReport(report)) {
+        if (this.adaptableApi.exportApi.isExternalReport(report)) {
             return '[Custom Columns]';
         }
         switch (report.ReportColumnScope) {
@@ -153,7 +153,7 @@ class ReportService {
         }
     }
     GetReportExpressionDescription(report, cols) {
-        if (this.adaptableApi.exportApi.isServerReport(report)) {
+        if (this.adaptableApi.exportApi.isExternalReport(report)) {
             return '[Custom Data]';
         }
         if (this.IsSystemReport(report.Name)) {
@@ -189,7 +189,7 @@ class ReportService {
     getReportDataColumns(report, includePrimaryKey = false) {
         let reportColumns = [];
         let gridColumns = this.adaptableApi.columnApi.getExportableColumns();
-        if (this.adaptableApi.exportApi.isServerReport(report)) {
+        if (this.adaptableApi.exportApi.isExternalReport(report)) {
             return reportColumns;
         }
         // first get the cols depending on the Column Scope
@@ -297,8 +297,8 @@ class ReportService {
         return resultRowData;
     }
     getReportData(report, includePrimaryKey = false) {
-        if (this.adaptableApi.exportApi.isServerReport(report)) {
-            return this.adaptableApi.exportApi.runServerReport(report.Name);
+        if (this.adaptableApi.exportApi.isExternalReport(report)) {
+            return this.adaptableApi.exportApi.runExternalReport(report.Name);
         }
         const columns = this.getReportDataColumns(report, includePrimaryKey);
         const rows = this.getReportDataRows(report, columns, includePrimaryKey);
@@ -326,6 +326,8 @@ class ReportService {
             reportDestination: reportDestination,
             liveDataTrigger: liveDataTrigger,
             liveReport: liveReport,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
         };
         this.adaptableApi.eventApi.emit('LiveDataChanged', liveDataChangedInfo);
     }

package/src/Utilities/Services/RowEditService.js

@@ -6,7 +6,7 @@ class RowEditService {
     constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
         const adaptableInstance = this.adaptableApi.internalApi.getAdaptableInstance();
-        if (adaptableInstance.adaptableOptions.actionOptions.actionRowButtonOptions.autoHandle) {
+        if (adaptableInstance.adaptableOptions.actionRowOptions.autoHandle) {
             adaptableInstance.api.eventApi.on('ActionRowSubmitted', (eventInfo) => this.autoHandleActionRowButtons(eventInfo));
         }
     }
@@ -24,12 +24,14 @@ class RowEditService {
         }
         if (actionRowSubmittedInfo.type === 'rowCreated') {
             const { formData } = actionRowSubmittedInfo;
-            const setPrimaryKeyValueFunction = adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionOptions
+            const setPrimaryKeyValueFunction = adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.actionRowOptions
                 .actionRowButtonOptions.setPrimaryKeyValue;
             const newRowData = typeof setPrimaryKeyValueFunction === 'function'
                 ? setPrimaryKeyValueFunction({
                     rowData: formData,
                     adaptableApi,
+                    userName: this.adaptableApi.optionsApi.getUserName(),
+                    adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
                 })
                 : Object.assign({}, formData);
             const config = {

package/src/Utilities/Services/ValidationService.js

@@ -76,6 +76,8 @@ class ValidationService {
         const serverValidationContext = {
             cellDataChangedInfo: cellDataChangedInfo,
             adaptableApi: this.adaptableApi,
+            userName: this.adaptableApi.optionsApi.getUserName(),
+            adaptableId: this.adaptableApi.optionsApi.getAdaptableId(),
         };
         return () => {
             this.adaptableApi.optionsApi

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

@@ -14,8 +14,8 @@ const UIOptionsActionColumnsForm = (props) => {
         { value: 'edit', label: 'Edit' },
         { value: 'delete', label: 'Delete' },
     ];
-    const actionRowButtons = Array.isArray((_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons)
-        ? (_d = (_c = props.abOptions) === null || _c === void 0 ? void 0 : _c.actionOptions) === null || _d === void 0 ? void 0 : _d.actionRowButtons
+    const actionRowButtons = Array.isArray((_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionRowOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons)
+        ? (_d = (_c = props.abOptions) === null || _c === void 0 ? void 0 : _c.actionRowOptions) === null || _d === void 0 ? void 0 : _d.actionRowButtons
         : (_e = []) !== null && _e !== void 0 ? _e : [];
     const handleCheckChange = (type, checked) => {
         var _a;
@@ -26,7 +26,7 @@ const UIOptionsActionColumnsForm = (props) => {
         else {
             newActionRowButtons = newActionRowButtons.filter((item) => item !== type);
         }
-        props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions), { actionRowButtons: newActionRowButtons }) }));
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionRowOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionRowOptions), { actionRowButtons: newActionRowButtons }) }));
     };
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Action Row Buttons"),

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

@@ -21,7 +21,7 @@ exports.renderCalculatedColumnExpressionSummary = renderCalculatedColumnExpressi
 const isValidCalculatedColumnExpression = (data, api) => {
     var _a;
     const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
-    const expression = (_a = api.queryLanguageApi.getAdaptableQueryExpression(data.Query)) === null || _a === void 0 ? void 0 : _a.trim();
+    const expression = (_a = api.expressionApi.getAdaptableQueryExpression(data.Query)) === null || _a === void 0 ? void 0 : _a.trim();
     if (!expression) {
         return 'Calculated column expression cannot be empty';
     }

package/src/View/CellSummary/CellSummaryStatusPanel.js

@@ -17,7 +17,7 @@ const CellSummaryStatusPanel = () => {
     const module = adaptable.ModuleService.getModuleById(ModuleConstants.CellSummaryModuleId);
     const text = `${cellSummaryApi.getCurrentCellSummaryOperation()}: ${(_a = cellSummaryApi.getCurrentCellSummaryOperationValue()) !== null && _a !== void 0 ? _a : 'N/A'}`;
     const onAction = () => {
-        adaptable.api.cellSummaryApi.showCellSummaryPopup();
+        adaptable.api.cellSummaryApi.openCellSummaryPopupSettingsPanel();
     };
     React.useEffect(() => {
         let cleanupEvent = () => null;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { IconSelectorProps } from '../../../components/IconSelector';
+/**
+ * This component connects to adaptable to retrieve custom icons
+ */
+export declare const AdaptableIconSelector: React.FunctionComponent<IconSelectorProps>;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableIconSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const IconSelector_1 = require("../../../components/IconSelector");
+const AdaptableContext_1 = require("../../AdaptableContext");
+/**
+ * This component connects to adaptable to retrieve custom icons
+ */
+const AdaptableIconSelector = (props) => {
+    var _a, _b;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const userInterfaceOptions = (_a = adaptable.api.optionsApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.userInterfaceOptions;
+    const customDefinedIcons = (_b = userInterfaceOptions.customIcons) !== null && _b !== void 0 ? _b : [];
+    return React.createElement(IconSelector_1.IconSelector, Object.assign({ customIcons: customDefinedIcons }, props));
+};
+exports.AdaptableIconSelector = AdaptableIconSelector;

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

@@ -126,9 +126,9 @@ const AdaptableObjectListItem = (props) => {
     const showEditButton = Boolean(EditWizard);
     const adaptableOpttions = adaptable.api.optionsApi.getAdaptableOptions();
     const disableDeleteConfirmationState = (0, react_redux_1.useSelector)((adaptableState) => SystemRedux.SystemDisableDeleteConfirmationSelector(adaptableState.System));
-    const disableDeleteConfirmation = disableDeleteConfirmationState || ((_h = adaptableOpttions === null || adaptableOpttions === void 0 ? void 0 : adaptableOpttions.generalOptions) === null || _h === void 0 ? void 0 : _h.disableDeleteConfirmation);
+    const disableDeleteConfirmation = disableDeleteConfirmationState || ((_h = adaptableOpttions === null || adaptableOpttions === void 0 ? void 0 : adaptableOpttions.userInterfaceOptions) === null || _h === void 0 ? void 0 : _h.disableDeleteConfirmation);
     return (React.createElement(React.Fragment, null,
-        React.createElement(exports.AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
+        React.createElement(exports.AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
         isEditWizardVisible && EditWizard && (React.createElement(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))));
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AdaptableIconComponentProps } from '../../../components/AdaptableIconComponent';
+export interface AdaptableViewIconProps extends AdaptableIconComponentProps {
+}
+/**
+ * This component is a wrapper around AdaptableIconComponent
+ * It connects to adaptable and handles custom icons
+ * @param props
+ */
+export declare const AdaptableViewIcon: React.FunctionComponent<AdaptableViewIconProps>;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableViewIcon = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const AdaptableContext_1 = require("../../AdaptableContext");
+/**
+ * This component is a wrapper around AdaptableIconComponent
+ * It connects to adaptable and handles custom icons
+ * @param props
+ */
+const AdaptableViewIcon = (_a) => {
+    var iconProps = tslib_1.__rest(_a, []);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, Object.assign({}, iconProps));
+};
+exports.AdaptableViewIcon = AdaptableViewIcon;

package/src/View/Components/EntityRulesEditor/Utilities.js

@@ -9,17 +9,17 @@ const isAdaptableRuleValid = (abObject, api, context) => {
         }
     }
     if ((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.BooleanExpression) {
-        if (!api.queryLanguageApi.isValidBooleanExpression((_g = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _g === void 0 ? void 0 : _g.BooleanExpression, context.moduleInfo.ModuleName)) {
+        if (!api.expressionApi.isValidBooleanExpression((_g = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _g === void 0 ? void 0 : _g.BooleanExpression, context.moduleInfo.ModuleName)) {
             return 'The Expression is not a valid Boolean Expression';
         }
     }
     if ((_h = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _h === void 0 ? void 0 : _h.ObservableExpression) {
-        if (!api.queryLanguageApi.isValidObservableExpression((_j = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, context.moduleInfo.ModuleName)) {
+        if (!api.expressionApi.isValidObservableExpression((_j = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, context.moduleInfo.ModuleName)) {
             return 'The Expression is not a valid Observable Expression';
         }
     }
     if ((_k = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _k === void 0 ? void 0 : _k.AggregatedBooleanExpression) {
-        if (!api.queryLanguageApi.isValidAggregatedBooleanExpression((_l = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _l === void 0 ? void 0 : _l.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
+        if (!api.expressionApi.isValidAggregatedBooleanExpression((_l = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _l === void 0 ? void 0 : _l.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
             return 'The Expression is not a valid Aggregated Boolean Expression';
         }
     }

package/src/View/Components/ExternalRenderer.js

@@ -13,7 +13,13 @@ const ExternalRenderer = (_a) => {
         const element = ref.current;
         const adaptableApi = adaptable.api;
         if (render) {
-            const html = render({ visible: true, element, adaptableApi });
+            const html = render({
+                visible: true,
+                element,
+                adaptableApi,
+                userName: adaptableApi.optionsApi.getUserName(),
+                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+            });
             setContentsHTML(html);
         }
         else if (frameworkComponent) {
@@ -21,7 +27,13 @@ const ExternalRenderer = (_a) => {
         }
         return () => {
             if (render) {
-                render({ visible: false, element: element, adaptableApi });
+                render({
+                    visible: false,
+                    element: element,
+                    adaptableApi,
+                    userName: adaptableApi.optionsApi.getUserName(),
+                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                });
             }
             else if (frameworkComponent) {
                 adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 

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

@@ -61,6 +61,8 @@ class QuickFilterFormComponent extends React.Component {
             const filterContext = {
                 column: this.props.currentColumn,
                 adaptableApi: this.props.api,
+                userName: this.props.api.optionsApi.getUserName(),
+                adaptableId: this.props.api.optionsApi.getAdaptableId(),
             };
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(filterContext);
         }
@@ -70,6 +72,8 @@ class QuickFilterFormComponent extends React.Component {
             const filterContext = {
                 column: this.props.currentColumn,
                 adaptableApi: this.props.api,
+                userName: this.props.api.optionsApi.getUserName(),
+                adaptableId: this.props.api.optionsApi.getAdaptableId(),
             };
             showQuickFilterInput = !hideQuickFilterInputFunction(filterContext);
         }

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

@@ -21,6 +21,13 @@ const QuickFilterValues = (props) => {
         counter: 0,
     });
     const [transientColumnFilter, setTransientColumnFilter] = React.useState(null);
+    const clearColumnFilter = () => {
+        var _a;
+        props.clearColumnFilter();
+        if (!((_a = props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter)) {
+            props.api.gridApi.applyGridFiltering();
+        }
+    };
     const onColumnValueSelectedChange = (columnValues) => {
         var _a;
         const { columnFilter } = props;
@@ -151,7 +158,7 @@ const QuickFilterValues = (props) => {
                     width: getPopoverWidth(targetWidth),
                 } },
                 React.createElement(rebass_1.Flex, { m: 2 },
-                    React.createElement(SimpleButton_1.default, { onClick: () => props.clearColumnFilter() }, "Clear Filter"),
+                    React.createElement(SimpleButton_1.default, { onClick: () => clearColumnFilter() }, "Clear Filter"),
                     ((_a = api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => {
                             if (transientColumnFilter) {
                                 props.updateColumnFilter(transientColumnFilter);

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

@@ -41,6 +41,8 @@ const AdaptablePopupAlert = (props) => {
             alert: props.adaptableAlert,
             adaptableApi: api,
             formData: formData,
+            userName: api.optionsApi.getUserName(),
+            adaptableId: api.optionsApi.getAdaptableId(),
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
     const adaptableForm = React.useMemo(() => {

package/src/View/Components/RangesComponent.d.ts

@@ -26,17 +26,17 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     render(): JSX.Element;
     private onRangesTypeChanged;
     private handleRangeValueTypeChange;
-    changeRangeMin(index: number, value: string): void;
-    changeRangeMax(index: number, value: string): void;
+    changeRangeMin(index: number, value: number): void;
+    changeRangeMax(index: number, value: number): void;
     changeRangeColor(index: number, value: string): void;
     changeRangeDirectionUp(index: number, checked: boolean): void;
     removeRange(index: number): void;
     setRangeColMin(range: CellColorRange): void;
     setRangeColMax(range: CellColorRange): void;
     addRange(): void;
-    changeColumnComparisonMinValue(event: React.FormEvent<any>): void;
+    changeColumnComparisonMinValue(value: number): void;
     private onMinColumnSelectedChanged;
-    changeColumnComparisonMaxValue(event: React.FormEvent<any>): void;
+    changeColumnComparisonMaxValue(value: number): void;
     private onMaxColumnSelectedChanged;
     changeColumnComparisonColor(value: string): void;
 }

package/src/View/Components/RangesComponent.js

@@ -6,10 +6,9 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const ColorPicker_1 = require("../../components/ColorPicker");
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
+const NumberInput_1 = require("../../components/Input/NumberInput");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const UIHelper_1 = require("../UIHelper");
 const ColumnSelector_1 = require("./Selectors/ColumnSelector");
@@ -62,18 +61,16 @@ class RangesComponent extends React.Component {
                     _b.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
                             isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
-                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: this.props.disabled ||
+                            React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled ||
                                     range.Min === 'Col-Min' ||
-                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (event) => {
-                                    const { value } = event.target;
+                                    (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
                                     this.changeRangeMin(index, value);
                                 }, mr: 2 })),
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
                             isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
-                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: this.props.disabled ||
+                            React.createElement(NumberInput_1.NumberInput, { value: range.Max, disabled: this.props.disabled ||
                                     range.Max === 'Col-Max' ||
-                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (event) => {
-                                    const { value } = event.target;
+                                    (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                     this.changeRangeMax(index, value);
                                 }, mr: 2 })),
                         React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
@@ -94,12 +91,12 @@ class RangesComponent extends React.Component {
                             this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
                             " for the Bar."),
                         React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
-                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (e) => {
-                                        this.changeColumnComparisonMinValue(e);
+                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
+                                        this.changeColumnComparisonMinValue(value);
                                     } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
                             ' ',
-                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
-                                        this.changeColumnComparisonMaxValue(e);
+                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
+                                        this.changeColumnComparisonMaxValue(value);
                                     } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
                             React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
@@ -210,12 +207,9 @@ class RangesComponent extends React.Component {
         const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
     }
-    changeColumnComparisonMinValue(event) {
-        let e = event.target;
+    changeColumnComparisonMinValue(value) {
         const { columnComparison } = this.props;
-        columnComparison.MinValue = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(e.value)
-            ? Number(e.value)
-            : undefined;
+        columnComparison.MinValue = value;
         this.props.updateColumnComparison(columnComparison);
     }
     onMinColumnSelectedChanged(columns) {
@@ -223,12 +217,9 @@ class RangesComponent extends React.Component {
         columnComparison.MinValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
-    changeColumnComparisonMaxValue(event) {
-        let e = event.target;
+    changeColumnComparisonMaxValue(value) {
         const { columnComparison } = this.props;
-        columnComparison.MaxValue = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(e.value)
-            ? Number(e.value)
-            : undefined;
+        columnComparison.MaxValue = value;
         this.props.updateColumnComparison(columnComparison);
     }
     onMaxColumnSelectedChanged(columns) {

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -149,6 +149,8 @@ const AdaptableToolPanelComponent = (props) => {
             // with the next opportunity we should abstract it
             const toolPanelContext = {
                 adaptableApi: props.api,
+                userName: props.api.optionsApi.getUserName(),
+                adaptableId: props.api.optionsApi.getAdaptableId(),
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
             const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -23,6 +23,8 @@ const CustomToolPanelContent = (props) => {
                 visible: true,
                 element,
                 adaptableApi: api,
+                userName: api.optionsApi.getUserName(),
+                adaptableId: api.optionsApi.getAdaptableId(),
             };
             const html = customToolPanel.render(customRenderContext);
             setContentsHTML(html);
@@ -32,7 +34,13 @@ const CustomToolPanelContent = (props) => {
         }
         return () => {
             if (hasCustomRenderFn(customToolPanel)) {
-                customToolPanel.render({ visible: false, element, adaptableApi: api });
+                customToolPanel.render({
+                    visible: false,
+                    element,
+                    adaptableApi: api,
+                    userName: api.optionsApi.getUserName(),
+                    adaptableId: api.optionsApi.getAdaptableId(),
+                });
             }
             else if (hasCustomFrameworkComponent(customToolPanel) && !api.isDestroyed()) {
                 api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
@@ -46,6 +54,8 @@ const CustomToolPanelContent = (props) => {
             // with the next opportunity we should abstract it
             const toolPanelContext = {
                 adaptableApi: api,
+                userName: api.optionsApi.getUserName(),
+                adaptableId: api.optionsApi.getAdaptableId(),
                 toolPanelState: api.toolPanelApi.getToolPanelState(),
                 customToolPanel: customToolPanel,
             };

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -27,7 +27,7 @@ const CustomSortColumnWizardSection = (props) => {
     const sortableCols = React.useMemo(() => {
         const sortableColumns = api.columnApi.getSortableColumns();
         const customSorts = api.customSortApi.getCustomSorts();
-        const columnSortComparers = api.optionsApi.getGeneralOptions().customSortComparers || [];
+        const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),
             ...columnSortComparers.map((comparer) => api.scopeApi.getColumnIdsInScope(comparer.scope)),

package/src/View/Dashboard/CustomDashboardButton.js

@@ -13,6 +13,8 @@ const CustomDashboardButton = (props) => {
     // with the next opportunity we should abstract it
     const dashboardContext = {
         adaptableApi: props.api,
+        userName: props.api.optionsApi.getUserName(),
+        adaptableId: props.api.optionsApi.getAdaptableId(),
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
     const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -23,6 +23,8 @@ const CustomToolbarWrapper = (props) => {
                 visible: true,
                 element,
                 adaptableApi,
+                userName: adaptableApi.optionsApi.getUserName(),
+                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
             });
             setContentsHTML(html);
         }
@@ -33,7 +35,13 @@ const CustomToolbarWrapper = (props) => {
         // cleanup runs in a separate effect, this way it's executed only once on unmount
         return () => {
             if (props.customToolbar.render) {
-                props.customToolbar.render({ visible: false, element, adaptableApi });
+                props.customToolbar.render({
+                    visible: false,
+                    element,
+                    adaptableApi,
+                    userName: adaptableApi.optionsApi.getUserName(),
+                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                });
             }
         };
     }, []);
@@ -60,6 +68,8 @@ const CustomToolbarWrapper = (props) => {
             const customToolbarConfiguredInfo = {
                 adaptableApi: api,
                 customToolbar: props.customToolbar,
+                userName: api.optionsApi.getUserName(),
+                adaptableId: api.optionsApi.getAdaptableId(),
             };
             api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
         }, accessLevel: api.internalApi
@@ -73,6 +83,8 @@ const CustomToolbarWrapper = (props) => {
                 const dashboardContext = {
                     customToolbar: props.customToolbar,
                     adaptableApi: api,
+                    userName: api.optionsApi.getUserName(),
+                    adaptableId: api.optionsApi.getAdaptableId(),
                     dashboardState: api.dashboardApi.getDashboardState(),
                 };
                 const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -64,7 +64,7 @@ const DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.optionsApi.getAgGridOptions().api.applyTransactionAsync({
+        adaptableApi.gridApi.getAgGridInstance().api.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });
@@ -81,10 +81,10 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const changeKey = rowData === null || rowData === void 0 ? void 0 : rowData['changeKey'];
         changeKey && onUndoChange(changeKey);
     };
-    const actionColumnButton = (0, buildActionColumnButton_1.buildActionColumnButton)((_a = mainAdaptableInstance.adaptableOptions) === null || _a === void 0 ? void 0 : _a.dataChangeHistoryOptions, undoRowNode);
-    let actionOptions = undefined;
+    const actionColumnButton = (0, buildActionColumnButton_1.buildActionColumnButton)((_a = mainAdaptableInstance.adaptableOptions) === null || _a === void 0 ? void 0 : _a.dataChangeHistoryOptions, mainAdaptableInstance.api, undoRowNode);
+    let actionColumnOptions = undefined;
     if (actionColumnButton) {
-        actionOptions = {
+        actionColumnOptions = {
             actionColumns: [
                 {
                     columnId: 'undoActionColumn',
@@ -116,7 +116,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
             createDefaultLayout: false,
             autoSizeColumnsInLayout: true,
         },
-        actionOptions: actionOptions,
+        actionColumnOptions: actionColumnOptions,
         predefinedConfig: {
             Layout: {
                 Revision: Date.now(),