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

package/src/View/Components/ValueSelector/index.js

@@ -12,6 +12,7 @@ const EllipsisContainer_1 = require("../../../components/EllipsisContainer");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const reorder_1 = require("../../../Utilities/reorder");
+const Tag_1 = require("../../../components/Tag");
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = react_1.useMemo(() => {
         if (selectedMap) {
@@ -183,10 +184,10 @@ function ValueOptionsTags(props) {
         };
         const option = selectedMap.get(optionId);
         const label = option != null ? toLabel(option) : `${optionId}`;
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "primary", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, padding: 1, className: "ab-ValueSelector__tag", style: { borderRadius: 'var(--ab__border-radius)', flex: 'none' }, onClick: (e) => {
+        return (React.createElement(Tag_1.Tag, { flexDirection: "row", alignItems: "center", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, className: "ab-ValueSelector__tag", onClick: (e) => {
                 var _a, _b, _c;
                 (_c = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.lastChild) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
-            } },
+            }, style: { flex: 'none' } },
             renderLabel ? renderLabel(label) : label,
             readOnly ? null : (React.createElement(SimpleButton_1.default, { icon: "clear", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
     };
@@ -197,7 +198,6 @@ function ValueOptionsTags(props) {
             " ",
             remaining > 1 ? 'others' : 'other'));
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(EllipsisContainer_1.EllipsisContainer, { marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis })));
+    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
 }
 exports.ValueOptionsTags = ValueOptionsTags;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 import { ConditionalStyle } from '../../../types';
 export interface ConditionalStyleWizardProps extends AdaptableOnePageWizardProps<ConditionalStyle> {
 }
-export declare function ConditionalStyleWizard(props: ConditionalStyleWizardProps): JSX.Element;
+export declare const ConditionalStyleWizard: React.FunctionComponent<ConditionalStyleWizardProps>;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -14,13 +14,18 @@ const DEFAULT_PREDICATE_ID_FOR_CONDITIONAL_STYLE_1 = require("./DEFAULT_PREDICAT
 const CheckBox_1 = require("../../../components/CheckBox");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
-function ConditionalStyleWizard(props) {
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
+exports.ConditionalStyleWizard = (props) => {
     const [conditionalStyle, setConditionalStyle] = react_1.useState(() => {
         var _a;
         const DEFAULT_RULE = {
             BooleanExpression: '',
         };
-        const conditionalStyle = Helper_1.cloneObject(props.data);
+        const conditionalStyle = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyConditionalStyle();
         conditionalStyle.Scope = (_a = conditionalStyle.Scope) !== null && _a !== void 0 ? _a : { All: true };
         if (!conditionalStyle.Rule) {
             conditionalStyle.Rule = DEFAULT_RULE;
@@ -30,7 +35,17 @@ function ConditionalStyleWizard(props) {
         }
         return conditionalStyle;
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(ConditionalStyleRedux.ConditionalStyleEdit(conditionalStyle));
+        }
+        else {
+            dispatch(ConditionalStyleRedux.ConditionalStyleAdd(conditionalStyle));
+        }
+        props.onCloseWizard();
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Style',
                 details: 'Specify the Style to be applied conditionally',
@@ -74,5 +89,4 @@ function ConditionalStyleWizard(props) {
                 title: 'Summary',
             },
         ] }));
-}
-exports.ConditionalStyleWizard = ConditionalStyleWizard;
+};

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -4,16 +4,15 @@ exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = export
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.renderCustomSortColumn = (data) => {
     const { api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
-        "Custom sort column:",
-        ' ',
-        React.createElement(CodeBlock_1.CodeBlock, null, api.columnApi.getFriendlyNameFromColumnId(data.ColumnId))));
+        "Custom sort column: ",
+        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameFromColumnId(data.ColumnId))));
 };
 exports.isValidCustomSortColumn = (data) => {
     if (!data.ColumnId) {
@@ -30,7 +29,7 @@ exports.CustomSortColumnWizardSection = (props) => {
         const columnSortComparers = ((_b = (_a = api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.customSortComparers) || [];
         const usedColumnIds = [
             ...customSorts.map((customSort) => customSort.ColumnId),
-            ...columnSortComparers.map((comparer) => comparer.columnId),
+            ...columnSortComparers.map((comparer) => api.scopeApi.getColumnIdsInScope(comparer.scope)),
         ];
         // filter out used colum ids, but include the current one
         return sortableColumns.filter((column) => {

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -9,11 +9,26 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const CustomSortColumnWizardSection_1 = require("./CustomSortColumnWizardSection");
 const CustomSortValuesWizardSection_1 = require("./CustomSortValuesWizardSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const CustomSortRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CustomSortRedux"));
 exports.CustomSortWizard = (props) => {
     const [customSort, setCustomSort] = react_1.useState(() => {
-        return Helper_1.cloneObject(props.data);
+        return props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyCustomSort();
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(CustomSortRedux.CustomSortEdit(customSort));
+        }
+        else {
+            dispatch(CustomSortRedux.CustomSortAdd(customSort));
+        }
+        props.onFinishWizard(customSort);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 isValid: CustomSortColumnWizardSection_1.isValidCustomSortColumn,
                 renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
@@ -41,5 +56,5 @@ exports.CustomSortWizard = (props) => {
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
             },
-        ], data: customSort, onHide: props.onCloseWizard, onFinish: props.onFinishWizard }));
+        ] }));
 };

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

@@ -17,7 +17,6 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
     onSetIsInline: (IsInline: boolean) => DashboardRedux.DashboardSetIsInlineAction;
-    onSetIsHidden: (IsHidden: boolean) => DashboardRedux.DashboardSetIsHiddenAction;
     onSetFloatingPosition: (FloatingPosition: AdaptableCoordinate) => DashboardRedux.DashboardSetFloatingPositionAction;
     onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;

package/src/View/Dashboard/Dashboard.js

@@ -22,8 +22,11 @@ const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const DefaultSettingsPanel_1 = require("../../Utilities/Defaults/DefaultSettingsPanel");
+const ApplicationIcon_1 = require("../../components/ApplicationIcon");
 const DashboardComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced_1.useQuickSearchDebounced(props);
+    const dispatch = react_redux_1.useDispatch();
     const dashboardAccessLevel = props.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule('Dashboard');
@@ -120,74 +123,26 @@ const DashboardComponent = (props) => {
         return customDashboardButtons;
     };
     const renderDashboardIcon = (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("img", { className: "ab-Dashboard__application-icon", src: icon.src, style: { width: width, height: height } }));
+        return React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: icon });
     };
+    const actionModuleMenuItems = 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; })
+        .filter((menuItem) => menuItem.module !== 'General' && DefaultSettingsPanel_1.ACTION_POPUPS.includes(menuItem.module))
+        .map((menuItem) => ({
+        disabled: props.accessLevel == 'Hidden',
+        onClick: () => props.dispatch(menuItem.reduxAction),
+        icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
+        label: menuItem.label,
+    }));
     const renderModulesDropdown = () => {
         let moduleService = props.api.internalApi.getModuleService();
         let moduleInfo = moduleService.getModuleInfoByModule(ModuleConstants.DashboardModuleId);
-        let allowedMenuItems = props.GridState.ModuleDropdownMenuItems.filter((x) => x.isVisible);
-        // function menu items
-        let menuItems = allowedMenuItems.map((menuItem) => {
-            return {
-                disabled: props.accessLevel == 'Hidden',
-                onClick: () => props.dispatch(menuItem.reduxAction),
-                icon: React.createElement(icons_1.Icon, { name: menuItem.icon }),
-                label: menuItem.label,
-            };
-        });
-        let dashboardOptions = props.api.internalApi.getAdaptableOptions()
-            .dashboardOptions;
-        if (dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly') {
-            menuItems.unshift(dashboardAccessLevel == 'Full'
-                ? {
-                    onClick: () => props.onShowDashboardPopup(),
-                    icon: React.createElement(icons_1.Icon, { name: "settings" }),
-                    label: 'Configure ' + moduleInfo.FriendlyName,
-                }
-                : null, props.DashboardState.IsFloating
-                ? null
-                : props.DashboardState.IsCollapsed
-                    ? {
-                        onClick: () => props.onSetIsCollapsed(false),
-                        icon: React.createElement(icons_1.Icon, { name: "expand" }),
-                        label: 'Expand ' + moduleInfo.FriendlyName,
-                    }
-                    : {
-                        onClick: () => props.onSetIsCollapsed(true),
-                        icon: React.createElement(icons_1.Icon, { name: "collapse" }),
-                        label: 'Collapse ' + moduleInfo.FriendlyName,
-                    }, props.DashboardState.IsFloating
-                ? {
-                    onClick: () => props.onSetIsFloating(false),
-                    icon: React.createElement(icons_1.Icon, { name: "dock" }),
-                    label: 'Dock ' + moduleInfo.FriendlyName,
-                }
-                : dashboardOptions.canFloat && {
-                    onClick: () => props.onSetIsFloating(true),
-                    icon: React.createElement(icons_1.Icon, { name: "dock" }),
-                    label: 'Float ' + moduleInfo.FriendlyName,
-                }, props.DashboardState.IsHidden
-                ? {
-                    onClick: () => props.onSetIsHidden(false),
-                    icon: React.createElement(icons_1.Icon, { name: "show-column" }),
-                    label: 'Show ' + moduleInfo.FriendlyName,
-                }
-                : dashboardOptions.canFloat && {
-                    onClick: () => props.onSetIsHidden(true),
-                    icon: React.createElement(icons_1.Icon, { name: "hide-column" }),
-                    label: 'Hide ' + moduleInfo.FriendlyName,
-                }, {
-                separator: true,
-            });
-        }
-        menuItems = menuItems.filter((x) => !!x);
-        return (React.createElement(DropdownButton_1.default, { variant: "text", tone: "none", items: menuItems, className: "ab-DashboardToolbar__Home__functions", key: 'dropdown-functions', id: 'dropdown-functions' },
-            React.createElement(icons_1.Icon, { name: 'home' })));
+        // JW 23/1/22: we should check the SettingsPanel entitlement here...
+        const handleOpenPopup = () => {
+            dispatch(PopupRedux.PopupShowScreen());
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SimpleButton_1.default, { className: "ab-SettingsButton", onClick: handleOpenPopup, variant: "text", tone: "none", icon: "settings" }),
+            React.createElement(DropdownButton_1.default, { icon: "edit", variant: "text", tone: "none", items: actionModuleMenuItems, className: "ab-DashboardToolbar__Home__functions", key: 'dropdown-functions', id: 'dropdown-functions', showToggleIcon: false })));
     };
     const renderQuickSearch = () => {
         let moduleInfo = props.api.internalApi
@@ -219,7 +174,7 @@ const DashboardComponent = (props) => {
             }
         }, left: React.createElement(React.Fragment, null,
             renderDashboardIcon(props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon),
-            dashboardOptions.showModulesDropdown && renderModulesDropdown()), right: React.createElement(React.Fragment, null,
+            dashboardOptions.showSettingsPanel && renderModulesDropdown()), right: React.createElement(React.Fragment, null,
             renderDashboardButtons(),
             renderModuleButtons(),
             shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
@@ -239,8 +194,6 @@ function mapDispatchToProps(dispatch) {
         onSetActiveTabIndex: (ActiveTabIndex) => dispatch(DashboardRedux.DashboardSetActiveTabIndex(ActiveTabIndex)),
         onSetIsCollapsed: (IsCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(IsCollapsed)),
         onSetIsFloating: (IsFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(IsFloating)),
-        onSetIsInline: (IsInline) => dispatch(DashboardRedux.DashboardSetIsInline(IsInline)),
-        onSetIsHidden: (IsHidden) => dispatch(DashboardRedux.DashboardSetIsHidden(IsHidden)),
         onSetFloatingPosition: (FloatingPosition) => dispatch(DashboardRedux.DashboardSetFloatingPosition(FloatingPosition)),
         onRunQuickSearch: (newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(newQuickSearchText)),
         onShowQuickSearchPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.QuickSearchModuleId, 'QuickSearchPopup')),

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

@@ -3,13 +3,17 @@ import * as DashboardRedux from '../../Redux/ActionsReducers/DashboardRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { GridState } from '../../PredefinedConfig/GridState';
 import { DashboardState, DashboardTab } from '../../PredefinedConfig/DashboardState';
-import { Entitlement } from '../../PredefinedConfig/Common/Entitlement';
 interface DashboardPopupComponentProps extends ModuleViewPopupProps<DashboardPopupComponent> {
     DashboardState: DashboardState;
     GridState: GridState;
-    Entitlements: Entitlement[];
+    IsCollapsed: boolean;
+    IsHidden: boolean;
+    IsFloating: boolean;
     onDashboardSetModuleButtons: (ModuleConstants: string[]) => DashboardRedux.DashboardSetModuleButtonsAction;
     onDashboardSetTabs: (Tabs: DashboardTab[]) => DashboardRedux.DashboardSetTabsAction;
+    onSetDashboardCollapsed: (isCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
+    onSetDashboardFloating: (isFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
+    onSetDashboardHidden: (isHidden: boolean) => DashboardRedux.DashboardSetIsHiddenAction;
 }
 export declare enum DashboardConfigView {
     Toolbars = "Toolbars",

package/src/View/Dashboard/DashboardPopup.js

@@ -5,12 +5,14 @@ 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 PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
+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"));
 var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
@@ -55,13 +57,27 @@ class DashboardPopupComponent extends React.Component {
             }
         });
         const allModuleButtons = this.props.GridState.ModuleDropdownMenuItems.map((x) => x.module);
-        return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, bodyProps: { padding: 0, style: { display: 'flex', flexDirection: 'column' } }, glyphicon: this.props.moduleInfo.Glyph },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select", style: { borderBottom: '1px solid var(--ab-color-primary)' } },
-                React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Module Toolbars"),
-                React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Module Buttons")),
-            React.createElement(rebass_1.Box, { style: { overflow: 'auto', flex: 1 }, padding: 2 },
-                this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))));
+        const baseClassName = 'ab-Dashboard-Popup';
+        // const isDisabled = this.props.Entitlements
+        const dashboardAccessLevel = this.props.api.internalApi
+            .getEntitlementService()
+            .getEntitlementAccessLevelForModule('Dashboard');
+        const areDashboardSettingsEnabled = dashboardAccessLevel == 'Full' || dashboardAccessLevel == 'ReadOnly';
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph },
+            areDashboardSettingsEnabled && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
+                React.createElement(rebass_1.Flex, null,
+                    React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+                    ' ',
+                    this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
+            React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
+                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select", style: { borderBottom: '1px solid var(--ab-color-primary)' } },
+                    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(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { overflow: 'auto', flex: 1 }, padding: 2 },
+                    this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                    this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;
@@ -73,12 +89,18 @@ function mapStateToProps(state, ownProps) {
     return {
         DashboardState: state.Dashboard,
         GridState: state.Grid,
+        IsCollapsed: state.Dashboard.IsCollapsed,
+        IsHidden: state.Dashboard.IsHidden,
+        IsFloating: state.Dashboard.IsFloating,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
         onDashboardSetModuleButtons: (moduleButtons) => dispatch(DashboardRedux.DashboardSetModuleButtons(moduleButtons)),
         onDashboardSetTabs: (Tabs) => dispatch(DashboardRedux.DashboardSetTabs(Tabs)),
+        onSetDashboardCollapsed: (isCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(isCollapsed)),
+        onSetDashboardHidden: (isHidden) => dispatch(DashboardRedux.DashboardSetIsHidden(isHidden)),
+        onSetDashboardFloating: (isFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(isFloating)),
     };
 }
 exports.DashboardPopup = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(DashboardPopupComponent);

package/src/View/DataChangeHistory/DataChangeHistoryGrid.d.ts

@@ -2,7 +2,7 @@
 import { DataChangedInfo } from '../../PredefinedConfig/Common/DataChangedInfo';
 export interface DataChangeHistoryGridProps {
     adaptableContainerId: string;
-    vendorContainerId: string;
+    agGridContainerId: string;
     changeHistoryLog: Record<string, DataChangedInfo>;
     onUndoChange: (changeKey: string) => void;
 }

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 exports.DataChangeHistoryGrid = (props) => {
-    const { changeHistoryLog, adaptableContainerId, vendorContainerId, onUndoChange } = props;
+    const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange } = props;
     const mainAdaptableInstance = AdaptableContext_1.useAdaptable();
     const [_adaptableApi, setAdaptableApi] = react_1.useState(null);
     const adaptableApiRef = react_1.useRef(null);
@@ -22,7 +22,7 @@ exports.DataChangeHistoryGrid = (props) => {
     react_1.useEffect(() => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
-            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange);
+            const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange);
             // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
             const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
             const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions);
@@ -64,14 +64,14 @@ exports.DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.internalApi.getAdaptableOptions().vendorGrid.api.applyTransactionAsync({
+        adaptableApi.internalApi.getAdaptableOptions().agGridOptions.api.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });
     }, [changeHistoryLog]);
     return React.createElement(React.Fragment, null);
 };
-const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, vendorContainerId, undoChangeEnabled, onUndoChange) => {
+const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange) => {
     var _a, _b;
     const mainAdaptableOptions = mainAdaptableInstance.adaptableOptions;
     const mainAdaptableTheme = mainAdaptableInstance.api.themeApi.getCurrentTheme();
@@ -81,14 +81,14 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         changeKey && onUndoChange(changeKey);
     };
     const options = {
-        vendorGrid: Object.assign(Object.assign({}, gridOptions), { modules: [...all_modules_1.AllCommunityModules] }),
+        agGridOptions: Object.assign(Object.assign({}, gridOptions), { modules: [...all_modules_1.AllCommunityModules] }),
         primaryKey: 'primaryKey',
         licenseKey: mainAdaptableOptions.licenseKey,
         userName: `${mainAdaptableOptions.userName}`,
         adaptableId: `${mainAdaptableOptions.adaptableId}::DataChangeHistory`,
         containerOptions: {
             adaptableContainer: adaptableContainerId,
-            vendorContainer: vendorContainerId,
+            agGridContainer: agGridContainerId,
         },
         entitlementOptions: {
             defaultAccessLevel: 'Hidden',

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -4,7 +4,7 @@ exports.DataChangeHistoryPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
+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");
@@ -21,8 +21,8 @@ class DataChangeHistoryPopupComponent extends React.Component {
     }
     render() {
         const { changeHistoryMode, activationTime, suspensionTime, onChangeHistoryEnable, onChangeHistoryDisable, onChangeHistorySuspend, onChangeHistoryResume, } = this.props;
-        const adaptableContainerId = 'dataChangeHistoryAdaptableGrid';
-        const vendorContainerId = 'dataChangeHistoryVendorGrid';
+        const adaptableContainerId = 'dataChangeHistoryAdaptableContainer';
+        const agGridContainerId = 'dataChangeHistoryAgGridContainer';
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
@@ -53,10 +53,10 @@ class DataChangeHistoryPopupComponent extends React.Component {
                 this.props.api.dataChangeHistoryApi.undoDataChangeHistoryEntry(changeToBeUndone);
             }
         };
-        const currentVendorTheme = this.props.api.internalApi
+        const currentAgGridTheme = this.props.api.internalApi
             .getAdaptableInstance()
-            .getVendorGridCurrentThemeName();
-        return (React.createElement(PanelWithButton_1.PanelWithButton, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), border: "none", bodyProps: { padding: 0 } },
+            .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: {
                         color: 'var(--ab-dashboard__color)',
@@ -67,8 +67,8 @@ class DataChangeHistoryPopupComponent extends React.Component {
                         statusPanel)),
                 React.createElement(rebass_1.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: vendorContainerId, className: currentVendorTheme, style: { height: '100%', width: '1000px' } }),
-                    React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, vendorContainerId: vendorContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo })))));
+                    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 })))));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/DataSource/Wizard/DataSourceSettingsSummary.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataSourceSettingsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const CodeBlock_1 = require("../../../components/CodeBlock");
+const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.DataSourceSettingsSummary = () => {
     const { data: dataSource } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     return (React.createElement(React.Fragment, null,
         React.createElement(OnePageAdaptableWizard_1.SummaryText, null,
             "Name: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, dataSource.Name || 'not specified')),
+            React.createElement(Tag_1.Tag, null, dataSource.Name || 'not specified')),
         React.createElement(OnePageAdaptableWizard_1.SummaryText, null,
             "Name: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, dataSource.Description || 'not specified'))));
+            React.createElement(Tag_1.Tag, null, dataSource.Description || 'not specified'))));
 };

package/src/View/DataSource/Wizard/DataSourceWizard.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { AdaptableOnePageWizardProps } from '../../../View/Wizard/Interface/IAdaptableWizard';
 import { DataSource } from '../../../types';
-interface DataSourceWizardProps extends AdaptableOnePageWizardProps<DataSource> {
+export interface DataSourceWizardProps extends AdaptableOnePageWizardProps<DataSource> {
     dataSources: DataSource[];
     isNew: boolean;
 }
 export declare const DataSourceWizard: React.FunctionComponent<DataSourceWizardProps>;
-export {};

package/src/View/DataSource/Wizard/DataSourceWizard.js

@@ -7,9 +7,24 @@ const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const DataSourceSettingsWizard_1 = require("./DataSourceSettingsWizard");
 const DataSourceSettingsSummary_1 = require("./DataSourceSettingsSummary");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const DataSourceRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/DataSourceRedux"));
 exports.DataSourceWizard = (props) => {
-    const [dataSource, setDataSource] = React.useState(props.data);
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: dataSource, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const [dataSource, setDataSource] = React.useState(() => {
+        return props.data ? props.data : ObjectFactory_1.default.CreateEmptyDataSource();
+    });
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(DataSourceRedux.DataSourceEdit(dataSource));
+        }
+        else {
+            dispatch(DataSourceRedux.DataSourceAdd(dataSource));
+        }
+        props.onFinishWizard(dataSource);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: dataSource, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 isValid: (data) => DataSourceSettingsWizard_1.isSettingsValid(data, props.isNew, props.dataSources),

package/src/View/Export/ExportViewPanel.js

@@ -92,12 +92,12 @@ class ExportViewPanelComponent extends React.Component {
             }
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { minWidth: 168, fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(DropdownButton_1.default, { disabled: currentReportId === SELECT_REPORT_STRING, style: { minWidth: 168, fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
-            React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { minWidth: '168px' } },
+        return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { width: '100%', fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(DropdownButton_1.default, { disabled: currentReportId === SELECT_REPORT_STRING, style: { width: '100%', fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
+            React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
                 React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || currentReport.ReportColumnScope == 'CustomColumns', accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),

package/src/View/Export/ReportExportDropdown.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Report } from '../../../types';
+export declare const ReportExportDropdown: React.FunctionComponent<{
+    data: Report;
+}>;