@adaptabletools/adaptable 10.0.4-canary.4 → 11.0.0-canary.2

package/src/View/Dashboard/Dashboard.js

@@ -14,14 +14,13 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const rebass_1 = require("rebass");
 const Dashboard_1 = require("../../components/Dashboard");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
-const icons_1 = require("../../components/icons");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 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 ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const ApplicationIcon_1 = require("../../components/ApplicationIcon");
 const DashboardComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced_1.useQuickSearchDebounced(props);
     const dashboardAccessLevel = props.api.internalApi
@@ -70,6 +69,13 @@ const DashboardComponent = (props) => {
     const renderModuleButtons = () => {
         let shortcutsArray = props.DashboardState.ModuleButtons;
         let shortcuts = null;
+        const alwaysShowInDashboard = props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+            .alwaysShowInDashboard;
+        const shouldAddSettingsPanel = alwaysShowInDashboard &&
+            !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
+        if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
+            shortcutsArray.push('SettingsPanel');
+        }
         if (shortcutsArray) {
             shortcuts = shortcutsArray.map((x, index) => {
                 var _a, _b, _c;
@@ -84,8 +90,7 @@ const DashboardComponent = (props) => {
     };
     const renderDashboardButtons = () => {
         var _a;
-        let dashboardButtonsArray = (_a = props.api.dashboardApi
-            .getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
+        let dashboardButtonsArray = (_a = props.api.dashboardApi.getCustomDashboardButtons()) === null || _a === void 0 ? void 0 : _a.filter((c) => c);
         let customDashboardButtons = null;
         if (dashboardButtonsArray) {
             customDashboardButtons = dashboardButtonsArray.map((button) => {
@@ -120,81 +125,8 @@ 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 } }));
-    };
-    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' })));
-    };
     const renderQuickSearch = () => {
-        let moduleInfo = props.api.internalApi
-            .getModuleService()
-            .getModuleInfoByModule('QuickSearch');
-        return (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { icon: "quick-search", variant: "text", tone: "none", onClick: props.onShowQuickSearchPopup, tooltip: moduleInfo.FriendlyName, mr: 2 }),
+        return (React.createElement(rebass_1.Box, { ml: 2 },
             React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.setToolbarTitle();
@@ -218,10 +150,10 @@ const DashboardComponent = (props) => {
                 props.onSetFloatingPosition(FloatingPositionCallback);
             }
         }, left: React.createElement(React.Fragment, null,
-            renderDashboardIcon(props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon),
-            dashboardOptions.showModulesDropdown && renderModulesDropdown()), right: React.createElement(React.Fragment, null,
+            React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon }),
+            dashboardOptions.buttonsLocation === 'left' && renderModuleButtons()), right: React.createElement(React.Fragment, null,
             renderDashboardButtons(),
-            renderModuleButtons(),
+            dashboardOptions.buttonsLocation === 'right' && renderModuleButtons(),
             shouldRenderQuickSearchHeader && renderQuickSearch()), onShowDashboardPopup: props.onShowDashboardPopup }, props.DashboardState.Tabs &&
         props.DashboardState.Tabs.map((tab, index) => (React.createElement(Dashboard_1.DashboardTab, { key: index, title: tab.Name }, renderTab(tab))))));
 };
@@ -239,8 +171,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,35 @@ 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';
+        const isModuleCheckboxDisabled = (module) => {
+            if (module === 'SettingsPanel') {
+                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
+                    .alwaysShowInDashboard;
+            }
+            return false;
+        };
+        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph },
+            React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
+                areDashboardSettingsEnabled && (React.createElement(Panel_1.default, { header: 'Dashboard Settings', style: { height: 'auto', overflow: 'visible' }, 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: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select" },
+                        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: { minHeight: 0, flex: '1 1 0' }, 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', isDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;
@@ -73,12 +97,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.js

@@ -64,7 +64,7 @@ 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().gridOptions.api.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });
@@ -81,7 +81,8 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         changeKey && onUndoChange(changeKey);
     };
     const options = {
-        vendorGrid: Object.assign(Object.assign({}, gridOptions), { modules: [...all_modules_1.AllCommunityModules] }),
+        gridOptions: gridOptions,
+        modules: [...all_modules_1.AllCommunityModules],
         primaryKey: 'primaryKey',
         licenseKey: mainAdaptableOptions.licenseKey,
         userName: `${mainAdaptableOptions.userName}`,
@@ -188,8 +189,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         const layoutColumns = options.predefinedConfig.Layout.Layouts[0].Columns;
         if (layoutColumns.includes('undoActionColumn')) {
             // remove action column from layout
-            options.predefinedConfig.Layout.Layouts[0].Columns =
-                layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
+            options.predefinedConfig.Layout.Layouts[0].Columns = layoutColumns.filter((columnId) => columnId !== 'undoActionColumn');
         }
     }
     return options;

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");
@@ -56,7 +56,7 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const currentAgGridTheme = this.props.api.internalApi
             .getAdaptableInstance()
             .getAgGridCurrentThemeName();
-        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 } },
+        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,7 +67,7 @@ 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: agGridContainerId, className: currentAgGridTheme, style: { height: '100%', width: '1000px' } }),
+                    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 })))));
     }
 }

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/ReportExportDropdown.d.ts

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

package/src/View/Export/ReportExportDropdown.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportExportDropdown = 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 icons_1 = require("../../components/icons");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const ExportRedux_1 = require("../../Redux/ActionsReducers/ExportRedux");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.ReportExportDropdown = (props) => {
+    const report = props.data;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const handleExport = (destination) => {
+        dispatch(ExportRedux_1.ExportApply(report, destination));
+    };
+    const destinationItems = [
+        ...adaptable.api.exportApi.getAvailableExportDestinations().map((destination) => ({
+            label: destination,
+            onClick: () => handleExport(destination),
+        })),
+        ...adaptable.api.exportApi.getAllCustomDestination().map((destination) => ({
+            label: destination.name,
+            onClick: () => {
+                handleExport(destination.name);
+            },
+        })),
+    ];
+    if ((report === null || report === void 0 ? void 0 : report.Name) === GeneralConstants_1.VISUAL_DATA_REPORT) {
+        destinationItems.forEach((item) => (item.disabled = item.label === Enums_1.ExportDestination.Excel ? false : true));
+    }
+    return (React.createElement(DropdownButton_1.default, { tooltip: "Export Report", variant: "text", items: destinationItems },
+        React.createElement(icons_1.Icon, { name: "export" })));
+};

package/src/View/Export/Wizard/NewReportWizard.js

@@ -10,11 +10,24 @@ const rebass_1 = require("rebass");
 const ReportColumnsWizardSection_1 = require("./ReportColumnsWizardSection");
 const ReportRowsWizardSection_1 = require("./ReportRowsWizardSection");
 const ReportNameWizardSection_1 = require("./ReportNameWizardSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const ExportRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ExportRedux"));
 exports.NewReportWizard = (props) => {
     const [report, setReport] = react_1.useState(() => {
-        return Helper_1.cloneObject(props.data);
+        return props.data ? Helper_1.cloneObject(props.data) : ObjectFactory_1.default.CreateEmptyReport();
     });
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: report, onHide: props.onCloseWizard, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(ExportRedux.ReportDelete(report));
+        }
+        else {
+            dispatch(ExportRedux.ReportAdd(report));
+        }
+        props.onFinishWizard(report);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: report, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Columns',
                 details: 'Choose the Columns you want to include in the Report',

package/src/View/Export/Wizard/ReportNameWizardSection.js

@@ -7,12 +7,13 @@ const rebass_1 = require("rebass");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.renderReportNameSummary = (report) => {
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
         ' ',
         "Report Name: ",
-        React.createElement("b", null, report.Name)));
+        React.createElement(Tag_1.Tag, null, report.Name)));
 };
 exports.isValidReportName = (report, api) => {
     if (!report.Name) {

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.isValidReportRowsQuery = (report) => {
     var _a;
@@ -30,7 +30,7 @@ exports.renderReportRowsSummary = (report) => {
             " in the Report")) : null,
         report.ReportRowScope === 'ExpressionRows' ? (React.createElement(React.Fragment, null,
             "Include Rows matching the query: ",
-            React.createElement(CodeBlock_1.CodeBlock, null, (_a = report.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression))) : null));
+            React.createElement(Tag_1.Tag, null, (_a = report.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression))) : null));
 };
 exports.ReportRowsWizardSection = (props) => {
     var _a, _b;

package/src/View/FlashingCell/FlashingCellStyle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BoxProps } from 'rebass';
+import { FlashingCellDefinition } from '../../types';
+export interface FlashingCellStyleProps extends Omit<BoxProps, 'data'> {
+    data: FlashingCellDefinition;
+}
+export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingCellStyle = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const StylePreview_1 = require("../../components/StylePreview");
+exports.FlashingCellStyle = (props) => {
+    const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
+    return (react_1.default.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row" }, boxProps),
+        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+            "Up ",
+            !props.data.UpChangeStyle ? ' - no style' : ''),
+        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+            "Down",
+            !props.data.DownChangeStyle ? ' - no style' : ''),
+        react_1.default.createElement(StylePreview_1.StylePreview, { flex: 1, styleObject: props.data.NeutralChangeStyle },
+            "Neutral ",
+            !props.data.NeutralChangeStyle ? ' - no style' : '')));
+};

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertRulesWizardSection.d.ts → FlashingCell/Wizard/FlashingCellRulesWizardSection.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FlashingAlertDefinition } from '../../../../PredefinedConfig/AlertState';
+import { FlashingCellDefinition } from '../../../PredefinedConfig/FlashingCellState';
 export interface FlashingAlertRulesWizardSectionProps {
-    onChange: (data: FlashingAlertDefinition) => void;
+    onChange: (data: FlashingCellDefinition) => void;
 }
-export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingAlertDefinition) => JSX.Element;
+export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingCellDefinition) => JSX.Element;
 export declare const FlashingAlertRulesWizardSection: (props: FlashingAlertRulesWizardSectionProps) => JSX.Element;

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertRulesWizardSection.js → FlashingCell/Wizard/FlashingCellRulesWizardSection.js}

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertRulesWizardSection = exports.renderFlashingAlertRulesSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tabs_1 = require("../../../components/Tabs");
 const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
-const BaseAlertRulesWizardSection_1 = require("../BaseAlertRulesWizardSection");
-const CodeBlock_1 = require("../../../../components/CodeBlock");
-const EntityRulesEditor_1 = require("../../../Components/EntityRulesEditor");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const BaseAlertRulesWizardSection_1 = require("../../Alert/Wizard/BaseAlertRulesWizardSection");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
     var _a;
-    const { api: { alertApi, predicateApi }, } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : alertApi.getFlashingAlertFlashTarget(flashingAlert);
+    const { api: { flashingCellApi }, } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
     return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
             return (React.createElement(React.Fragment, null,
                 "Flash ",
@@ -34,20 +34,20 @@ exports.renderFlashingAlertRulesSummary = (flashingAlert) => {
 exports.FlashingAlertRulesWizardSection = (props) => {
     var _a;
     const { data: flashingAlert, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.alertApi.getFlashingAlertFlashTarget(flashingAlert);
-    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange },
+    const flashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : api.flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
+    return (React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, { onChange: props.onChange, wholeRowScope: false, module: "flashingCell" },
         React.createElement(rebass_1.Text, { fontSize: 2, mb: 2, pl: 2, pt: 2 }, "Flash target"),
-        React.createElement(Tabs_1.Tabs, { value: FlashTarget !== null && FlashTarget !== void 0 ? FlashTarget : 'row', pl: 2, onValueChange: (FlashTarget) => {
-                props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashTarget }));
+        React.createElement(Tabs_1.Tabs, { value: flashTarget !== null && flashTarget !== void 0 ? flashTarget : 'row', pl: 2, onValueChange: (flashTarget) => {
+                props.onChange(Object.assign(Object.assign({}, flashingAlert), { FlashTarget: flashTarget }));
             } },
             React.createElement(Tabs_1.Tabs.Tab, { value: "row" },
-                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: FlashTarget === 'row' }, "Row")),
+                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: flashTarget === 'row' }, "Row")),
             React.createElement(Tabs_1.Tabs.Content, { value: "row" },
                 React.createElement(rebass_1.Text, { fontSize: 2 },
                     "Flash the whole ",
                     React.createElement("b", null, "row"))),
             React.createElement(Tabs_1.Tabs.Tab, { value: "cell" },
-                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: FlashTarget === 'cell' }, "Cell")),
+                React.createElement(Radio_1.default, { margin: 0, tabIndex: -1, checked: flashTarget === 'cell' }, "Cell")),
             React.createElement(Tabs_1.Tabs.Content, { value: "cell" },
                 React.createElement(rebass_1.Text, { fontSize: 2 },
                     "Flash the updated ",

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertScopeWizardSection.d.ts → FlashingCell/Wizard/FlashingCellScopeWizardSection.d.ts}

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { FlashingAlertDefinition } from '../../../../PredefinedConfig/AlertState';
 declare type FlashingAlertScopeWizardSectionProps = {
-    onChange: (data: FlashingAlertDefinition) => void;
+    onChange: (data: any) => void;
 };
 export declare const FlashingAlertScopeWizardSection: (props: FlashingAlertScopeWizardSectionProps) => JSX.Element;
 export {};

package/src/View/{Alert/Wizard/FlashingAlertWizard/FlashingAlertScopeWizardSection.js → FlashingCell/Wizard/FlashingCellScopeWizardSection.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const BaseAlertScopeWizardSection_1 = require("../BaseAlertScopeWizardSection");
+const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
 exports.FlashingAlertScopeWizardSection = (props) => {
     return React.createElement(BaseAlertScopeWizardSection_1.BaseAlertScopeWizardSection, Object.assign({}, props));
 };

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FlashingCellDefinition } from '../../../types';
+declare type FlashingAlertDurationWizardSectionProps = {
+    readOnly?: boolean;
+    flashingCell?: FlashingCellDefinition;
+    onChange: (data: FlashingCellDefinition) => void;
+};
+export declare const renderFlashingAlertSettingsSummary: (flashingAlert: FlashingCellDefinition) => JSX.Element;
+export declare const FlashingAlertSettingsWizardSection: (props: FlashingAlertDurationWizardSectionProps) => JSX.Element;
+export {};