@adaptabletools/adaptable-cjs 23.0.0-canary.4 → 23.0.0-canary.6

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

@@ -13,6 +13,7 @@ const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector"
 const Flex_1 = require("../../../components/Flex");
 const sentenceCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/sentenceCase"));
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
 const TONE_OPTIONS = [
     {
         label: 'Tone: Use Alert Tone',
@@ -25,6 +26,14 @@ const TONE_OPTIONS = [
         };
     }),
 ];
+const AlertButtonPreview = ({ button, messageType }) => {
+    const buttonStyle = button.ButtonStyle ?? {};
+    const variant = (buttonStyle.variant ?? 'raised');
+    const tone = (buttonStyle.tone ??
+        messageType.toLowerCase());
+    const icon = button.icon && 'name' in button.icon && button.icon.name ? button.icon : undefined;
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: variant, tone: tone, icon: icon, className: "twa:cursor-default twa:pointer-events-none", tabIndex: -1, children: button.Label || 'Untitled' }));
+};
 function renderTone(option) {
     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] }));
 }
@@ -34,6 +43,7 @@ const AlertButtonsEditor = (props) => {
         props.onChange(newButtons);
     };
     const alertDefinition = adaptableAlert.alertDefinition;
+    const messageType = alertDefinition?.MessageType ?? 'Info';
     // const rowAddedAlert =
     //  api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
     const isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
@@ -75,7 +85,7 @@ const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    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: () => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "plus", onClick: () => {
                             onChange([
                                 ...(AlertButtons || []),
                                 {
@@ -85,110 +95,111 @@ const AlertButtonsEditor = (props) => {
                                     },
                                 },
                             ]);
-                        }, 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,
-                            };
-                        }
-                        return btn;
-                    }));
-                };
-                const setTone = (tone) => {
-                    onChange(AlertButtons.map((btn, i) => {
-                        if (i === index) {
-                            const buttonStyle = { ...btn.ButtonStyle };
-                            if (tone == null) {
-                                delete buttonStyle.tone;
+                        }, children: "Add" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: 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 = ((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 {
-                                        ...btn,
-                                        icon: {
-                                            name: iconName,
-                                        },
-                                    };
-                                }
-                                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));
-            })] }));
+                        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 {
+                                            ...btn,
+                                            icon: {
+                                                name: iconName,
+                                            },
+                                        };
+                                    }
+                                    return btn;
+                                }));
+                            } }));
+                    }
+                    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:justify-between twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium twa:shrink-0", children: ["Button ", index + 1] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", className: "twa:flex-1 twa:min-w-0", children: (0, jsx_runtime_1.jsx)(AlertButtonPreview, { button: button, messageType: messageType }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                                            onChange(AlertButtons.filter((btn) => btn !== button));
+                                        } })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Button Text" }), children: (0, jsx_runtime_1.jsx)(Input_1.default, { value: buttonLabel, className: "twa:max-w-[200px]", onChange: (e) => {
+                                                    onChange(AlertButtons.map((btn, i) => {
+                                                        if (i === index) {
+                                                            return { ...btn, Label: e.target.value };
+                                                        }
+                                                        return btn;
+                                                    }));
+                                                } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Style" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: [(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, { items: TONE_OPTIONS, onValueChange: (value) => {
+                                                            if (value === 'text') {
+                                                                setTone(null);
+                                                                return;
+                                                            }
+                                                            setTone(value);
+                                                        }, value: buttonStyle?.tone ?? 'text' })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "Actions" }), children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-3 twa:flex-wrap", children: [buttonCommands.map((commandName) => {
+                                                        return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { 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.js

@@ -3,21 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertMessageWizardSection = exports.renderAlertMessageSummary = void 0;
 const tslib_1 = require("tslib");
 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 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 Card_1 = require("../../../components/Card");
 const renderAlertMessageSummary = (alertType) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     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)(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: ["Body: ", (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 })] }));
 };
@@ -45,15 +44,15 @@ const AlertMessageWizardSection = (props) => {
             MessageHeader: value,
         });
     };
-    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"] }))] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "message-type", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Message Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how the Alert message is styled" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { 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.jsx)(Flex_1.Box, { "data-name": "message-header", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Header" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: isScheduled
+                                        ? 'Enter the header shown when this scheduled alert fires'
+                                        : 'Optional header text (leave blank to use the default)' })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px] twa:w-full twa:max-w-[500px]", rows: 3, placeholder: isScheduled ? 'Enter header (required)' : '(Use Default Header Message)', type: 'text', autoFocus: false, value: messageHeader, onChange: (e) => onMessageHeaderChange(e) }) })] }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "message-body", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Body" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: isScheduled
+                                        ? 'Enter the message body shown when this scheduled alert fires'
+                                        : 'Alert message body (leave blank to show automated message based on Alert Type)' })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", children: [(0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px] twa:w-full twa:max-w-[500px]", 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: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

@@ -4,7 +4,6 @@ exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAl
 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");
@@ -14,6 +13,7 @@ const ScheduledAlertHelper_1 = require("../../../Utilities/Helpers/ScheduledAler
 const alertFormHelper_1 = require("../../../Utilities/Helpers/alertFormHelper");
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Card_1 = require("../../../components/Card");
 const renderAlertNotificationSummary = () => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (!data.AlertProperties?.DisplayNotification) {
@@ -88,58 +88,58 @@ const AlertNotificationWizardSection = (props) => {
             },
         });
     };
-    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-4' : 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] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "display-options", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Notification Options" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a notification when the Alert fires" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-4' : 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 twa:mt-3", 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.jsx)(Flex_1.Box, { "data-name": "alert-preview", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Alert Preview" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview how the notification will appear when triggered" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { 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;

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

@@ -8,10 +8,11 @@ const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const Tag_1 = require("../../../components/Tag");
 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 GeneralConstants_1 = require("./../../../Utilities/Constants/GeneralConstants");
+const Card_1 = require("../../../components/Card");
 const Flex_1 = require("../../../components/Flex");
+const GeneralConstants_1 = require("./../../../Utilities/Constants/GeneralConstants");
+const Flex_2 = require("../../../components/Flex");
 const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
@@ -56,7 +57,7 @@ const RowChangeEditor = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Change" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowAddedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_ADDED), children: "Row Added" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowRemovedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_REMOVED), children: "Row Removed" })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_2.Box, { className: "twa:font-medium", children: "Row Change" }), (0, jsx_runtime_1.jsx)(Flex_2.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which type of Row Change will trigger the Alert" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowAddedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_ADDED), children: "Row Added" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { onClick: () => handleRowRemovedChange(), checked: expression?.includes(GeneralConstants_1.OBSERVABLE_EXPRESSION_ROW_REMOVED), children: "Row Removed" })] })] }) }));
 };
 const AlertRulesWizardSection = (props) => {
     const { data: alertData, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

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

@@ -33,6 +33,6 @@ const AlertScheduledWizardSection = (props) => {
             Schedule: scheduleData.Schedule,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsx)(ScheduleScheduleWizard_1.ScheduleBuilderWizard, { onChange: handleScheduleChange }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsx)(ScheduleScheduleWizard_1.ScheduleBuilderWizard, { onChange: handleScheduleChange }) }));
 };
 exports.AlertScheduledWizardSection = AlertScheduledWizardSection;

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

@@ -19,42 +19,34 @@ const AlertScopeWizardSection = (props) => {
         disableDataTypes = false;
         disableColumns = false;
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(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 = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                if (newData.Rule.ObservableExpression !== undefined &&
-                    !api.columnScopeApi.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.columnScopeApi.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);
-            } }) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which columns should trigger the Alert" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(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 = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        if (newData.Rule.ObservableExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.ObservableExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                            !api.columnScopeApi.scopeIsAll(Scope)) {
+                            delete newData.Rule.AggregatedBooleanExpression;
+                            newData.Rule.BooleanExpression = '';
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };
 exports.AlertScopeWizardSection = AlertScopeWizardSection;