@adaptabletools/adaptable 10.0.2 → 10.0.4-canary.2

package/src/View/Components/Selectors/ColumnValueSelector.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
 import { DropdownButtonProps } from '../../../components/DropdownButton';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { GridCell } from '../../../types';
 export interface ColumnValueSelectorProps extends React.HTMLProps<ColumnValueSelector> {
     selectedColumn: AdaptableColumn;
     selectedColumnValue: string;
@@ -12,19 +13,26 @@ export interface ColumnValueSelectorProps extends React.HTMLProps<ColumnValueSel
     newLabel?: string;
     existingLabel?: string;
     dropdownButtonProps?: DropdownButtonProps;
+    selectedGridCells: GridCell[];
 }
 declare enum NEW_OR_EXISTING {
     existing = "Existing value",
     new = "New value"
 }
-export declare class ColumnValueSelector extends React.Component<ColumnValueSelectorProps, {
+interface ColumnValueSelectorState {
     newOrExisting: NEW_OR_EXISTING;
-}> {
+    distinctColumnValues: any[];
+    isDistinctColumnValuesLoading: boolean;
+}
+export declare class ColumnValueSelector extends React.Component<ColumnValueSelectorProps, ColumnValueSelectorState> {
     static defaultProps: {
         newLabel: string;
         existingLabel: string;
     };
     constructor(props: ColumnValueSelectorProps);
+    componentDidUpdate(prevProps: ColumnValueSelectorProps): void;
+    loadPermittedValues: () => Promise<void>;
+    handleSelectedValueExpand: () => void;
     render(): JSX.Element;
     onSelectedValueChange(selected: any[]): void;
 }

package/src/View/Components/Selectors/ColumnValueSelector.js

@@ -10,6 +10,8 @@ const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWr
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 var NEW_OR_EXISTING;
 (function (NEW_OR_EXISTING) {
     NEW_OR_EXISTING["existing"] = "Existing value";
@@ -18,35 +20,65 @@ var NEW_OR_EXISTING;
 class ColumnValueSelector extends React.Component {
     constructor(props) {
         super(props);
+        this.loadPermittedValues = async () => {
+            var _a;
+            if (!((_a = this.props.selectedColumn) === null || _a === void 0 ? void 0 : _a.columnId)) {
+                return;
+            }
+            // JW "fixed" this by replacing display values with raw values but really we should do it nicer in some way
+            // so that you we show the display value but we work on the raw value
+            const columnDisplayValuePairs = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctBulkUpdateDisplayValuesForColumn(this.props.selectedColumn.columnId, this.props.selectedGridCells), () => this.setState({ isDistinctColumnValuesLoading: true }));
+            this.setState({ isDistinctColumnValuesLoading: false });
+            const newSortedColumnValues = ArrayExtensions_1.ArrayExtensions.sortArray(columnDisplayValuePairs, Enums_1.SortOrder.Asc).map((v) => ({
+                label: v,
+                value: v,
+                onClick: () => this.onSelectedValueChange([{ DisplayValue: v }]),
+            }));
+            this.setState({
+                distinctColumnValues: newSortedColumnValues,
+            });
+        };
+        this.handleSelectedValueExpand = () => {
+            // load only if not loaded
+            if (!this.state.distinctColumnValues.length) {
+                this.loadPermittedValues();
+            }
+        };
         this.state = {
             newOrExisting: NEW_OR_EXISTING.existing,
+            distinctColumnValues: [],
+            isDistinctColumnValuesLoading: false,
         };
     }
+    componentDidUpdate(prevProps) {
+        if (this.props.selectedColumn !== prevProps.selectedColumn ||
+            this.props.selectedGridCells !== prevProps.selectedGridCells) {
+            this.loadPermittedValues();
+        }
+    }
     render() {
         let placeholderText = 'Select';
-        let sortedColumnValues = [];
         let allowNew = this.props.allowNew != null ? this.props.allowNew : true;
         if (allowNew) {
             // placeholderText += ' or enter free text';
         }
+        const baseClassName = 'ab-column-value-selector';
+        const className = join_1.default('ab-column-value-selector', this.state.isDistinctColumnValuesLoading && `${baseClassName}--loading`);
         const fieldWidth = 150;
-        if (this.props.selectedColumn != null) {
-            // JW "fixed" this by replacing display values with raw values but really we should do it nicer in some way
-            // so that you we show the display value but we work on the raw value
-            let columnDisplayValuePairs = this.props.api.columnApi.getDistinctRawValuesForColumn(this.props.selectedColumn.ColumnId);
-            let test = ArrayExtensions_1.ArrayExtensions.sortArray(columnDisplayValuePairs, Enums_1.SortOrder.Asc);
-            sortedColumnValues = test.map((v) => ({
-                label: v,
-                value: v,
-                onClick: () => this.onSelectedValueChange([{ DisplayValue: v }]),
-            }));
-        }
+        const items = this.state.isDistinctColumnValuesLoading
+            ? [
+                {
+                    label: 'Loading',
+                    disabled: true,
+                },
+            ]
+            : this.state.distinctColumnValues;
         const dd = (React.createElement("div", null,
-            React.createElement(DropdownButton_1.default, { className: "ab-column-value-selector", columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: sortedColumnValues }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
+            React.createElement(DropdownButton_1.default, { className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
         const input = (React.createElement(AdaptableInput_1.default, { type: this.props.selectedColumn
-                ? UIHelper_1.default.getDescriptionForDataType(this.props.selectedColumn.DataType)
+                ? UIHelper_1.default.getDescriptionForDataType(this.props.selectedColumn.dataType)
                 : 'text', placeholder: this.props.selectedColumn
-                ? UIHelper_1.default.getPlaceHolderforDataType(this.props.selectedColumn.DataType)
+                ? UIHelper_1.default.getPlaceHolderforDataType(this.props.selectedColumn.dataType)
                 : 'Enter Value', autoFocus: true, disabled: this.props.disabled, style: { width: fieldWidth }, value: this.props.selectedColumnValue, onChange: (e) => {
                 this.onSelectedValueChange([
                     { customOption: true, DisplayValue: e.target.value },

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

@@ -41,7 +41,7 @@ const AdaptableToolPanelComponent = (props) => {
     if (!entitlementService.isModuleHiddenEntitlement('Dashboard')) {
         availableModules.push('Dashboard');
     }
-    if (props.api.pluginsApi.getIpushpullPluginApi() &&
+    if (props.api.pluginsApi.getipushpullPluginApi() &&
         !entitlementService.isModuleHiddenEntitlement('IPushPull')) {
         availableModules.push('IPushPull');
     }
@@ -154,11 +154,11 @@ const AdaptableToolPanelComponent = (props) => {
         ];
         props.Columns.forEach((col, index) => {
             colItems.push({
-                id: col.ColumnId,
+                id: col.columnId,
                 onClick: () => {
-                    onSetColumnVisibility(col.ColumnId);
+                    onSetColumnVisibility(col.columnId);
                 },
-                label: (React.createElement(CheckBox_1.CheckBox, { as: "div", className: "ab-dd-checkbox", variant: "agGrid", my: 0, value: col.ColumnId, key: col.ColumnId, checked: col.Visible, onMouseDown: preventDefault }, col.FriendlyName)),
+                label: (React.createElement(CheckBox_1.CheckBox, { as: "div", className: "ab-dd-checkbox", variant: "agGrid", my: 0, value: col.columnId, key: col.columnId, checked: col.visible, onMouseDown: preventDefault }, col.friendlyName)),
             });
         });
         return (React.createElement(DropdownButton_1.default, { listMinWidth: 150, variant: "text", tone: "none", collapseOnItemClick: false, items: colItems, columns: ['label'], className: "ab-Toolpanel__columns", key: 'dropdown-cols', id: 'dropdown-cols', tooltip: "Select Columns" }, colsGlyph));
@@ -180,7 +180,7 @@ const AdaptableToolPanelComponent = (props) => {
                 };
                 const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
                 const toolPanelContext = {
-                    api: props.api,
+                    adaptableApi: props.api,
                     toolPanelState: props.api.toolPanelApi.getToolPanelState(),
                 };
                 let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
@@ -213,11 +213,11 @@ const AdaptableToolPanelComponent = (props) => {
         let changedColumn = props.api.columnApi.getColumnFromId(name);
         let columns = [].concat(props.Columns);
         changedColumn = Object.assign({}, changedColumn, {
-            Visible: !changedColumn.Visible,
+            Visible: !changedColumn.visible,
         });
-        let index = columns.findIndex((x) => x.ColumnId == name);
+        let index = columns.findIndex((x) => x.columnId == name);
         columns[index] = changedColumn;
-        props.onNewColumnListOrder(columns.filter((c) => c.Visible).map((c) => c.ColumnId));
+        props.onNewColumnListOrder(columns.filter((c) => c.visible).map((c) => c.columnId));
     };
     const onSetToolPanelVisibility = (name, checked) => {
         if (checked) {
@@ -238,7 +238,6 @@ const AdaptableToolPanelComponent = (props) => {
     const toolPanelButtons = renderToolPanelButtons();
     return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
-            minWidth: 'var(--ab-cmp-toolpanel__width)',
         } },
         React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, style: { width: '100%' } },
             renderModuleDropdowns(),
@@ -271,8 +270,8 @@ exports.ConnectedAdaptableToolPanel = react_redux_1.connect(mapStateToProps, map
 exports.getAdaptableToolPanelAgGridComponent = (adaptable) => {
     return class AdaptableToolPanelAgGridComponent {
         init(params) {
-            const vendorGridApi = params.api;
-            const Adaptable = vendorGridApi.__adaptable || adaptable;
+            const agGridApi = params.api;
+            const Adaptable = agGridApi.__adaptable || adaptable;
             const api = Adaptable.api;
             this.gui = document.createElement('div');
             this.gui.id = 'adaptable-tool-panel_' + Adaptable.adaptableOptions.adaptableId;

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

@@ -48,7 +48,7 @@ exports.CustomToolPanelContent = (props) => {
             };
             const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
             const toolPanelContext = {
-                api,
+                adaptableApi: api,
                 toolPanelState: api.toolPanelApi.getToolPanelState(),
                 customToolPanel: customToolPanel,
             };

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

@@ -45,7 +45,7 @@ class ToolPanelPopupComponent extends React.Component {
         if (!entitlementService.isModuleHiddenEntitlement('Dashboard')) {
             availableModules.push('Dashboard');
         }
-        if (this.props.api.pluginsApi.getIpushpullPluginApi() &&
+        if (this.props.api.pluginsApi.getipushpullPluginApi() &&
             !entitlementService.isModuleHiddenEntitlement('IPushPull')) {
             availableModules.push('IPushPull');
         }
@@ -81,8 +81,7 @@ class ToolPanelPopupComponent extends React.Component {
         this.setState({ ToolPanelConfigView: ToolPanelConfigView });
     }
     onToolPanelToolPanelsChanged(selectedValues) {
-        const currentSelectedToolPanelDefinitions = this.props
-            .ToolPanelState.ToolPanels;
+        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
         // try to return the pre-existing definition (to maintain the previous collapsed state)
         // otherwise select the new toolPanel with the default 'collapsed' state
         let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {

package/src/View/ConditionalStyle/ConditionalStylePopup.js

@@ -61,7 +61,7 @@ class ConditionalStylePopupComponent extends React.Component {
                 if (this.props.popupParams.action == 'New') {
                     _editedConditionalStyle = ObjectFactory_1.ObjectFactory.CreateEmptyConditionalStyle();
                     _editedConditionalStyle.Scope = {
-                        ColumnIds: [column.ColumnId],
+                        ColumnIds: [column.columnId],
                     };
                     this.setState({
                         editedAdaptableObject: _editedConditionalStyle,

package/src/View/ConditionalStyle/ConditionalStyleSummary.js

@@ -57,7 +57,7 @@ class ConditionalStyleSummaryComponent extends React.Component {
     onNew() {
         let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyConditionalStyle();
         configEntity.Scope = {
-            ColumnIds: [this.props.summarisedColumn.ColumnId],
+            ColumnIds: [this.props.summarisedColumn.columnId],
         };
         this.setState({
             editedAdaptableObject: configEntity,

package/src/View/CustomSort/CustomSortEntityRow.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { SharedEntityRowProps } from '../Components/SharedProps/ConfigEntityRowProps';
 import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableScope } from '../../../types';
 export interface CustomSortEntityRowProps extends SharedEntityRowProps<CustomSortEntityRow> {
-    column: AdaptableColumn;
+    column?: AdaptableColumn;
+    scope?: AdaptableScope;
 }
 export declare class CustomSortEntityRow extends React.Component<CustomSortEntityRowProps, {}> {
     render(): any;

package/src/View/CustomSort/CustomSortEntityRow.js

@@ -11,13 +11,13 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exten
 const Helper_1 = require("../../Utilities/Helpers/Helper");
 class CustomSortEntityRow extends React.Component {
     render() {
+        var _a;
         let customSort = this.props.adaptableObject;
         const columnSortComparer = this.props.api.internalApi.getCustomSortComparer(this.props.column);
         let colItems = Helper_1.cloneObject(this.props.colItems);
-        colItems[0].Content = React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.column.FriendlyName });
+        colItems[0].Content = this.props.column ? (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.column.friendlyName })) : this.props.scope ? (React.createElement(EntityRowItem_1.EntityRowItem, { Content: this.props.api.scopeApi.getScopeToString(this.props.scope) })) : (React.createElement("p", null, "Nothing"));
         colItems[1].Content = (React.createElement(EntityRowItem_1.EntityRowItem, { Content: customSort ? this.getCustomSortedValues(customSort) : 'Custom Sort Function' }));
-        colItems[2].Content = (React.createElement(EntityListActionButtons_1.EntityListActionButtons, { showSuspend: true, suspendableObject: customSort, confirmDeleteAction: this.props.onDeleteConfirm, editClick: () => this.props.onEdit(customSort), shareClick: (config) => this.props.onShare(config), showShare: this.props.teamSharingActivated, overrideDisableEdit: columnSortComparer != undefined ||
-                this.props.column.FriendlyName.includes(GeneralConstants.MISSING_COLUMN), entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
+        colItems[2].Content = (React.createElement(EntityListActionButtons_1.EntityListActionButtons, { showSuspend: true, suspendableObject: customSort, confirmDeleteAction: this.props.onDeleteConfirm, editClick: () => this.props.onEdit(customSort), shareClick: (config) => this.props.onShare(config), showShare: this.props.teamSharingActivated, overrideDisableEdit: columnSortComparer != undefined || ((_a = this.props.column) === null || _a === void 0 ? void 0 : _a.friendlyName.includes(GeneralConstants.MISSING_COLUMN)), entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend }));
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { isSuspended: customSort.IsSuspended, colItems: colItems });
     }
     getCustomSortedValues(customSort) {

package/src/View/CustomSort/CustomSortPopup.js

@@ -53,7 +53,7 @@ class CustomSortPopupComponent extends React.Component {
     componentDidMount() {
         if (this.props.popupParams) {
             if (this.props.popupParams.action && this.props.popupParams.column) {
-                let columnId = this.props.popupParams.column.ColumnId;
+                let columnId = this.props.popupParams.column.columnId;
                 if (this.props.popupParams.action == 'New') {
                     let newCustomSort = ObjectFactory_1.ObjectFactory.CreateEmptyCustomSort();
                     newCustomSort.ColumnId = columnId;
@@ -82,7 +82,7 @@ class CustomSortPopupComponent extends React.Component {
         const columnSortComparers = (_a = this.props.api.internalApi
             .getAdaptableOptions()
             .generalOptions.customSortComparers) === null || _a === void 0 ? void 0 : _a.map((comparer, index) => {
-            return (React.createElement(CustomSortEntityRow_1.CustomSortEntityRow, { colItems: colItems, api: this.props.api, adaptableObject: comparer, moduleInfo: this.props.moduleInfo, key: comparer.columnId + index, teamSharingActivated: this.props.teamSharingActivated, onShare: null, onEdit: null, onDeleteConfirm: null, column: this.props.api.columnApi.getColumnFromId(comparer.columnId), accessLevel: 'ReadOnly' }));
+            return (React.createElement(CustomSortEntityRow_1.CustomSortEntityRow, { colItems: colItems, api: this.props.api, adaptableObject: comparer, moduleInfo: this.props.moduleInfo, key: 'columnValuesComparer' + index, teamSharingActivated: this.props.teamSharingActivated, onShare: null, onEdit: null, onDeleteConfirm: null, scope: comparer.scope, accessLevel: 'ReadOnly' }));
         });
         let newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => this.onNew(), tooltip: "Create Custom Sort", accessLevel: this.props.accessLevel, style: {
                 color: 'var(--ab-color-text-on-add)',

package/src/View/CustomSort/CustomSortSummary.js

@@ -36,11 +36,11 @@ class CustomSortSummaryComponent extends React.Component {
         this.state = UIHelper_1.UIHelper.getEmptyConfigState();
     }
     render() {
-        const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.ColumnId);
+        const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
         const columnSortComparer = this.props.api.internalApi.getCustomSortComparer(this.props.summarisedColumn);
         let noCustomSort = customSort == null && columnSortComparer == null;
         let customSortRow;
-        if (!this.props.summarisedColumn.Sortable) {
+        if (!this.props.summarisedColumn.sortable) {
             customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Column is not sortable', newButtonDisabled: true, onNew: () => this.onNew(), newButtonTooltip: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
         }
         else if (noCustomSort) {
@@ -59,7 +59,7 @@ class CustomSortSummaryComponent extends React.Component {
     }
     onNew() {
         let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyCustomSort();
-        configEntity.ColumnId = this.props.summarisedColumn.ColumnId;
+        configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({
             editedAdaptableObject: configEntity,
             wizardStartIndex: 1,

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

@@ -29,16 +29,16 @@ exports.CustomSortColumnWizardSection = (props) => {
         const customSorts = api.customSortApi.getAllCustomSort();
         const columnSortComparers = ((_b = (_a = api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.customSortComparers) || [];
         const usedColumnIds = [
-            ...customSorts.map((column) => column.ColumnId),
-            ...columnSortComparers.map((comparer) => comparer.columnId),
+            ...customSorts.map((customSort) => customSort.ColumnId),
+            ...columnSortComparers.map((comparer) => api.scopeApi.getColumnIdsInScope(comparer.scope)),
         ];
         // filter out used colum ids, but include the current one
         return sortableColumns.filter((column) => {
-            if (!props.isNew && column.ColumnId === (data === null || data === void 0 ? void 0 : data.ColumnId)) {
+            if (!props.isNew && column.columnId === (data === null || data === void 0 ? void 0 : data.ColumnId)) {
                 return true;
             }
             return usedColumnIds.every((usedColumnId) => {
-                return column.ColumnId !== usedColumnId;
+                return column.columnId !== usedColumnId;
             });
         });
     }, []);

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

@@ -5,7 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
+const Loader_1 = require("../../../components/Loader");
 const Tabs_1 = require("../../../components/Tabs");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
 const ValueSelector_1 = require("../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -21,8 +24,23 @@ exports.renderCustomSortValuesSummary = (data) => {
 };
 exports.CustomSortValuesWizardSection = (props) => {
     const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const distinctValues = react_1.useMemo(() => {
-        return api.columnApi.getDistinctDisplayValuesForColumn(data.ColumnId);
+    const [distinctValues, setDistinctValues] = react_1.useState([]);
+    const [isDistinctValuesLoading, setIsDistinctValuesLoading] = react_1.useState(false);
+    react_1.useEffect(() => {
+        let isMounted = true;
+        (async () => {
+            // for sync and very fast resolving promises does not make sense to show a loader
+            setDistinctValues([]);
+            const newValues = await runIfNotResolvedIn_1.runIfNotResolvedIn(api.columnApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
+            if (!isMounted) {
+                return;
+            }
+            setIsDistinctValuesLoading(false);
+            setDistinctValues(newValues);
+        })();
+        return () => {
+            isMounted = false;
+        };
     }, [data.ColumnId]);
     const sortedValuesMap = react_1.useMemo(() => {
         if (!data.SortedValues || !data.SortedValues.length) {
@@ -37,14 +55,14 @@ exports.CustomSortValuesWizardSection = (props) => {
         return sortedValuesMap.has(option);
     }, [sortedValuesMap]);
     const options = react_1.useMemo(() => {
-        // if (!allowReorder) {
-        //   return distinctValues;
-        // }
         return sortWithOrder_1.sortWithOrderArray(distinctValues, data.SortedValues, { sortUnorderedItems: false });
     }, [allowReorder, distinctValues, data.SortedValues]);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+    const baseClassName = 'ab-CustomSortWizard__SortOrder';
+    const className = join_1.default(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' }, className: className },
         React.createElement(Tabs_1.Tabs.Tab, null, "Sort Order"),
         React.createElement(Tabs_1.Tabs.Content, null,
+            isDistinctValuesLoading && React.createElement(Loader_1.Loader, null, "Loading"),
             React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
                     return `Your Sort Order:`;
                 }, onChange: (SortedValues) => {

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -35,6 +35,7 @@ exports.CustomToolbarWrapper = (props) => {
     return (React.createElement(PanelDashboard_1.PanelDashboard, { className: `ab-CustomToolbar ab-DashboardToolbar__${props.customToolbar.name}`, "data-name": `ab-CustomToolbar ab-DashboardToolbar__${props.customToolbar.name}`, headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
             props.customToolbar.showConfigureButton == true, showCloseButton: props.customToolbar.showCloseButton != null && props.customToolbar.showCloseButton == true, onConfigure: () => {
             const customToolbarConfiguredInfo = {
+                adaptableApi: api,
                 customToolbar: props.customToolbar,
             };
             api.eventApi.emit('CustomToolbarConfigured', customToolbarConfiguredInfo);
@@ -48,7 +49,7 @@ exports.CustomToolbarWrapper = (props) => {
                 // with the next opportunity we should abstract it
                 const dashboardContext = {
                     customToolbar: props.customToolbar,
-                    api,
+                    adaptableApi: api,
                     dashboardState: api.dashboardApi.getDashboardState(),
                 };
                 let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);

package/src/View/Dashboard/Dashboard.js

@@ -103,7 +103,7 @@ const DashboardComponent = (props) => {
                 //      delete iconProps.Uuid;
                 //    }
                 const dashboardContext = {
-                    api: props.api,
+                    adaptableApi: props.api,
                     dashboardState: props.api.dashboardApi.getDashboardState(),
                 };
                 let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
@@ -141,8 +141,7 @@ const DashboardComponent = (props) => {
                 label: menuItem.label,
             };
         });
-        let dashboardOptions = props.api.internalApi.getAdaptableOptions()
-            .dashboardOptions;
+        let dashboardOptions = props.api.internalApi.getAdaptableOptions().dashboardOptions;
         if (dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly') {
             menuItems.unshift(dashboardAccessLevel == 'Full'
                 ? {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.d.ts

@@ -2,7 +2,7 @@
 import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
 export interface DataChangeHistoryGridProps {
     adaptableContainerId: string;
-    vendorContainerId: string;
+    agGridContainerId: string;
     changeHistoryLog: Record<string, DataChangedInfo>;
     onUndoChange: (changeKey: string) => void;
 }

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 exports.DataChangeHistoryGrid = (props) => {
-    const { changeHistoryLog, adaptableContainerId, vendorContainerId, onUndoChange } = props;
+    const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange } = props;
     const mainAdaptableInstance = AdaptableContext_1.useAdaptable();
     const [_adaptableApi, setAdaptableApi] = react_1.useState(null);
     const adaptableApiRef = react_1.useRef(null);
@@ -22,7 +22,7 @@ exports.DataChangeHistoryGrid = (props) => {
     react_1.useEffect(() => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
-            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange);
+            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange);
             // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
             const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
             const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions);
@@ -71,7 +71,7 @@ exports.DataChangeHistoryGrid = (props) => {
     }, [changeHistoryLog]);
     return React.createElement(React.Fragment, null);
 };
-const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange) => {
+const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange) => {
     var _a, _b;
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
     const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
@@ -88,7 +88,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         adaptableId: `${mainAdaptableOptions.adaptableId}::DataChangeHistory`,
         containerOptions: {
             adaptableContainer: adaptableContainerId,
-            vendorContainer: vendorContainerId,
+            agGridContainer: agGridContainerId,
         },
         entitlementOptions: {
             defaultAccessLevel: 'Hidden',
@@ -104,7 +104,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                     includeGroupedRows: true,
                     actionColumnButton: {
                         label: (button, context) => {
-                            if (context.api.gridApi.isGroupRowNode(context.rowNode)) {
+                            if (context.adaptableApi.gridApi.isGroupRowNode(context.rowNode)) {
                                 return 'Undo Group';
                             }
                             return 'Undo Change';
@@ -112,7 +112,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                         onClick: (button, context) => {
                             var _a;
                             const rowNode = context.rowNode;
-                            if (context.api.gridApi.isGroupRowNode(rowNode)) {
+                            if (context.adaptableApi.gridApi.isGroupRowNode(rowNode)) {
                                 // undo all children
                                 const childrenNodes = (_a = context.rowNode) === null || _a === void 0 ? void 0 : _a.childrenAfterFilter;
                                 if (childrenNodes) {
@@ -188,14 +188,15 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const layoutColumns = options.predefinedConfig.Layout.Layouts[0].Columns;
         if (layoutColumns.includes('undoActionColumn')) {
             // remove action column from layout
-            options.predefinedConfig.Layout.Layouts[0].Columns = layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
+            options.predefinedConfig.Layout.Layouts[0].Columns =
+                layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
         }
     }
     return options;
 };
 const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
     var _a, _b;
-    const mainPrimaryKeyColumnHeader = (_b = (_a = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()) === null || _a === void 0 ? void 0 : _a.FriendlyName) !== null && _b !== void 0 ? _b : 'Row ID';
+    const mainPrimaryKeyColumnHeader = (_b = (_a = mainAdaptableInstance.api.columnApi.getPrimaryKeyColumn()) === null || _a === void 0 ? void 0 : _a.friendlyName) !== null && _b !== void 0 ? _b : 'Row ID';
     const options = {
         suppressLoadingOverlay: true,
         overlayNoRowsTemplate: '<div style="font-size: var(--ab-font-size-2);color: var(--ab-color-text-on-primary);">No Data Changes</div>',
@@ -295,7 +296,7 @@ const mapChangeHistoryRowData = (changeHistoryLog = {}, mainAdaptableInstance) =
             primaryKey: `${changeKey}::${changeInfo.changedAt}`,
             changeKey,
             changeTriggerLabel: getChangeTriggerLabel(changeInfo),
-            changedColumnLabel: getColumnHeaderLabel(changeInfo.columnId, mainAdaptableInstance),
+            changedColumnLabel: getColumnHeaderLabel(changeInfo.column.columnId, mainAdaptableInstance),
             changeInfo,
         };
     });
@@ -305,7 +306,7 @@ const headerMap = new Map();
 const getColumnHeaderLabel = (columnId, mainAdaptableInstance) => {
     var _a, _b;
     if (!headerMap.has(columnId)) {
-        headerMap.set(columnId, (_b = (_a = mainAdaptableInstance.api.columnApi.getColumnFromId(columnId)) === null || _a === void 0 ? void 0 : _a.FriendlyName) !== null && _b !== void 0 ? _b : columnId);
+        headerMap.set(columnId, (_b = (_a = mainAdaptableInstance.api.columnApi.getColumnFromId(columnId)) === null || _a === void 0 ? void 0 : _a.friendlyName) !== null && _b !== void 0 ? _b : columnId);
     }
     return headerMap.get(columnId);
 };

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -21,8 +21,8 @@ class DataChangeHistoryPopupComponent extends React.Component {
     }
     render() {
         const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
-        const adaptableContainerId = 'dataChangeHistoryAdaptableGrid';
-        const vendorContainerId = 'dataChangeHistoryVendorGrid';
+        const adaptableContainerId = 'dataChangeHistoryAdaptableContainer';
+        const agGridContainerId = 'dataChangeHistoryAgGridContainer';
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
@@ -53,9 +53,9 @@ class DataChangeHistoryPopupComponent extends React.Component {
                 this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
             }
         };
-        const currentVendorTheme = this.props.api.internalApi
+        const currentAgGridTheme = this.props.api.internalApi
             .getAdaptableInstance()
-            .getVendorGridCurrentThemeName();
+            .getAgGridCurrentThemeName();
         return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), border: "none", bodyProps: { padding: 0 } },
             React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
                 React.createElement(rebass_1.Flex, { style: {
@@ -67,8 +67,8 @@ class DataChangeHistoryPopupComponent extends React.Component {
                         statusPanel)),
                 React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
                     React.createElement("div", { id: adaptableContainerId }),
-                    React.createElement("div", { id: vendorContainerId, className: currentVendorTheme, style: { height: '100%', width: '1000px' } }),
-                    React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, vendorContainerId: vendorContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo })))));
+                    React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%', width: '1000px' } }),
+                    React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo })))));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Export/ExportCustomDestinationDialog.js

@@ -15,7 +15,7 @@ isOpen, onDismiss, }) {
     const adaptable = AdaptableContext_1.useAdaptable();
     const context = React.useMemo(() => {
         return {
-            api: adaptable.api,
+            adaptableApi: adaptable.api,
             report,
             reportData: undefined,
             customDestination,

package/src/View/Export/ExportViewPanel.js

@@ -92,12 +92,12 @@ class ExportViewPanelComponent extends React.Component {
             }
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { minWidth: 168, fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { disabled: currentReportId === SELECT_REPORT_STRING, style: { minWidth: 168, fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
-            React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { minWidth: '168px' } },
+        return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { width: '100%', fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { disabled: currentReportId === SELECT_REPORT_STRING, style: { width: '100%', fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
+            React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
                 React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || currentReport.ReportColumnScope == 'CustomColumns', accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),