@adaptabletools/adaptable-cjs 19.2.4 → 20.0.0-canary.0

package/src/View/Alert/Utilities/getAlertType.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAlertTypeText = exports.getAlertType = exports.AlertType = void 0;
+const GeneralConstants_1 = require("./../../../Utilities/Constants/GeneralConstants");
 var AlertType;
 (function (AlertType) {
     AlertType["DataChange"] = "DataChange";
@@ -8,7 +9,7 @@ var AlertType;
     AlertType["RowChange"] = "RowChange";
     AlertType["Aggregation"] = "Aggregation";
     AlertType["Observable"] = "Observable";
-})(AlertType = exports.AlertType || (exports.AlertType = {}));
+})(AlertType || (exports.AlertType = AlertType = {}));
 /**
  * Based on alert shape the type is derived.
  * In the future the alert will get a type property.
@@ -16,27 +17,25 @@ var AlertType;
  * @param alert
  */
 const getAlertType = (alert) => {
-    var _a, _b;
     if (alert.Rule.ObservableExpression) {
+        if (alert.Rule.ObservableExpression.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_ADDED) ||
+            alert.Rule.ObservableExpression.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_REMOVED)) {
+            return AlertType.RowChange;
+        }
         return AlertType.Observable;
     }
     if (alert.Rule.AggregatedBooleanExpression) {
         return AlertType.Aggregation;
     }
     if (alert.Rule.BooleanExpression) {
-        if ((_a = alert.AlertProperties) === null || _a === void 0 ? void 0 : _a.PreventEdit) {
+        if (alert.AlertProperties?.PreventEdit) {
             return AlertType.Validation;
         }
         return AlertType.DataChange;
     }
     const predicates = alert.Rule.Predicates;
     if (predicates) {
-        if (predicates.some((predicate) => ['AddedRow', 'RemovedRow'].includes(predicate.PredicateId))) {
-            return AlertType.RowChange;
-        }
-        else {
-            return ((_b = alert.AlertProperties) === null || _b === void 0 ? void 0 : _b.PreventEdit) ? AlertType.Validation : AlertType.DataChange;
-        }
+        return alert.AlertProperties?.PreventEdit ? AlertType.Validation : AlertType.DataChange;
     }
     // the object is not a valid alert
     return null;

package/src/View/Alert/Utilities/getAvailablePredicates.js

@@ -4,16 +4,9 @@ exports.getAvailablePredicateDefinitions = void 0;
 const getAvailablePredicateDefinitions = (api, scope, alertType) => {
     let predicateDefs = [];
     if (alertType === 'DataChange' || alertType === 'Validation') {
-        predicateDefs = api.alertApi.internalApi
-            .getAlertPredicateDefsForScope(scope)
-            .filter((predicateDef) => !['AddedRow', 'RemovedRow'].includes(predicateDef.id));
+        predicateDefs = api.alertApi.internalApi.getAlertPredicateDefsForScope(scope);
         predicateDefs = [...predicateDefs].sort((a, b) => a.id === 'AnyChange' ? -1 : b.id === 'AnyChange' ? 1 : 0);
     }
-    else if (alertType === 'RowChange') {
-        predicateDefs = api.alertApi.internalApi
-            .getAlertPredicateDefsForScope(scope)
-            .filter((predicateDef) => ['AddedRow', 'RemovedRow'].includes(predicateDef.id));
-    }
     return predicateDefs;
 };
 exports.getAvailablePredicateDefinitions = getAvailablePredicateDefinitions;

package/src/View/Alert/Utilities/getDefaultAlertDefinition.d.ts

@@ -6,7 +6,7 @@ import { AlertType } from './getAlertType';
  */
 export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinition, type: AlertType) => {
     Uuid: string;
-    Scope: import("../../../types").ColumnScope<import("../../../PredefinedConfig/Common/ColumnScope").ScopeDataType>;
+    Scope: import("../../../types").ColumnScope;
     Rule: ({
         Predicates?: never;
     } & (({
@@ -32,6 +32,7 @@ export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinitio
     AlertForm?: string | import("../../../types").AlertButtonForm;
     IsSuspended?: boolean;
     Source?: "Config" | "User";
+    AdaptableVersion?: `${string}.${string}.${string}`;
     IsReadOnly?: boolean;
     Tags?: string[];
 };

package/src/View/Alert/Utilities/getDefaultAlertDefinition.js

@@ -9,7 +9,10 @@ const getAlertType_1 = require("./getAlertType");
  * @param type AlertType
  */
 const getDefaultAlertDefinition = (alertDefinition, type) => {
-    const newAlert = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyAlertDefinition()), { Uuid: alertDefinition.Uuid });
+    const newAlert = {
+        ...ObjectFactory_1.default.CreateEmptyAlertDefinition(),
+        Uuid: alertDefinition.Uuid,
+    };
     // can only be all
     if (type === getAlertType_1.AlertType.Observable ||
         type === getAlertType_1.AlertType.Aggregation ||
@@ -20,11 +23,7 @@ const getDefaultAlertDefinition = (alertDefinition, type) => {
     }
     if (type === getAlertType_1.AlertType.RowChange) {
         newAlert.Rule = {
-            Predicates: [
-                {
-                    PredicateId: 'AddedRow',
-                },
-            ],
+            ObservableExpression: 'ROW_ADDED()',
         };
     }
     if (type === getAlertType_1.AlertType.Validation) {

package/src/View/Alert/Utilities/mapAlertDefinition.js

@@ -2,29 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mapAlertDefinition = void 0;
 const mapAlertDefinition = (api, alertDefinition) => {
-    var _a;
     const isRemovedRowChangeAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
-    const mapValidButtonActions = (alertAction) => {
+    const mapValidButtonActions = (alertCommand) => {
         if (isRemovedRowChangeAlert) {
-            if (alertAction === 'highlight-row' || alertAction === 'jump-to-row') {
+            if (alertCommand === 'highlight-row' || alertCommand === 'jump-to-row') {
                 return null;
             }
-            return alertAction;
+            return alertCommand;
         }
     };
     // the only case needed is when changing from AddedRow to RemovedRow
     // map FormButton Actions
     if (alertDefinition.AlertForm && typeof alertDefinition.AlertForm !== 'string') {
-        const alertButtons = (_a = alertDefinition.AlertForm) === null || _a === void 0 ? void 0 : _a.Buttons;
-        alertButtons === null || alertButtons === void 0 ? void 0 : alertButtons.forEach((alertButton) => {
-            const alertAction = alertButton.Action;
-            if (Array.isArray(alertAction)) {
-                alertButton.Action = alertAction
+        const alertButtons = alertDefinition.AlertForm?.Buttons;
+        alertButtons?.forEach((alertButton) => {
+            const alertCommand = alertButton.Command;
+            if (Array.isArray(alertCommand)) {
+                alertButton.Command = alertCommand
                     .map(mapValidButtonActions)
                     .filter(Boolean);
             }
             else {
-                alertButton.Action = mapValidButtonActions(alertAction);
+                alertButton.Command = mapValidButtonActions(alertCommand);
             }
         });
     }

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

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertBehaviourWizardSummary: (alertDefinition: AlertDefinition) => JSX.Element;
-export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => JSX.Element;
+export declare const renderAlertBehaviourWizardSummary: (alertDefinition: AlertDefinition) => React.JSX.Element;
+export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => React.JSX.Element;
 type AlertBehaviourWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };
-export declare const AlertBehaviourWizardSection: (props: AlertBehaviourWizardSectionProps) => JSX.Element;
+export declare const AlertBehaviourWizardSection: (props: AlertBehaviourWizardSectionProps) => React.JSX.Element;
 export {};

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

@@ -121,7 +121,13 @@ const AlertBehaviourWizardSection = (props) => {
     // except row removed
     const hasJumpToRow = !rowRemovedAlert;
     const onChange = (AlertProperties) => {
-        props.onChange(Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), AlertProperties) }));
+        props.onChange({
+            ...data,
+            AlertProperties: {
+                ...data.AlertProperties,
+                ...AlertProperties,
+            },
+        });
     };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AlertButton } from '../../../PredefinedConfig/AlertState';
 import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
@@ -11,5 +11,5 @@ type AlertButtonsEditorProps = {
     adaptableAlert: AdaptableAlert;
     alertType: AlertType;
 };
-export declare const AlertButtonsEditor: (props: AlertButtonsEditorProps) => JSX.Element;
+export declare const AlertButtonsEditor: (props: AlertButtonsEditorProps) => React.JSX.Element;
 export {};

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

@@ -13,49 +13,73 @@ const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
 const Select_1 = require("../../../components/Select");
+const TONE_OPTIONS = [
+    {
+        label: 'Tone: Use Alert Tone',
+        value: 'text',
+    },
+    ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
+        return {
+            label: renderTone({ label: StringExtensions_1.default.CapitaliseFirstLetter(tone), value: tone }),
+            value: tone,
+        };
+    }),
+];
+function renderTone(option) {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
+        React.createElement(SimpleButton_1.default, { mr: 2, style: {
+                width: 10,
+                height: 10,
+                lineHeight: 0,
+                borderRadius: '100%',
+                background: 'currentColor',
+            }, tone: option.value, variant: "text" }),
+        option.label));
+}
 const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
         props.onChange(newButtons);
     };
     const alertDefinition = adaptableAlert.alertDefinition;
-    const rowAddedAlert = api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
-    const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
+    // const rowAddedAlert =
+    //  api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
+    const isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
     // except row change
     const hasHighlightCell = props.alertType !== 'RowChange';
     // all, except row removed
-    const hasHighlightRow = !rowRemovedAlert;
+    const hasHighlightRow = !isRowRemovedAlert;
     // except row removed
     const hasJumpToCell = props.alertType !== 'RowChange';
     // all
-    const hasJumpToRow = !rowRemovedAlert;
+    const hasJumpToRow = !isRowRemovedAlert;
     // all
     const hasSuspend = true;
     // only data change
     const hasUndo = props.alertType === 'DataChange';
     const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
-    const buttonActions = [];
+    const buttonCommands = [];
     if (hasHighlightRow) {
-        buttonActions.push('highlight-row');
+        buttonCommands.push('highlight-row');
     }
     if (hasJumpToRow) {
-        buttonActions.push('jump-to-row');
+        buttonCommands.push('jump-to-row');
     }
     if (hasHighlightCell) {
-        buttonActions.push('highlight-cell');
+        buttonCommands.push('highlight-cell');
     }
     if (hasJumpToCell) {
-        buttonActions.push('jump-to-cell');
+        buttonCommands.push('jump-to-cell');
     }
     if (hasUndo) {
-        buttonActions.push('undo');
+        buttonCommands.push('undo');
     }
     if (hasSuspend) {
-        buttonActions.push('suspend');
+        buttonCommands.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 Notification, and set Actions to perform when button is clicked"),
+            React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked"),
             React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                     onChange([
                         ...(AlertButtons || []),
@@ -68,24 +92,26 @@ const AlertButtonsEditor = (props) => {
                     ]);
                 } }, "Add")),
         AlertButtons.map((button, index) => {
-            var _a, _b;
             let buttonStyle = button.ButtonStyle;
             let buttonLabel = button.Label;
-            let btnActions = [];
-            if (button.Action && typeof button.Action === 'string') {
-                btnActions = [button.Action];
+            let btnCommands = [];
+            if (button.Command && typeof button.Command === 'string') {
+                btnCommands = [button.Command];
             }
-            else if (button.Action && Array.isArray(button.Action)) {
-                btnActions = button.Action;
+            else if (button.Command && Array.isArray(button.Command)) {
+                btnCommands = button.Command;
             }
-            // filter out the adaptable standard actions
-            const btnUserFunctions = btnActions.filter((action) => !buttonActions.includes(action));
+            // filter out the adaptable standard commands
+            const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
             const setVariant = (variant) => {
                 onChange(AlertButtons.map((btn, i) => {
                     if (i === index) {
-                        const buttonStyle = Object.assign({}, btn.ButtonStyle);
+                        const buttonStyle = { ...btn.ButtonStyle };
                         buttonStyle.variant = variant;
-                        return Object.assign(Object.assign({}, btn), { ButtonStyle: buttonStyle });
+                        return {
+                            ...btn,
+                            ButtonStyle: buttonStyle,
+                        };
                     }
                     return btn;
                 }));
@@ -93,42 +119,51 @@ const AlertButtonsEditor = (props) => {
             const setTone = (tone) => {
                 onChange(AlertButtons.map((btn, i) => {
                     if (i === index) {
-                        const buttonStyle = Object.assign({}, btn.ButtonStyle);
+                        const buttonStyle = { ...btn.ButtonStyle };
                         if (tone == null) {
                             delete buttonStyle.tone;
                         }
                         else {
                             buttonStyle.tone = tone;
                         }
-                        return Object.assign(Object.assign({}, btn), { ButtonStyle: buttonStyle });
+                        return {
+                            ...btn,
+                            ButtonStyle: buttonStyle,
+                        };
                     }
                     return btn;
                 }));
             };
-            const handleActionChange = (checked, actionName) => {
-                let actions = btnActions;
+            const handleCommandChange = (checked, commandName) => {
+                let commands = btnCommands;
                 if (!checked) {
-                    // remove current action
-                    actions = actions.filter((a) => a !== actionName);
+                    // remove current Command
+                    commands = commands.filter((a) => a !== commandName);
                 }
                 else {
-                    actions = [...actions, actionName];
+                    commands = [...commands, commandName];
                 }
                 onChange(AlertButtons.map((btn, i) => {
                     if (i === index) {
-                        return Object.assign(Object.assign({}, btn), { Action: actions.length ? actions : undefined });
+                        return {
+                            ...btn,
+                            Command: commands.length ? commands : undefined,
+                        };
                     }
                     return btn;
                 }));
             };
             let iconSelector = null;
             if (!button.icon || (button.icon && 'name' in button.icon)) {
-                iconSelector = (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? (_a = button === null || button === void 0 ? void 0 : button.icon) === null || _a === void 0 ? void 0 : _a.name : '', onChange: (iconName) => {
+                iconSelector = (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
                         onChange(AlertButtons.map((btn) => {
                             if (btn === button) {
-                                return Object.assign(Object.assign({}, btn), { icon: {
+                                return {
+                                    ...btn,
+                                    icon: {
                                         name: iconName,
-                                    } });
+                                    },
+                                };
                             }
                             return btn;
                         }));
@@ -143,7 +178,7 @@ const AlertButtonsEditor = (props) => {
                             React.createElement(Input_1.default, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
                                     onChange(AlertButtons.map((btn, i) => {
                                         if (i === index) {
-                                            return Object.assign(Object.assign({}, btn), { Label: e.target.value });
+                                            return { ...btn, Label: e.target.value };
                                         }
                                         return btn;
                                     }));
@@ -154,34 +189,24 @@ const AlertButtonsEditor = (props) => {
                                             label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
                                             value: variant,
                                         };
-                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
+                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
                                         setVariant(value);
                                     } })),
-                            React.createElement(Select_1.Select, { options: [
-                                    {
-                                        label: 'Tone: Use Alert Tone',
-                                        value: 'text',
-                                    },
-                                    ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
-                                        return {
-                                            label: StringExtensions_1.default.CapitaliseFirstLetter(tone),
-                                            value: tone,
-                                        };
-                                    }),
-                                ], renderSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
+                            React.createElement(Select_1.Select, { options: TONE_OPTIONS, onChange: (value) => {
                                     if (value === 'text') {
                                         setTone(null);
+                                        return;
                                     }
                                     setTone(value);
-                                }, value: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'text' }),
+                                }, value: buttonStyle?.tone ?? 'text' }),
                             React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
                                     onChange(AlertButtons.filter((btn) => btn !== button));
                                 } }))),
                     React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") },
-                        buttonActions.map((actionName) => {
-                            return (React.createElement(CheckBox_1.CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => handleActionChange(checked, actionName), checked: button.Action === actionName ||
-                                    (Array.isArray(button.Action) && button.Action.includes(actionName)) },
-                                React.createElement(rebass_1.Text, { fontSize: 2 }, (0, sentence_case_1.sentenceCase)(actionName))));
+                        buttonCommands.map((commandName) => {
+                            return (React.createElement(CheckBox_1.CheckBox, { key: commandName, marginRight: 3, onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
+                                    (Array.isArray(button.Command) && button.Command.includes(commandName)) },
+                                React.createElement(rebass_1.Text, { fontSize: 2 }, (0, sentence_case_1.sentenceCase)(commandName))));
                         }),
                         btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
                             React.createElement(rebass_1.Text, { fontSize: 2 },

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

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

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

@@ -28,18 +28,27 @@ const AlertMessageWizardSection = (props) => {
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const onMessageTextChange = (e) => {
         const { value } = e.target;
-        props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
+        props.onChange({
+            ...data,
+            MessageText: value,
+        });
     };
     const onMessageHeaderChange = (e) => {
         const { value } = e.target;
-        props.onChange(Object.assign(Object.assign({}, data), { MessageHeader: value }));
+        props.onChange({
+            ...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 }));
+                        props.onChange({
+                            ...data,
+                            MessageType,
+                        });
                     } },
                     React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
                     React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
@@ -52,11 +61,11 @@ const AlertMessageWizardSection = (props) => {
                 ' ',
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "use defaults", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader !== null && messageHeader !== void 0 ? messageHeader : '', 
+                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "(Use Default Header Message)", 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(Textarea_1.default, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText !== null && messageText !== void 0 ? messageText : '', onChange: (e) => onMessageTextChange(e) }))),
+                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
                 showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,

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

@@ -3,7 +3,7 @@ import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AdaptableApi } from '../../../types';
 import { BoxProps } from 'rebass';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertNotificationSummary: () => JSX.Element;
+export declare const renderAlertNotificationSummary: () => React.JSX.Element;
 interface AlertPreviewProps extends BoxProps {
     api: AdaptableApi;
     alertDefinition: AlertDefinition;
@@ -14,5 +14,5 @@ type AlertNotificationWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };
-export declare const AlertNotificationWizardSection: (props: AlertNotificationWizardSectionProps) => JSX.Element;
+export declare const AlertNotificationWizardSection: (props: AlertNotificationWizardSectionProps) => React.JSX.Element;
 export {};

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

@@ -11,43 +11,51 @@ const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAle
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const renderAlertNotificationSummary = () => {
-    var _a;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    if (!((_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification)) {
+    if (!data.AlertProperties?.DisplayNotification) {
         return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Alert Notification will be displayed");
     }
     return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
 };
 exports.renderAlertNotificationSummary = renderAlertNotificationSummary;
-const AlertPreview = (_a) => {
-    var { alertDefinition, api, focusFirstButton } = _a, boxProps = tslib_1.__rest(_a, ["alertDefinition", "api", "focusFirstButton"]);
+const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) => {
     const mapButtons = React.useCallback((button) => {
         let buttonStyle = button.ButtonStyle;
-        if (buttonStyle && buttonStyle.tone == null && (alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType)) {
-            return Object.assign(Object.assign({}, button), { ButtonStyle: Object.assign({ tone: alertDefinition.MessageType.toLowerCase() }, buttonStyle) });
+        if (buttonStyle && buttonStyle.tone == null && alertDefinition?.MessageType) {
+            return {
+                ...button,
+                ButtonStyle: {
+                    tone: alertDefinition.MessageType.toLowerCase(),
+                    ...buttonStyle,
+                },
+            };
         }
         return button;
-    }, [alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType]);
+    }, [alertDefinition?.MessageType]);
     const alertToPreview = React.useMemo(() => {
-        var _a;
         const alertForm = alertDefinition.AlertForm || api.alertApi.internalApi.getDefaultAlertNotificationForm();
         if (typeof alertForm !== 'string') {
-            alertForm.Buttons = ((_a = alertForm.Buttons) !== null && _a !== void 0 ? _a : []).map(mapButtons);
+            alertForm.Buttons = (alertForm.Buttons ?? []).map(mapButtons);
         }
         const result = {
             alertType: 'generic',
             header: api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
             message: api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
-            alertDefinition: Object.assign(Object.assign({}, alertDefinition), { AlertForm: alertForm }),
+            alertDefinition: {
+                ...alertDefinition,
+                AlertForm: alertForm,
+            },
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
+    return (React.createElement(rebass_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: {
+            border: '1px solid var(--ab-color-inputborder)',
+            ...boxProps.style,
+        } },
         React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
 };
 exports.AlertPreview = AlertPreview;
 const AlertNotificationWizardSection = (props) => {
-    var _a, _b, _c, _d;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptableAlert = {
         alertType: 'generic',
@@ -62,9 +70,14 @@ const AlertNotificationWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
-                        var _a, _b, _c;
-                        const newAlertDefinition = Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), { DisplayNotification }) });
+                React.createElement(CheckBox_1.CheckBox, { checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
+                        const newAlertDefinition = {
+                            ...data,
+                            AlertProperties: {
+                                ...data.AlertProperties,
+                                DisplayNotification,
+                            },
+                        };
                         if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
                             delete newAlertDefinition.AlertForm.Buttons;
                         }
@@ -73,17 +86,23 @@ const AlertNotificationWizardSection = (props) => {
                                 api.alertApi.internalApi.getDefaultAlertNotificationForm();
                         }
                         // make sure we have at least one button
-                        if (typeof newAlertDefinition.AlertForm === 'object' && (!((_a = newAlertDefinition.AlertForm) === null || _a === void 0 ? void 0 : _a.Buttons) || ((_c = (_b = newAlertDefinition.AlertForm) === null || _b === void 0 ? void 0 : _b.Buttons) === null || _c === void 0 ? void 0 : _c.length) === 0)) {
+                        if (typeof newAlertDefinition.AlertForm === 'object' && (!newAlertDefinition.AlertForm?.Buttons || newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
                             newAlertDefinition.AlertForm.Buttons = [
                                 api.alertApi.internalApi.getDefaultButton()
                             ];
                         }
                         props.onChange(newAlertDefinition);
                     } }, "Display a Notification when Alert is triggered (with action 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, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
-                        props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
+                data.AlertProperties?.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: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                        props.onChange({
+                            ...data,
+                            AlertForm: {
+                                ...data.AlertForm,
+                                Buttons: buttons,
+                            },
+                        });
                     } }))) : null)),
-        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
+        data.AlertProperties?.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));
 };