@adaptabletools/adaptable 11.1.6 → 11.1.9

package/src/View/Filter/FilterStatusBarSubPanelPopover.d.ts

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

package/src/View/Filter/FilterStatusBarSubPanelPopover.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterStatusBarSubPanelPopover = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
+exports.FilterStatusBarSubPanelPopover = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const columnFilters = react_redux_1.useSelector((state) => state.Filter.ColumnFilters);
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(ModuleConstants.FilterModuleId);
+    const handleClear = React.useCallback((columnFilter) => adaptable.api.filterApi.clearColumnFilterByColumn(columnFilter.ColumnId), []);
+    return (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columnFilters: columnFilters, api: adaptable.api, accessLevel: accessLevel, onClear: handleClear }));
+};

package/src/View/Filter/FilterViewPanel.js

@@ -16,7 +16,7 @@ class FilterViewPanelComponent extends React.Component {
         super(props);
     }
     render() {
-        const activeFiltersPanel = (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columns: this.props.Columns, columnFilters: this.props.ColumnFilters, api: this.props.api, accessLevel: this.props.accessLevel, onClear: (columnFilter) => this.onClearColumnFilter(columnFilter) }));
+        const activeFiltersPanel = (React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, { columnFilters: this.props.ColumnFilters, api: this.props.api, accessLevel: this.props.accessLevel, onClear: (columnFilter) => this.onClearColumnFilter(columnFilter) }));
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null, ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(React.Fragment, null,

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -317,7 +317,7 @@ function FormatColumnStyleWizardSection(props) {
                             "Percent Value",
                             ' '),
                         ' '),
-                    React.createElement(FormLayout_1.FormRow, { label: "Back Colour:" },
+                    React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { checked: !!((_2 = (_1 = data.ColumnStyle) === null || _1 === void 0 ? void 0 : _1.PercentBarStyle) === null || _2 === void 0 ? void 0 : _2.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
                             ((_4 = (_3 = data.ColumnStyle) === null || _3 === void 0 ? void 0 : _3.PercentBarStyle) === null || _4 === void 0 ? void 0 : _4.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_6 = (_5 = data.ColumnStyle) === null || _5 === void 0 ? void 0 : _5.PercentBarStyle) === null || _6 === void 0 ? void 0 : _6.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))),

package/src/View/GridInfo/GridInfoPopup.js

@@ -46,6 +46,7 @@ exports.GridInfoPopup = (props) => {
         });
     };
     const CreateGridSummaries = (colItems) => {
+        var _a;
         const returnRows = [];
         const calcColumns = props.api.calculatedColumnApi
             .getAllCalculatedColumn()
@@ -63,7 +64,9 @@ exports.GridInfoPopup = (props) => {
             })
             : null;
         const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
-        returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
+        if ((_a = props.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
+            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
+        }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));

package/src/View/Layout/EditCurrentLayoutButton.d.ts

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

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditCurrentLayoutButton = 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.EditCurrentLayoutButton = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const handleClick = React.useCallback(() => {
+        adaptable.api.layoutApi.showLayoutEditor();
+    }, []);
+    return React.createElement(SimpleButton_1.default, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
+};

package/src/View/Layout/LayoutPopup.d.ts

@@ -28,5 +28,5 @@ declare class LayoutPopupComponent extends React.Component<LayoutPopupProps, Edi
     canFinishWizard(): boolean;
     private getCurrentLayout;
 }
-export declare let LayoutPopup: import("react-redux").ConnectedComponent<typeof LayoutPopupComponent, Pick<React.ClassAttributes<LayoutPopupComponent> & LayoutPopupProps, never> & LayoutPopupProps>;
+export declare let LayoutPopup: import("react-redux").ConnectedComponent<typeof LayoutPopupComponent, Pick<React.ClassAttributes<LayoutPopupComponent> & LayoutPopupProps, never>>;
 export {};

package/src/View/Layout/LayoutPopup.js

@@ -66,7 +66,7 @@ class LayoutPopupComponent extends React.Component {
             { Content: 'Details', Size: 7 },
             { Content: '', Size: 2 },
         ];
-        let layoutRows = this.props.Layouts.map((layout, index) => {
+        let layoutRows = this.props.Layouts.map((layout) => {
             let accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(layout, this.props.accessLevel);
             return (React.createElement(LayoutEntityRow_1.LayoutEntityRow, { key: layout.Uuid, colItems: colItems, api: this.props.api, IsCurrentLayout: layout.Name == this.props.CurrentLayoutName, moduleInfo: this.props.moduleInfo, adaptableObject: layout, onEdit: () => this.onEdit(layout), onClone: () => this.onClone(layout), onShare: (config) => this.props.onShare(layout, config), teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: LayoutRedux.LayoutDelete(layout), canDelete: this.props.Layouts.length > 1, onSelect: () => this.props.onSelectLayout(layout.Name), accessLevel: accessLevel, cloneAccessLevel: this.props.accessLevel }));
         });
@@ -128,14 +128,14 @@ class LayoutPopupComponent extends React.Component {
         return this.props.Layouts.find((layout) => layout.Name == this.props.CurrentLayoutName);
     }
 }
-function mapStateToProps(state, ownProps) {
+function mapStateToProps(state) {
     return {
         Layouts: state.Layout.Layouts,
         CurrentLayoutName: state.Layout.CurrentLayout,
         CurrentLayoutDraft: state.Grid.CurrentLayout,
     };
 }
-function mapDispatchToProps(dispatch, ownProps) {
+function mapDispatchToProps(dispatch) {
     return {
         onSaveLayout: (layout) => {
             // SAVE it when user clicks FINISH, even if autoSave: false

package/src/View/Layout/LayoutRadioSelector.d.ts

@@ -2,4 +2,5 @@ import * as React from 'react';
 import { Layout } from '../../../types';
 export declare const LayoutRadioSelector: React.FunctionComponent<{
     data: Layout;
+    id?: string;
 }>;

package/src/View/Layout/LayoutRadioSelector.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const AdaptableContext_1 = require("../AdaptableContext");
-exports.LayoutRadioSelector = ({ data }) => {
+exports.LayoutRadioSelector = ({ data, }) => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
     const layouts = adaptable.api.layoutApi.getAllLayout();
@@ -14,5 +14,5 @@ exports.LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return React.createElement(Radio_1.default, { disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+    return React.createElement(Radio_1.default, { id: data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle });
 };

package/src/View/Layout/LayoutStatusBarSubPanelPopover.d.ts

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

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