@adaptabletools/adaptable 11.1.8 → 11.1.11

package/src/Strategy/Interface/IModule.d.ts

@@ -10,16 +10,7 @@ import { FreeTextColumn } from '../../PredefinedConfig/FreeTextColumnState';
 import { AdaptableOnePageWizardProps } from '../../View/Wizard/Interface/IAdaptableWizard';
 import * as Redux from 'redux';
 import { SuspendableObject } from '../../../types';
-/**
- * This is the interface that all Moduless implement (as well as all deriving from AdaptableModulesBase).
- * Each Module is responsible for creating popup and context menu items, providing an entitlement ( the default is 'Default') and initialising with Redux
- * Most Modules map to their own Reducer (e.g. QuickSearchModules => QuickSearchReducer)
- * However these Moduless DONT store any State:
- * Application
- * GridInfo
- * StateManagement
- * TeamSharing
- */
+import { StatusBarPanelProps } from '../../View/StatusBar/StatusBarPanel';
 export interface ModuleInfo {
     ModuleName: AdaptableModule;
     FriendlyName: string;
@@ -86,6 +77,7 @@ export interface AdaptableModuleView {
     emptyView?: React.FunctionComponent<{
         module: IModule;
     }> | string;
+    newTooltipText?: string;
     /**
      * Specifieds the types of objects the module manages.
      * When specified the new button will have these options.
@@ -96,7 +88,22 @@ export interface AdaptableModuleView {
         accessLevel?: AccessLevel;
     }[];
     getEditWizard?(abObject?: AdaptableObject): React.FunctionComponent<AdaptableOnePageWizardProps<AdaptableObject>>;
+    /**
+     * Specify status panel props.
+     * Can be extended to include custom rendereres.
+     */
+    getStatusBarPanelProps?(): StatusBarPanelProps;
 }
+/**
+ * This is the interface that all Moduless implement (as well as all deriving from AdaptableModulesBase).
+ * Each Module is responsible for creating popup and context menu items, providing an entitlement ( the default is 'Default') and initialising with Redux
+ * Most Modules map to their own Reducer (e.g. QuickSearchModules => QuickSearchReducer)
+ * However these Moduless DONT store any State:
+ * Application
+ * GridInfo
+ * StateManagement
+ * TeamSharing
+ */
 export interface IModule {
     moduleInfo: ModuleInfo;
     AccessLevel: AccessLevel;
@@ -114,6 +121,10 @@ export interface IModule {
     getModuleFreeTextColumnReferences(): FreeTextColumn[];
     getPopupMaxWidth(): number | undefined;
     updateOldConfig(): void;
+    /**
+     * The following view options are used to render adaptable objects and
+     * module general views.
+     */
     toView?: (abObject: AdaptableObject) => AdaptableObjectView;
     toViewAll?: () => AdaptableObjectView[];
     getViewProperties?: () => AdaptableModuleView;

package/src/Strategy/LayoutModule.d.ts

@@ -35,8 +35,15 @@ export declare class LayoutModule extends AdaptableModuleBase implements IModule
     getViewProperties(): {
         actions: import("react").FunctionComponent<{
             data: Layout;
+            id?: string;
         }>[];
         getDeleteAction: (layout: Layout) => LayoutRedux.LayoutDeleteAction;
         onOpenEditPopup: (layout?: Layout) => void;
+        getStatusBarPanelProps: () => {
+            content: string;
+            popover: import("react").FunctionComponent<{}>;
+            popoverMinWidth: number;
+            extraActions: import("react").FunctionComponent<{}>[];
+        };
     };
 }

package/src/Strategy/LayoutModule.js

@@ -7,6 +7,8 @@ const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/Mod
 const LayoutRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/LayoutRedux"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const LayoutRadioSelector_1 = require("../View/Layout/LayoutRadioSelector");
+const LayoutStatusBarSubPanelPopover_1 = require("../View/Layout/LayoutStatusBarSubPanelPopover");
+const EditCurrentLayoutButton_1 = require("../View/Layout/EditCurrentLayoutButton");
 class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.LayoutModuleId, 'Layout', 'layout', 'LayoutPopup', 'Named sets of column visibility, order, groupings, aggregation, pivots etc.', api);
@@ -138,7 +140,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         const columnIdToFriendlyName = (columnId) => {
             return this.api.columnApi.getFriendlyNameFromColumnId(columnId);
         };
-        let columns = layout.Columns;
+        let columns = layout.Columns.filter((c) => !this.api.columnApi.isAutoRowGroupColumn(c)).filter((c) => !this.api.columnApi.isAutoPivotColumn(c));
         if (columns.length >
             maxColumnsToDisplay + 1 /* +1 is to show tag only beginning with 2, 'other 2' */) {
             const extraColumns = columns.length - maxColumnsToDisplay;
@@ -196,6 +198,17 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     this.api.layoutApi.showLayoutEditor(layout.Name);
                 }
             },
+            getStatusBarPanelProps: () => {
+                const text = this.api.layoutApi.getCurrentLayoutName();
+                const layouts = this.api.layoutApi.getAllLayout();
+                const popover = layouts.length > 1 ? LayoutStatusBarSubPanelPopover_1.LayoutStatusBarSubPanelPopover : null;
+                return {
+                    content: text,
+                    popover: popover,
+                    popoverMinWidth: 150,
+                    extraActions: [EditCurrentLayoutButton_1.EditCurrentLayoutButton],
+                };
+            },
         };
     }
 }

package/src/Strategy/QueryModule.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import * as QueryRedux from '../Redux/ActionsReducers/QueryRedux';
 import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
@@ -28,6 +29,13 @@ export declare class QueryModule extends AdaptableModuleBase implements IModule
     }[];
     getViewProperties(): {
         getDeleteAction: (namedQuery: NamedQuery) => QueryRedux.NamedQueryDeleteAction;
+        newTooltipText: string;
+        emptyView: string;
         getEditWizard: () => typeof NamedQueryWizard;
+        getStatusBarPanelProps: () => {
+            content: string;
+            extraActions: (() => JSX.Element)[];
+            popover: string;
+        };
     };
 }

package/src/Strategy/QueryModule.js

@@ -6,6 +6,7 @@ const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
 const QueryRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/QueryRedux"));
 const NamedQueryWizard_1 = require("../View/Query/Wizard/NamedQueryWizard");
+const EditCurrentQueryButton_1 = require("../View/Query/EditCurrentQueryButton");
 class QueryModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.QueryModuleId, 'Query', 'query', 'QueryPopup', 'Run real-time text-based queries using a wealth of powerful functions and operators', api);
@@ -47,7 +48,24 @@ class QueryModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     getViewProperties() {
         return {
             getDeleteAction: QueryRedux.NamedQueryDelete,
+            newTooltipText: 'Create New Named Query',
+            emptyView: "Click 'New' to create a Named Query that can be referenced in other Expressions",
             getEditWizard: () => NamedQueryWizard_1.NamedQueryWizard,
+            getStatusBarPanelProps: () => {
+                const queryMaxLength = 15;
+                const query = this.api.queryApi.getCurrentQuery();
+                let text = query;
+                let popover = null;
+                if (query.length > queryMaxLength) {
+                    text = query.substring(0, queryMaxLength - 3) + '...';
+                    popover = query;
+                }
+                return {
+                    content: text || 'No Query',
+                    extraActions: [EditCurrentQueryButton_1.EditCurrentQueryButton],
+                    popover,
+                };
+            },
         };
     }
 }

package/src/Strategy/QuickSearchModule.d.ts

@@ -1,6 +1,12 @@
+/// <reference types="react" />
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import { IModule } from './Interface/IModule';
 import { AdaptableApi } from '../Api/AdaptableApi';
 export declare class QuickSearchModule extends AdaptableModuleBase implements IModule {
     constructor(api: AdaptableApi);
+    getViewProperties(): {
+        getStatusBarPanelProps(): {
+            content: import("react").FunctionComponent<{}>;
+        };
+    };
 }

package/src/Strategy/QuickSearchModule.js

@@ -4,9 +4,19 @@ exports.QuickSearchModule = void 0;
 const tslib_1 = require("tslib");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const QuickSearchStatusBarContent_1 = require("../View/QuickSearch/QuickSearchStatusBarContent");
 class QuickSearchModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.QuickSearchModuleId, 'Quick Search', 'quick-search', 'QuickSearchPopup', 'Quickly highlight all cells in the grid that contain matching query text', api);
     }
+    getViewProperties() {
+        return {
+            getStatusBarPanelProps() {
+                return {
+                    content: QuickSearchStatusBarContent_1.QuickSearchStatusBarContent,
+                };
+            },
+        };
+    }
 }
 exports.QuickSearchModule = QuickSearchModule;

package/src/Strategy/StatusBarModule.d.ts

@@ -0,0 +1,8 @@
+import { AdaptableModuleBase } from './AdaptableModuleBase';
+import { IModule } from './Interface/IModule';
+import { AdaptableApi } from '../Api/AdaptableApi';
+export declare class StatusBarModule extends AdaptableModuleBase implements IModule {
+    constructor(api: AdaptableApi);
+    syncStateWithOptions(): void;
+    isModuleAvailable(): boolean;
+}

package/src/Strategy/StatusBarModule.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBarModule = void 0;
+const tslib_1 = require("tslib");
+const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
+const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+class StatusBarModule extends AdaptableModuleBase_1.AdaptableModuleBase {
+    constructor(api) {
+        super(ModuleConstants.StatusBarModuleId, 'Status Bar', 'statusbar', 'StatusBarPopup', 'Configure AdapTable Status Bar', api);
+    }
+    syncStateWithOptions() {
+        const agGridStatusPanels = this.api.statusBarApi.getAgGridStatusPanels();
+        const statusPanelsState = this.api.statusBarApi.getStatusPanels();
+        /**
+         * Grid config determines how many adaptable status panels are rendered.
+         * This dictates the state.
+         * - if a status panel is removed from ag-grid, it's sub-panels are made available;
+         * - if a new status panel is added it is added to state with an empty list
+         */
+        const newStatusPanelsState = agGridStatusPanels.map((agGridStatusPanel) => {
+            let statusPanelState = statusPanelsState.find((statusPanel) => statusPanel.Key === agGridStatusPanel.key);
+            // no state found
+            if (!statusPanelState) {
+                statusPanelState = {
+                    Key: agGridStatusPanel.key,
+                    StatusBarPanels: [],
+                };
+            }
+            return statusPanelState;
+        });
+        this.api.statusBarApi.setStatusPanels(newStatusPanelsState);
+    }
+    isModuleAvailable() {
+        return false;
+        // TODO: replace with this like when we release Status Bar properly
+        // return super.isModuleAvailable() && this.api.statusBarApi.getAgGridStatusPanels().length > 0;
+    }
+}
+exports.StatusBarModule = StatusBarModule;

package/src/Strategy/SystemStatusModule.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import { AdaptableMenuItem, ContextMenuContext } from '../PredefinedConfig/Common/Menu';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
@@ -7,4 +8,9 @@ export declare class SystemStatusModule extends AdaptableModuleBase implements I
     constructor(api: AdaptableApi);
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
+    getViewProperties(): {
+        getStatusBarPanelProps: () => {
+            content: import("react").FunctionComponent<{}>;
+        };
+    };
 }

package/src/Strategy/SystemStatusModule.js

@@ -4,6 +4,7 @@ exports.SystemStatusModule = void 0;
 const tslib_1 = require("tslib");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const SystemStatusStatusBarContent_1 = require("../View/SystemStatus/SystemStatusStatusBarContent");
 class SystemStatusModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.SystemStatusModuleId, 'System Status', 'system-status', 'SystemStatusPopup', 'Provide messages about the Status of your application', api);
@@ -30,5 +31,14 @@ class SystemStatusModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             ];
         }
     }
+    getViewProperties() {
+        return {
+            getStatusBarPanelProps: () => {
+                return {
+                    content: SystemStatusStatusBarContent_1.SystemStatusStatusBarContent,
+                };
+            },
+        };
+    }
 }
 exports.SystemStatusModule = SystemStatusModule;

package/src/Strategy/ThemeModule.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import { IModule } from './Interface/IModule';
 import { AdaptableApi } from '../Api/AdaptableApi';
@@ -6,4 +7,10 @@ export declare class ThemeModule extends AdaptableModuleBase implements IModule
     constructor(api: AdaptableApi);
     getModuleAdaptableObjects(): AdaptableObject[];
     hasNamedQueryReferences(): boolean;
+    getViewProperties(): {
+        getStatusBarPanelProps: () => {
+            content: string;
+            popover: import("react").FunctionComponent<{}>;
+        };
+    };
 }

package/src/Strategy/ThemeModule.js

@@ -4,6 +4,7 @@ exports.ThemeModule = void 0;
 const tslib_1 = require("tslib");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const ThemeStatusPanelPopover_1 = require("../View/Theme/ThemeStatusPanelPopover");
 class ThemeModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.ThemeModuleId, 'Theme', 'theme', 'ThemePopup', 'Theme AdapTable with a colour configuration set of your choosing', api);
@@ -14,5 +15,16 @@ class ThemeModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     hasNamedQueryReferences() {
         return false;
     }
+    getViewProperties() {
+        return {
+            getStatusBarPanelProps: () => {
+                const currentTheme = this.api.themeApi.getCurrentTheme();
+                return {
+                    content: currentTheme,
+                    popover: ThemeStatusPanelPopover_1.ThemeStatusPanelPopover,
+                };
+            },
+        };
+    }
 }
 exports.ThemeModule = ThemeModule;

package/src/Strategy/Utilities/getAlertBehaviourViewItems.js

@@ -9,7 +9,7 @@ const BehaviourView = (props) => {
 };
 exports.getAlertBehaviourViewItems = () => {
     return {
-        name: 'Behaviour',
+        name: AdaptableContext_1.useAdaptable().api.internalApi.getCorrectEnglishVariant('Behaviour'),
         view: BehaviourView,
     };
 };

package/src/Utilities/Constants/GeneralConstants.d.ts

@@ -20,6 +20,7 @@ export declare const EMPTY_ARRAY: any[];
 export declare const AB_SPECIAL_COLUMN = "abSpecialColumn";
 export declare const HALF_SECOND: number;
 export declare const AG_GRID_GROUPED_COLUMN: string;
+export declare const AG_GRID_PIVOT_COLUMN: string;
 export declare const SYSTEM_STATUS_DEFAULT_MAX_MESSAGES_IN_STORE: number;
 export declare const QUICK_SEARCH_DEFAULT_BACK_COLOR: string;
 export declare const QUICK_SEARCH_DEFAULT_FORE_COLOR: string;

package/src/Utilities/Constants/GeneralConstants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.THEME_STYLE = exports.SELECTED_ROWS_REPORT = exports.SELECTED_CELLS_REPORT = exports.CURRENT_DATA_REPORT = exports.ALL_DATA_REPORT = exports.VISUAL_DATA_REPORT = exports.SYSTEM_THEMES = exports.SMART_EDIT_MATH_OPERATION_STATE_PROPERTY = exports.SMART_EDIT_VALUE_STATE_PROPERTY = exports.QUICK_SEARCH_STYLE_STATE_PROPERTY = exports.QUICK_SEARCH_TEXT_STATE_PROPERTY = exports.CURRENT_THEME_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DURATION_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DOWN_COLOR_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_UP_COLOR_STATE_PROPERTY = exports.CURRENT_REPORT_STATE_PROPERTY = exports.CURRENT_DATA_SOURCE_STATE_PROPERTY = exports.CURRENT_LAYOUT_STATE_PROPERTY = exports.SUMMARY_OPERATION_STATE_PROPERTY = exports.ALERT_DEFAULT_SHOW_POPUP = exports.ALERT_DEFAULT_MESSAGE_TYPE = exports.PLUS_MINUS_DEFAULT_NUDGE_VALUE = exports.DEFAULT_LIVE_REPORT_THROTTLE_TIME = exports.THEME_DEFAULT_CURRENT_THEME = exports.SYSTEM_DEFAULT_SYSTEM_STATUS_TYPE = exports.CELL_SUMMARY_DEFAULT_OPERATION = exports.QUICK_SEARCH_DEBOUNCE_TIME = exports.QUICK_SEARCH_DEFAULT_FORE_COLOR = exports.QUICK_SEARCH_DEFAULT_BACK_COLOR = exports.SYSTEM_STATUS_DEFAULT_MAX_MESSAGES_IN_STORE = exports.AG_GRID_GROUPED_COLUMN = exports.HALF_SECOND = exports.AB_SPECIAL_COLUMN = exports.EMPTY_ARRAY = exports.EMPTY_STRING = exports.FILTER_THROTTLE = exports.FILTER_NEVER = exports.FILTER_ALWAYS = exports.ALL_COLUMN_VALUES = exports.READ_ONLY_STYLE = exports.MENU_PREFIX = exports.ADAPTABLE = exports.ADAPTABLE_ID = exports.USER_NAME = exports.DARK_THEME = exports.LIGHT_THEME = exports.DEFAULT_LAYOUT = exports.MISSING_COLUMN = exports.AUTOGENERATED_PK_COLUMN = void 0;
+exports.THEME_STYLE = exports.SELECTED_ROWS_REPORT = exports.SELECTED_CELLS_REPORT = exports.CURRENT_DATA_REPORT = exports.ALL_DATA_REPORT = exports.VISUAL_DATA_REPORT = exports.SYSTEM_THEMES = exports.SMART_EDIT_MATH_OPERATION_STATE_PROPERTY = exports.SMART_EDIT_VALUE_STATE_PROPERTY = exports.QUICK_SEARCH_STYLE_STATE_PROPERTY = exports.QUICK_SEARCH_TEXT_STATE_PROPERTY = exports.CURRENT_THEME_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DURATION_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_DOWN_COLOR_STATE_PROPERTY = exports.FLASHING_CELL_DEFAULT_UP_COLOR_STATE_PROPERTY = exports.CURRENT_REPORT_STATE_PROPERTY = exports.CURRENT_DATA_SOURCE_STATE_PROPERTY = exports.CURRENT_LAYOUT_STATE_PROPERTY = exports.SUMMARY_OPERATION_STATE_PROPERTY = exports.ALERT_DEFAULT_SHOW_POPUP = exports.ALERT_DEFAULT_MESSAGE_TYPE = exports.PLUS_MINUS_DEFAULT_NUDGE_VALUE = exports.DEFAULT_LIVE_REPORT_THROTTLE_TIME = exports.THEME_DEFAULT_CURRENT_THEME = exports.SYSTEM_DEFAULT_SYSTEM_STATUS_TYPE = exports.CELL_SUMMARY_DEFAULT_OPERATION = exports.QUICK_SEARCH_DEBOUNCE_TIME = exports.QUICK_SEARCH_DEFAULT_FORE_COLOR = exports.QUICK_SEARCH_DEFAULT_BACK_COLOR = exports.SYSTEM_STATUS_DEFAULT_MAX_MESSAGES_IN_STORE = exports.AG_GRID_PIVOT_COLUMN = exports.AG_GRID_GROUPED_COLUMN = exports.HALF_SECOND = exports.AB_SPECIAL_COLUMN = exports.EMPTY_ARRAY = exports.EMPTY_STRING = exports.FILTER_THROTTLE = exports.FILTER_NEVER = exports.FILTER_ALWAYS = exports.ALL_COLUMN_VALUES = exports.READ_ONLY_STYLE = exports.MENU_PREFIX = exports.ADAPTABLE = exports.ADAPTABLE_ID = exports.USER_NAME = exports.DARK_THEME = exports.LIGHT_THEME = exports.DEFAULT_LAYOUT = exports.MISSING_COLUMN = exports.AUTOGENERATED_PK_COLUMN = void 0;
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const UIHelper_1 = require("../../View/UIHelper");
 exports.AUTOGENERATED_PK_COLUMN = '__ADAPTABLE_PK__';
@@ -22,6 +22,7 @@ exports.EMPTY_ARRAY = [];
 exports.AB_SPECIAL_COLUMN = 'abSpecialColumn';
 exports.HALF_SECOND = 500;
 exports.AG_GRID_GROUPED_COLUMN = 'ag-Grid-AutoColumn';
+exports.AG_GRID_PIVOT_COLUMN = 'pivot_';
 /*
 Redux / State Defaults
 Try to put all our Redux / State defaults here and ONLY reference from here - avoid magic numbers / strings.

package/src/Utilities/Constants/ModuleConstants.d.ts

@@ -31,3 +31,4 @@ export declare const TeamSharingModuleId: ModuleConstants;
 export declare const ThemeModuleId: ModuleConstants;
 export declare const ToolPanelModuleId: ModuleConstants;
 export declare const SettingsPanelModuleId: ModuleConstants;
+export declare const StatusBarModuleId: ModuleConstants;

package/src/Utilities/Constants/ModuleConstants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SettingsPanelModuleId = exports.ToolPanelModuleId = exports.ThemeModuleId = exports.TeamSharingModuleId = exports.SystemStatusModuleId = exports.StateManagementModuleId = exports.SmartEditModuleId = exports.ShortcutModuleId = exports.ScheduleModuleId = exports.QuickSearchModuleId = exports.QueryModuleId = exports.PlusMinusModuleId = exports.OpenFinModuleId = exports.LayoutModuleId = exports.IPushPullModuleId = exports.GridInfoModuleId = exports.Glue42ModuleId = exports.FreeTextColumnModuleId = exports.FormatColumnModuleId = exports.FilterModuleId = exports.ExportModuleId = exports.DataSourceModuleId = exports.DataChangeHistoryModuleId = exports.DashboardModuleId = exports.CustomSortModuleId = exports.ConditionalStyleModuleId = exports.ChartingModuleId = exports.CellSummaryModuleId = exports.CalculatedColumnModuleId = exports.BulkUpdateModuleId = exports.FlashingCellModuleId = exports.AlertModuleId = void 0;
+exports.StatusBarModuleId = exports.SettingsPanelModuleId = exports.ToolPanelModuleId = exports.ThemeModuleId = exports.TeamSharingModuleId = exports.SystemStatusModuleId = exports.StateManagementModuleId = exports.SmartEditModuleId = exports.ShortcutModuleId = exports.ScheduleModuleId = exports.QuickSearchModuleId = exports.QueryModuleId = exports.PlusMinusModuleId = exports.OpenFinModuleId = exports.LayoutModuleId = exports.IPushPullModuleId = exports.GridInfoModuleId = exports.Glue42ModuleId = exports.FreeTextColumnModuleId = exports.FormatColumnModuleId = exports.FilterModuleId = exports.ExportModuleId = exports.DataSourceModuleId = exports.DataChangeHistoryModuleId = exports.DashboardModuleId = exports.CustomSortModuleId = exports.ConditionalStyleModuleId = exports.ChartingModuleId = exports.CellSummaryModuleId = exports.CalculatedColumnModuleId = exports.BulkUpdateModuleId = exports.FlashingCellModuleId = exports.AlertModuleId = void 0;
 exports.AlertModuleId = 'Alert';
 exports.FlashingCellModuleId = 'FlashingCell';
 exports.BulkUpdateModuleId = 'BulkUpdate';
@@ -33,3 +33,4 @@ exports.TeamSharingModuleId = 'TeamSharing';
 exports.ThemeModuleId = 'Theme';
 exports.ToolPanelModuleId = 'ToolPanel';
 exports.SettingsPanelModuleId = 'SettingsPanel';
+exports.StatusBarModuleId = 'StatusBar';

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -23,7 +23,8 @@ exports.DefaultAdaptableOptions = {
     alertOptions: {
         alertForms: undefined,
         maxAlertsInStore: 20,
-        cellHighlightDuration: 3000,
+        cellHighlightDuration: 2000,
+        rowHighlightDuration: 4000,
         dataChangeDetectionPolicy: 'rawValue',
         actionHandlers: undefined,
     },
@@ -123,6 +124,7 @@ exports.DefaultAdaptableOptions = {
         currentCalendar: 'United Kingdom',
         cellSummaryOperations: undefined,
         customSortComparers: undefined,
+        englishVariant: 'GB',
     },
     layoutOptions: {
         includeExpandedRowGroups: false,
@@ -214,6 +216,7 @@ exports.DefaultAdaptableOptions = {
         actionColumns: undefined,
         showDocumentationLinks: true,
         gridInfoSections: ['GridSummary', 'AdaptableOptions', 'ColumnInfo'],
+        showAdapTableVersion: true,
     },
     toolPanelOptions: {
         showAdaptableToolPanel: true,

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -13,6 +13,7 @@ exports.DEFAULT_NAVIGATION_ITEMS = [
     'GridInfo',
     'Dashboard',
     'ToolPanel',
+    'StatusBar',
     'StateManagement',
     '-',
     'Alert',

package/src/Utilities/Services/ModuleService.js

@@ -10,13 +10,13 @@ class ModuleService {
         this.adaptableApi = adaptableApi;
     }
     createModuleMenus() {
-        const dropdownMenuItems = [];
+        const settingsPanelMenuItems = [];
         const buttonMenuItems = [];
         this.getModuleCollection().forEach((module) => {
-            const dropdownMenuItem = module.addModuleMenuItem('ModuleMenu');
-            if (Helper_1.default.objectExists(dropdownMenuItem)) {
-                if (dropdownMenuItems.findIndex((m) => m.module == dropdownMenuItem.module) == -1) {
-                    dropdownMenuItems.push(dropdownMenuItem);
+            const settingsPanelMenuItem = module.addModuleMenuItem('ModuleMenu');
+            if (Helper_1.default.objectExists(settingsPanelMenuItem)) {
+                if (settingsPanelMenuItems.findIndex((m) => m.module == settingsPanelMenuItem.module) == -1) {
+                    settingsPanelMenuItems.push(settingsPanelMenuItem);
                 }
             }
             const buttonMenuItem = module.addModuleMenuItem('ModuleButton');
@@ -27,7 +27,7 @@ class ModuleService {
             }
         });
         // store the main menu as we will re-use (and it never changes)
-        this.adaptableApi.internalApi.setModuleDropdownMenuItems(dropdownMenuItems);
+        this.adaptableApi.internalApi.setSettingPanelModuleMenuItems(settingsPanelMenuItems);
         this.adaptableApi.internalApi.setModuleButtonMenuItems(buttonMenuItems);
     }
     isModuleAvailable(adaptableModule) {

package/src/View/AdaptablePopover/index.d.ts

@@ -6,6 +6,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<AdaptablePo
     hideEvent?: string;
     className?: string;
     bodyText: any[];
+    showIcon?: boolean;
     MessageType?: AdaptableMessageType;
     triggerAction?: string;
     useButton?: boolean;

package/src/View/AdaptablePopover/index.js

@@ -11,7 +11,9 @@ const OverlayTrigger_1 = tslib_1.__importDefault(require("../../components/Overl
 const rebass_1 = require("rebass");
 class AdaptablePopover extends React.Component {
     render() {
+        var _a;
         let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
+        const showIcon = (_a = this.props.showIcon) !== null && _a !== void 0 ? _a : true;
         let useButton = this.props.useButton != null ? this.props.useButton : false;
         let popoverMinWidth = this.props.popoverMinWidth != null ? this.props.popoverMinWidth.toString() + 'px' : 'auto';
         const title = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.headerText)
@@ -35,8 +37,9 @@ class AdaptablePopover extends React.Component {
         return (React.createElement(rebass_1.Flex, { alignItems: "center", className: this.props.className },
             React.createElement(OverlayTrigger_1.default, { showTriangle: true, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
                     overflow: 'visible',
-                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, onClick: () => null, icon: icon, tooltip: this.props.tooltipText })) : (React.createElement("div", { tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
-                React.createElement(icons_1.Icon, { name: icon }))))));
+                }, defaultZIndex: 100000 }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
+                this.props.children,
+                showIcon && React.createElement(icons_1.Icon, { name: icon }))))));
     }
 }
 exports.AdaptablePopover = AdaptablePopover;

package/src/View/AdaptableViewFactory.js

@@ -30,13 +30,13 @@ const DataSourceViewPanel_1 = require("./DataSource/DataSourceViewPanel");
 const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryPopup");
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
+const StatusBarPopup_1 = require("./StatusBar/StatusBarPopup");
 exports.AdaptableViewFactory = {
-    // ExpandedQueryPopup,
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
     StateManagementPopup: StateManagementPopup_1.StateManagementPopup,
     GridInfoPopup: GridInfoPopup_1.GridInfoPopup,
-    // LayoutPopup,
+    StatusBarPopup: StatusBarPopup_1.StatusBarPopup,
     QuickSearchPopup: QuickSearchPopup_1.QuickSearchPopup,
     CellSummaryPopup: CellSummaryPopup_1.CellSummaryPopup,
     SmartEditPopup: SmartEditPopup_1.SmartEditPopup,

package/src/View/Alert/AlertStatusSubPanel.d.ts

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

package/src/View/Alert/AlertStatusSubPanel.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertStatusPanel = 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 AlertsPanel_1 = require("./AlertsPanel");
+const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
+const StatusBarPanel_1 = require("../StatusBar/StatusBarPanel");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const initialStyle = { color: '', background: '' };
+exports.AlertStatusPanel = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const [style, setStyle] = React.useState(initialStyle);
+    const dispatch = react_redux_1.useDispatch();
+    const module = adaptable.ModuleService.getModuleById(ModuleConstants.AlertModuleId);
+    /**
+     * Using a selector to so the component updates each time an alert is triggered.
+     */
+    const alerts = react_redux_1.useSelector((state) => state.System.AdaptableAlerts);
+    const text = alerts.length == 0 ? '0 Alerts' : alerts.length == 1 ? '1 Alert' : alerts.length + ' Alerts';
+    const handleAction = React.useCallback(() => adaptable.api.alertApi.showAlertPopup(), []);
+    // blinking logic
+    const previousAlerts = React.useRef(alerts);
+    const timeoutId = React.useRef();
+    React.useEffect(() => {
+        const noNewAlerts = previousAlerts.current.length === alerts.length;
+        previousAlerts.current = alerts;
+        if (!alerts.length) {
+            return;
+        }
+        if (noNewAlerts) {
+            return;
+        }
+        const { color, background } = getAlertButtonStyle_1.getAlertButtonStyle(alerts);
+        setStyle({ color, background });
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+            timeoutId.current = null;
+        }
+        /**
+         * Cannot clear timeout in the useEffect cleanup function, because this logic is not
+         * called for each case. e.g. it is skipped for when alerts are not added.
+         */
+        timeoutId.current = setTimeout(() => {
+            setStyle(initialStyle);
+        }, 2000);
+    }, [alerts]);
+    // Dropdown content
+    const handleDeleteAlert = React.useCallback((alert) => dispatch(SystemRedux.SystemAlertDelete(alert)), []);
+    const handleDeleteAllAlerts = React.useCallback((alerts) => dispatch(SystemRedux.SystemAlertDeleteAll(alerts)), []);
+    let alertsPanel = (React.createElement(AlertsPanel_1.AlertsPanel, { Alerts: alerts, ShowPanel: true, ShowHeader: false, onClearAlert: handleDeleteAlert, onClearAllAlerts: handleDeleteAllAlerts }));
+    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { "data-name": module.moduleInfo.ModuleName, color: style.color, backgroundColor: style.background, onAction: handleAction, icon: module.moduleInfo.Glyph, popover: alerts.length ? alertsPanel : null, content: text }));
+};

package/src/View/Alert/AlertViewPanel.js

@@ -9,6 +9,7 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
 const AlertsPanel_1 = require("./AlertsPanel");
 const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
+const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -23,19 +24,17 @@ class AlertViewPanelComponent extends React.Component {
         }
     }
     render() {
-        let messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
-        let messageTypeColor = UIHelper_1.default.getColorByMessageType(messageType);
-        let alertsPanel = (React.createElement(AlertsPanel_1.AlertsPanel, { Alerts: this.props.AdaptableAlerts, ShowPanel: true, ShowHeader: false, onClearAlert: this.props.onDeleteAlert, onRender: () => this.setState({ ShowMessage: false }), onClearAllAlerts: this.props.onDeleteAllAlert }));
-        let collapsedText = this.props.AdaptableAlerts.length == 0
+        const messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
+        const { color: buttonTextColor, background: buttonBackground } = getAlertButtonStyle_1.getAlertButtonStyle(this.props.AdaptableAlerts);
+        const collapsedText = this.props.AdaptableAlerts.length == 0
             ? '0 Alerts'
             : this.props.AdaptableAlerts.length == 1
                 ? '1 Alert'
                 : this.props.AdaptableAlerts.length + ' Alerts';
-        let buttonColor = UIHelper_1.default.getButtonColourForAdaptableAlerts(this.props.AdaptableAlerts, messageTypeColor);
-        let buttonTextColor = UIHelper_1.default.getButtonTextColourForArrayandMessageType(this.props.AdaptableAlerts, messageType);
+        const alertsPanel = (React.createElement(AlertsPanel_1.AlertsPanel, { Alerts: this.props.AdaptableAlerts, ShowPanel: true, ShowHeader: false, onClearAlert: this.props.onDeleteAlert, onRender: () => this.setState({ ShowMessage: false }), onClearAllAlerts: this.props.onDeleteAllAlert }));
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
-            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonColor, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
+            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonBackground, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
             this.props.AdaptableAlerts.length > 0 && (React.createElement(rebass_1.Flex, { alignItems: "center" },
                 React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "", 
                     // tooltipText="Alerts"

package/src/View/Alert/AlertsPanel.d.ts

@@ -6,7 +6,7 @@ export interface AlertsPanelProps extends React.ClassAttributes<AlertsPanel> {
     ShowHeader: boolean;
     onClearAlert: (alert: AdaptableAlert) => void;
     onClearAllAlerts: (alerts: AdaptableAlert[]) => void;
-    onRender: () => void;
+    onRender?: () => void;
 }
 export declare class AlertsPanel extends React.Component<AlertsPanelProps, {}> {
     componentWillUnmount(): void;

package/src/View/Alert/AlertsPanel.js

@@ -14,7 +14,8 @@ const ListGroup_1 = tslib_1.__importDefault(require("../../components/List/ListG
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 class AlertsPanel extends React.Component {
     componentWillUnmount() {
-        this.props.onRender();
+        var _a, _b;
+        (_b = (_a = this.props).onRender) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
         let alerts = this.props.Alerts.map((alert, index) => {

package/src/View/Alert/Utilities/getAlertButtonStyle.d.ts

@@ -0,0 +1,5 @@
+import { AdaptableAlert } from '../../../../types';
+export declare const getAlertButtonStyle: (alerts: AdaptableAlert[]) => {
+    color: string;
+    background: string;
+};