@adaptabletools/adaptable 10.0.4-canary.1 → 10.0.4-canary.5

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const react_redux_1 = require("react-redux");
+const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
+const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
+const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const Navigation_1 = require("./Navigation");
+const PopupContext_1 = tslib_1.__importDefault(require("./PopupContext"));
+const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
+const Utilities_1 = require("./Utilities");
+const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
+exports.AdaptablePopup = (props) => {
+    var _a, _b, _c, _d, _e;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    const dispatch = react_redux_1.useDispatch();
+    // Navigation
+    const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; });
+    const menuItems = React.useMemo(() => {
+        var _a;
+        let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;
+        if (!navigationItems) {
+            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_NAVIGATION_ITEMS];
+            if (settingsPanelOptions.customSettingsPanels) {
+                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
+            }
+        }
+        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' && !DefaultSettingsPanel_1.ACTION_POPUPS.includes(item.module) && item.isVisible);
+        return navigationItems
+            .map((moduleName) => {
+            var _a, _b;
+            if (moduleName === '-') {
+                return moduleName;
+            }
+            const customSettingsPanel = (_b = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (panel) => panel.name === moduleName);
+            let customPanelMenuItem = null;
+            if (customSettingsPanel) {
+                customPanelMenuItem = {
+                    label: customSettingsPanel.name,
+                    isVisible: true,
+                    reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name, null, {
+                        isCustomSettingsPanel: true,
+                    }),
+                };
+            }
+            return customPanelMenuItem || visibleItems.find((item) => item.module === moduleName);
+        })
+            .filter(Boolean);
+    }, [allMenuItems]);
+    const isCustomSettingsPanel = (_a = props.moduleProps) === null || _a === void 0 ? void 0 : _a.isCustomSettingsPanel;
+    const customSettingsPanel = isCustomSettingsPanel &&
+        settingsPanelOptions.customSettingsPanels.find((settingsPanel) => settingsPanel.name === props.componentName);
+    let componentModule = props.componentModule;
+    // When it is opened without specifying a module
+    const firstMenuItem = (_b = menuItems.find((menuItem) => menuItem !== '-')) === null || _b === void 0 ? void 0 : _b.module;
+    if (!customSettingsPanel && !props.componentModule && firstMenuItem !== 'General') {
+        componentModule = firstMenuItem;
+    }
+    const accessLevel = props.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(componentModule);
+    const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
+    const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
+    // action popups + non-primary module popups
+    const isActionModule = DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+        (props.componentName && props.componentName !== moduleInfo.Popup);
+    const baseClassName = 'ab-Adaptable-Popup';
+    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.type) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const isWindowModal = settingsPanelOptions.type === 'window';
+    let style = { maxWidth: 1400, maxHeight: 1200 };
+    if (isWindowModal) {
+        style = { height: '100%' };
+    }
+    else if (isActionModule) {
+        style = { maxWidth: 800, maxHeight: 450 };
+    }
+    const settingsKey = isActionModule ? `action-${moduleInfo.FriendlyName}` : 'settings';
+    let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsKey]; });
+    if (!popupSettings) {
+        const size = isActionModule
+            ? Utilities_1.getActionPanelSize()
+            : (_d = settingsPanelOptions.size) !== null && _d !== void 0 ? _d : Utilities_1.getSettingsPanelSize();
+        popupSettings = {
+            size: size,
+            position: (_e = settingsPanelOptions.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size),
+        };
+    }
+    const handleWindowSettings = (settings) => {
+        dispatch(SystemRedux_1.SystemSettingsPanelSet(settingsKey, settings));
+    };
+    return (React.createElement(PopupContext_1.default.Provider, { value: {
+            hidePopup: () => {
+                if (props.onHide) {
+                    props.onHide();
+                }
+            },
+        } },
+        React.createElement(Dialog_1.default, Object.assign({ windowModal: isWindowModal, fixed: false, windowModalProps: {
+                handleSelector: isActionModule
+                    ? `.${baseClassName} .ab-Panel__header`
+                    : '.ab-Adaptable-Popup__TopBar',
+                size: popupSettings.size,
+                position: popupSettings.position,
+                onChange: handleWindowSettings,
+            }, style: style, padding: 0, height: isWindowModal ? null : '90vh', width: isWindowModal ? null : '90vw', className: className, onDismiss: props.onHide, isOpen: true, showCloseButton: true }, props.moduleProps),
+            !isActionModule && (React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelOptions.title)),
+            React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+                !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, moduleInfo: moduleInfo, activeCustomSettingPanel: customSettingsPanel, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, isCustomSettingsPanel ? (React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel })) : (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide })))))));
+};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IModule } from '../../../../Strategy/Interface/IModule';
+import { AdaptableApi } from '../../../../types';
+import { ModuleParams } from '../../SharedProps/ModuleViewPopupProps';
+import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
+interface AdaptablePopupBodyProps {
+    module: IModule;
+    moduleParams: ModuleParams;
+    componentName: string;
+    onClearParams?: () => PopupRedux.PopupClearParamAction;
+    onHide?: () => void;
+    api: AdaptableApi;
+}
+export declare const AdaptablePopupBody: React.FunctionComponent<AdaptablePopupBodyProps>;
+export {};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupBody = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIHelper_1 = require("../../../UIHelper");
+const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
+const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
+exports.AdaptablePopupBody = (props) => {
+    var _a;
+    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.internalApi.getAdaptableOptions(), document);
+    const moduleName = props.module.moduleInfo.ModuleName;
+    const accessLevel = props.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(moduleName);
+    const moduleInfo = props.api.internalApi.getModuleService().getModuleInfoByModule(moduleName);
+    const moduleProps = {
+        popupParams: props.moduleParams,
+        onClearPopupParams: () => (props.onClearParams ? props.onClearParams() : null),
+        onClosePopup: () => {
+            if (props.onHide) {
+                props.onHide();
+            }
+        },
+        // show share button if TeamSharing is active & user has edit rights
+        teamSharingActivated: props.api.teamSharingApi.isTeamSharingActivated() &&
+            props.api.teamSharingApi.hasTeamSharingFullRights(),
+        modalContainer: modalContainer,
+        accessLevel: accessLevel,
+        api: props.api,
+        moduleInfo,
+    };
+    const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
+    return React.createElement(BodyComponent, Object.assign({ module: props.module }, moduleProps));
+};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AccessLevel, AdaptableApi } from '../../../../../types';
+import { IModule } from '../../../../Strategy/Interface/IModule';
+export interface AdaptablePopupModuleViewProps {
+    module: IModule;
+    api: AdaptableApi;
+    accessLevel: AccessLevel;
+}
+export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupModuleView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const EmptyContent_1 = tslib_1.__importDefault(require("../../../../components/EmptyContent"));
+const icons_1 = require("../../../../components/icons");
+const AdaptableObjectList_1 = require("../../AdaptableObjectList");
+const ButtonNew_1 = require("../../Buttons/ButtonNew");
+const PopupPanel_1 = require("./PopupPanel");
+exports.AdaptablePopupModuleView = (props) => {
+    var _a, _b, _c;
+    /**
+     * This triggers an render for each redux change.
+     * Not sure yet how to trigger this component to render when an item is edited.
+     */
+    react_redux_1.useSelector((state) => state);
+    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    const [abObjectType, setAbObjectType] = React.useState(null);
+    const moduleInfo = props.module.moduleInfo;
+    const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
+    const moduleViewProperties = props.module.getViewProperties();
+    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
+    const emptyView = moduleViewProperties.emptyView;
+    let emptyContent = null;
+    if (typeof emptyView === 'function') {
+        emptyContent = React.createElement(emptyView, { module: props.module });
+    }
+    else if (typeof emptyView === 'string') {
+        emptyContent = emptyView;
+    }
+    // Some modules do not have new button
+    // e.g. filter
+    let newButton = null;
+    if ((_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _c === void 0 ? void 0 : _c.length) {
+        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjctType) => {
+            var _a;
+            return {
+                disabled: (abObjctType === null || abObjctType === void 0 ? void 0 : abObjctType.accessLevel) === 'ReadOnly',
+                onClick: () => {
+                    setAbObjectType(abObjctType);
+                    setIsWizardOpen(true);
+                },
+                label: (_a = abObjctType.label) !== null && _a !== void 0 ? _a : abObjctType.name,
+            };
+        });
+        newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: 'Create ' + moduleInfo.FriendlyName },
+            React.createElement(icons_1.Icon, { name: "plus" }),
+            " New"));
+    }
+    else if (EditWizard) {
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
+                color: 'var(--ab-color-text-on-add)',
+                fill: 'var(--ab-color-text-on-add)',
+                background: 'var(--ab-color-action-add)',
+            } }));
+    }
+    const handleWizardClose = () => {
+        setAbObjectType(null);
+        setIsWizardOpen(false);
+    };
+    return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton },
+        (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
+        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+};

package/src/View/Components/Popups/AdaptablePopup/CustomSettingsPanelView.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
+export interface CustomSettingsPanelProp {
+    settingsPanel: CustomSettingsPanel;
+}
+export declare const CustomSettingsPanelView: React.FunctionComponent<CustomSettingsPanelProp>;

package/src/View/Components/Popups/AdaptablePopup/CustomSettingsPanelView.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSettingsPanelView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ExternalRenderer_1 = require("../../ExternalRenderer");
+exports.CustomSettingsPanelView = (props) => {
+    return (React.createElement(ExternalRenderer_1.ExternalRenderer, { render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }));
+};

package/src/View/Components/Popups/AdaptablePopup/Navigation.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AdaptableApi, AdaptableMenuItem } from '../../../../../types';
+import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
+import { ModuleInfo } from '../../../../Strategy/Interface/IModule';
+interface NavigationProps {
+    api: AdaptableApi;
+    menuItems: (AdaptableMenuItem | '-')[];
+    moduleInfo?: ModuleInfo;
+    activeCustomSettingPanel?: CustomSettingsPanel;
+    customSettingsPanels?: CustomSettingsPanel[];
+}
+export declare const Navigation: React.FunctionComponent<NavigationProps>;
+export {};

package/src/View/Components/Popups/AdaptablePopup/Navigation.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ApplicationIcon_1 = require("../../../../components/ApplicationIcon");
+const icons_1 = require("../../../../components/icons");
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
+exports.Navigation = (props) => {
+    var _a;
+    const dispatch = react_redux_1.useDispatch();
+    const handleKeyPress = React.useCallback((event) => {
+        if ((event.ctrlKey || event.metaKey) &&
+            (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
+            const isKeyUp = event.code === 'ArrowUp';
+            const currentIndex = props.menuItems.findIndex((item) => {
+                var _a, _b;
+                return item !== '-' &&
+                    (item.module === ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) ||
+                        // in case of custom panel
+                        item.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name));
+            });
+            let nextMenuItem = null;
+            if (isKeyUp) {
+                let candidate = props.menuItems[currentIndex - 1] !== '-'
+                    ? props.menuItems[currentIndex - 1]
+                    : props.menuItems[currentIndex - 2];
+                nextMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
+            }
+            else {
+                let candidate = props.menuItems[currentIndex + 1] !== '-'
+                    ? props.menuItems[currentIndex + 1]
+                    : props.menuItems[currentIndex + 2];
+                nextMenuItem = candidate ? candidate : props.menuItems[0];
+            }
+            if (nextMenuItem && nextMenuItem !== '-') {
+                dispatch(nextMenuItem.reduxAction);
+            }
+        }
+    }, [(_a = props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName, props.menuItems]);
+    useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
+    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
+        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
+            var _a, _b, _c, _d, _e, _f;
+            const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
+            if (menuItem === '-') {
+                return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
+            }
+            const isActive = ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) === menuItem.module ||
+                menuItem.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name);
+            const className = join_1.default(baseClassName, isActive && `${baseClassName}--active`);
+            let customIcon = (_f = (_e = (_d = (_c = props.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find) === null || _d === void 0 ? void 0 : _d.call(_c, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : null;
+            return (React.createElement("li", { className: className, key: menuItem.label },
+                React.createElement("button", { className: `${baseClassName}__Button`, onClick: () => {
+                        dispatch(menuItem.reduxAction);
+                    } },
+                    menuItem.icon && (React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: menuItem.icon })),
+                    customIcon && React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: customIcon }),
+                    menuItem.label)));
+        }))));
+};

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface PanelWithButtonProps {
+    buttonClick?: () => void;
+    button?: React.ReactElement<any>;
+    headerText: string;
+    glyphicon?: string;
+    infoLink?: string;
+    infoLinkDisabled?: boolean;
+}
+export declare const PopupPanel: React.FunctionComponent<PanelWithButtonProps>;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
+const Noop = () => React.createElement(React.Fragment, null);
+exports.PopupPanel = (props) => {
+    const baseClassName = 'ab-Adaptable-Popup__Panel';
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: baseClassName, width: "100%" },
+        React.createElement("div", { className: `${baseClassName}__Header` },
+            React.createElement(rebass_1.Flex, { alignItems: "center" },
+                React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
+                React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
+                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    ) }))),
+            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+            props.button),
+        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body`, width: "100%", height: "100%", flex: 1 }, props.children)));
+};

package/src/View/Components/Popups/AdaptablePopup/TopBar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SettingsPanelOptions } from '../../../../AdaptableOptions/SettingsPanelOptions';
+interface TopBarProps {
+    icon: SettingsPanelOptions['icon'];
+}
+export declare const TopBar: React.FunctionComponent<TopBarProps>;
+export default TopBar;

package/src/View/Components/Popups/AdaptablePopup/TopBar.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ApplicationIcon_1 = require("../../../../components/ApplicationIcon");
+const icons_1 = require("../../../../components/icons");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+exports.TopBar = (props) => {
+    var _a;
+    const baseClassName = 'ab-Adaptable-Popup__TopBar';
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const applicationIcon = (_a = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.applicationIcon;
+    let icon = React.createElement(React.Fragment, null);
+    if (props.icon === 'ConfigurationIcon') {
+        icon = React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: "settings" });
+    }
+    else if (props.icon === 'ApplicationIcon' && applicationIcon) {
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: applicationIcon });
+    }
+    else if (typeof props.icon === 'object' && props.icon.src) {
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.icon });
+    }
+    return (React.createElement(rebass_1.Flex, { flex: 0, className: baseClassName },
+        icon,
+        React.createElement(rebass_1.Text, null, props.children)));
+};
+exports.default = exports.TopBar;

package/src/View/Components/Popups/AdaptablePopup/Utilities.d.ts

@@ -0,0 +1,15 @@
+export declare const getMiddlePosition: (size: {
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getActionPanelSize: () => {
+    height: number;
+    width: number;
+};
+export declare const getSettingsPanelSize: () => {
+    height: number;
+    width: number;
+};

package/src/View/Components/Popups/AdaptablePopup/Utilities.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
+exports.getMiddlePosition = (size) => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        x: width / 2 - size.width / 2,
+        y: height / 2 - size.height / 2,
+    };
+};
+exports.getActionPanelSize = () => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        height: Helper_1.clamp(600, 0, height * 0.9),
+        width: Helper_1.clamp(800, 0, width * 0.9),
+    };
+};
+exports.getSettingsPanelSize = () => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        height: Helper_1.clamp(height * 0.9, 0, 800),
+        width: Helper_1.clamp(width * 0.9, 0, 800),
+    };
+};

package/src/View/Components/Popups/AdaptablePopup/index.d.ts

@@ -0,0 +1 @@
+export { AdaptablePopup } from './AdaptablePopup';

package/src/View/Components/Popups/AdaptablePopup/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopup = void 0;
+var AdaptablePopup_1 = require("./AdaptablePopup");
+Object.defineProperty(exports, "AdaptablePopup", { enumerable: true, get: function () { return AdaptablePopup_1.AdaptablePopup; } });

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -16,7 +16,7 @@ exports.AdaptablePopupAlert = (props) => {
     const msg = (_a = props.adaptableAlert.message) !== null && _a !== void 0 ? _a : '';
     const headerColor = UIHelper_1.UIHelper.getColorByMessageType(messageType);
     let header = messageType;
-    const { api } = AdaptableContext_1.useAdaptable();
+    const { api, adaptableOptions } = AdaptableContext_1.useAdaptable();
     if (props.adaptableAlert.header) {
         header = `${header}: ${props.adaptableAlert.header}`;
     }
@@ -45,16 +45,29 @@ exports.AdaptablePopupAlert = (props) => {
     const adaptableForm = React.useMemo(() => {
         return props.api.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
     }, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
+    const renderApplicationIcon = (icon) => {
+        if (!icon) {
+            return null;
+        }
+        let width = icon.style && icon.style.width ? icon.style.width : 'var(--ab-cmp-simple-button__width)';
+        let height = icon.style && icon.style.height ? icon.style.height : 'var(--ab-cmp-simple-button__height)';
+        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
+            ' ',
+            React.createElement("img", { className: "alert-popup__application-icon", src: icon.src, style: { width: width, height: height } })));
+    };
     const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
         React.createElement("div", null,
-            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" }, typeof msg === 'string'
-                ? msg.split('\n').map(function (item, index) {
-                    return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
-                        React.createElement(rebass_1.Text, { key: index, margin: 2 },
-                            item,
-                            React.createElement("br", null))));
-                })
-                : msg),
+            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
+                renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
+                    adaptableOptions.userInterfaceOptions.applicationIcon),
+                typeof msg === 'string'
+                    ? msg.split('\n').map(function (item, index) {
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
+                            React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                                item,
+                                React.createElement("br", null))));
+                    })
+                    : msg),
             React.createElement(rebass_1.Box, { margin: 2 },
                 React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: props.api, context: context, onButtonClick: (button) => {
                         props.onClose();

package/src/View/Components/Popups/AdaptableToaster.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.showToast = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Toastify_1 = require("../../../components/Toastify");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
+const react_toastify_1 = require("react-toastify");
 exports.showToast = (props) => {
     const toastProps = ObjectFactory_1.default.CreateToastOptions(props.api.internalApi.getAdaptableOptions().notificationsOptions, {
         onClose: () => {
@@ -13,21 +13,21 @@ exports.showToast = (props) => {
         },
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, Object.assign({ headless: true }, props, { onClose: () => {
-            Toastify_1.toast.dismiss(toastId);
+            react_toastify_1.toast.dismiss(toastId);
         } })));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':
-            toastId = Toastify_1.toast.info(content, toastProps);
+            toastId = react_toastify_1.toast.info(content, toastProps);
             break;
         case 'Error':
-            toastId = Toastify_1.toast.error(content, toastProps);
+            toastId = react_toastify_1.toast.error(content, toastProps);
             break;
         case 'Success':
-            toastId = Toastify_1.toast.success(content, toastProps);
+            toastId = react_toastify_1.toast.success(content, toastProps);
             break;
         case 'Warning':
-            toastId = Toastify_1.toast.warn(content, toastProps);
+            toastId = react_toastify_1.toast.warn(content, toastProps);
             break;
     }
 };

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -41,7 +41,7 @@ const AdaptableToolPanelComponent = (props) => {
     if (!entitlementService.isModuleHiddenEntitlement('Dashboard')) {
         availableModules.push('Dashboard');
     }
-    if (props.api.pluginsApi.getIpushpullPluginApi() &&
+    if (props.api.pluginsApi.getipushpullPluginApi() &&
         !entitlementService.isModuleHiddenEntitlement('IPushPull')) {
         availableModules.push('IPushPull');
     }
@@ -238,7 +238,6 @@ const AdaptableToolPanelComponent = (props) => {
     const toolPanelButtons = renderToolPanelButtons();
     return (React.createElement(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
             width: '100%',
-            minWidth: 'var(--ab-cmp-toolpanel__width)',
         } },
         React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, style: { width: '100%' } },
             renderModuleDropdowns(),
@@ -271,8 +270,8 @@ exports.ConnectedAdaptableToolPanel = react_redux_1.connect(mapStateToProps, map
 exports.getAdaptableToolPanelAgGridComponent = (adaptable) => {
     return class AdaptableToolPanelAgGridComponent {
         init(params) {
-            const vendorGridApi = params.api;
-            const Adaptable = vendorGridApi.__adaptable || adaptable;
+            const agGridApi = params.api;
+            const Adaptable = agGridApi.__adaptable || adaptable;
             const api = Adaptable.api;
             this.gui = document.createElement('div');
             this.gui.id = 'adaptable-tool-panel_' + Adaptable.adaptableOptions.adaptableId;

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
-const PanelWithButton_1 = require("../../Components/Panels/PanelWithButton");
+const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Types_1 = require("../../../PredefinedConfig/Common/Types");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
@@ -45,7 +45,7 @@ class ToolPanelPopupComponent extends React.Component {
         if (!entitlementService.isModuleHiddenEntitlement('Dashboard')) {
             availableModules.push('Dashboard');
         }
-        if (this.props.api.pluginsApi.getIpushpullPluginApi() &&
+        if (this.props.api.pluginsApi.getipushpullPluginApi() &&
             !entitlementService.isModuleHiddenEntitlement('IPushPull')) {
             availableModules.push('IPushPull');
         }
@@ -64,7 +64,7 @@ class ToolPanelPopupComponent extends React.Component {
         const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
             // ensure that the visible state has only valid tool panels
             .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
-        return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: "ToolPanel Configuration", bodyProps: { padding: 2, style: { display: 'flex', flexDirection: 'column' } }, glyphicon: this.props.moduleInfo.Glyph },
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "ToolPanel Configuration", glyphicon: this.props.moduleInfo.Glyph },
             React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
                 React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
                     React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),