@adaptabletools/adaptable 14.0.2 → 14.0.4

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

@@ -89,14 +89,21 @@ exports.renderAlertBehaviourSummary = renderAlertBehaviourSummary;
 const AlertBehaviourWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const { AlertProperties = {} } = data;
-    const rowAddedAlert = api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(data);
     const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
-    const cellChangedAlert = !rowAddedAlert && !rowRemovedAlert;
-    const hasPreventCellEdit = cellChangedAlert;
-    const hasHighlightCell = cellChangedAlert;
-    const hasHighlightRow = cellChangedAlert || rowAddedAlert;
-    const hasJumpToCell = cellChangedAlert;
-    const hasJumpToRow = cellChangedAlert || rowAddedAlert;
+    // data change only
+    const hasPreventCellEdit = props.alertType === 'DataChange';
+    // except row change
+    const hasHighlightCell = props.alertType !== 'RowChange';
+    // except row removed
+    const hasHighlightRow = !rowRemovedAlert;
+    // except row changed
+    const hasJumpToCell = props.alertType !== 'RowChange';
+    // for all
+    const showInSeparateDiv = true;
+    // for all
+    const logToConsole = true;
+    // except row removed
+    const hasJumpToRow = !rowRemovedAlert;
     const onChange = (AlertProperties) => {
         props.onChange(Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), AlertProperties) }));
     };
@@ -122,14 +129,14 @@ const AlertBehaviourWizardSection = (props) => {
             hasJumpToRow && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
                     onChange({ JumpToRow });
                 } }, "Jump To Row")),
-            React.createElement(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
+            showInSeparateDiv && (React.createElement(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
                     onChange({ ShowInDiv });
                 } },
                 "Show in separate ",
                 React.createElement(CodeBlock_1.CodeBlock, null, `<div />`),
-                " element"),
-            React.createElement(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
+                " element")),
+            logToConsole && (React.createElement(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
                     onChange({ LogToConsole });
-                } }, "Log To Console"))));
+                } }, "Log To Console")))));
 };
 exports.AlertBehaviourWizardSection = AlertBehaviourWizardSection;

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

@@ -3,11 +3,13 @@ import { AlertButton } from '../../../PredefinedConfig/AlertState';
 import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AlertFormContext } from '../../../types';
+import { AlertType } from '../Utilities/getAlertType';
 declare type AlertButtonsEditorProps = {
     AlertButtons: AlertButton<AlertFormContext>[];
     onChange: (buttons: AlertButton<AlertFormContext>[]) => void;
     api: AdaptableApi;
     adaptableAlert: AdaptableAlert;
+    alertType: AlertType;
 };
 export declare const AlertButtonsEditor: (props: AlertButtonsEditorProps) => JSX.Element;
 export {};

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

@@ -21,11 +21,18 @@ const AlertButtonsEditor = (props) => {
     const rowAddedAlert = api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
     const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
     const cellChangedAlert = !rowAddedAlert && !rowRemovedAlert;
-    const hasHighlightCell = cellChangedAlert;
-    const hasHighlightRow = cellChangedAlert || rowAddedAlert;
-    const hasJumpToCell = cellChangedAlert;
-    const hasJumpToRow = cellChangedAlert || rowAddedAlert;
-    const hasUndo = cellChangedAlert;
+    // except row change
+    const hasHighlightCell = props.alertType !== 'RowChange';
+    // all, except row removed
+    const hasHighlightRow = !rowRemovedAlert;
+    // except row removed
+    const hasJumpToCell = props.alertType !== 'RowChange';
+    // all
+    const hasJumpToRow = !rowRemovedAlert;
+    // all
+    const hasSuspend = true;
+    // only data change
+    const hasUndo = props.alertType === 'DataChange';
     const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
     const buttonActions = [];
     if (hasHighlightRow) {
@@ -43,7 +50,9 @@ const AlertButtonsEditor = (props) => {
     if (hasUndo) {
         buttonActions.push('undo');
     }
-    buttonActions.push('suspend');
+    if (hasSuspend) {
+        buttonActions.push('suspend');
+    }
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
             React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertType } from '../Utilities/getAlertType';
+export declare const renderAlertMessageSummary: () => JSX.Element;
+declare type AlertDisplayWizardSectionProps = {
+    onChange: (data: AlertDefinition) => void;
+    alertType: AlertType;
+};
+export declare const AlertMessageWizardSection: (props: AlertDisplayWizardSectionProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertMessageWizardSection = exports.renderAlertMessageSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const rebass_1 = require("rebass");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const renderAlertMessageSummary = () => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Text, { fontSize: 2 },
+        "Message Type ",
+        React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType)));
+};
+exports.renderAlertMessageSummary = renderAlertMessageSummary;
+const AlertMessageWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const messageType = data.MessageType;
+    const messageText = api.alertApi.internalApi.getAlertDescription(data);
+    const messageHeader = data.MessageHeader;
+    const onMessageTextChange = (e) => {
+        const { value } = e.target;
+        props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
+    };
+    const onMessageHeaderChange = (e) => {
+        const { value } = e.target;
+        props.onChange(Object.assign(Object.assign({}, data), { MessageHeader: value }));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { MessageType }));
+                    } },
+                    React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
+                ' ',
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
+                        React.createElement(AdaptableInput_1.default, { placeholder: "use defaults", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader, 
+                            // placeholder="defaults to column name"
+                            onChange: (e) => onMessageHeaderChange(e) })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Message" },
+                        React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageText, onChange: (e) => onMessageTextChange(e) })))))));
+};
+exports.AlertMessageWizardSection = AlertMessageWizardSection;

package/src/View/Alert/Wizard/{AlertDisplayWizardSection.d.ts → AlertNotificationWizardSection.d.ts}

@@ -2,15 +2,17 @@ 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;
+import { AlertType } from '../Utilities/getAlertType';
+export declare const renderAlertNotificationSummary: () => JSX.Element;
 interface AlertPreviewProps extends BoxProps {
     api: AdaptableApi;
     alertDefinition: AlertDefinition;
     focusFirstButton?: boolean;
 }
 export declare const AlertPreview: React.FunctionComponent<AlertPreviewProps>;
-export declare const AlertDisplayWizardSection: (props: AlertDisplayWizardSectionProps) => JSX.Element;
+declare type AlertNotificationWizardSectionProps = {
+    onChange: (data: AlertDefinition) => void;
+    alertType: AlertType;
+};
+export declare const AlertNotificationWizardSection: (props: AlertNotificationWizardSectionProps) => JSX.Element;
 export {};

package/src/View/Alert/Wizard/{AlertDisplayWizardSection.js → AlertNotificationWizardSection.js}

@@ -1,19 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertDisplayWizardSection = exports.AlertPreview = exports.renderAlertDisplaySummary = void 0;
+exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAlertNotificationSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
-const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CheckBox_1 = require("../../../components/CheckBox");
 const rebass_1 = require("rebass");
 const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
-const CodeBlock_1 = require("../../../components/CodeBlock");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const DEFAULT_BUTTONS = [
     {
         Label: 'OK',
@@ -22,18 +18,15 @@ const DEFAULT_BUTTONS = [
         },
     },
 ];
-const renderAlertDisplaySummary = () => {
+const renderAlertNotificationSummary = () => {
     var _a;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (!((_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification)) {
-        return (React.createElement(rebass_1.Text, { fontSize: 2 },
-            "Alert type ",
-            React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType),
-            ". No alert popup will be displayed"));
+        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Alert Notification will be displayed");
     }
     return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
 };
-exports.renderAlertDisplaySummary = renderAlertDisplaySummary;
+exports.renderAlertNotificationSummary = renderAlertNotificationSummary;
 const AlertPreview = (_a) => {
     var { alertDefinition, api, focusFirstButton } = _a, boxProps = tslib_1.__rest(_a, ["alertDefinition", "api", "focusFirstButton"]);
     const mapButtons = React.useCallback((button) => {
@@ -59,62 +52,31 @@ const AlertPreview = (_a) => {
         React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
 };
 exports.AlertPreview = AlertPreview;
-const AlertDisplayWizardSection = (props) => {
-    var _a, _b, _c, _d, _e;
+const AlertNotificationWizardSection = (props) => {
+    var _a, _b, _c, _d;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const messageType = data.MessageType;
-    const messageText = api.alertApi.internalApi.getAlertDescription(data);
-    const messageHeader = (_a = data.MessageHeader) !== null && _a !== void 0 ? _a : '';
     const adaptableAlert = {
         alertType: 'generic',
         header: data.MessageType,
         message: '',
         alertDefinition: data,
     };
-    const onMessageTextChange = (e) => {
-        const { value } = e.target;
-        props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
-    };
-    const onMessageHeaderChange = (e) => {
-        const { value } = e.target;
-        props.onChange(Object.assign(Object.assign({}, data), { MessageHeader: value }));
-    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
-                        props.onChange(Object.assign(Object.assign({}, data), { MessageType }));
-                    } },
-                    React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
-                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
-                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
-                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
-        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Trigger and Condition)"),
-                ' ',
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageHeader, onChange: (e) => onMessageHeaderChange(e) })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Message" },
-                        React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageText, onChange: (e) => onMessageTextChange(e) }))))),
         React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Display options"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(CheckBox_1.CheckBox, { checked: (_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification, onChange: (DisplayNotification) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
                         const newAlertDefinition = Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), { DisplayNotification }) });
                         if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
                             delete newAlertDefinition.AlertForm.Buttons;
                         }
                         props.onChange(newAlertDefinition);
                     } }, "Show a Notification when Alert is triggered (with action buttons)"),
-                ((_c = data.AlertProperties) === null || _c === void 0 ? void 0 : _c.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { AlertButtons: ((_d = data.AlertForm) === null || _d === void 0 ? void 0 : _d.Buttons) || DEFAULT_BUTTONS, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: ((_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons) || DEFAULT_BUTTONS, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
                     } }))) : null)),
-        ((_e = data.AlertProperties) === null || _e === void 0 ? void 0 : _e.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Alert preview"),
+        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", 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(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };
-exports.AlertDisplayWizardSection = AlertDisplayWizardSection;
+exports.AlertNotificationWizardSection = AlertNotificationWizardSection;

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
-declare type AlertRulesWizardSectionProps = {
+import { AlertType } from '../Utilities/getAlertType';
+export declare const getRuleStepDescription: (alertType: AlertType) => "" | JSX.Element;
+export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;
+export interface AlertRulesWizardSectionProps {
     onChange: (data: AlertDefinition) => void;
     module: 'alert';
-};
+    wholeRowScope?: boolean;
+    alertType: AlertType | null;
+}
 export declare const AlertRulesWizardSection: (props: AlertRulesWizardSectionProps) => JSX.Element;
-export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;
-export {};

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

@@ -1,19 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderAlertRulesSummary = exports.AlertRulesWizardSection = void 0;
+exports.AlertRulesWizardSection = exports.renderAlertRulesSummary = exports.getRuleStepDescription = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const BaseAlertRulesWizardSection_1 = require("./BaseAlertRulesWizardSection");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const Tag_1 = require("../../../components/Tag");
-const AlertRulesWizardSection = (props) => {
-    return React.createElement(BaseAlertRulesWizardSection_1.BaseAlertRulesWizardSection, Object.assign({}, props));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const getAvailablePredicates_1 = require("../Utilities/getAvailablePredicates");
+const Tabs_1 = require("../../../components/Tabs");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const rebass_1 = require("rebass");
+const getRuleStepDescription = (alertType) => {
+    switch (alertType) {
+        case 'DataChange':
+            return (React.createElement(React.Fragment, null,
+                "Build the Rule ",
+                React.createElement("b", null, "when"),
+                " the Alert should trigger, using a Predicate or a Query"));
+        case 'RowChange':
+            return React.createElement(React.Fragment, null, "Specify which type of Row Change will trigger the Alert");
+        case 'Aggregation':
+            return React.createElement(React.Fragment, null, "Build an Aggregation Boolean Rule to specify when the Alert should trigger");
+        case 'Observable':
+            return React.createElement(React.Fragment, null, "Build an Observable Rule to specify when the Alert should trigger");
+    }
+    return '';
 };
-exports.AlertRulesWizardSection = AlertRulesWizardSection;
+exports.getRuleStepDescription = getRuleStepDescription;
 const renderAlertRulesSummary = (alertDefinition) => {
     return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: alertDefinition, renderPredicate: (contents) => {
             return (React.createElement(React.Fragment, null,
-                "Alert condition ",
+                "Alert Rule ",
                 React.createElement(Tag_1.Tag, null, contents)));
         }, renderQueryExpression: (contents) => {
             return (React.createElement(React.Fragment, null,
@@ -22,3 +39,46 @@ const renderAlertRulesSummary = (alertDefinition) => {
         } }));
 };
 exports.renderAlertRulesSummary = renderAlertRulesSummary;
+const RowChangeEditor = (props) => {
+    var _a, _b, _c;
+    const predicate = (_c = (_b = (_a = props.alert.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : { PredicateId: null };
+    const handleChange = (predicateId) => {
+        props.onChange(Object.assign(Object.assign({}, props.alert), { Rule: {
+                Predicates: [{ PredicateId: predicateId }],
+            } }));
+    };
+    return (React.createElement(rebass_1.Box, { p: 2 },
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Row Change"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.default, { onClick: () => handleChange('AddedRow'), checked: predicate.PredicateId === 'AddedRow' }, "Row Added"),
+                React.createElement(Radio_1.default, { onClick: () => handleChange('RemovedRow'), checked: predicate.PredicateId === 'RemovedRow' }, "Row Removed")))));
+};
+const AlertRulesWizardSection = (props) => {
+    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const predicateDefs = (0, getAvailablePredicates_1.getAvailablePredicateDefinitions)(api, data.Scope, props.alertType);
+    const showObservable = props.alertType === 'Observable';
+    const showAggregation = props.alertType === 'Aggregation';
+    const showBoolean = props.alertType === 'DataChange';
+    const showPredicate = props.alertType === 'DataChange' || props.alertType === 'RowChange';
+    const enablePredicateColumnId = props.alertType === 'DataChange';
+    if (props.alertType === 'RowChange') {
+        return React.createElement(RowChangeEditor, { alert: data, onChange: props.onChange });
+    }
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => (0, getAvailablePredicates_1.getAvailablePredicateDefinitions)(api, { ColumnIds: [colId] }, props.alertType), onChange: props.onChange, showAggregation: showAggregation, showObservable: showObservable, showBoolean: showBoolean, showPredicate: showPredicate, descriptions: {
+            selectPredicate: 'Create an Alert Rule - to be applied when data changes',
+            useBooleanQuery: (React.createElement(React.Fragment, null,
+                "Use an BooleanQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
+            useObservableQuery: (React.createElement(React.Fragment, null,
+                "Use an ObservableQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
+            useAggregationQuery: (React.createElement(React.Fragment, null,
+                "Use an AggregatedBooleanQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+        } }));
+};
+exports.AlertRulesWizardSection = AlertRulesWizardSection;

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertType } from '../Utilities/getAlertType';
 declare type AlertScopeWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
+    alertType: AlertType;
 };
 export declare const AlertScopeWizardSection: (props: AlertScopeWizardSectionProps) => JSX.Element;
 export {};

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

@@ -3,8 +3,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const BaseAlertScopeWizardSection_1 = require("./BaseAlertScopeWizardSection");
+const rebass_1 = require("rebass");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AlertScopeWizardSection = (props) => {
-    return React.createElement(BaseAlertScopeWizardSection_1.BaseAlertScopeWizardSection, Object.assign({}, props));
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    let disableDataTypes = true;
+    let disableColumns = true;
+    if (props.alertType === 'DataChange') {
+        disableDataTypes = false;
+        disableColumns = false;
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+        React.createElement(NewScopeComponent_1.NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
+                rowScope: 'Changes in any Column in the row will trigger an Alert',
+                columnScope: 'Changes in selected Columns will trigger an Alert',
+                dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
+            }, scope: data.Scope, updateScope: (Scope) => {
+                const newData = Object.assign(Object.assign({}, data), { Scope });
+                if (newData.Rule.Predicates) {
+                    // when scope is changed, reset the rule to predicate of any
+                    // if it was set to a predicate before
+                    newData.Rule = {
+                        Predicates: [{ PredicateId: 'Any' }],
+                    };
+                }
+                if (newData.Rule.ObservableExpression !== undefined && !api.scopeApi.scopeIsAll(Scope)) {
+                    // if it had observable expression and the scope is changed to partial
+                    // we need to reset to not be an observable expression, as observable is not supported
+                    // for partial scope
+                    delete newData.Rule.ObservableExpression;
+                    newData.Rule.BooleanExpression = '';
+                }
+                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                    !api.scopeApi.scopeIsAll(Scope)) {
+                    // if it had aggregation expression and the scope is changed to partial
+                    // we need to reset to not be an aggregation expression, as aggregation is not supported
+                    // for partial scope
+                    delete newData.Rule.AggregatedBooleanExpression;
+                    newData.Rule.BooleanExpression = '';
+                }
+                props.onChange(newData);
+            } })));
 };
 exports.AlertScopeWizardSection = AlertScopeWizardSection;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AlertType } from '../Utilities/getAlertType';
+export declare const renderAlertTypeSummary: (alertType: AlertType) => JSX.Element;
+declare type AlertBehaviourWizardSectionProps = {
+    onAlertTypeChange: (alertType: AlertType) => void;
+    alertType: AlertType | null;
+};
+export declare const AlertTypeWizardSection: (props: AlertBehaviourWizardSectionProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const getAlertType_1 = require("../Utilities/getAlertType");
+const rebass_1 = require("rebass");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const Tag_1 = require("../../../components/Tag");
+const renderAlertTypeSummary = (alertType) => {
+    const text = (0, getAlertType_1.getAlertTypeText)(alertType);
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(Tag_1.Tag, null, text)));
+};
+exports.renderAlertTypeSummary = renderAlertTypeSummary;
+const AlertTypeWizardSection = (props) => {
+    return (React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable })))));
+};
+exports.AlertTypeWizardSection = AlertTypeWizardSection;