@adaptabletools/adaptable 11.1.7 → 11.1.10

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutStatusBarSubPanelPopover = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
+const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
+const LayoutRadioSelector_1 = require("./LayoutRadioSelector");
+const colItems = [
+    { Content: 'Current', Size: 2 },
+    { Content: 'Layout Name', Size: 4 },
+];
+exports.LayoutStatusBarSubPanelPopover = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const layouts = adaptable.api.layoutApi.getAllLayout();
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+        React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
+        layouts.map((layout) => {
+            return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: layout.Name, colItems: [
+                    { Content: React.createElement(LayoutRadioSelector_1.LayoutRadioSelector, { id: layout.Name, data: layout }), Size: 1 },
+                    {
+                        Content: (React.createElement("label", { style: { cursor: 'pointer' }, htmlFor: layout.Name }, layout.Name)),
+                        Size: 4,
+                    },
+                ] }));
+        })));
+};

package/src/View/Layout/Wizard/LayoutEditor/ColumnLabels.js

@@ -4,6 +4,7 @@ exports.ColumnLabels = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../../AdaptableContext");
 exports.ColumnLabels = (props) => {
     const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
     const labelNames = [
@@ -19,7 +20,7 @@ exports.ColumnLabels = (props) => {
         [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
     };
     return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
-        showTitle ? React.createElement(rebass_1.Text, { mr: 2 }, "Behaviours:") : null,
+        showTitle ? (React.createElement(rebass_1.Text, { mr: 2 }, AdaptableContext_1.useAdaptable().api.internalApi.getCorrectEnglishVariant('Behaviours:'))) : null,
         labels.map((l, index) => {
             const enabled = !!l;
             const labelName = labelNames[index];

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -113,7 +113,7 @@ exports.LayoutEditor = React.memo((props) => {
         }
         setLayout(newLayout);
     };
-    const getAgGridGroupAutoColumn = react_1.useCallback((layout) => layout.Columns.filter((columnId) => api.columnApi.isRowGroupColumn(columnId)), []);
+    const getAgGridGroupAutoColumn = react_1.useCallback((layout) => layout.Columns.filter((columnId) => api.columnApi.isAutoRowGroupColumn(columnId)), []);
     const onDragEndRef = react_1.useRef({
         columnList: () => { },
         columnSortList: () => { },

package/src/View/Layout/Wizard/LayoutEditorWizard.js

@@ -71,6 +71,7 @@ class LayoutEditorWizard extends React.Component {
         };
     }
     render() {
+        const behaviourHeader = 'Column ' + this.props.api.internalApi.getCorrectEnglishVariant('Behaviours');
         return (React.createElement("div", { "data-name": 'layout-editor', style: { height: '100%' } },
             React.createElement(WizardPanel_1.default, { bodyProps: { padding: 0 } },
                 React.createElement(rebass_1.Flex, null,
@@ -88,7 +89,7 @@ class LayoutEditorWizard extends React.Component {
                     React.createElement(rebass_1.Flex, { width: 120, pr: 2, alignItems: "center", justifyContent: "end" },
                         React.createElement(rebass_1.Text, { mr: 2 }, "Legend"),
                         React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, bodyText: [
-                                React.createElement(Panel_1.default, { variant: "modern", header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {
+                                React.createElement(Panel_1.default, { variant: "modern", header: behaviourHeader, className: "ab-LayoutEditor__LegendPanel", style: {
                                         gridRow: '1 /1',
                                         gridColumn: '3/3',
                                     }, bodyProps: {

package/src/View/Query/EditCurrentQueryButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EditCurrentQueryButton: () => JSX.Element;

package/src/View/Query/EditCurrentQueryButton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditCurrentQueryButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.EditCurrentQueryButton = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const handleClick = React.useCallback((event) => {
+        event.stopPropagation();
+        adaptable.api.queryApi.expandCurrentQuery();
+    }, []);
+    return React.createElement(SimpleButton_1.default, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
+};

package/src/View/Query/QueryViewPanel.d.ts

@@ -11,7 +11,6 @@ export interface QueryViewPanelComponentProps extends ViewPanelProps {
     onAddCachedQuery: (cachedQuery: CachedQuery) => SystemRedux.SystemCachedQueryAddAction;
     onRunQuery: (expression: string) => QueryRedux.QueryRunAction;
     onShowNamedQueries: (value: string, popup: string) => PopupRedux.PopupShowScreenAction;
-    onExpand: (value: string) => void;
 }
 interface QueryViewPanelComponentState {
     isAdaptableReady: boolean;

package/src/View/Query/QueryViewPanel.js

@@ -22,7 +22,6 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const react_redux_1 = require("react-redux");
-const windowFactory_1 = require("../Components/Popups/WindowPopups/windowFactory");
 class QueryViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -88,7 +87,7 @@ class QueryViewPanelComponent extends React.Component {
         };
         const renderTextInput = () => {
             return this.props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 600 },
-                React.createElement(ButtonExpand_1.ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.onExpand(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
+                React.createElement(ButtonExpand_1.ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.api.queryApi.expandCurrentQuery(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
                 React.createElement(Input_1.default, { type: "text", placeholder: "Query", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { fontFamily: 'monospace', fontSize: 12 } }),
                 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 })),
                 ' ',
@@ -106,7 +105,7 @@ class QueryViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { disabled: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(availableSearches), variant: "text", items: availableSearches, marginRight: 1, tooltip: "Load Query", icon: "folder-open" }),
                 ' ')) : (React.createElement(React.Fragment, null,
                 saveButton,
-                React.createElement(ButtonExpand_1.ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.onExpand(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
+                React.createElement(ButtonExpand_1.ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.api.queryApi.expandCurrentQuery(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
                 React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.clearQuery(), tooltip: "Clear Query", accessLevel: 'Full', disabled: this.state.expression == '' }),
                 React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => this.runQuery(), tooltip: "Run Query", accessLevel: 'Full', variant: "text", tone: "neutral", disabled: !isExpressionValid ||
                         this.state.expression == '' ||
@@ -166,14 +165,6 @@ function mapDispatchToProps(dispatch) {
             source: 'Toolbar',
             value,
         })),
-        onExpand: (value) => dispatch(PopupRedux.PopupShowWindow({
-            Id: windowFactory_1.WINDOW_QUERY_EDITOR,
-            Title: 'Current Query',
-            Icon: 'query',
-            PopupProps: {
-                value: value,
-            },
-        })),
     };
 }
 exports.QueryViewPanelControl = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(QueryViewPanelComponent);

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -35,7 +35,7 @@ const QuickSearchPopupComponent = (props) => {
             ' ',
             React.createElement(FormLayout_1.default, null,
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", marginLeft: 2, marginRight: 5, padding: 20, style: { height: '100%' }, placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, value: searchText, OnTextChange: search }))),
-        React.createElement(Panel_1.default, { header: 'Behaviour', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
+        React.createElement(Panel_1.default, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(rebass_1.Flex, { flexDirection: "column" },
                 React.createElement(FormLayout_1.default, { columns: [1, 2] },

package/src/View/QuickSearch/QuickSearchStatusBarContent.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const QuickSearchStatusBarContent: React.FunctionComponent;

package/src/View/QuickSearch/QuickSearchStatusBarContent.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSearchStatusBarContent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFormControlTextClear");
+const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
+exports.QuickSearchStatusBarContent = () => {
+    const text = react_redux_1.useSelector((state) => state.QuickSearch.QuickSearchText);
+    const dispatch = react_redux_1.useDispatch();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const handleTextChange = React.useCallback((text) => dispatch(QuickSearchRedux.QuickSearchRun(text)), []);
+    return (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { onClick: (event) => event.stopPropagation(), type: "text", inputStyle: { padding: '2px 3px', width: 90 }, placeholder: adaptable.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, value: text, OnTextChange: handleTextChange }));
+};

package/src/View/StateManagement/StateManagementPopup.js

@@ -14,17 +14,19 @@ exports.StateManagementPopup = (props) => {
     return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         React.createElement(rebass_1.Box, null,
             React.createElement(Panel_1.default, { header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(HelpBlock_1.default, null, 'Clear all current user state that has been applied.'),
-                React.createElement(HelpBlock_1.default, null, 'When you restart / refresh the Application, any state that you have previously created will be lost, and the initial Predefined Config will then be re-applied.'),
+                React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
+                React.createElement(HelpBlock_1.default, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
                 React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
             React.createElement(Panel_1.default, { header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(HelpBlock_1.default, { marginTop: 3 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
+                React.createElement(HelpBlock_1.default, { marginTop: 2 }, '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(Panel_1.default, { header: 'Export All Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "allState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
-            React.createElement(Panel_1.default, { header: 'Export User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "userState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
+            React.createElement(Panel_1.default, { header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
+                React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
+                ' ',
+                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
             React.createElement(Panel_1.default, { header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
+                React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
+                ' ',
                 React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")))));
 };

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -16,7 +16,6 @@ exports.StateManagementViewPanel = (props) => {
         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: "adaptableState" }, "All State"),
         React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig" }, "Predefined Config")));
 };

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

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

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

@@ -8,13 +8,9 @@ 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);
+            case 'adaptableState':
+                const adaptableState = props.api.configApi.getPersistedState();
+                handleExportState_1.handleExportState(destination, 'adaptableState', adaptableState);
                 break;
             case 'predefinedConfig':
                 const predefinedConfig = props.api.configApi.getPredefinedConfig();

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

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

package/src/View/StatusBar/AdaptableStatusBar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { StatusPanelProps } from '../../agGrid/createAgStatusPanelComponent';
+export declare const AdaptableStatusBar: React.FunctionComponent<StatusPanelProps>;

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableStatusBar = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const StatusBarRedux_1 = require("../../Redux/ActionsReducers/StatusBarRedux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const StatusBarPanel_1 = require("./StatusBarPanel");
+exports.AdaptableStatusBar = (props) => {
+    var _a;
+    /**
+     * All state is selected so the Status Bar is re-rendered for all adaptable state changes
+     */
+    const state = react_redux_1.useSelector((state) => state);
+    const statusPanels = StatusBarRedux_1.getStatusPanelsSelector(state);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const statusSubPanels = statusPanels.find((statusPanel) => statusPanel.Key === props.context.Key);
+    const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.SettingPanelModuleMenuItems; });
+    return (React.createElement(rebass_1.Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, (_a = statusSubPanels === null || statusSubPanels === void 0 ? void 0 : statusSubPanels.StatusBarPanels) === null || _a === void 0 ? void 0 : _a.map((subPanel) => {
+        var _a, _b, _c, _d, _e, _f;
+        const module = adaptable.ModuleService.getModuleById(subPanel);
+        if (!module) {
+            return React.createElement(React.Fragment, { key: subPanel });
+        }
+        if (!module.isModuleAvailable()) {
+            return React.createElement(React.Fragment, { key: subPanel });
+        }
+        /**
+         * Both view properties and status panel are optional.
+         */
+        const statusBarPanelProps = (_d = (_c = (_b = (_a = module.getViewProperties) === null || _a === void 0 ? void 0 : _a.call(module)) === null || _b === void 0 ? void 0 : _b.getStatusBarPanelProps) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : {};
+        const moduleInfo = module.moduleInfo;
+        const onAction = (_e = statusBarPanelProps.onAction) !== null && _e !== void 0 ? _e : (() => {
+            const menuItem = allMenuItems.find((menuItem) => menuItem.module === subPanel);
+            if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.reduxAction) {
+                dispatch(menuItem.reduxAction);
+            }
+        });
+        return (React.createElement(StatusBarPanel_1.StatusBarPanel, Object.assign({ "data-name": subPanel }, statusBarPanelProps, { onAction: onAction, icon: (_f = statusBarPanelProps.icon) !== null && _f !== void 0 ? _f : moduleInfo.Glyph, key: subPanel })));
+    })));
+};

package/src/View/StatusBar/StatusBarPanel.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { FlexProps } from 'rebass';
+/**
+ * A panel can be:
+ * - icon
+ * - icon & text
+ * - icon & text
+ * - icon & text+popover
+ * - icon & text+popover & extra actions
+ *
+ * <icon> <text-with-dropdown> <extra-action>
+ * <dropdown-component>
+ *
+ * Extra actions are components so the components can call inside hooks.
+ */
+export interface StatusBarPanelProps extends Omit<FlexProps, 'content'> {
+    icon?: string;
+    content?: React.ReactNode | React.FunctionComponent;
+    /**
+     * weather to trigger onAction when the wrapper is clicked
+     */
+    triggerActionOnWrapperClick?: boolean;
+    /**
+     * When specified this content will be rendered when the text
+     * is clicked.
+     */
+    popover?: React.ReactNode | React.FunctionComponent;
+    popoverMinWidth?: number;
+    /**
+     * Allow to render custom content
+     */
+    view?: React.FunctionComponent;
+    onAction?: () => void;
+    extraActions?: React.FunctionComponent[];
+}
+/**
+ * Statusbar sub panel are similar to vs code:
+ * - text
+ * - action
+ * - icon
+ */
+export declare const StatusBarPanel: React.FunctionComponent<StatusBarPanelProps>;

package/src/View/StatusBar/StatusBarPanel.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBarPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptablePopover_1 = require("../AdaptablePopover");
+/**
+ * Statusbar sub panel are similar to vs code:
+ * - text
+ * - action
+ * - icon
+ */
+exports.StatusBarPanel = (props) => {
+    var _a;
+    const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true } = props, flexProps = tslib_1.__rest(props, ["icon", "content", "popover", "popoverMinWidth", "view", "onAction", "extraActions", "triggerActionOnWrapperClick"]);
+    const handleAction = () => onAction();
+    if (view) {
+        const View = view;
+        return React.createElement(View, null);
+    }
+    const baseClassName = 'ab-StatusBar__SubPanel';
+    const handleIconClick = React.useCallback(() => {
+        handleAction();
+    }, []);
+    const shouldTriggerActionOnWrapperClick = triggerActionOnWrapperClick && !popover;
+    const handleWrapperClick = React.useCallback(() => {
+        // handle action only if there is no popover
+        if (shouldTriggerActionOnWrapperClick) {
+            handleAction();
+        }
+    }, [popover, triggerActionOnWrapperClick]);
+    // popover
+    const popoverContent = typeof popover === 'function'
+        ? React.createElement(popover)
+        : popover;
+    const preparedContent = typeof content === 'function'
+        ? React.createElement(content)
+        : content;
+    return (React.createElement(rebass_1.Flex, Object.assign({}, flexProps, { alignItems: "center", justifyContent: "center", as: shouldTriggerActionOnWrapperClick ? 'button' : 'div', className: baseClassName, onClick: handleWrapperClick }),
+        props.icon && (React.createElement(SimpleButton_1.default, { color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
+        popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent), (_a = extraActions === null || extraActions === void 0 ? void 0 : extraActions.map) === null || _a === void 0 ? void 0 :
+        _a.call(extraActions, (action, index) => React.createElement(action, { key: index }))));
+};

package/src/View/StatusBar/StatusBarPopup.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { AdaptablePopupModuleViewProps } from '../Components/Popups/AdaptablePopup/AdaptablePopupModuleView';
+export declare const StatusBarPopup: React.FunctionComponent<AdaptablePopupModuleViewProps>;

package/src/View/StatusBar/StatusBarPopup.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBarPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ModuleManager_1 = require("../../components/DragAndDropContext/ModuleManager");
+const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
+const Types_1 = require("../../PredefinedConfig/Common/Types");
+const StatusBarRedux_1 = require("../../Redux/ActionsReducers/StatusBarRedux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+exports.StatusBarPopup = (props) => {
+    const statusPanels = react_redux_1.useSelector(StatusBarRedux_1.getStatusPanelsSelector);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const tabs = React.useMemo(() => statusPanels.map((statusPanel) => {
+        return {
+            Name: statusPanel.Key,
+            Items: statusPanel.StatusBarPanels,
+        };
+    }), [statusPanels]);
+    const handleTabChange = React.useCallback((tabs) => {
+        const newStatusPanels = tabs.map((tab) => {
+            const statusPanel = statusPanels.find((sp) => sp.Key === tab.Name);
+            return Object.assign(Object.assign({}, statusPanel), { SubPanels: tab.Items });
+        });
+        adaptable.api.statusBarApi.setStatusPanels(newStatusPanels);
+    }, [statusPanels]);
+    const availableItems = Types_1.ALL_STATUS_SUB_PANELS.filter((panel) => {
+        const module = adaptable.ModuleService.getModuleById(panel);
+        return module.isModuleAvailable();
+    }).map((panel) => {
+        const module = adaptable.ModuleService.getModuleById(panel);
+        return { Id: panel, Title: module.moduleInfo.FriendlyName };
+    });
+    const disabled = props.accessLevel === 'ReadOnly';
+    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph }, statusPanels.length ? (React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+            createTab: false,
+            dragAndDropTab: false,
+            deleteTab: false,
+            editTabName: false,
+        }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Available Status Panels" })) : (React.createElement(EmptyContent_1.default, null, "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel."))));
+};

package/src/View/SystemStatus/SystemStatusStatusBarContent.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const SystemStatusStatusBarContent: React.FunctionComponent;

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemStatusStatusBarContent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../AdaptableContext");
+const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
+exports.SystemStatusStatusBarContent = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
+    const { color, background } = getStatusItemStyle_1.getStatusItemStyle(currentSystemStatusMessageInfo);
+    const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
+    return (React.createElement(rebass_1.Box, { style: { borderRadius: 'var(--ab__border-radius)' }, padding: 1, color: message && color, backgroundColor: message && background }, message || '0 Messages'));
+};

package/src/View/SystemStatus/SystemStatusViewPanel.js

@@ -3,24 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusViewPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const rebass_1 = require("rebass");
 const react_redux_1 = require("react-redux");
+const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
 class SystemStatusViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
-        var _a;
         const currentSystemStatusMessageInfo = this.props.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
-        const messageTypeColor = UIHelper_1.default.getColorByMessageType((_a = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusType) !== null && _a !== void 0 ? _a : 'Success');
-        const buttonTextColor = currentSystemStatusMessageInfo
-            ? UIHelper_1.default.getButtonTextColourForMessageType(currentSystemStatusMessageInfo.statusType)
-            : '';
+        const { color, background } = getStatusItemStyle_1.getStatusItemStyle(currentSystemStatusMessageInfo);
         const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SystemStatus__wrap` },
-            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: message ? messageTypeColor : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
+            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: color, backgroundColor: message ? background : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
     }
 }
 function mapStateToProps(state) {

package/src/View/SystemStatus/Utilities/getStatusItemStyle.d.ts

@@ -0,0 +1,5 @@
+import { SystemStatusMessageInfo } from '../../../types';
+export declare const getStatusItemStyle: (systemStatusMessageInfo?: SystemStatusMessageInfo) => {
+    background: string;
+    color: string;
+};

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStatusItemStyle = void 0;
+const tslib_1 = require("tslib");
+const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
+exports.getStatusItemStyle = (systemStatusMessageInfo) => {
+    var _a;
+    const background = UIHelper_1.default.getColorByMessageType((_a = systemStatusMessageInfo === null || systemStatusMessageInfo === void 0 ? void 0 : systemStatusMessageInfo.statusType) !== null && _a !== void 0 ? _a : 'Success');
+    const color = systemStatusMessageInfo
+        ? UIHelper_1.default.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
+        : '';
+    return {
+        background,
+        color,
+    };
+};

package/src/View/Theme/ThemeStatusPanelPopover.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ThemeStatusPanelPopover: React.FunctionComponent;

package/src/View/Theme/ThemeStatusPanelPopover.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeStatusPanelPopover = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
+const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
+const colItems = [
+    { Content: 'Current', Size: 2 },
+    { Content: 'Theme Name', Size: 4 },
+];
+exports.ThemeStatusPanelPopover = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const themes = adaptable.api.themeApi.getAllTheme();
+    const currentTheme = adaptable.api.themeApi.getCurrentTheme();
+    const handleThemeChange = React.useCallback((theme) => {
+        adaptable.api.themeApi.loadTheme(theme.Name);
+    }, []);
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+        React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
+        themes.map((theme) => {
+            return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: theme.Name, colItems: [
+                    {
+                        Content: (React.createElement(Radio_1.default, { onClick: () => handleThemeChange(theme), id: theme.Name, checked: currentTheme === theme.Name })),
+                        Size: 1,
+                    },
+                    {
+                        Content: (React.createElement("label", { style: { cursor: 'pointer' }, htmlFor: theme.Name }, theme.Name)),
+                        Size: 4,
+                    },
+                ] }));
+        })));
+};

package/src/agGrid/Adaptable.d.ts

@@ -105,6 +105,8 @@ export declare class Adaptable implements IAdaptable {
     private initializeAgGrid;
     private isAgGridReady;
     private initAgGridContainerFromInitializedAgGrid;
+    private createStatusBars;
+    getAgGridStatusPanels(): import("@ag-grid-community/all-modules").StatusPanelDef[];
     debouncedSetColumnIntoStore: import("lodash").DebouncedFunc<() => void>;
     debouncedSaveGridLayout: import("lodash").DebouncedFunc<() => void>;
     debouncedSetSelectedCells: import("lodash").DebouncedFunc<() => void>;