@adaptabletools/adaptable 10.0.2 → 10.0.4-canary.2

package/src/View/Query/QueryViewPanel.js

@@ -73,8 +73,8 @@ class QueryViewPanelComponent extends React.Component {
         ];
         let availableColumns = this.props.api.columnApi.getColumns().map((col) => {
             return {
-                label: col.FriendlyName,
-                onClick: () => this.setState({ expression: this.state.expression + `[${col.ColumnId}]` }),
+                label: col.friendlyName,
+                onClick: () => this.setState({ expression: this.state.expression + `[${col.columnId}]` }),
             };
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
@@ -88,7 +88,7 @@ class QueryViewPanelComponent extends React.Component {
                     } }),
                 isExpressionValid ? (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => this.runQuery(), tooltip: '', accessLevel: 'Full', variant: "text", tone: "neutral", disabled: this.state.expression == '' || this.state.expression == this.props.CurrentQuery, marginRight: 1 })) : (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Query", marginRight: 1 })),
                 ' ',
-                this.props.CurrentQuery !== '' && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.props.onRunQuery(''), tooltip: "Clear Query", accessLevel: 'Full' })))) : (React.createElement(Input_1.default, { type: "text", placeholder: "Query", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { width: '100%', minWidth: 168 } }));
+                this.props.CurrentQuery !== '' && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.props.onRunQuery(''), tooltip: "Clear Query", accessLevel: 'Full' })))) : (React.createElement(Input_1.default, { type: "text", placeholder: "Query", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { width: '100%' } }));
         };
         const queryModuleAccessLevel = this.props.api.internalApi
             .getEntitlementService()

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -4,12 +4,11 @@ exports.useQuickSearchDebounced = void 0;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 exports.useQuickSearchDebounced = (props) => {
     var _a;
     const [searchText, setSearchText] = react_1.useState((_a = props.QuickSearchText) !== null && _a !== void 0 ? _a : '');
-    const debouncedRunQuickSearch = react_1.useMemo(() => debounce_1.default(props.onRunQuickSearch, 350), [
-        props.onRunQuickSearch,
-    ]);
+    const debouncedRunQuickSearch = react_1.useMemo(() => debounce_1.default(props.onRunQuickSearch, GeneralConstants_1.QUICK_SEARCH_DEBOUNCE_TIME), [props.onRunQuickSearch]);
     react_1.useEffect(() => {
         setSearchText(props.QuickSearchText);
     }, [props.QuickSearchText]);

package/src/View/Schedule/SchedulePopup.js

@@ -156,15 +156,15 @@ class SchedulePopupComponent extends React.Component {
         if (exportModuleAccessLevel !== 'Hidden') {
             allSchedules.push(...this.props.ReportSchedules);
         }
-        const ippApi = this.props.api.pluginsApi.getPluginApi('ipushpull');
+        const ippApi = this.props.api.pluginsApi.getipushpullPluginApi();
         if (ippApi && ippApi.isIPushPullRunning()) {
             allSchedules.push(...this.props.IPushPullSchedules);
         }
-        const glue42Api = this.props.api.pluginsApi.getPluginApi('glue42');
+        const glue42Api = this.props.api.pluginsApi.getGlue42PluginApi();
         if (glue42Api && glue42Api.isGlue42Running()) {
             allSchedules.push(...this.props.Glue42Schedules);
         }
-        const openFinApi = this.props.api.pluginsApi.getPluginApi('openfin');
+        const openFinApi = this.props.api.pluginsApi.getOpenFinPluginApi();
         if (openFinApi && openFinApi.isOpenFinRunning()) {
             allSchedules.push(...this.props.OpenFinSchedules);
         }

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsWizard.js

@@ -21,7 +21,7 @@ exports.ScheduleSettingsWizard = (props) => {
         return (React.createElement(ScheduleSettingsReport_1.ScheduleSettingsReport, { allReports: allReports !== null && allReports !== void 0 ? allReports : [], customDestinations: customDestinations || [], report: data, onChange: props.onChange }));
     }
     if ((data === null || data === void 0 ? void 0 : data.ScheduleType) === Enums_1.ScheduleType.ipushpull) {
-        const ippApi = api.pluginsApi.getPluginApi('ipushpull');
+        const ippApi = api.pluginsApi.getipushpullPluginApi();
         const allFolders = ippApi && ippApi.getIPushPullDomains();
         const folderName = data.IPushPullReport.Folder;
         const availablePages = ippApi && folderName && ippApi.getPagesForIPushPullDomain(folderName);

package/src/View/SmartEdit/SmartEditPopup.js

@@ -29,7 +29,7 @@ class SmartEditPopupComponent extends React.Component {
     render() {
         let col;
         if (this.props.PreviewInfo) {
-            col = this.props.api.columnApi.getColumnFromId(this.props.PreviewInfo.columnId);
+            col = this.props.PreviewInfo.column;
         }
         let globalValidationMessage = PreviewHelper_1.PreviewHelper.GetValidationMessage(this.props.PreviewInfo, `${this.props.SmartEditValue}`);
         let showPanel = this.props.PreviewInfo && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`);

package/src/View/StateManagement/StateManagementPopup.d.ts

@@ -1,16 +1,6 @@
 import * as React from 'react';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
-interface StateManagementPopupProps extends ModuleViewPopupProps<StateManagementPopupComponent> {
+interface StateManagementPopupProps extends ModuleViewPopupProps<typeof StateManagementPopup> {
 }
-declare class StateManagementPopupComponent extends React.Component<StateManagementPopupProps, {}> {
-    constructor(props: StateManagementPopupProps);
-    render(): JSX.Element;
-    onClearLocalStorage(): void;
-    onLoadPredefinedConfig(e: any): void;
-    onExportAllState(type: any): void;
-    onExportUserState(type: any): void;
-    onExportPredefinedConfig(type: any): void;
-    onExportState(type: any, name: string, state: any): void;
-}
-export declare let StateManagementPopup: import("react-redux").ConnectedComponent<typeof StateManagementPopupComponent, any>;
+export declare const StateManagementPopup: React.FunctionComponent<StateManagementPopupProps>;
 export {};

package/src/View/StateManagement/StateManagementPopup.js

@@ -3,120 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StateManagementPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
 const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
-const UIHelper_1 = require("../UIHelper");
 const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
-const Dropdown_1 = tslib_1.__importDefault(require("../../components/Dropdown"));
-const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
-const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
-const FileDroppable_1 = require("../../components/FileDroppable");
-class StateManagementPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = UIHelper_1.UIHelper.getEmptyConfigState();
-    }
-    render() {
-        // sort out actions
-        let destinationOptions = [
-            {
-                value: 'Clipboard',
-                label: 'Clipboard',
-            },
-            {
-                value: 'Console',
-                label: 'Console',
-            },
-            {
-                value: 'JSON',
-                label: 'JSON',
-            },
-        ];
-        let clearButton = (React.createElement(SimpleButton_1.default, { onClick: () => this.onClearLocalStorage(), tooltip: "Clear User State", tone: "error", variant: "raised", marginTop: 2, accessLevel: this.props.accessLevel }, "Clear User State"));
-        let loadButton = (React.createElement(SimpleButton_1.default, { marginTop: 2, tone: "info", variant: "raised", accessLevel: this.props.accessLevel },
-            React.createElement("input", { type: "file", onChange: (json) => this.onLoadPredefinedConfig(json), accept: '.json', style: {
-                    opacity: 0,
-                    position: 'absolute',
-                    cursor: 'pointer',
-                    fontSize: 0,
-                    lineHeight: 0,
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 1,
-                } }),
-            ' ',
-            "Load Predefined Config"));
-        return (React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column" },
-            React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, button: null, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-                React.createElement(rebass_1.Box, null,
-                    React.createElement(HelpBlock_1.default, null, 'Clear all current user state that has been applied.   When you restart / refresh Adaptable any state that you have previously created will be lost.  However your Predefined Config will then be re-applied.'),
-                    clearButton,
-                    React.createElement(HelpBlock_1.default, { marginTop: 3 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
-                    ' ',
-                    loadButton,
-                    React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export All Adaptable State'),
-                    React.createElement(Dropdown_1.default, { key: 'exportAllState', placeholder: "Select Export Destination", style: { flex: 1, maxWidth: 'none' }, value: undefined, onChange: (x) => this.onExportAllState(x), marginRight: 3, options: destinationOptions }),
-                    React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export User State'),
-                    ' ',
-                    React.createElement(Dropdown_1.default, { key: 'exportUserState', placeholder: "Select Export Destination", style: { flex: 1, maxWidth: 'none' }, value: undefined, onChange: (x) => this.onExportUserState(x), marginRight: 3, options: destinationOptions }),
-                    React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export Initial Predefined Config'),
-                    ' ',
-                    React.createElement(Dropdown_1.default, { key: 'exportPredefinedConfig', placeholder: "Select Export Destination", style: { flex: 1, maxWidth: 'none' }, value: undefined, onChange: (x) => this.onExportPredefinedConfig(x), marginRight: 3, options: destinationOptions })))));
-    }
-    onClearLocalStorage() {
-        this.props.api.configApi.reloadPredefinedConfig();
-    }
-    onLoadPredefinedConfig(e) {
-        let nativeEvent = e.nativeEvent;
-        let files;
-        if (nativeEvent && nativeEvent.dataTransfer) {
-            files = nativeEvent.dataTransfer.files;
-        }
-        else {
-            files = e.target.files;
-        }
-        const file = files[0];
-        FileDroppable_1.readJSONFile(file).then((json) => {
-            this.props.api.configApi.reloadPredefinedConfig(json);
-        });
-    }
-    onExportAllState(type) {
-        let allState = this.props.api.configApi.getAllState();
-        this.onExportState(type, 'allState', allState);
-    }
-    onExportUserState(type) {
-        let userState = this.props.api.configApi.getAllUserState();
-        this.onExportState(type, 'userState', userState);
-    }
-    onExportPredefinedConfig(type) {
-        let predefinedConfig = this.props.api.configApi.getPredefinedConfig();
-        this.onExportState(type, 'predefinedConfig', predefinedConfig);
-    }
-    onExportState(type, name, state) {
-        switch (type) {
-            case 'Clipboard':
-                let stringifiedState = JSON.stringify(state);
-                Helper_1.default.copyToClipboard(stringifiedState);
-                break;
-            case 'Console':
-                LoggingHelper_1.ConsoleLog(state);
-                break;
-            case 'JSON':
-                const jsonFileName = name + '.json';
-                const jsonContent = JSON.stringify(state);
-                Helper_1.default.createDownloadedFile(jsonContent, jsonFileName, 'application/json');
-                break;
-        }
-    }
-}
-function mapStateToProps(state, ownProps) {
-    return {};
-}
-function mapDispatchToProps(dispatch) {
-    return {};
-}
-exports.StateManagementPopup = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(StateManagementPopupComponent);
+const LoadButton_1 = require("./components/LoadButton");
+const ClearButton_1 = require("./components/ClearButton");
+const ExportDropdown_1 = require("./components/ExportDropdown");
+exports.StateManagementPopup = (props) => {
+    return (React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column" },
+        React.createElement(PanelWithButton_1.PanelWithButton, { headerText: props.moduleInfo.FriendlyName, button: null, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+            React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, null, 'Clear all current user state that has been applied.   When you restart / refresh Adaptable any state that you have previously created will be lost.  However your Predefined Config will then be re-applied.'),
+                React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
+                ' ',
+                React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json) }, "Load Predefined Config"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export All Adaptable State'),
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "allState", marginRight: 3, style: { flex: 1, maxWidth: 'none' } }, "Select Export Destination"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export User State'),
+                ' ',
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "userState", marginRight: 3, style: { flex: 1, maxWidth: 'none' } }, "Select Export Destination"),
+                React.createElement(HelpBlock_1.default, { marginTop: 3, marginBottom: 2 }, 'Export Initial Predefined Config'),
+                ' ',
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' } }, "Select Export Destination")))));
+};

package/src/View/StateManagement/StateManagementViewPanel.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
+export interface ThemeViewPanelComponentProps extends ViewPanelProps {
+}
+export declare const StateManagementViewPanel: React.FunctionComponent<ThemeViewPanelComponentProps>;

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateManagementViewPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
+const LoadButton_1 = require("./components/LoadButton");
+const ClearButton_1 = require("./components/ClearButton");
+const rebass_1 = require("rebass");
+const ExportDropdown_1 = require("./components/ExportDropdown");
+exports.StateManagementViewPanel = (props) => {
+    const isToolbar = props.viewType === 'Toolbar';
+    const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement(rebass_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: join_1.default(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__StateManagement__wrap`) },
+        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+            React.createElement(LoadButton_1.LoadButton, { tooltip: "Load Predefined Config", variant: "text", icon: "upload", onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), accessLevel: props.accessLevel }, !isToolbar && 'Load'),
+            React.createElement(ClearButton_1.ClearButton, { icon: "trash", tooltip: "Clear User State", variant: "text", onClick: () => props.api.configApi.reloadPredefinedConfig(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),
+        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "allState" }, "All State"),
+        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "userState" }, "User State"),
+        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig" }, "Predefined Config")));
+};

package/src/View/StateManagement/components/ClearButton.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+interface ClearButtonProps extends SimpleButtonProps {
+}
+export declare const ClearButton: React.FunctionComponent<ClearButtonProps>;
+export {};

package/src/View/StateManagement/components/ClearButton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+exports.ClearButton = (props) => {
+    return (React.createElement(SimpleButton_1.default, Object.assign({}, props, { className: "ab-StateManagement__Clear-Button", tooltip: "Clear User State" }), props.children));
+};

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../../../types';
+import { DropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+    api: AdaptableApi;
+    type: 'allState' | 'userState' | 'predefinedConfig';
+}
+export declare const ExportDropdown: React.FunctionComponent<ExportDropdownProps>;

package/src/View/StateManagement/components/ExportDropdown.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExportDropdown = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const handleExportState_1 = require("../handleExportState");
+exports.ExportDropdown = (props) => {
+    const handleChange = (destination) => {
+        switch (props.type) {
+            case 'allState':
+                const allState = props.api.configApi.getAllState();
+                handleExportState_1.handleExportState(destination, 'allState', allState);
+                break;
+            case 'userState':
+                const userState = props.api.configApi.getAllUserState();
+                handleExportState_1.handleExportState(destination, 'userState', userState);
+                break;
+            case 'predefinedConfig':
+                const predefinedConfig = props.api.configApi.getPredefinedConfig();
+                handleExportState_1.handleExportState(destination, 'predefinedConfig', predefinedConfig);
+                break;
+        }
+    };
+    const destinationOptions = [
+        {
+            value: 'Clipboard',
+            label: 'Clipboard',
+            onClick: () => handleChange('Clipboard'),
+        },
+        {
+            value: 'Console',
+            label: 'Console',
+            onClick: () => handleChange('Console'),
+        },
+        {
+            value: 'JSON',
+            label: 'JSON',
+            onClick: () => handleChange('JSON'),
+        },
+    ];
+    return (React.createElement(DropdownButton_1.default, Object.assign({ className: "ab-StateManagement__Export-Dropdown" }, props, { items: destinationOptions, value: undefined })));
+};

package/src/View/StateManagement/components/LoadButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+interface LoadButtonProps extends SimpleButtonProps {
+    onLoad: (json: any) => void;
+}
+export declare const LoadButton: React.FunctionComponent<LoadButtonProps>;
+export {};

package/src/View/StateManagement/components/LoadButton.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const FileDroppable_1 = require("../../../components/FileDroppable");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+exports.LoadButton = (props) => {
+    const onLoadPredefinedConfig = (e) => {
+        const nativeEvent = e.nativeEvent;
+        let files;
+        if (nativeEvent && nativeEvent.dataTransfer) {
+            files = nativeEvent.dataTransfer.files;
+        }
+        else {
+            files = e.target.files;
+        }
+        const file = files[0];
+        FileDroppable_1.readJSONFile(file).then((json) => {
+            props.onLoad(json);
+        });
+    };
+    return (React.createElement(SimpleButton_1.default, Object.assign({}, props, { className: "ab-StateManagement__Load-Button" }),
+        React.createElement("input", { type: "file", onChange: (json) => onLoadPredefinedConfig(json), accept: '.json', style: {
+                opacity: 0,
+                position: 'absolute',
+                cursor: 'pointer',
+                fontSize: 0,
+                lineHeight: 0,
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 1,
+            } }),
+        ' ',
+        props.children));
+};

package/src/View/StateManagement/handleExportState.d.ts

@@ -0,0 +1 @@
+export declare const handleExportState: (type: 'Clipboard' | 'Console' | 'JSON', name: string, state: any) => void;

package/src/View/StateManagement/handleExportState.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleExportState = void 0;
+const tslib_1 = require("tslib");
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
+exports.handleExportState = (type, name, state) => {
+    switch (type) {
+        case 'Clipboard':
+            let stringifiedState = JSON.stringify(state);
+            Helper_1.default.copyToClipboard(stringifiedState);
+            break;
+        case 'Console':
+            LoggingHelper_1.ConsoleLog(state);
+            break;
+        case 'JSON':
+            const jsonFileName = name + '.json';
+            const jsonContent = JSON.stringify(state);
+            Helper_1.default.createDownloadedFile(jsonContent, jsonFileName, 'application/json');
+            break;
+    }
+};

package/src/View/Theme/ThemeViewPanel.js

@@ -35,7 +35,7 @@ class ThemeViewPanelComponent extends React.Component {
                 textOverflow: 'ellipsis',
                 fontSize: 'small',
             }
-            : { minWidth: 168, fontSize: 'small' };
+            : { minWidth: '100%', fontSize: 'small' };
         return (React.createElement("div", { className: join_1.default(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
             React.createElement(DropdownButton_1.default, { className: `ab-${elementType}__Theme__select`, style: dropDownStyle, items: themes, columns: ['label'], accessLevel: this.props.accessLevel }, currentThemeDescription)));
     }

package/src/View/UIHelper.d.ts

@@ -52,6 +52,7 @@ export declare function getButtonTextColourForArrayandMessageType(adaptableAlert
 export declare function getButtonTextColourForMessageType(messageType: AdaptableMessageType): string;
 export declare function getAdaptableToolPanelWidth(): number;
 export declare function getCSSVariableValue(cssVariable: string): string | undefined;
+export declare function setCSSVariableValue(cssVariable: string, value: string): void;
 export declare function isBrowserDocumentAvailable(): boolean;
 export declare const UIHelper: {
     getHexForName: typeof getHexForName;
@@ -79,6 +80,7 @@ export declare const UIHelper: {
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;
     getCSSVariableValue: typeof getCSSVariableValue;
+    setCSSVariableValue: typeof setCSSVariableValue;
     getAdaptableToolPanelWidth: typeof getAdaptableToolPanelWidth;
     isBrowserDocumentAvailable: typeof isBrowserDocumentAvailable;
 };

package/src/View/UIHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.isValidUserChartContainer = exports.getChartContainer = exports.getModalContainer = exports.getPlaceHolderforDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
+exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.isValidUserChartContainer = exports.getChartContainer = exports.getModalContainer = exports.getPlaceHolderforDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
 const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -459,6 +459,14 @@ function getCSSVariableValue(cssVariable) {
     return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
 }
 exports.getCSSVariableValue = getCSSVariableValue;
+function setCSSVariableValue(cssVariable, value) {
+    if (!isBrowserDocumentAvailable()) {
+        // possible during static/server-side rendering (should happen only in test cases)
+        return undefined;
+    }
+    document.documentElement.style.setProperty(cssVariable, value);
+}
+exports.setCSSVariableValue = setCSSVariableValue;
 function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
@@ -489,6 +497,7 @@ exports.UIHelper = {
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,
     getCSSVariableValue,
+    setCSSVariableValue,
     getAdaptableToolPanelWidth,
     isBrowserDocumentAvailable,
 };

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -8,7 +8,8 @@ export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;
     init(params: ICellRendererParams): void;
+    render(): void;
     getGui(): HTMLElement;
-    refresh(params: any): boolean;
+    refresh(params: ICellRendererParams): boolean;
     destroy(): void;
 }

package/src/agGrid/ActionColumnRenderer.js

@@ -40,7 +40,7 @@ class ActionColumnRenderer {
                 actionColumn: actionCol,
                 primaryKeyValue: pkValue,
                 rowNode: params.node,
-                api: adaptable.api,
+                adaptableApi: adaptable.api,
             };
             // if its a group node then only show if set to do so
             if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionCol.includeGroupedRows) {
@@ -64,14 +64,30 @@ class ActionColumnRenderer {
                 let buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                 let buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                 let buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-                return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: () => button.onClick(button, context), className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
+                const handleClick = () => {
+                    button.onClick(button, context);
+                    // Timeout to let any updates to be done before re-rendering the component
+                    setTimeout(() => {
+                        // when called again it triggers a re-render
+                        // https:reactjs.org/docs/react-dom.html#render
+                        doRender();
+                    }, 16);
+                };
+                return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
                     button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                     buttonLabel));
             };
-            react_dom_1.render(renderButton(adaptable.api, context), this.eGui);
-            // this.eGui.innerHTML = '<button>' + actionCol.ActionColumnButton.Label + '</button>';
+            const eGui = this.eGui;
+            function doRender() {
+                react_dom_1.render(renderButton(adaptable.api, context), eGui);
+            }
+            this.render = doRender;
+            doRender();
         }
     }
+    // defined on init
+    // used to re-render in refresh
+    render() { }
     // gets called once when grid ready to insert the element
     getGui() {
         return this.eGui;
@@ -79,6 +95,7 @@ class ActionColumnRenderer {
     // gets called whenever the user gets the cell to refresh
     refresh(params) {
         // return true to tell the grid we refreshed successfully
+        this.render();
         return true;
     }
     // gets called when the cell is removed from the grid