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

package/src/View/AdaptableView.js

@@ -5,13 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const PopupRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/PopupRedux"));
-const SystemRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/SystemRedux"));
 const AdaptablePopup_1 = require("./Components/Popups/AdaptablePopup");
 const AdaptablePopupPrompt_1 = require("./Components/Popups/AdaptablePopupPrompt");
 const Dashboard_1 = require("./Dashboard/Dashboard");
 const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopupConfirmation");
-const AdaptableChart_1 = require("./Components/Popups/AdaptableChart");
-const ChartEnums_1 = require("../PredefinedConfig/Common/ChartEnums");
 const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
 const License_1 = require("./License");
@@ -20,18 +17,17 @@ const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressInd
 const react_toastify_1 = require("react-toastify");
 class AdaptableView extends React.Component {
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
         return (React.createElement("div", null,
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
-            this.props.SystemState.ChartVisibility != ChartEnums_1.ChartVisibility.Hidden && (React.createElement(AdaptableChart_1.AdaptableChart, { api: this.props.AdaptableApi, onClose: this.props.onCloseChartPopup, showChart: this.props.SystemState.ChartVisibility == ChartEnums_1.ChartVisibility.Maximised, showModal: (_e = this.props.AdaptableApi.pluginsApi.getChartsPluginApi()) === null || _e === void 0 ? void 0 : _e.getPluginOptions().showModal })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
             React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, showPopup: this.props.PopupState.PromptPopup.ShowPromptPopup }),
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
-            React.createElement(AdaptablePopup_1.AdaptablePopup, { showModal: this.props.PopupState.ScreenPopup.ShowScreenPopup, componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps }),
+            Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
             React.createElement(ExportCustomDestinationFormPopups_1.ExportCustomDestinationFormPopups, { api: this.props.AdaptableApi }),
             React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
-                    .maxNotifications, closeButton: false, icon: false }),
+                    .maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(ProgressIndicator_1.ProgressIndicator, null)));
     }
@@ -40,7 +36,6 @@ function mapStateToProps(state, ownProps) {
     return {
         PopupState: state.Popup,
         SystemState: state.System,
-        ChartState: state.Chart,
         AdaptableApi: ownProps.Adaptable.api,
     };
 }
@@ -48,7 +43,6 @@ function mapDispatchToProps(dispatch) {
     return {
         onCloseScreenPopup: () => dispatch(PopupRedux.PopupHideScreen()),
         onCloseAlertPopup: () => dispatch(PopupRedux.PopupHideAlert()),
-        onCloseChartPopup: () => dispatch(SystemRedux.ChartSetChartVisibility(ChartEnums_1.ChartVisibility.Hidden)),
         onClosePromptPopup: () => dispatch(PopupRedux.PopupHidePrompt()),
         onConfirmPromptPopup: (inputText) => dispatch(PopupRedux.PopupConfirmPrompt(inputText)),
         onConfirmConfirmationPopup: (comment) => dispatch(PopupRedux.PopupConfirmConfirmation(comment)),

package/src/View/AdaptableViewFactory.js

@@ -2,17 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableViewPanelFactory = exports.AdaptableViewFactory = void 0;
 const tslib_1 = require("tslib");
-const CustomSortPopup_1 = require("./CustomSort/CustomSortPopup");
 const SmartEditPopup_1 = require("./SmartEdit/SmartEditPopup");
-const ShortcutPopup_1 = require("./Shortcut/ShortcutPopup");
-const PlusMinusPopup_1 = require("./PlusMinus/PlusMinusPopup");
-const ExportPopup_1 = require("./Export/ExportPopup");
-const FilterPopup_1 = require("./Filter/FilterPopup");
-const ConditionalStylePopup_1 = require("./ConditionalStyle/ConditionalStylePopup");
 const QuickSearchPopup_1 = require("./QuickSearch/QuickSearchPopup");
-const QueryPopup_1 = require("./Query/QueryPopup");
 const ExpandedQueryPopup_1 = require("./Query/ExpandedQueryPopup");
-const FormatColumnPopup_1 = require("./FormatColumn/FormatColumnPopup");
 const ThemePopup_1 = require("./Theme/ThemePopup");
 const ToolPanelPopup_1 = require("./Components/ToolPanel/ToolPanelPopup");
 const LayoutPopup_1 = require("./Layout/LayoutPopup");
@@ -21,13 +13,8 @@ const TeamSharingPopup_1 = require("./TeamSharing/TeamSharingPopup");
 const DashboardPopup_1 = require("./Dashboard/DashboardPopup");
 const StateManagementPopup_1 = require("./StateManagement/StateManagementPopup");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
-const CalculatedColumnPopup_1 = require("./CalculatedColumn/CalculatedColumnPopup");
 const BulkUpdatePopup_1 = require("./BulkUpdate/BulkUpdatePopup");
-const DataSourcePopup_1 = require("./DataSource/DataSourcePopup");
-const AlertPopup_1 = require("./Alert/AlertPopup");
-const FreeTextColumnPopup_1 = require("./FreeTextColumn/FreeTextColumnPopup");
 const CellSummaryPopup_1 = require("./CellSummary/CellSummaryPopup");
-const SchedulePopup_1 = require("./Schedule/SchedulePopup");
 const SystemStatusPopup_1 = require("./SystemStatus/SystemStatusPopup");
 const AlertViewPanel_1 = require("./Alert/AlertViewPanel");
 const BulkUpdateViewPanel_1 = require("./BulkUpdate/BulkUpdateViewPanel");
@@ -47,31 +34,18 @@ const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHist
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 exports.AdaptableViewFactory = {
     ExpandedQueryPopup: ExpandedQueryPopup_1.ExpandedQueryPopup,
-    AlertPopup: AlertPopup_1.AlertPopup,
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
-    CalculatedColumnPopup: CalculatedColumnPopup_1.CalculatedColumnPopup,
-    FilterPopup: FilterPopup_1.FilterPopup,
-    ConditionalStylePopup: ConditionalStylePopup_1.ConditionalStylePopup,
-    CustomSortPopup: CustomSortPopup_1.CustomSortPopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
     StateManagementPopup: StateManagementPopup_1.StateManagementPopup,
-    DataSourcePopup: DataSourcePopup_1.DataSourcePopup,
-    ExportPopup: ExportPopup_1.ExportPopup,
-    FormatColumnPopup: FormatColumnPopup_1.FormatColumnPopup,
-    FreeTextColumnPopup: FreeTextColumnPopup_1.FreeTextColumnPopup,
     GridInfoPopup: GridInfoPopup_1.GridInfoPopup,
     LayoutPopup: LayoutPopup_1.LayoutPopup,
-    PlusMinusPopup: PlusMinusPopup_1.PlusMinusPopup,
     QuickSearchPopup: QuickSearchPopup_1.QuickSearchPopup,
-    SchedulePopup: SchedulePopup_1.SchedulePopup,
     CellSummaryPopup: CellSummaryPopup_1.CellSummaryPopup,
     SmartEditPopup: SmartEditPopup_1.SmartEditPopup,
-    ShortcutPopup: ShortcutPopup_1.ShortcutPopup,
     ThemePopup: ThemePopup_1.ThemePopup,
     TeamSharingPopup: TeamSharingPopup_1.TeamSharingPopup,
     ToolPanelPopup: ToolPanelPopup_1.ToolPanelPopup,
     SystemStatusPopup: SystemStatusPopup_1.SystemStatusPopup,
-    QueryPopup: QueryPopup_1.QueryPopup,
     DataChangeHistoryPopup: DataChangeHistoryPopup_1.DataChangeHistoryPopup,
 };
 exports.AdaptableViewPanelFactory = new Map([

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-interface Column {
-    field: string;
-    type: string;
+import { ColDef } from '@ag-grid-community/all-modules';
+interface Column extends Partial<ColDef> {
+    field?: string;
+    type?: string | string[];
     caption?: string;
 }
 declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, }: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -216,6 +216,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
         },
     ];
     const items = columns.map((col) => {
+        var _a;
         const isPrimaryKey = col.field === primaryKeyField;
         const cItems = colItems.map((c) => (Object.assign({}, c)));
         cItems[0].Content = (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
@@ -235,7 +236,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
         cItems[2].Content = (React.createElement(Input_1.default, { style: inputStyle, defaultValue: col.caption != undefined ? col.caption : humanized, placeholder: humanized, onChange: (event) => {
                 setColumnCaption(event.target.value, col.field);
             } }));
-        cItems[3].Content = (React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: col.type, onChange: onColumnTypeChange.bind(null, col) }));
+        cItems[3].Content = (React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = col === null || col === void 0 ? void 0 : col.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, col) }));
         cItems[4].Content = (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(col.field), onChange: (sortable) => {
                 sortable ? setSortableColumn(col.field) : setUnsortableColumn(col.field);
             } }));

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationForm.js

@@ -16,7 +16,7 @@ const ConfigurationForm = (props) => {
     const searchOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.searchOptions), abOptions.searchOptions);
     const filterOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.filterOptions), abOptions.filterOptions);
     // we are 'hard-coding' this to use AG Grid but so does helper so ok for now and we can refactor when Adaptable Grid is ready
-    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.vendorGrid), abOptions.vendorGrid);
+    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "General Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
@@ -32,29 +32,29 @@ const ConfigurationForm = (props) => {
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
-                        abOptions.vendorGrid.enableRangeSelection = enableRangeSelection;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.enableRangeSelection = enableRangeSelection;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.floatingFilter, onChange: (floatingFilter) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
-                        abOptions.vendorGrid.floatingFilter = floatingFilter;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.floatingFilter = floatingFilter;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
-                        abOptions.vendorGrid.suppressColumnVirtualisation = suppressColumnVirtualisation;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
                         abOptions = Object.assign({}, abOptions);
-                        abOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
-                        abOptions.vendorGrid.suppressMenuHide = suppressMenuHide;
+                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+                        abOptions.gridOptions.suppressMenuHide = suppressMenuHide;
                         props.onChangeadaptableOptions(abOptions);
                     } }))),
         React.createElement(HelpBlock_1.default, null, "Layout Options"),
@@ -75,7 +75,7 @@ const ConfigurationForm = (props) => {
                         abOptions.generalOptions.caseSensitiveTextComparisons = caseSensitiveTextComparisons;
                         props.onChangeadaptableOptions(abOptions);
                     } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Vendor Filter Form Style" },
+            React.createElement(FormLayout_1.FormRow, { label: "Use AG Grid Filter Form Style" },
                 React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAgGridFilterFormStyle, onChange: (useAgGridFilterFormStyle) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/index.js

@@ -29,8 +29,8 @@ const ConfigurationDialog = (props) => {
     };
     const onFinish = () => {
         const newABOptions = Object.assign({}, abOptions);
-        newABOptions.vendorGrid = Object.assign({}, abOptions.vendorGrid);
-        newABOptions.vendorGrid.columnDefs = columnsHandle.current.getColumns().map((c) => {
+        newABOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
+        newABOptions.gridOptions.columnDefs = columnsHandle.current.getColumns().map((c) => {
             const col = Object.assign(Object.assign({}, c), { headerName: c.caption || StringExtensions_1.default.Humanize(c.field) });
             delete col.caption;
             return col;
@@ -50,7 +50,7 @@ const ConfigurationDialog = (props) => {
                         React.createElement(Input_1.default, { value: abOptions.adaptableId, onChange: onadaptableIdChange, style: { minWidth: '20rem' } })))),
             React.createElement(ColumnsList_1.default, { handle: columnsHandle, onValidityChange: (valid) => {
                     setFinishEnabled(valid);
-                }, columns: abOptions.vendorGrid.columnDefs }))));
+                }, columns: abOptions.gridOptions.columnDefs }))));
     const stepTwo = (React.createElement(React.Fragment, null,
         React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", style: { flex: 1, overflow: 'auto' } },
             React.createElement(ConfigurationForm_1.default, { adaptableOptions: abOptions, onChangeadaptableOptions: (abOptions) => {
@@ -59,9 +59,9 @@ const ConfigurationDialog = (props) => {
     return (React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false },
         React.createElement(rebass_1.Flex, { flexDirection: "column", style: {
                 height: '100%',
-                width: '80vw',
-                maxWidth: 900,
-                maxHeight: '80vh',
+                width: '90vw',
+                maxWidth: 1000,
+                maxHeight: '90vh',
             } },
             currentStep === 0 ? stepOne : stepTwo,
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, backgroundColor: "primary", alignItems: "center" },

package/src/View/AdaptableWizardView/index.js

@@ -65,7 +65,7 @@ const Wizard = (props) => {
         const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
-        adaptableOptions.vendorGrid = gridOptions;
+        adaptableOptions.gridOptions = gridOptions;
         if (dataSourceInfo.primaryKey) {
             adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
         }

package/src/View/Alert/AlertEmptyView.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IModule } from '../../Strategy/Interface/IModule';
+export declare const AlertEmptyView: React.FunctionComponent<{
+    module: IModule;
+}>;

package/src/View/Alert/AlertEmptyView.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertEmptyView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.AlertEmptyView = (props) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
+    const text = accessLevel == 'ReadOnly'
+        ? 'You have no Alert Definitions.'
+        : "Click 'New' to start creating Alert Definitions. An Alert is triggered whenever an edit - or external data change - matches the Rule in the Alert Definition.";
+    return React.createElement(React.Fragment, null, text);
+};

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AdaptableApi } from '../../../types';
 declare type AlertBehaviourWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
 };
-export declare const renderAlertBehaviourSummary: (alert: AlertDefinition) => JSX.Element;
+export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => JSX.Element;
 export declare const AlertBehaviourWizardSection: (props: AlertBehaviourWizardSectionProps) => JSX.Element;
 export {};

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -9,7 +9,8 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const rebass_1 = require("rebass");
 const ValueSelector_1 = require("../../Components/ValueSelector");
-exports.renderAlertBehaviourSummary = (alert) => {
+// both used in wizard and list view
+exports.renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
     const { AlertProperties = {} } = alert;
     const values = [
         AlertProperties.PreventEdit ? { label: 'Prevent Cell Edit', id: 'preventCellEdit' } : null,
@@ -19,7 +20,7 @@ exports.renderAlertBehaviourSummary = (alert) => {
             ? {
                 label: (React.createElement(React.Fragment, null,
                     "Show in ",
-                    React.createElement(CodeBlock_1.CodeBlock, null, `<div />`))),
+                    React.createElement(CodeBlock_1.CodeBlock, { ml: 1, p: 0 }, `<div />`))),
                 id: 'showInDiv',
             }
             : null,
@@ -28,8 +29,7 @@ exports.renderAlertBehaviourSummary = (alert) => {
     if (!values.length) {
         values.push({ label: 'No behaviour selected', id: 'none' });
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ValueSelector_1.ValueOptionsTags, { options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => React.createElement(rebass_1.Text, { fontSize: 2 }, x.label) })));
+    return (React.createElement(ValueSelector_1.ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => React.createElement(React.Fragment, null, x.label) }));
 };
 exports.AlertBehaviourWizardSection = (props) => {
     const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
@@ -47,11 +47,16 @@ exports.AlertBehaviourWizardSection = (props) => {
                 } },
                 "Prevent Cell Edit",
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)")),
-            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: AlertProperties.HighlightCell, onChange: (HighlightCell) => {
+            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: Boolean(AlertProperties.HighlightCell), onChange: (HighlightCell) => {
                     onChange({ HighlightCell });
                 } },
                 "Highlight Cell",
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)")),
+            React.createElement(CheckBox_1.CheckBox, { style: { alignItems: 'flex-start' }, checked: Boolean(AlertProperties.HighlightRow), onChange: (HighlightRow) => {
+                    onChange({ HighlightRow });
+                } },
+                "Highlight Row",
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(using the Alert message type)")),
             React.createElement(CheckBox_1.CheckBox, { checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
                     onChange({ JumpToCell });
                 } }, "Jump To Cell"),

package/src/View/Alert/Wizard/AlertDisplayWizardSection.d.ts

@@ -1,8 +1,15 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AdaptableApi } from '../../../types';
+import { BoxProps } from 'rebass';
 declare type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
 };
 export declare const renderAlertDisplaySummary: () => JSX.Element;
+interface AlertPreviewProps extends BoxProps {
+    api: AdaptableApi;
+    alertDefinition: AlertDefinition;
+}
+export declare const AlertPreview: React.FunctionComponent<AlertPreviewProps>;
 export declare const AlertDisplayWizardSection: (props: AlertDisplayWizardSectionProps) => JSX.Element;
 export {};

package/src/View/Alert/Wizard/AlertDisplayWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertDisplayWizardSection = exports.renderAlertDisplaySummary = void 0;
+exports.AlertDisplayWizardSection = exports.AlertPreview = exports.renderAlertDisplaySummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
@@ -29,9 +29,10 @@ exports.renderAlertDisplaySummary = () => {
             React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType),
             ". No alert popup will be displayed"));
     }
-    return React.createElement(AlertPreview, { api: api, alertDefinition: data });
+    return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
 };
-const AlertPreview = ({ alertDefinition, api, }) => {
+exports.AlertPreview = (_a) => {
+    var { alertDefinition, api } = _a, boxProps = tslib_1.__rest(_a, ["alertDefinition", "api"]);
     const mapButtons = React.useCallback((button) => {
         let buttonStyle = button.ButtonStyle;
         if (buttonStyle && buttonStyle.tone == null && (alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType)) {
@@ -50,9 +51,7 @@ const AlertPreview = ({ alertDefinition, api, }) => {
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(rebass_1.Box, { style: {
-            border: '1px solid var(--ab-color-inputborder)',
-        } },
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
         React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: alertToPreview, api: api, onClose: () => { } })));
 };
 exports.AlertDisplayWizardSection = (props) => {
@@ -103,5 +102,5 @@ exports.AlertDisplayWizardSection = (props) => {
                     } }))) : null)),
         ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Alert preview"),
-            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(AlertPreview, { alertDefinition: data, api: api }))))) : null));
+            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -2,6 +2,7 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 declare type AlertRulesWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
+    module: 'alert' | 'flashingCell';
 };
 export declare const AlertRulesWizardSection: (props: AlertRulesWizardSectionProps) => JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const BaseAlertRulesWizardSection_1 = require("./BaseAlertRulesWizardSection");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
-const CodeBlock_1 = require("../../../components/CodeBlock");
+const Tag_1 = require("../../../components/Tag");
 exports.AlertRulesWizardSection = (props) => {
     return React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, Object.assign({}, props));
 };
@@ -13,12 +13,10 @@ exports.renderAlertRulesSummary = (alertDefinition) => {
     return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: alertDefinition, renderPredicate: (contents) => {
             return (React.createElement(React.Fragment, null,
                 "Alert condition ",
-                React.createElement(CodeBlock_1.CodeBlock, null, contents)));
+                React.createElement(Tag_1.Tag, null, contents)));
         }, renderQueryExpression: (contents) => {
             return (React.createElement(React.Fragment, null,
-                "Alert when",
-                ' ',
-                React.createElement("b", null,
-                    React.createElement(CodeBlock_1.CodeBlock, null, contents))));
+                "Alert when ",
+                React.createElement(Tag_1.Tag, null, contents)));
         } }));
 };

package/src/View/Alert/Wizard/AlertWizard.js

@@ -15,10 +15,15 @@ const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstant
 const AlertDisplayWizardSection_1 = require("./AlertDisplayWizardSection");
 const BaseAlertScopeWizardSection_1 = require("./BaseAlertScopeWizardSection");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const AlertRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/AlertRedux"));
 exports.AlertWizard = (props) => {
     const [alertDefinition, setAlertDefinition] = react_1.useState(() => {
         var _a;
-        const alertDefinition = Helper_1.cloneObject(props.data);
+        const alertDefinition = props.data
+            ? Helper_1.cloneObject(props.data)
+            : ObjectFactory_1.default.CreateEmptyAlertDefinition();
         if (!alertDefinition.Rule.BooleanExpression &&
             !alertDefinition.Rule.ObservableExpression &&
             !alertDefinition.Rule.AggregationExpression &&
@@ -28,8 +33,17 @@ exports.AlertWizard = (props) => {
         alertDefinition.MessageType = (_a = alertDefinition.MessageType) !== null && _a !== void 0 ? _a : GeneralConstants_1.ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
-    const [currentSection, setCurrentSection] = react_1.useState(0);
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { moduleInfo: props.moduleInfo, data: alertDefinition, onHide: props.onCloseWizard, currentIndex: currentSection, onSectionChange: setCurrentSection, onFinish: props.onFinishWizard, sections: [
+    const dispatch = react_redux_1.useDispatch();
+    const handleFinish = () => {
+        if (props.data) {
+            dispatch(AlertRedux.AlertDefinitionEdit(alertDefinition));
+        }
+        else {
+            dispatch(AlertRedux.AlertDefinitionAdd(alertDefinition));
+        }
+        props.onCloseWizard();
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 details: (React.createElement(React.Fragment, null,
                     "Specify ",
@@ -46,16 +60,16 @@ exports.AlertWizard = (props) => {
                     React.createElement("b", null, "when"),
                     " the Alert should trigger")),
                 isValid: isValidAlertRules_1.isValidAlertRules,
-                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition }),
+                render: () => React.createElement(AlertRulesWizardSection_1.AlertRulesWizardSection, { onChange: setAlertDefinition, module: "alert" }),
                 renderSummary: AlertRulesWizardSection_1.renderAlertRulesSummary,
-                title: 'Condition',
+                title: 'Rule',
             },
             {
                 details: "Select the Alert's Message Type and Notification option",
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(AlertDisplayWizardSection_1.AlertDisplayWizardSection, { onChange: setAlertDefinition }))),
                 renderSummary: AlertDisplayWizardSection_1.renderAlertDisplaySummary,
-                title: 'Type and Display',
+                title: 'Type & Display',
             },
             {
                 details: 'Configure behaviour for the Alert',

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { BaseAlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../types';
+import { FlashingCellDefinition } from '../../../../types';
 export interface BaseAlertRulesWizardSectionProps<T> {
     onChange: (data: T) => void;
+    module: 'alert' | 'flashingCell';
+    wholeRowScope?: boolean;
     children?: React.ReactNode;
 }
-export declare const BaseAlertRulesWizardSection: <T extends BaseAlertDefinition>(props: BaseAlertRulesWizardSectionProps<T>) => JSX.Element;
+export declare const BaseAlertRulesWizardSection: <T extends AlertDefinition | FlashingCellDefinition>(props: BaseAlertRulesWizardSectionProps<T>) => JSX.Element;

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.js

@@ -7,8 +7,11 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.BaseAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
-    const wholeRowScope = api.scopeApi.scopeIsAll(data.Scope);
-    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: api.alertApi.getAlertPredicateDefsForScope(data.Scope), onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
+    const wholeRowScope = props.wholeRowScope != null ? props.wholeRowScope : api.scopeApi.scopeIsAll(data.Scope);
+    const predicateDefs = props.module == 'alert'
+        ? api.alertApi.getAlertPredicateDefsForScope(data.Scope)
+        : api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
             selectPredicate: 'Select an Alert Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { BaseAlertDefinition } from '../../../PredefinedConfig/AlertState';
-declare type BaseAlertScopeWizardSectionProps<T extends BaseAlertDefinition> = {
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { FlashingCellDefinition } from '../../../../types';
+declare type BaseAlertScopeWizardSectionProps<T extends AlertDefinition> = {
     onChange: (data: T) => void;
 };
-export declare const BaseAlertScopeWizardSection: <T extends BaseAlertDefinition>(props: BaseAlertScopeWizardSectionProps<T>) => JSX.Element;
-export declare const renderBaseAlertScopeSummary: (data: BaseAlertDefinition) => JSX.Element;
+export declare const BaseAlertScopeWizardSection: <T extends AlertDefinition>(props: BaseAlertScopeWizardSectionProps<T>) => JSX.Element;
+export declare const renderBaseAlertScopeSummary: (data: AlertDefinition | FlashingCellDefinition) => JSX.Element;
 export {};

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.js

@@ -49,8 +49,8 @@ exports.renderBaseAlertScopeSummary = (data) => {
                 : null)),
         React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in data.Scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: columnsInScope.length ? 2 : 0 }, "Changes in selected columns will trigger an alert"),
-            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
+            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(React.Fragment, null, c), toIdentifier: (c) => c.columnId })) : null)) : null),
         React.createElement(rebass_1.Box, null, 'DataTypes' in data.Scope ? (React.createElement(React.Fragment, null,
             React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, "Changes in columns of the selected data-types trigger an alert"),
-            React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: data.Scope.DataTypes, value: data.Scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
+            React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: data.Scope.DataTypes, value: data.Scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(React.Fragment, null, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
 };

package/src/View/Alert/Wizard/isValidAlertRules.d.ts

@@ -1,4 +1,3 @@
-import { BaseAlertDefinition } from '../../../PredefinedConfig/AlertState';
-import { AdaptableApi } from '../../../types';
+import { AdaptableApi, AlertDefinition } from '../../../types';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
-export declare const isValidAlertRules: (alert: BaseAlertDefinition, api: AdaptableApi, context: OnePageAdaptableWizardContextType<BaseAlertDefinition>) => true | string;
+export declare const isValidAlertRules: (alert: AlertDefinition, api: AdaptableApi, context: OnePageAdaptableWizardContextType<AlertDefinition>) => true | string;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -49,7 +49,7 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return (React.createElement(PanelWithImage_1.PanelWithImage, { header: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", bodyProps: { padding: 2 }, style: { height: '100%' } },
+        return (React.createElement(PanelWithImage_1.PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary" },
             col.dataType == Enums_1.DataType.Date ? (React.createElement(React.Fragment, null,
                 React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
                 React.createElement(rebass_1.Box, null,

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingTags.d.ts

@@ -0,0 +1,2 @@
+import { CalculatedColumnSettings } from '../../../types';
+export declare const getCalculatedColumnSettingTags: (settings: CalculatedColumnSettings) => string[];

package/src/View/CalculatedColumn/Utilities/getCalculatedColumnSettingTags.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCalculatedColumnSettingTags = void 0;
+exports.getCalculatedColumnSettingTags = (settings) => {
+    const { DataType, Width, Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable } = settings !== null && settings !== void 0 ? settings : {};
+    return [
+        DataType ? `DataType: ${DataType}` : null,
+        Width ? `Width: ${Width}px` : null,
+        Pivotable ? 'Pivotable' : null,
+        Filterable ? 'Filterable' : null,
+        Resizable ? 'Resizable' : null,
+        Groupable ? 'Groupable' : null,
+        Sortable ? 'Sortable' : null,
+        Aggregatable ? 'Aggregatable' : null,
+    ].filter(Boolean);
+};

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -3,6 +3,7 @@ import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
 export declare type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
+    isEdit: boolean;
 };
 export declare const renderCalculatedColumnSettingsSummary: (data: CalculatedColumn) => JSX.Element;
 export declare const isValidCalculatedColumnSettings: (data: CalculatedColumn, api: AdaptableApi) => true | string;