@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.0

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertButtonsEditor = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -10,29 +10,9 @@ const CheckBox_1 = require("../../../components/CheckBox");
 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 Flex_1 = require("../../../components/Flex");
 const sentenceCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/sentenceCase"));
-function renderCommand(command) {
-    switch (command) {
-        case 'highlight-cell':
-            return 'Highlight Cell';
-        case 'highlight-row':
-            return 'Highlight Row';
-        case 'jump-to-cell':
-            return 'Jump to Cell';
-        case 'jump-to-column':
-            return 'Jump to Column';
-        case 'jump-to-row':
-            return 'Jump to Row';
-        case 'suspend':
-            return 'Suspend';
-        case 'undo':
-            return 'Undo';
-        default:
-            return command;
-    }
-}
+const NewSelect_1 = require("../../../components/NewSelect");
 const TONE_OPTIONS = [
     {
         label: 'Tone: Use Alert Tone',
@@ -46,9 +26,7 @@ const TONE_OPTIONS = [
     }),
 ];
 function renderTone(option) {
-    return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
-        React.createElement(SimpleButton_1.default, { className: "twa:mr-2 twa:w-[10px] twa:h-[10px] twa:line-height-0 twa:rounded-[100%] twa:bg-current", tone: option.value, variant: "text" }),
-        option.label));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2 twa:w-[10px] twa:h-[10px] twa:line-height-0 twa:rounded-[100%] twa:bg-current", tone: option.value, variant: "text" }), option.label] }));
 }
 const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
@@ -97,145 +75,120 @@ const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa: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 || []),
-                        {
-                            Label: 'OK',
-                            ButtonStyle: {
-                                variant: 'raised',
-                            },
-                        },
-                    ]);
-                } }, "Add")),
-        AlertButtons.map((button, index) => {
-            let buttonStyle = button.ButtonStyle;
-            let buttonLabel = button.Label;
-            let btnCommands = [];
-            if (button.Command && typeof button.Command === 'string') {
-                btnCommands = [button.Command];
-            }
-            else if (button.Command && Array.isArray(button.Command)) {
-                btnCommands = button.Command;
-            }
-            // 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 = { ...btn.ButtonStyle };
-                        buttonStyle.variant = variant;
-                        return {
-                            ...btn,
-                            ButtonStyle: buttonStyle,
-                        };
-                    }
-                    return btn;
-                }));
-            };
-            const setTone = (tone) => {
-                onChange(AlertButtons.map((btn, i) => {
-                    if (i === index) {
-                        const buttonStyle = { ...btn.ButtonStyle };
-                        if (tone == null) {
-                            delete buttonStyle.tone;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2", children: "Add Buttons to the Alert Notification, and set Actions to perform when the Button is clicked" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "plus", onClick: () => {
+                            onChange([
+                                ...(AlertButtons || []),
+                                {
+                                    Label: 'OK',
+                                    ButtonStyle: {
+                                        variant: 'raised',
+                                    },
+                                },
+                            ]);
+                        }, children: "Add" })] }), AlertButtons.map((button, index) => {
+                let buttonStyle = button.ButtonStyle;
+                let buttonLabel = button.Label;
+                let btnCommands = [];
+                if (button.Command && typeof button.Command === 'string') {
+                    btnCommands = [button.Command];
+                }
+                else if (button.Command && Array.isArray(button.Command)) {
+                    btnCommands = button.Command;
+                }
+                // 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 = { ...btn.ButtonStyle };
+                            buttonStyle.variant = variant;
+                            return {
+                                ...btn,
+                                ButtonStyle: buttonStyle,
+                            };
                         }
-                        else {
-                            buttonStyle.tone = tone;
+                        return btn;
+                    }));
+                };
+                const setTone = (tone) => {
+                    onChange(AlertButtons.map((btn, i) => {
+                        if (i === index) {
+                            const buttonStyle = { ...btn.ButtonStyle };
+                            if (tone == null) {
+                                delete buttonStyle.tone;
+                            }
+                            else {
+                                buttonStyle.tone = tone;
+                            }
+                            return {
+                                ...btn,
+                                ButtonStyle: buttonStyle,
+                            };
                         }
-                        return {
-                            ...btn,
-                            ButtonStyle: buttonStyle,
-                        };
+                        return btn;
+                    }));
+                };
+                const handleCommandChange = (checked, commandName) => {
+                    let commands = btnCommands;
+                    if (!checked) {
+                        // remove current Command
+                        commands = commands.filter((a) => a !== commandName);
                     }
-                    return btn;
-                }));
-            };
-            const handleCommandChange = (checked, commandName) => {
-                let commands = btnCommands;
-                if (!checked) {
-                    // remove current Command
-                    commands = commands.filter((a) => a !== commandName);
-                }
-                else {
-                    commands = [...commands, commandName];
-                }
-                onChange(AlertButtons.map((btn, i) => {
-                    if (i === index) {
-                        return {
-                            ...btn,
-                            Command: commands.length ? commands : undefined,
-                        };
+                    else {
+                        commands = [...commands, commandName];
                     }
-                    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 ? button?.icon?.name : '', onChange: (iconName) => {
-                        onChange(AlertButtons.map((btn) => {
-                            if (btn === button) {
-                                return {
-                                    ...btn,
-                                    icon: {
-                                        name: iconName,
-                                    },
-                                };
-                            }
-                            return btn;
-                        }));
-                    } }));
-            }
-            return (React.createElement(Flex_1.Box, { key: index, className: "twa:ml-3", style: {
-                    borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
-                } },
-                React.createElement(FormLayout_1.default, { className: "twa:mb-2 twa:pt-2" },
-                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2 twa:whitespace-nowrap" }, "Button Text") },
-                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { value: buttonLabel, className: "twa:mr-2 twa:w-[80px]", onChange: (e) => {
-                                    onChange(AlertButtons.map((btn, i) => {
-                                        if (i === index) {
-                                            return { ...btn, Label: e.target.value };
-                                        }
-                                        return btn;
-                                    }));
-                                } }),
-                            React.createElement(Select_1.Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
+                    onChange(AlertButtons.map((btn, i) => {
+                        if (i === index) {
+                            return {
+                                ...btn,
+                                Command: commands.length ? commands : undefined,
+                            };
+                        }
+                        return btn;
+                    }));
+                };
+                let iconSelector = null;
+                if (!button.icon || (button.icon && 'name' in button.icon)) {
+                    iconSelector = ((0, jsx_runtime_1.jsx)(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? button?.icon?.name : '', onChange: (iconName) => {
+                            onChange(AlertButtons.map((btn) => {
+                                if (btn === button) {
                                     return {
-                                        label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
-                                        value: variant,
+                                        ...btn,
+                                        icon: {
+                                            name: iconName,
+                                        },
                                     };
-                                }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
-                                    setVariant(value);
-                                } }),
-                            React.createElement(Select_1.Select, { className: "twa:ml-2", options: TONE_OPTIONS, onChange: (value) => {
-                                    if (value === 'text') {
-                                        setTone(null);
-                                        return;
-                                    }
-                                    setTone(value);
-                                }, value: buttonStyle?.tone ?? 'text' }),
-                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, className: "twa:ml-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(Flex_1.Box, { className: "twa:text-2" }, "Actions") },
-                        buttonCommands.map((commandName) => {
-                            return (React.createElement(CheckBox_1.CheckBox, { key: commandName, className: "twa:mr-3", onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
-                                    (Array.isArray(button.Command) && button.Command.includes(commandName)) },
-                                React.createElement(Flex_1.Box, { className: "twa:text-2" }, (0, sentenceCase_1.default)(commandName))));
-                        }),
-                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
-                            React.createElement(Flex_1.Box, { className: "twa:text-2" },
-                                "User function",
-                                btnUserFunctions.length > 1 ? 's' : '',
-                                ":",
-                                ' ',
-                                btnUserFunctions.join(', ')))) : null),
-                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Icon") },
-                        React.createElement(Flex_1.Box, null, iconSelector))))));
-        })));
+                                }
+                                return btn;
+                            }));
+                        } }));
+                }
+                return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:ml-3 ${index ? 'twa:border-t twa:border-dashed twa:border-input-border' : ''}`, children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:mb-2 twa:pt-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:whitespace-nowrap", children: "Button Text" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { value: buttonLabel, className: "twa:mr-2 twa:w-[80px]", onChange: (e) => {
+                                                onChange(AlertButtons.map((btn, i) => {
+                                                    if (i === index) {
+                                                        return { ...btn, Label: e.target.value };
+                                                    }
+                                                    return btn;
+                                                }));
+                                            } }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
+                                                return {
+                                                    label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
+                                                    value: variant,
+                                                };
+                                            }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
+                                                setVariant(value);
+                                            } }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:ml-2", items: TONE_OPTIONS, onValueChange: (value) => {
+                                                if (value === 'text') {
+                                                    setTone(null);
+                                                    return;
+                                                }
+                                                setTone(value);
+                                            }, value: buttonStyle?.tone ?? 'text' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, className: "twa:ml-1", variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                                                onChange(AlertButtons.filter((btn) => btn !== button));
+                                            } })] }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Actions" }), children: [buttonCommands.map((commandName) => {
+                                        return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:mr-3", onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
+                                                (Array.isArray(button.Command) && button.Command.includes(commandName)), children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: (0, sentenceCase_1.default)(commandName) }) }, commandName));
+                                    }), btnUserFunctions.length ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: true, disabled: true, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ":", ' ', btnUserFunctions.join(', ')] }) })) : null] }), iconSelector && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Icon" }), children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: iconSelector }) }))] }) }, index));
+            })] }));
 };
 exports.AlertButtonsEditor = AlertButtonsEditor;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const renderAlertMessageSummary: () => React.JSX.Element;
+export declare const renderAlertMessageSummary: (alertType?: AlertType) => React.JSX.Element;
 type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;

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

@@ -2,29 +2,34 @@
 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 jsx_runtime_1 = require("react/jsx-runtime");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const CodeBlock_1 = require("../../../components/CodeBlock");
+const Tag_1 = require("../../../components/Tag");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const getAlertType_1 = require("../Utilities/getAlertType");
 const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
 const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Flex_1 = require("../../../components/Flex");
-const renderAlertMessageSummary = () => {
+const renderAlertMessageSummary = (alertType) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
-        "Message Type ",
-        React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType)));
+    if (alertType === getAlertType_1.AlertType.Scheduled) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Message Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageType })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Header: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageHeader || 'Not specified' })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Message: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageText || 'Not specified' })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Message Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.MessageType })] }));
 };
 exports.renderAlertMessageSummary = renderAlertMessageSummary;
 const AlertMessageWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const messageType = data.MessageType;
-    const messageText = api.alertApi.internalApi.getAlertDescriptionForDataChange(data);
-    const messageHeader = data.MessageHeader;
+    const isScheduled = props.alertType === getAlertType_1.AlertType.Scheduled;
+    const messageText = isScheduled
+        ? data.MessageText ?? ''
+        : api.alertApi.internalApi.getAlertDescriptionForDataChange(data);
+    const messageHeader = data.MessageHeader ?? '';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const onMessageTextChange = (e) => {
         const { value } = e.target;
@@ -40,33 +45,15 @@ const AlertMessageWizardSection = (props) => {
             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({
-                            ...data,
-                            MessageType,
-                        });
-                    } },
-                    React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Info" }, "Info"),
-                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Success" }, "Success"),
-                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Warning" }, "Warning"),
-                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Error" }, "Error")))),
-        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2" }, "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(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "(Use Default Header Message)", 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, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
-                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
-                    React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }),
-                    "See how to create dynamic Alert Messages using placeholders"))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "message-type", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Message Type" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
+                                props.onChange({
+                                    ...data,
+                                    MessageType,
+                                });
+                            }, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-1", value: "Info", children: "Info" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", value: "Success", children: "Success" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", value: "Warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", value: "Error", children: "Error" })] }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Message Text" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2", children: isScheduled
+                                    ? 'Enter the header and message shown when this scheduled alert fires.'
+                                    : 'Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)' }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Header", children: (0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: isScheduled ? 'Enter header (required)' : '(Use Default Header Message)', type: 'text', autoFocus: false, value: messageHeader, 
+                                            // placeholder="defaults to column name"
+                                            onChange: (e) => onMessageHeaderChange(e) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Message", children: (0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, placeholder: isScheduled ? 'Enter message (required)' : undefined, value: messageText, onChange: (e) => onMessageTextChange(e) }) })] }), showDocumentationLinks && !isScheduled && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }), "See how to create dynamic Alert Messages using placeholders"] }))] })] })] }));
 };
 exports.AlertMessageWizardSection = AlertMessageWizardSection;

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

@@ -2,20 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAlertNotificationSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CheckBox_1 = require("../../../components/CheckBox");
 const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
+const getAlertType_1 = require("../Utilities/getAlertType");
+const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAlertHelper");
+const alertFormHelper_1 = require("../../../Utilities/Helpers/alertFormHelper");
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const renderAlertNotificationSummary = () => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (!data.AlertProperties?.DisplayNotification) {
-        return React.createElement(Flex_1.Box, { className: "twa:text-2" }, "No Alert Notification will be displayed");
+        return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "No Alert Notification will be displayed" });
     }
-    return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
+    return (0, jsx_runtime_1.jsx)(exports.AlertPreview, { api: api, alertDefinition: data });
 };
 exports.renderAlertNotificationSummary = renderAlertNotificationSummary;
 const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) => {
@@ -33,80 +37,109 @@ const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) =
         return button;
     }, [alertDefinition?.MessageType]);
     const alertToPreview = React.useMemo(() => {
-        const alertForm = alertDefinition.AlertForm || api.alertApi.internalApi.getDefaultAlertNotificationForm();
+        const defaultForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
+        const alertForm = (0, alertFormHelper_1.resolveAlertFormForDefinition)(alertDefinition, defaultForm);
         if (typeof alertForm !== 'string') {
             alertForm.Buttons = (alertForm.Buttons ?? []).map(mapButtons);
         }
         const result = {
             alertType: 'generic',
-            header: api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
-            message: api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
-            alertDefinition: {
-                ...alertDefinition,
-                AlertForm: alertForm,
-            },
+            header: alertDefinition.MessageHeader ??
+                api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
+            message: alertDefinition.MessageText ??
+                api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
+            alertDefinition: (0, ScheduledAlertHelper_1.isScheduledAlertDefinition)(alertDefinition)
+                ? alertDefinition
+                : {
+                    ...alertDefinition,
+                    AlertForm: alertForm,
+                },
         };
         return result;
-    }, [alertDefinition]);
-    return (React.createElement(Flex_1.Box, { ...boxProps, className: (0, clsx_1.default)('ab-AlertPreview', boxProps.className), style: {
-            border: '1px solid var(--ab-color-inputborder)',
+    }, [alertDefinition, api, mapButtons]);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...boxProps, className: (0, clsx_1.default)('ab-AlertPreview', boxProps.className), style: {
+            border: '1px solid var(--ab-color-input-border)',
             ...boxProps.style,
-        } },
-        React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
+        }, children: (0, jsx_runtime_1.jsx)(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } }) }));
 };
 exports.AlertPreview = AlertPreview;
 const AlertNotificationWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const isScheduled = props.alertType === getAlertType_1.AlertType.Scheduled;
+    const scheduledData = (0, ScheduledAlertHelper_1.isScheduledAlertDefinition)(data) ? data : null;
+    const includeSuspendButton = scheduledData
+        ? (0, ScheduledAlertHelper_1.scheduledAlertIncludeSuspendButton)(scheduledData)
+        : false;
     const adaptableAlert = {
         alertType: 'generic',
-        header: data.MessageType,
-        message: '',
+        header: data.MessageHeader ?? data.MessageType,
+        message: data.MessageText ?? '',
         alertDefinition: data,
     };
-    if (data.AlertProperties.DisplayNotification && data.AlertForm == undefined) {
-        data.AlertForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement("div", null,
-                    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;
-                            }
-                            if (DisplayNotification && newAlertDefinition.AlertForm == undefined) {
-                                newAlertDefinition.AlertForm =
-                                    api.alertApi.internalApi.getDefaultAlertNotificationForm();
-                            }
-                            // make sure we have at least one button
-                            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)")),
-                data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(Flex_1.Box, { className: "twa:text-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)),
-        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(Flex_1.Box, { className: "twa:text-2" }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
+    const updateScheduledProperties = (partial) => {
+        if (!scheduledData) {
+            return;
+        }
+        props.onChange({
+            ...scheduledData,
+            AlertProperties: {
+                ...scheduledData.AlertProperties,
+                ...partial,
+            },
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Notification Options" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-2' : undefined, children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
+                                            if (isScheduled && scheduledData) {
+                                                updateScheduledProperties({ DisplayNotification });
+                                                return;
+                                            }
+                                            const ruleData = data;
+                                            const newAlertDefinition = {
+                                                ...ruleData,
+                                                AlertProperties: {
+                                                    ...ruleData.AlertProperties,
+                                                    DisplayNotification,
+                                                },
+                                            };
+                                            if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
+                                                delete newAlertDefinition.AlertForm.Buttons;
+                                            }
+                                            if (DisplayNotification) {
+                                                newAlertDefinition.AlertForm =
+                                                    newAlertDefinition.AlertForm ??
+                                                        api.alertApi.internalApi.getDefaultAlertNotificationForm();
+                                            }
+                                            if (DisplayNotification &&
+                                                typeof newAlertDefinition.AlertForm === 'object' &&
+                                                (!newAlertDefinition.AlertForm?.Buttons ||
+                                                    newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
+                                                newAlertDefinition.AlertForm.Buttons = [
+                                                    api.alertApi.internalApi.getDefaultButton(),
+                                                ];
+                                            }
+                                            props.onChange(newAlertDefinition);
+                                        }, children: isScheduled
+                                            ? 'Display a Notification when the Schedule is triggered'
+                                            : 'Display a Notification when Alert is triggered (with action buttons)' }), isScheduled && scheduledData && data.AlertProperties?.DisplayNotification ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:my-0", checked: includeSuspendButton, onChange: (IncludeSuspendButton) => {
+                                            updateScheduledProperties({ IncludeSuspendButton });
+                                        }, children: "Include Suspend button on notification" })) : null] }), data.AlertProperties?.DisplayNotification && !isScheduled
+                                ? (() => {
+                                    const ruleData = data;
+                                    const alertForm = ruleData.AlertForm;
+                                    if (typeof alertForm === 'string') {
+                                        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Alert buttons cannot be customized because form is dynamically driven" }));
+                                    }
+                                    return ((0, jsx_runtime_1.jsx)(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: alertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                                            props.onChange({
+                                                ...ruleData,
+                                                AlertForm: {
+                                                    ...(alertForm ?? { fields: [] }),
+                                                    Buttons: buttons,
+                                                },
+                                            });
+                                        } }));
+                                })()
+                                : null] })] }), data.AlertProperties?.DisplayNotification ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Alert Preview" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: !isScheduled &&
+                            typeof data.AlertForm === 'string' ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : ((0, jsx_runtime_1.jsx)(exports.AlertPreview, { alertDefinition: data, api: api })) })] })) : null] }));
 };
 exports.AlertNotificationWizardSection = AlertNotificationWizardSection;