@adaptabletools/adaptable 11.1.8 → 11.1.11

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>;

package/src/agGrid/Adaptable.js

@@ -58,6 +58,9 @@ const DocumentationLinkConstants_1 = require("../Utilities/Constants/Documentati
 const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
 const CheckboxRenderer_1 = require("./CheckboxRenderer");
 const DateHelper_1 = require("../Utilities/Helpers/DateHelper");
+const StatusBarState_1 = require("../PredefinedConfig/StatusBarState");
+const createAgStatusPanelComponent_1 = require("./createAgStatusPanelComponent");
+const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const tinycolor = require('tinycolor2');
 all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
 const GROUP_PATH_SEPARATOR = '/';
@@ -561,6 +564,7 @@ class Adaptable {
                 }
             }
         }
+        this.createStatusBars();
         const checkAgGridContainer = () => {
             let agGridContainer = this.getAgGridContainerElement();
             if (!agGridContainer) {
@@ -635,6 +639,29 @@ class Adaptable {
         }
         return (this.adaptableOptions.containerOptions.agGridContainer = agGridContainer);
     }
+    createStatusBars() {
+        var _a, _b;
+        const statusBarOptions = Object.assign({}, this.gridOptions.statusBar);
+        const statusPanels = (_b = ((_a = statusBarOptions === null || statusBarOptions === void 0 ? void 0 : statusBarOptions.statusPanels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.map((statusPanel) => {
+            if (statusPanel.statusPanel === StatusBarState_1.ADAPTABLE_STATUS_PANEL) {
+                const context = {
+                    Key: statusPanel.key,
+                };
+                return Object.assign(Object.assign({}, statusPanel), { statusPanel: createAgStatusPanelComponent_1.createAgStatusPanelComponent(AdaptableStatusBar_1.AdaptableStatusBar, this, context) });
+            }
+            return statusPanel;
+        });
+        statusBarOptions.statusPanels = statusPanels;
+        this.gridOptions.statusBar = statusBarOptions;
+        const statusBarModule = this.ModuleService.getModuleById(ModuleConstants.StatusBarModuleId);
+        this.api.eventApi.on('AdaptableReady', () => {
+            statusBarModule.syncStateWithOptions();
+        });
+    }
+    getAgGridStatusPanels() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    }
     filterOnEditDataChange() {
         if (this.adaptableOptions.filterOptions.filterActionOnUserDataChange.applyFilter ==
             Enums_1.FilterOnDataChangeOptions.Always) {
@@ -758,7 +785,7 @@ class Adaptable {
         // TODO sort the visible columns by layout order
         agGridCols.forEach((agGridColumn) => {
             const colId = agGridColumn.getColId();
-            if (!this.api.columnApi.isRowGroupColumn(colId)) {
+            if (!this.api.columnApi.isAutoRowGroupColumn(colId)) {
                 allColumns.push(this.createAdaptableColumn(agGridColumn, colsToGroups));
             }
         });
@@ -1081,8 +1108,8 @@ class Adaptable {
             const colId2 = colState2.colId;
             const originalIndex1 = columnsStateIndexes[colId1];
             const originalIndex2 = columnsStateIndexes[colId2];
-            const isRowGroup1 = this.api.columnApi.isRowGroupColumn(colId1);
-            const isRowGroup2 = this.api.columnApi.isRowGroupColumn(colId2);
+            const isRowGroup1 = this.api.columnApi.isAutoRowGroupColumn(colId1);
+            const isRowGroup2 = this.api.columnApi.isAutoRowGroupColumn(colId2);
             if (isRowGroup1 && isRowGroup2) {
                 return 1;
             }

package/src/agGrid/agGridHelper.js

@@ -40,6 +40,7 @@ const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
 const Helper_1 = require("../Utilities/Helpers/Helper");
+const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -97,6 +98,7 @@ class agGridHelper {
         modules.set(ModuleConstants.ThemeModuleId, new ThemeModule_1.ThemeModule(api));
         modules.set(ModuleConstants.GridInfoModuleId, new GridInfoModule_1.GridInfoModule(api));
         modules.set(ModuleConstants.SettingsPanelModuleId, new SettingsPanelModule_1.SettingsPanelModule(api));
+        modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
         return modules;
     }

package/src/agGrid/agGridMenuHelper.js

@@ -219,7 +219,7 @@ class agGridMenuHelper {
             adaptableColumn: adaptableColumn,
             agGridColumn: agGridColumn,
             adaptableApi: this.adaptable.api,
-            isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(agGridColumn.getColId()),
+            isRowGroupColumn: this.adaptable.api.columnApi.isAutoRowGroupColumn(agGridColumn.getColId()),
         };
     }
     createContextMenuContextObject(params, adaptableColumn) {
@@ -254,7 +254,7 @@ class agGridMenuHelper {
             adaptableApi: this.adaptable.api,
             selectedCellInfo: selectedCellInfo,
             selectedRowInfo: selectedRowInfo,
-            isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(params.column.getColId()),
+            isRowGroupColumn: this.adaptable.api.columnApi.isAutoRowGroupColumn(params.column.getColId()),
         };
     }
     createAgGridContextMenuItems(originalgetContextMenuItems, params) {

package/src/agGrid/createAgStatusPanelComponent.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IStatusPanelParams } from '@ag-grid-community/all-modules';
+import { AdaptableApi } from '../../types';
+import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+export interface StatusPanelProps {
+    params: IStatusPanelParams;
+    adaptableApi: AdaptableApi;
+    context: {
+        Key: string;
+    };
+}
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => {
+    new (): {
+        params: IStatusPanelParams;
+        eGui: HTMLElement;
+        init(params: IStatusPanelParams): void;
+        render(): void;
+        getGui(): HTMLElement;
+        destroy(): void;
+    };
+};

package/src/agGrid/createAgStatusPanelComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAgStatusPanelComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
+exports.createAgStatusPanelComponent = (component, adaptable, context) => {
+    return class StatusBarRenderer {
+        init(params) {
+            this.params = params;
+            this.eGui = document.createElement('div');
+            this.render();
+        }
+        render() {
+            const props = {
+                params: this.params,
+                adaptableApi: adaptable.api,
+                context,
+            };
+            const children = renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(component, props), adaptable);
+            ReactDOM.render(children, this.eGui);
+        }
+        getGui() {
+            return this.eGui;
+        }
+        destroy() {
+            ReactDOM.unmountComponentAtNode(this.eGui);
+        }
+    };
+};