@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Dashboard/DashboardPopup.js

@@ -1,25 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardPopup = exports.DashboardConfigView = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const rebass_1 = require("rebass");
-const Types_1 = require("../../PredefinedConfig/Common/Types");
-const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
-const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
-const CheckBox_1 = require("../../components/CheckBox");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
-var DashboardConfigView;
+import * as React from 'react';
+import { connect } from 'react-redux';
+import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import Radio from '../../components/Radio';
+import { Box, Flex } from 'rebass';
+import DashboardManagerUI from '../../components/Dashboard/DashboardManager';
+import { ModuleValueSelector } from '../Components/ModuleValueSelector';
+import { CheckBox } from '../../components/CheckBox';
+import Panel from '../../components/Panel';
+import { PinnedToolbarsSelector } from './PinnedToolbarsSelector';
+export var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
     DashboardConfigView["Buttons"] = "Buttons";
     DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
-})(DashboardConfigView = exports.DashboardConfigView || (exports.DashboardConfigView = {}));
+})(DashboardConfigView || (DashboardConfigView = {}));
 class DashboardPopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -28,13 +23,11 @@ class DashboardPopupComponent extends React.Component {
         };
     }
     render() {
-        const moduleService = this.props.api.internalApi.getModuleService();
-        const availableToolbars = Types_1.ALL_TOOLBARS;
-        const systemToolbars = availableToolbars
-            .filter((at) => this.props.api.internalApi.getModuleService().isModuleAvailable(at))
-            .map((at) => ({
-            Id: at,
-            Title: moduleService.getModuleInfoByModule(at).FriendlyName,
+        const systemToolbars = this.props.api.dashboardApi.internalApi
+            .getModuleToolbars()
+            .map((toolbar) => ({
+            Id: toolbar.id,
+            Title: toolbar.friendlyName,
         }));
         const customToolbars = this.props.api.dashboardApi.getCustomToolbars().map((ct) => ({
             Id: ct.name,
@@ -71,25 +64,25 @@ class DashboardPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
-                    React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
+            React.createElement(Flex, { flex: 1, height: "100%", flexDirection: "column" },
+                areDashboardSettingsVisible && (React.createElement(Panel, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
+                    React.createElement(CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
                     ' ',
-                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
-                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
-                    React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons"),
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars")),
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
+                    React.createElement(CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
+                React.createElement(Panel, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
+                    React.createElement(Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
+                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
+                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons"),
+                        React.createElement(Radio, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars")),
+                    React.createElement(Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
                             ? 'toolbars'
                             : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
-                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
-                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)))))));
+                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManagerUI, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
+                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector, null)))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;
@@ -117,4 +110,4 @@ function mapDispatchToProps(dispatch) {
         onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
     };
 }
-exports.DashboardPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);
+export let DashboardPopup = connect(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -1,22 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardToolbarFactory = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const Types_1 = require("../../PredefinedConfig/Common/Types");
-const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
-const CustomToolbar_1 = require("./CustomToolbar");
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { ALL_MODULES } from '../../PredefinedConfig/Common/Types';
+import { useAdaptable } from '../AdaptableContext';
+import { AdaptableViewPanelFactory } from '../AdaptableViewFactory';
+import { CustomToolbarCmp } from './CustomToolbar';
 const SystemDashboardToolbarFactory = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const moduleInfo = adaptable.api.internalApi
         .getModuleService()
         .getModuleInfoByModule(props.toolbarName);
     const accessLevel = adaptable.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.toolbarName);
-    const moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(props.toolbarName);
+    const moduleToolbarView = AdaptableViewPanelFactory.get(props.toolbarName);
+    if (!moduleToolbarView) {
+        console.log({ props });
+        return React.createElement(React.Fragment, null, "adasdasdas");
+    }
     const moduleToolbarElement = React.createElement(moduleToolbarView, {
         viewType: 'Toolbar',
         api: adaptable.api,
@@ -26,21 +26,20 @@ const SystemDashboardToolbarFactory = (props) => {
     return moduleToolbarElement;
 };
 const CustomDashboardToolbarFactory = (props) => {
-    const revision = (0, react_redux_1.useSelector)((state) => state.System.DashboardRevision);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const revision = useSelector((state) => state.System.DashboardRevision);
+    const adaptable = useAdaptable();
     const customToolbars = adaptable.api.dashboardApi.getCustomToolbars();
     const customToolbar = customToolbars && customToolbars.find((ct) => ct.name == props.toolbarName);
     if (customToolbar) {
-        return React.createElement(CustomToolbar_1.CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
+        return React.createElement(CustomToolbarCmp, { customToolbar: customToolbar, dashboardRevision: revision });
     }
     return React.createElement(React.Fragment, null);
 };
-const DashboardToolbarFactory = (props) => {
-    if (Types_1.ALL_MODULES.includes(props.toolbarName)) {
+export const DashboardToolbarFactory = (props) => {
+    if (ALL_MODULES.includes(props.toolbarName)) {
         return React.createElement(SystemDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
     else {
         return React.createElement(CustomDashboardToolbarFactory, { toolbarName: props.toolbarName });
     }
 };
-exports.DashboardToolbarFactory = DashboardToolbarFactory;

package/src/View/Dashboard/DashboardViewPanel.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardViewPanelControl = void 0;
-const tslib_1 = require("tslib");
-const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
-const React = tslib_1.__importStar(require("react"));
-const CheckBox_1 = require("../../components/CheckBox");
-const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
+import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
+import * as React from 'react';
+import { CheckBox } from '../../components/CheckBox';
+import { connect } from 'react-redux';
+import { Flex } from 'rebass';
 class DashboardViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             ' ',
-            React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
             '',
-            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
             ' ',
-            React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
+            React.createElement(CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
     }
 }
 function mapStateToProps(state, ownProps) {
@@ -36,4 +32,4 @@ function mapDispatchToProps(dispatch) {
         onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
     };
 }
-exports.DashboardViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DashboardViewPanelComponent);
+export let DashboardViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(DashboardViewPanelComponent);

package/src/View/Dashboard/ModuleToolbarWrapper.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleToolbarWrapper = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
-const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
-const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const ModuleToolbarWrapper = (props) => {
+import * as React from 'react';
+import { PanelDashboard } from '../Components/Panels/PanelDashboard';
+import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
+import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
+import { useAdaptable } from '../AdaptableContext';
+export const ModuleToolbarWrapper = (props) => {
     const moduleName = props.moduleInfo.ModuleName;
     const moduleFriendlyName = props.moduleInfo.FriendlyName;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { api } = useAdaptable();
     const isConfigurable = moduleName !== 'OpenFin' && moduleName !== 'IPushPull' && moduleName !== 'Glue42';
-    return (React.createElement(PanelDashboard_1.PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureButton: isConfigurable, onConfigure: () => {
+    return (React.createElement(PanelDashboard, { className: `ab-DashboardToolbar__${moduleName}`, "data-name": `ab-DashboardToolbar__${moduleName}`, headerText: moduleFriendlyName, showConfigureButton: isConfigurable, onConfigure: () => {
             const maxWidth = api.internalApi.getModuleService().getPopupMaxWidth(moduleName);
             const popupParams = maxWidth
                 ? { maxWidth, source: 'Toolbar' }
@@ -20,4 +16,3 @@ const ModuleToolbarWrapper = (props) => {
             api.internalApi.dispatchReduxAction(PopupRedux.PopupShowScreen(moduleName, props.moduleInfo.Popup, popupParams));
         }, onClose: () => api.internalApi.dispatchReduxAction(DashboardRedux.DashboardCloseToolbar(moduleName)), accessLevel: props.accessLevel }, props.children));
 };
-exports.ModuleToolbarWrapper = ModuleToolbarWrapper;

package/src/View/Dashboard/PinnedDashboard.js

@@ -1,21 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PinnedDashboard = 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 DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
-const PinnedDashboard = (props) => {
-    const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Box, Flex } from 'rebass';
+import { DashboardToolbarFactory } from './DashboardToolbarFactory';
+export const PinnedDashboard = (props) => {
+    const dashboardState = useSelector((state) => state.Dashboard);
     const pinnedToolbars = dashboardState.PinnedToolbars;
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Dashboard__pinned-content" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(rebass_1.Box, { key: index, mr: 2, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
-            React.createElement(rebass_1.Box, { className: "ab-Dashboard__toolbar-content" },
-                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: toolbar }))));
+    return (React.createElement(Flex, { p: 1, className: "ab-Dashboard__pinned-content" }, pinnedToolbars.map((toolbar, index) => {
+        return (React.createElement(Box, { key: index, mr: 2, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+            React.createElement(Box, { className: "ab-Dashboard__toolbar-content" },
+                React.createElement(DashboardToolbarFactory, { toolbarName: toolbar }))));
     })));
 };
-exports.PinnedDashboard = PinnedDashboard;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -1,30 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PinnedToolbarsSelector = 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 Types_1 = require("../../PredefinedConfig/Common/Types");
-const DashboardRedux_1 = require("../../Redux/ActionsReducers/DashboardRedux");
-const AdaptableContext_1 = require("../AdaptableContext");
-const PinnedToolbarsSelector = (props) => {
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ModuleManager } from '../../components/DragAndDropContext/ModuleManager';
+import { DashboardSetPinnedToolbars } from '../../Redux/ActionsReducers/DashboardRedux';
+import { useAdaptable } from '../AdaptableContext';
+export const PinnedToolbarsSelector = (props) => {
+    const { api } = useAdaptable();
     const dashboardAccessLevel = api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
     const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
-    const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const dashboardState = useSelector((state) => state.Dashboard);
+    const dispatch = useDispatch();
     const pinnedToolbars = dashboardState.PinnedToolbars;
-    const moduleService = api.internalApi.getModuleService();
     const toolbars = React.useMemo(() => {
-        const availableToolbars = Types_1.ALL_TOOLBARS;
-        const systemToolbars = availableToolbars
-            .filter((at) => api.internalApi.getModuleService().isModuleAvailable(at))
-            .map((at) => ({
-            Id: at,
-            Title: moduleService.getModuleInfoByModule(at).FriendlyName,
+        const systemToolbars = api.dashboardApi.internalApi.getModuleToolbars().map((mt) => ({
+            Id: mt.id,
+            Title: mt.friendlyName,
         }));
         const customToolbars = api.dashboardApi.getCustomToolbars().map((ct) => ({
             Id: ct.name,
@@ -40,13 +31,12 @@ const PinnedToolbarsSelector = (props) => {
             },
         ];
     }, [pinnedToolbars]);
-    return (React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+    return (React.createElement(ModuleManager, { permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,
             editTabName: false,
         }, onTabsChange: (tabs) => {
-            dispatch((0, DashboardRedux_1.DashboardSetPinnedToolbars)(tabs[0].Items));
+            dispatch(DashboardSetPinnedToolbars(tabs[0].Items));
         }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbar Panels", dragItemText: "Drag into the Panel below" }));
 };
-exports.PinnedToolbarsSelector = PinnedToolbarsSelector;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataChangeHistoryGrid = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const react_1 = require("react");
-const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
-const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const buildActionColumnButton_1 = require("./buildActionColumnButton");
-const DataChangeHistoryGrid = (props) => {
+import * as React from 'react';
+import { useAdaptable } from '../AdaptableContext';
+import { useEffect, useRef, useState } from 'react';
+import usePrevious from '../../components/utils/usePrevious';
+import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
+import { buildActionColumnButton } from './buildActionColumnButton';
+export const DataChangeHistoryGrid = (props) => {
     const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange, onClearRow } = props;
-    const mainAdaptableInstance = (0, AdaptableContext_1.useAdaptable)();
-    const [_adaptableApi, setAdaptableApi] = (0, react_1.useState)(null);
-    const adaptableApiRef = (0, react_1.useRef)(null);
+    const mainAdaptableInstance = useAdaptable();
+    const [_adaptableApi, setAdaptableApi] = useState(null);
+    const adaptableApiRef = useRef(null);
     adaptableApiRef.current = _adaptableApi;
     const undoChangeEnabled = mainAdaptableInstance.api.internalApi
         .getEntitlementService()
-        .isModuleFullEntitlement(ModuleConstants_1.DataChangeHistoryModuleId);
-    const previousChangeHistoryLog = (0, usePrevious_1.default)(changeHistoryLog, changeHistoryLog);
+        .isModuleFullEntitlement(DataChangeHistoryModuleId);
+    const previousChangeHistoryLog = usePrevious(changeHistoryLog, changeHistoryLog);
     // initialize Adaptable grid
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
@@ -40,7 +36,7 @@ const DataChangeHistoryGrid = (props) => {
         };
     }, []);
     // update row data
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const adaptableApi = adaptableApiRef.current;
         if (!adaptableApi) {
             // initial render
@@ -76,7 +72,6 @@ const DataChangeHistoryGrid = (props) => {
     }, [changeHistoryLog]);
     return React.createElement(React.Fragment, null);
 };
-exports.DataChangeHistoryGrid = DataChangeHistoryGrid;
 const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow) => {
     var _a, _b, _c;
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
@@ -91,7 +86,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const changeKey = rowData === null || rowData === void 0 ? void 0 : rowData['changeKey'];
         changeKey && onClearRow(changeKey);
     };
-    const actionColumnButton = (0, buildActionColumnButton_1.buildActionColumnButton)((_a = mainAdaptableInstance.adaptableOptions) === null || _a === void 0 ? void 0 : _a.dataChangeHistoryOptions, mainAdaptableInstance.api, undoRowNode, clearRow);
+    const actionColumnButton = buildActionColumnButton((_a = mainAdaptableInstance.adaptableOptions) === null || _a === void 0 ? void 0 : _a.dataChangeHistoryOptions, mainAdaptableInstance.api, undoRowNode, clearRow);
     let actionColumnOptions = undefined;
     if (actionColumnButton) {
         actionColumnOptions = {
@@ -118,7 +113,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         entitlementOptions: {
             defaultAccessLevel: 'Hidden',
         },
-        filterOptions: {
+        columnFilterOptions: {
             quickFilterTrigger: 'click',
         },
         layoutOptions: {

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataChangeHistoryPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const DataChangeHistoryGrid_1 = require("./DataChangeHistoryGrid");
-const SystemRedux_1 = require("../../Redux/ActionsReducers/SystemRedux");
-const rebass_1 = require("rebass");
-const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
-const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
-const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
-const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { DataChangeHistoryGrid } from './DataChangeHistoryGrid';
+import { SystemDataChangeHistoryDisable, SystemDataChangeHistoryEnable, SystemDataChangeHistoryResume, SystemDataChangeHistorySuspend, } from '../../Redux/ActionsReducers/SystemRedux';
+import { Flex, Text } from 'rebass';
+import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
+import { ButtonPause } from '../Components/Buttons/ButtonPause';
+import { ButtonStop } from '../Components/Buttons/ButtonStop';
+import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
 class DataChangeHistoryPopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -26,26 +22,26 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel", padding: 2, style: { gap: 'var(--ab-space-1)' } },
-            disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
-            suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
-            enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
-            (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
+        const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--button-panel", padding: 2, style: { gap: 'var(--ab-space-1)' } },
+            disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
+            suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
+            enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
+            (enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-        const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
+        const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
             enabled && (React.createElement(React.Fragment, null,
-                React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),
-                !!activationTime && (React.createElement(rebass_1.Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
+                React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),
+                !!activationTime && (React.createElement(Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
                     "(since ",
-                    (0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }),
+                    DateFormatter(activationTime, { Pattern: dateFormat }),
                     ")")))),
             suspended && (React.createElement(React.Fragment, null,
-                React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPopup--status-suspended", style: { color: 'var(--ab-color-warn)', fontWeight: 'bold' } }, "Suspended"),
-                !!suspensionTime && (React.createElement(rebass_1.Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
+                React.createElement(Text, { className: "ab-DataChangeHistoryPopup--status-suspended", style: { color: 'var(--ab-color-warn)', fontWeight: 'bold' } }, "Suspended"),
+                !!suspensionTime && (React.createElement(Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
                     "(since ",
-                    (0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }),
+                    DateFormatter(suspensionTime, { Pattern: dateFormat }),
                     ")")))),
-            disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPopup--status-disabled", fontSize: 2 }))));
+            disabled && (React.createElement(Text, { className: "ab-DataChangeHistoryPopup--status-disabled", fontSize: 2 }))));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
@@ -59,19 +55,19 @@ class DataChangeHistoryPopupComponent extends React.Component {
             }
         };
         const currentAgGridTheme = this.props.api.themeApi.getAgGridCurrentThemeName();
-        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
-                React.createElement(rebass_1.Flex, { style: {
+        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
+            React.createElement(Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
+                React.createElement(Flex, { style: {
                         color: 'var(--ab-dashboard__color)',
                         background: 'var(--ab-dashboard__background)',
                     } },
-                    React.createElement(rebass_1.Flex, { flexDirection: 'row' },
+                    React.createElement(Flex, { flexDirection: 'row' },
                         buttonPanel,
                         statusPanel)),
-                React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
+                React.createElement(Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
                     React.createElement("div", { id: adaptableContainerId }),
                     React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
-                    React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
+                    React.createElement(DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));
     }
 }
 function mapStateToProps(state, ownProps) {
@@ -84,10 +80,10 @@ function mapStateToProps(state, ownProps) {
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onChangeHistoryEnable: () => dispatch((0, SystemRedux_1.SystemDataChangeHistoryEnable)()),
-        onChangeHistoryDisable: () => dispatch((0, SystemRedux_1.SystemDataChangeHistoryDisable)()),
-        onChangeHistorySuspend: () => dispatch((0, SystemRedux_1.SystemDataChangeHistorySuspend)()),
-        onChangeHistoryResume: () => dispatch((0, SystemRedux_1.SystemDataChangeHistoryResume)()),
+        onChangeHistoryEnable: () => dispatch(SystemDataChangeHistoryEnable()),
+        onChangeHistoryDisable: () => dispatch(SystemDataChangeHistoryDisable()),
+        onChangeHistorySuspend: () => dispatch(SystemDataChangeHistorySuspend()),
+        onChangeHistoryResume: () => dispatch(SystemDataChangeHistoryResume()),
     };
 }
-exports.DataChangeHistoryPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(DataChangeHistoryPopupComponent);
+export let DataChangeHistoryPopup = connect(mapStateToProps, mapDispatchToProps)(DataChangeHistoryPopupComponent);

package/src/View/DataChangeHistory/DataChangeHistoryStatusBarContent.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataChangeHistoryStatusBarContent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const DataChangeHistoryViewPanel_1 = require("./DataChangeHistoryViewPanel");
-const DataChangeHistoryStatusBarContent = () => {
-    return React.createElement(DataChangeHistoryViewPanel_1.DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
+import * as React from 'react';
+import { DataChangeHistoryViewPanelControl } from './DataChangeHistoryViewPanel';
+export const DataChangeHistoryStatusBarContent = () => {
+    return React.createElement(DataChangeHistoryViewPanelControl, { gap: 0, buttonsPaddingY: 0 });
 };
-exports.DataChangeHistoryStatusBarContent = DataChangeHistoryStatusBarContent;