@adaptabletools/adaptable 16.1.1-canary.2 → 16.2.0-canary.1

package/src/Utilities/Services/DataService.js

@@ -16,6 +16,8 @@ class DataService {
         this.emitter = new Emitter_1.default();
         this.dataChangeLogSubject$ = new rxjs_1.Subject();
         this.dataChangeLog$ = this.dataChangeLogSubject$.asObservable();
+        this.gridChangeLogSubject$ = new rxjs_1.Subject();
+        this.gridChangeLog$ = this.gridChangeLogSubject$.asObservable();
         this.undoChangeLog = new Map();
         this.undoChangeTimers = new Map();
     }
@@ -25,6 +27,9 @@ class DataService {
         this.dataChangeLogSubject$.complete();
         this.dataChangeLogSubject$ = null;
         this.dataChangeLog$ = null;
+        this.gridChangeLogSubject$.complete();
+        this.gridChangeLogSubject$ = null;
+        this.gridChangeLog$ = null;
         this.undoChangeLog.clear();
         this.undoChangeLog = null;
         this.undoChangeTimers.clear();
@@ -34,9 +39,13 @@ class DataService {
         if (cellDataChangedInfo.newValue != cellDataChangedInfo.oldValue) {
             this.emitter.emitSync('CellDataChanged', cellDataChangedInfo);
             this.adaptable.api.gridApi.internalApi.fireCellChangedEvent(cellDataChangedInfo);
-            this.logDataChange(cellDataChangedInfo);
+            const dataChangeLogEntry = this.extractDataChangeLogEntry(cellDataChangedInfo);
+            this.dataChangeLogSubject$.next(dataChangeLogEntry);
         }
     }
+    CreateGridChangedEvent(gridDataChangedInfo) {
+        this.gridChangeLogSubject$.next(gridDataChangedInfo);
+    }
     // we need this temporary "shared memory" because the value change and the AG Grid cellChanged event are asynchronous
     // in the first phase we keep the undone change
     logUndoChange(change) {
@@ -75,10 +84,6 @@ class DataService {
             newValue,
         });
     }
-    logDataChange(cellDataChangedInfo) {
-        const dataChangeLogEntry = this.extractDataChangeLogEntry(cellDataChangedInfo);
-        this.dataChangeLogSubject$.next(dataChangeLogEntry);
-    }
     extractDataChangeLogEntry(cellDataChangedInfo) {
         // create rowData snapshot
         const rowData = cellDataChangedInfo.rowData

package/src/Utilities/Services/Interface/IAlertService.d.ts

@@ -1,10 +1,17 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { CellDataChangedInfo } from '../../../PredefinedConfig/Common/CellDataChangedInfo';
+import { GridDataChangedInfo } from '../../../types';
 import { IAdaptableService } from './IAdaptableService';
-export declare type ReactiveAlertInfo = {
+export declare type ReactiveAlertInfo = ReactiveGridDataChangedAlertInfo | ReactiveCellDataChangedAlertInfo;
+export declare type ReactiveGridDataChangedAlertInfo = {
+    type: 'gridDataChangedAlert';
     alertDefinition: AlertDefinition;
-    type: 'alert';
-    dataChangeLogEntry: CellDataChangedInfo;
+    gridChangeLogEntry: GridDataChangedInfo;
+};
+export declare type ReactiveCellDataChangedAlertInfo = {
+    type: 'cellDataChangedAlert';
+    alertDefinition: AlertDefinition;
+    cellChangeLogEntry: CellDataChangedInfo;
 };
 export interface IAlertService extends IAdaptableService {
     createReactiveAlert(alertDefinition: AlertDefinition): void;
@@ -13,3 +20,5 @@ export interface IAlertService extends IAdaptableService {
     getReactiveActiveAlerts(): AlertDefinition[];
     isReactiveAlertActive(alertDefinition: AlertDefinition): boolean;
 }
+export declare const isGridDataChangedInfo: (value: CellDataChangedInfo | GridDataChangedInfo) => value is GridDataChangedInfo<any>;
+export declare const isCellDataChangedInfo: (value: CellDataChangedInfo | GridDataChangedInfo) => value is CellDataChangedInfo<any>;

package/src/Utilities/Services/Interface/IAlertService.js

@@ -1,2 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCellDataChangedInfo = exports.isGridDataChangedInfo = void 0;
+const isGridDataChangedInfo = (value) => {
+    return typeof value.rowTrigger === 'string';
+};
+exports.isGridDataChangedInfo = isGridDataChangedInfo;
+const isCellDataChangedInfo = (value) => {
+    return !(0, exports.isGridDataChangedInfo)(value);
+};
+exports.isCellDataChangedInfo = isCellDataChangedInfo;

package/src/Utilities/Services/Interface/IDataService.d.ts

@@ -1,10 +1,13 @@
 import { CellDataChangedInfo } from '../../../PredefinedConfig/Common/CellDataChangedInfo';
 import { Observable } from 'rxjs';
 import { IAdaptableService } from './IAdaptableService';
+import { GridDataChangedInfo } from '../../../types';
 export interface IDataService extends IAdaptableService {
     CreateDataChangedEvent(cellDataChangedInfo: CellDataChangedInfo): void;
+    CreateGridChangedEvent(gridDataChangedInfo: GridDataChangedInfo): void;
     on(eventName: 'CellDataChanged', callback: (cellDataChangedInfo: CellDataChangedInfo) => void): () => void;
     readonly dataChangeLog$: Observable<CellDataChangedInfo>;
+    readonly gridChangeLog$: Observable<GridDataChangedInfo>;
     logUndoChange(undoChange: CellDataChangedInfo): void;
     extractUndoChange(undoChange: CellDataChangedInfo): CellDataChangedInfo | undefined;
 }

package/src/Utilities/Services/Interface/IQueryLanguageService.d.ts

@@ -9,10 +9,11 @@ import { BooleanFunctionName } from '../../ExpressionFunctions/booleanExpression
 import { ScalarFunctionName } from '../../ExpressionFunctions/scalarExpressionFunctions';
 import { ObservableFunctionName } from '../../ExpressionFunctions/observableExpressionFunctions';
 import { ExpressionFunctionMap } from '../../../parser/src/types';
+import { GridDataChangedInfo } from '../../../types';
 export interface IQueryLanguageService extends IAdaptableService {
     evaluateBooleanExpression(expression: string, module: AdaptableModule, rowNode: IRowNode): boolean;
     evaluateScalarExpression(expression: string, module: AdaptableModule, rowNode: IRowNode): any;
-    evaluateObservableExpression(expression: string, module: AdaptableModule): Observable<CellDataChangedInfo>;
+    evaluateObservableExpression(expression: string, module: AdaptableModule): Observable<CellDataChangedInfo | GridDataChangedInfo>;
     evaluateAggregatedBooleanExpression(expression: string, module: AdaptableModule): BooleanAggregationParameter;
     evaluateAggregatedScalarExpression(expression: string, module: AdaptableModule): ScalarAggregationParameter;
     validateBoolean(expression: string, module: AdaptableModule, config?: {

package/src/Utilities/Services/ModuleService.js

@@ -93,6 +93,8 @@ class ModuleService {
                 return learnUrl + 'ui-dashboard';
             case 'DataSet':
                 return learnUrl + 'handbook-data-sets';
+            case 'DataImport':
+                return learnUrl + 'handbook-importing';
             case 'DataChangeHistory':
                 return learnUrl + 'handbook-monitoring-data-change-history';
             case 'Export':

package/src/Utilities/Services/QueryLanguageService.d.ts

@@ -4,7 +4,7 @@ import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChang
 import { IRowNode } from '@ag-grid-community/core';
 import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
 import { ScalarAggregationParameter } from '../ExpressionFunctions/aggregatedScalarExpressionFunctions';
-import { AdaptableApi } from '../../../types';
+import { AdaptableApi, GridDataChangedInfo } from '../../../types';
 import { BooleanAggregationParameter } from '../ExpressionFunctions/aggregatedBooleanExpressionFunctions';
 export declare class QueryLanguageService implements IQueryLanguageService {
     private adaptableApi;
@@ -17,7 +17,7 @@ export declare class QueryLanguageService implements IQueryLanguageService {
     evaluateBooleanExpression(expression: string, module: AdaptableModule, rowNode: any): any;
     evaluateScalarExpression(expression: string, module: AdaptableModule, rowNode: IRowNode): any;
     evaluateAggregatedScalarExpression(expression: string, module: AdaptableModule): ScalarAggregationParameter;
-    evaluateObservableExpression(reactiveExpression: string, module: AdaptableModule): Observable<CellDataChangedInfo>;
+    evaluateObservableExpression(reactiveExpression: string, module: AdaptableModule): Observable<CellDataChangedInfo | GridDataChangedInfo>;
     evaluateAggregatedBooleanExpression(aggregationExpression: string, module: AdaptableModule): BooleanAggregationParameter;
     validateBoolean(expressionInput: string, module: AdaptableModule, config?: {
         force?: boolean;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -13,11 +13,6 @@ class ColumnSelector extends React.Component {
         var _a;
         const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
         const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
-        const placeHolder = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.placeHolder)
-            ? this.props.placeHolder.toString()
-            : this.props.SelectionMode == Enums_1.SelectionMode.Single
-                ? 'Select a column'
-                : 'Select columns';
         const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x)).length == 0;
         let sortedColumnOptions = sortedColumns.map((column) => {
             return {

package/src/View/Dashboard/{CustomToolbarWrapper.d.ts → CustomToolbar.d.ts}

@@ -4,5 +4,6 @@ interface CustomToolbarWrapperProps {
     customToolbar: CustomToolbar;
     dashboardRevision: number;
 }
+export declare const CustomToolbarCmp: (props: CustomToolbarWrapperProps) => JSX.Element;
 export declare const CustomToolbarWrapper: (props: CustomToolbarWrapperProps) => JSX.Element;
 export {};

package/src/View/Dashboard/{CustomToolbarWrapper.js → CustomToolbar.js}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomToolbarWrapper = void 0;
+exports.CustomToolbarWrapper = exports.CustomToolbarCmp = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
-const CustomToolbarWrapper = (props) => {
+const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
+const CustomToolbarCmp = (props) => {
     let contentsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__contents';
     let buttonsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__buttons';
     const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
@@ -63,6 +63,38 @@ const CustomToolbarWrapper = (props) => {
             }
         };
     }, []);
+    return (React.createElement(React.Fragment, null,
+        contentsHTML && (React.createElement("div", { id: contentsDivId, ref: contentsDivRef, className: "CustomToolBarContents ab-CustomToolbar__contents ab-CustomToolbar__contents--render", style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: contentsHTML } })),
+        props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsDivId, className: "ab-CustomToolbar__buttons", style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
+            const dashboardContext = {
+                customToolbar: props.customToolbar,
+                adaptableApi: api,
+                userName: api.optionsApi.getUserName(),
+                adaptableId: api.optionsApi.getAdaptableId(),
+                dashboardState: api.dashboardApi.getDashboardState(),
+            };
+            const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
+            let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
+            let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
+            let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
+            if (button.hidden && button.hidden(button, dashboardContext)) {
+                return null;
+            }
+            const disabled = button.disabled && button.disabled(button, dashboardContext);
+            let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
+            let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
+            return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
+                    button.onClick ? button.onClick(button, dashboardContext) : null;
+                    setTimeout(() => {
+                        // mutate state to force a re-rendering
+                        setComponentRevision(componentRevision + 1);
+                    }, 16);
+                } }, buttonLabel));
+        })))));
+};
+exports.CustomToolbarCmp = CustomToolbarCmp;
+const CustomToolbarWrapper = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     return (React.createElement(PanelDashboard_1.PanelDashboard, { className: `ab-CustomToolbar ab-DashboardToolbar__${props.customToolbar.name}`, "data-name": `ab-CustomToolbar ab-DashboardToolbar__${props.customToolbar.name}`, headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
             props.customToolbar.showConfigureButton == true, showCloseButton: props.customToolbar.showCloseButton != null && props.customToolbar.showCloseButton == true, onConfigure: () => {
             const customToolbarConfiguredInfo = {
@@ -75,35 +107,6 @@ const CustomToolbarWrapper = (props) => {
         }, accessLevel: api.internalApi
             .getEntitlementService()
             .getEntitlementAccessLevelForModule('Dashboard') },
-        React.createElement("div", { id: contentsDivId, ref: contentsDivRef, className: "CustomToolBarContents ab-CustomToolbar__contents ab-CustomToolbar__contents--render", style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: contentsHTML } }),
-        React.createElement("div", { id: buttonsDivId, className: "ab-CustomToolbar__buttons", style: { minHeight: 22 } }, props.customToolbar.toolbarButtons &&
-            props.customToolbar.toolbarButtons.map((button, index) => {
-                // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-                // with the next opportunity we should abstract it
-                const dashboardContext = {
-                    customToolbar: props.customToolbar,
-                    adaptableApi: api,
-                    userName: api.optionsApi.getUserName(),
-                    adaptableId: api.optionsApi.getAdaptableId(),
-                    dashboardState: api.dashboardApi.getDashboardState(),
-                };
-                const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
-                let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
-                let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
-                let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
-                if (button.hidden && button.hidden(button, dashboardContext)) {
-                    return null;
-                }
-                const disabled = button.disabled && button.disabled(button, dashboardContext);
-                let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
-                let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
-                        button.onClick ? button.onClick(button, dashboardContext) : null;
-                        setTimeout(() => {
-                            // mutate state to force a re-rendering
-                            setComponentRevision(componentRevision + 1);
-                        }, 16);
-                    } }, buttonLabel));
-            }))));
+        React.createElement(exports.CustomToolbarCmp, Object.assign({}, props))));
 };
 exports.CustomToolbarWrapper = CustomToolbarWrapper;

package/src/View/Dashboard/Dashboard.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import * as Redux from 'redux';
-import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+import { SystemStatusMessageInfo } from '../../PredefinedConfig/Common/SystemStatusMessageInfo';
 import { AdaptableCoordinate, DashboardState } from '../../PredefinedConfig/DashboardState';
 import { GridState } from '../../PredefinedConfig/GridState';
 import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
-import { SystemStatusMessageInfo } from '../../PredefinedConfig/Common/SystemStatusMessageInfo';
+import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     DashboardRevision: number;
     DashboardState: DashboardState;

package/src/View/Dashboard/Dashboard.js

@@ -2,32 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dashboard = void 0;
 const tslib_1 = require("tslib");
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const rebass_1 = require("rebass");
+const Dashboard_1 = require("../../components/Dashboard");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
-const rebass_1 = require("rebass");
-const Dashboard_1 = require("../../components/Dashboard");
-const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const AdaptableViewFactory_1 = require("../AdaptableViewFactory");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
 const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFormControlTextClear");
 const useQuickSearchDebounced_1 = require("../QuickSearch/useQuickSearchDebounced");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
-const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
-const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const CustomDashboardButton_1 = require("./CustomDashboardButton");
-const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
-const AdaptableButton_1 = require("../Components/AdaptableButton");
+const CustomToolbar_1 = require("./CustomToolbar");
+const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
+const PinnedDashboard_1 = require("./PinnedDashboard");
+const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const DashboardComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const dashboardAccessLevel = props.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
     const renderTab = (tab) => {
-        // JW: dont understand why we need this line but we do...
         const visibleToolbarNames = tab.Toolbars.filter((vt) => vt);
         const customToolbars = props.api.dashboardApi.getCustomToolbars();
         let visibleDashboardElements = visibleToolbarNames.map((visibleToolbarName) => {
@@ -35,28 +36,20 @@ const DashboardComponent = (props) => {
             if (customToolbar) {
                 if (dashboardAccessLevel != 'Hidden') {
                     return (React.createElement(rebass_1.Box, { key: customToolbar.name, className: `ab-Dashboard__container ab-Dashboard__container--customToolbar` },
-                        React.createElement(CustomToolbarWrapper_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
+                        React.createElement(CustomToolbar_1.CustomToolbarWrapper, { customToolbar: customToolbar, dashboardRevision: props.DashboardRevision })));
                 }
             }
             else {
-                let moduleToolbarName = visibleToolbarName;
+                const moduleToolbarName = visibleToolbarName;
                 if (props.api.internalApi.getModuleService().isModuleAvailable(moduleToolbarName)) {
-                    let accessLevel = props.api.internalApi
-                        .getEntitlementService()
-                        .getEntitlementAccessLevelForModule(moduleToolbarName);
                     let moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(moduleToolbarName);
                     if (moduleToolbarView) {
                         let moduleInfo = props.api.internalApi
                             .getModuleService()
                             .getModuleInfoByModule(moduleToolbarName);
-                        let moduleToolbarElement = React.createElement(moduleToolbarView, {
-                            viewType: 'Toolbar',
-                            api: props.api,
-                            accessLevel,
-                            moduleInfo,
-                        });
                         return (React.createElement(rebass_1.Box, { key: moduleToolbarName, className: `ab-Dashboard__container ab-Dashboard__container--${moduleToolbarName}` },
-                            React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel }, moduleToolbarElement)));
+                            React.createElement(ModuleToolbarWrapper_1.ModuleToolbarWrapper, { moduleInfo: moduleInfo, accessLevel: dashboardAccessLevel },
+                                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: moduleToolbarName }))));
                     }
                     else {
                         props.api.logError('Cannot find Dashboard Control for ' + visibleToolbarName);
@@ -106,7 +99,10 @@ const DashboardComponent = (props) => {
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
         props.api.internalApi.getModuleService().getModuleById(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
-    return props.DashboardState.IsHidden ? (React.createElement("div", null)) : (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
+    if (props.DashboardState.IsHidden) {
+        return React.createElement("div", null);
+    }
+    return (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, footer: React.createElement(PinnedDashboard_1.PinnedDashboard, null), activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
             props.onSetActiveTabIndex(ActiveTabIndex);
         }, collapsed: props.DashboardState.IsCollapsed, onCollapsedChange: (IsCollapsed) => {
             props.onSetIsCollapsed(IsCollapsed);

package/src/View/Dashboard/DashboardPopup.d.ts

@@ -17,7 +17,8 @@ interface DashboardPopupComponentProps extends ModuleViewPopupProps<DashboardPop
 }
 export declare enum DashboardConfigView {
     Toolbars = "Toolbars",
-    Buttons = "Buttons"
+    Buttons = "Buttons",
+    PinnedToolbars = "PinnedToolbars"
 }
 export interface DashboardPopupState {
     DashboardConfigView: DashboardConfigView;

package/src/View/Dashboard/DashboardPopup.js

@@ -13,10 +13,12 @@ const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Das
 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;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
     DashboardConfigView["Buttons"] = "Buttons";
+    DashboardConfigView["PinnedToolbars"] = "PinnedToolbars";
 })(DashboardConfigView = exports.DashboardConfigView || (exports.DashboardConfigView = {}));
 class DashboardPopupComponent extends React.Component {
     constructor(props) {
@@ -26,8 +28,8 @@ class DashboardPopupComponent extends React.Component {
         };
     }
     render() {
-        const availableToolbars = Types_1.ALL_TOOLBARS;
         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) => ({
@@ -80,12 +82,14 @@ class DashboardPopupComponent extends React.Component {
                 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.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
                             ? '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.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)))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/Dashboard/DashboardToolbarFactory.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableModule } from '../../types';
+interface DashboardToolbarFactoryProps {
+    toolbarName: AdaptableModule | string;
+}
+export declare const DashboardToolbarFactory: React.FunctionComponent<DashboardToolbarFactoryProps>;
+export {};

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -0,0 +1,46 @@
+"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");
+const SystemDashboardToolbarFactory = (props) => {
+    const adaptable = (0, AdaptableContext_1.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 moduleToolbarElement = React.createElement(moduleToolbarView, {
+        viewType: 'Toolbar',
+        api: adaptable.api,
+        accessLevel,
+        moduleInfo,
+    });
+    return moduleToolbarElement;
+};
+const CustomDashboardToolbarFactory = (props) => {
+    const revision = (0, react_redux_1.useSelector)((state) => state.System.DashboardRevision);
+    const adaptable = (0, AdaptableContext_1.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(React.Fragment, null);
+};
+const DashboardToolbarFactory = (props) => {
+    if (Types_1.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/PinnedDashboard.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface PinnedDashboardProps {
+}
+export declare const PinnedDashboard: React.FunctionComponent<PinnedDashboardProps>;
+export {};

package/src/View/Dashboard/PinnedDashboard.js

@@ -0,0 +1,21 @@
+"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);
+    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, { 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, { key: index, toolbarName: toolbar }))));
+    })));
+};
+exports.PinnedDashboard = PinnedDashboard;

package/src/View/Dashboard/PinnedToolbarsSelector.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface PinnedToolbarsSelectorProps {
+}
+export declare const PinnedToolbarsSelector: React.FunctionComponent<PinnedToolbarsSelectorProps>;
+export {};

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -0,0 +1,52 @@
+"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)();
+    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 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 customToolbars = api.dashboardApi.getCustomToolbars().map((ct) => ({
+            Id: ct.name,
+            Title: ct.title ? ct.title : ct.name,
+        }));
+        return [...systemToolbars, ...customToolbars];
+    }, []);
+    const tabs = React.useMemo(() => {
+        return [
+            {
+                Name: 'Pinned Toolbars',
+                Items: pinnedToolbars !== null && pinnedToolbars !== void 0 ? pinnedToolbars : [],
+            },
+        ];
+    }, [pinnedToolbars]);
+    return (React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+            createTab: false,
+            dragAndDropTab: false,
+            deleteTab: false,
+            editTabName: false,
+        }, onTabsChange: (tabs) => {
+            dispatch((0, DashboardRedux_1.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/DataImport/DataImportPopup.js

@@ -17,7 +17,7 @@ const DataImportPopup = (props) => {
         }
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Data Import', glyphicon: 'import' },
+        React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
             React.createElement(rebass_1.Box, null,
                 React.createElement(HelpBlock_1.default, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to insert or update data into AdapTable"),
                 React.createElement(SimpleButton_1.default, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),

package/src/View/DataImport/DataImportWizard/DataImportWizard.d.ts

@@ -1,8 +1,13 @@
 /// <reference types="react" />
-import { DataImportValidationError } from '../../../types';
+import { AdaptableColumn, DataImportValidationError } from '../../../types';
 export interface ValidationErrorsMap {
     [key: string]: DataImportValidationError[] | null;
 }
+export declare type ColumnsMap = {
+    field: string;
+    abColumn?: AdaptableColumn;
+    include?: boolean;
+};
 export declare const DataImportWizard: (props: {
     onClose: () => void;
 }) => JSX.Element;