@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ButtonNew } from '../../Components/Buttons/ButtonNew';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,7 +10,10 @@ import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { Box, Flex } from '../../../components/Flex';
 import sentenceCase from '../../../Utilities/utils/sentenceCase';
 import { SingleSelect } from '../../../components/NewSelect';
-import { Card } from '../../../components/Card';
+import { Tag } from '../../../components/Tag';
+import { CollapsibleWizardCard, getWizardAccordionSectionClassName, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
+import { cn } from '../../../lib/utils';
+const alertButtonCardId = (index) => `alert-button-${index}`;
 const TONE_OPTIONS = [
     {
         label: 'Tone: Use Alert Tone',
@@ -33,6 +37,125 @@ const AlertButtonPreview = ({ button, messageType }) => {
 function renderTone(option) {
     return (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(SimpleButton, { 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 getButtonCommands = (button) => {
+    if (button.Command && typeof button.Command === 'string') {
+        return [button.Command];
+    }
+    if (button.Command && Array.isArray(button.Command)) {
+        return button.Command;
+    }
+    return [];
+};
+const AlertButtonActionTags = ({ button }) => {
+    const commands = getButtonCommands(button);
+    if (!commands.length) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: commands.map((command) => (_jsx(Tag, { className: "twa:shrink-0", children: sentenceCase(command) }, command))) }));
+};
+const AlertButtonCardSummary = ({ button }) => {
+    const commands = getButtonCommands(button);
+    if (!commands.length) {
+        return _jsx(Tag, { children: "No actions" });
+    }
+    return (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: _jsx(AlertButtonActionTags, { button: button }) }));
+};
+const AlertButtonCompactSummary = ({ button }) => (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden twa:flex-wrap", children: [_jsx(Tag, { className: "twa:shrink-0", children: button.Label || 'Untitled' }), _jsx(AlertButtonActionTags, { button: button })] }));
+const AlertButtonEditorForm = ({ button, index, alertButtons, buttonCommands, onChange, }) => {
+    const buttonStyle = button.ButtonStyle;
+    const buttonLabel = button.Label;
+    const btnCommands = getButtonCommands(button);
+    const btnUserFunctions = btnCommands.filter((command) => !buttonCommands.includes(command));
+    const setVariant = (variant) => {
+        onChange(alertButtons.map((btn, i) => {
+            if (i === index) {
+                const nextButtonStyle = { ...btn.ButtonStyle };
+                nextButtonStyle.variant = variant;
+                return {
+                    ...btn,
+                    ButtonStyle: nextButtonStyle,
+                };
+            }
+            return btn;
+        }));
+    };
+    const setTone = (tone) => {
+        onChange(alertButtons.map((btn, i) => {
+            if (i === index) {
+                const nextButtonStyle = { ...btn.ButtonStyle };
+                if (tone == null) {
+                    delete nextButtonStyle.tone;
+                }
+                else {
+                    nextButtonStyle.tone = tone;
+                }
+                return {
+                    ...btn,
+                    ButtonStyle: nextButtonStyle,
+                };
+            }
+            return btn;
+        }));
+    };
+    const handleCommandChange = (checked, commandName) => {
+        let commands = btnCommands;
+        if (!checked) {
+            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,
+                };
+            }
+            return btn;
+        }));
+    };
+    let iconSelector = null;
+    if (!button.icon || (button.icon && 'name' in button.icon)) {
+        iconSelector = (_jsx(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 (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Button Text" }), children: _jsx(Input, { 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;
+                        }));
+                    } }) }), _jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Style" }), children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
+                                return {
+                                    label: StringExtensions.CapitaliseFirstLetter(variant),
+                                    value: variant,
+                                };
+                            }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
+                                setVariant(value);
+                            } }), _jsx(SingleSelect, { items: TONE_OPTIONS, onValueChange: (value) => {
+                                if (value === 'text') {
+                                    setTone(null);
+                                    return;
+                                }
+                                setTone(value);
+                            }, value: buttonStyle?.tone ?? 'text' })] }) }), _jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Actions" }), children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-3 twa:flex-wrap", children: [buttonCommands.map((commandName) => {
+                            return (_jsx(CheckBox, { onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
+                                    (Array.isArray(button.Command) && button.Command.includes(commandName)), children: _jsx(Box, { className: "twa:text-2", children: sentenceCase(commandName) }) }, commandName));
+                        }), btnUserFunctions.length ? (_jsx(CheckBox, { checked: true, disabled: true, children: _jsxs(Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ": ", btnUserFunctions.join(', ')] }) })) : null] }) }), iconSelector && (_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Icon" }), children: _jsx(Box, { children: iconSelector }) }))] }));
+};
 export const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
@@ -40,22 +163,14 @@ export const AlertButtonsEditor = (props) => {
     };
     const alertDefinition = adaptableAlert.alertDefinition;
     const messageType = alertDefinition?.MessageType ?? 'Info';
-    // const rowAddedAlert =
-    //  api.alertApi.internalApi.isAlertDefinitionForAddedRowChangeEvent(alertDefinition);
     const isRowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
-    // except row change
     const hasHighlightCell = props.alertType !== 'RowChange';
-    // all, except row removed
     const hasHighlightRow = !isRowRemovedAlert;
-    // except row removed
     const hasJumpToCell = props.alertType !== 'RowChange';
-    // all
     const hasJumpToRow = !isRowRemovedAlert;
-    // all
     const hasSuspend = true;
-    // only data change
     const hasUndo = props.alertType === 'DataChange';
-    const AlertButtons = cloneObject(props.AlertButtons || []) || [];
+    const alertButtons = cloneObject(props.AlertButtons || []) || [];
     const buttonCommands = [];
     if (hasHighlightRow) {
         buttonCommands.push('highlight-row');
@@ -81,120 +196,39 @@ export const AlertButtonsEditor = (props) => {
             buttonCommands.push(ch.name);
         });
     }
-    return (_jsxs(Box, { className: "twa:mt-3", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-3", children: [_jsx(Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), _jsx(SimpleButton, { icon: "plus", onClick: () => {
-                            onChange([
-                                ...(AlertButtons || []),
-                                {
-                                    Label: 'OK',
-                                    ButtonStyle: {
-                                        variant: 'raised',
-                                    },
-                                },
-                            ]);
-                        }, children: "Add" })] }), _jsx(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,
-                                };
-                            }
-                            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;
-                        }));
-                    };
-                    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,
-                                };
-                            }
-                            return btn;
-                        }));
-                    };
-                    let iconSelector = null;
-                    if (!button.icon || (button.icon && 'name' in button.icon)) {
-                        iconSelector = (_jsx(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 (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { className: "twa:justify-between twa:gap-3", children: [_jsxs(Box, { className: "twa:font-medium twa:shrink-0", children: ["Button ", index + 1] }), _jsx(Flex, { justifyContent: "center", className: "twa:flex-1 twa:min-w-0", children: _jsx(AlertButtonPreview, { button: button, messageType: messageType }) }), _jsx(SimpleButton, { 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));
-                                        } })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Button Text" }), children: _jsx(Input, { 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;
-                                                    }));
-                                                } }) }), _jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Style" }), children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(SingleSelect, { items: ['text', 'outlined', 'raised'].map((variant) => {
-                                                            return {
-                                                                label: StringExtensions.CapitaliseFirstLetter(variant),
-                                                                value: variant,
-                                                            };
-                                                        }), renderValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onValueChange: (value) => {
-                                                            setVariant(value);
-                                                        } }), _jsx(SingleSelect, { items: TONE_OPTIONS, onValueChange: (value) => {
-                                                            if (value === 'text') {
-                                                                setTone(null);
-                                                                return;
-                                                            }
-                                                            setTone(value);
-                                                        }, value: buttonStyle?.tone ?? 'text' })] }) }), _jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Actions" }), children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-3 twa:flex-wrap", children: [buttonCommands.map((commandName) => {
-                                                        return (_jsx(CheckBox, { onChange: (checked) => handleCommandChange(checked, commandName), checked: button.Command === commandName ||
-                                                                (Array.isArray(button.Command) &&
-                                                                    button.Command.includes(commandName)), children: _jsx(Box, { className: "twa:text-2", children: sentenceCase(commandName) }) }, commandName));
-                                                    }), btnUserFunctions.length ? (_jsx(CheckBox, { checked: true, disabled: true, children: _jsxs(Box, { className: "twa:text-2", children: ["User function", btnUserFunctions.length > 1 ? 's' : '', ":", ' ', btnUserFunctions.join(', ')] }) })) : null] }) }), iconSelector && (_jsx(FormRow, { label: _jsx(Box, { className: "twa:text-2", children: "Icon" }), children: _jsx(Box, { children: iconSelector }) }))] }) })] }, index));
+    const { bindCard, hasExpandedCard, expandedFillsSpace, expandedId, setExpandedId } = useWizardCardAccordion(null);
+    const handleAddButton = () => {
+        const newIndex = alertButtons.length;
+        onChange([
+            ...(alertButtons || []),
+            {
+                Label: 'OK',
+                ButtonStyle: {
+                    variant: 'raised',
+                },
+            },
+        ]);
+        setExpandedId(alertButtonCardId(newIndex));
+    };
+    const handleDeleteButton = (index) => {
+        if (alertButtons.length <= 1) {
+            return;
+        }
+        const cardId = alertButtonCardId(index);
+        onChange(alertButtons.filter((_, i) => i !== index));
+        if (expandedId === cardId) {
+            setExpandedId(null);
+            return;
+        }
+        if (expandedId?.startsWith('alert-button-')) {
+            const expandedIndex = Number(expandedId.replace('alert-button-', ''));
+            if (!Number.isNaN(expandedIndex) && expandedIndex > index) {
+                setExpandedId(alertButtonCardId(expandedIndex - 1));
+            }
+        }
+    };
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:mt-3'), children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", className: "twa:mb-2 twa:shrink-0", children: [_jsx(Box, { className: "twa:text-2 twa:max-w-[520px]", children: "Add buttons to the notification and set actions to perform when clicked" }), _jsx(ButtonNew, { onClick: handleAddButton, children: "Add" })] }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: alertButtons.map((button, index) => {
+                    const cardBinding = bindCard(alertButtonCardId(index));
+                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `alert-button-${index}`, title: `Button ${index + 1}`, help: "Set button text, style, icon, and actions", collapsedHelp: false, compactSummary: _jsx(AlertButtonCompactSummary, { button: button }), headerVisual: _jsxs(Flex, { alignItems: "center", justifyContent: "space-end", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden twa:flex-wrap", children: [_jsx(AlertButtonPreview, { button: button, messageType: messageType }), cardBinding.compact ? _jsx(AlertButtonActionTags, { button: button }) : null] }), headerActions: _jsx(SimpleButton, { icon: "delete", disabled: alertButtons.length <= 1, variant: "text", tooltip: alertButtons.length <= 1 ? 'Cannot remove last button' : 'Delete button', onClick: () => handleDeleteButton(index) }), summary: _jsx(AlertButtonCardSummary, { button: button }), bodyClassName: "twa:!pt-0", children: _jsx(AlertButtonEditorForm, { button: button, index: index, alertButtons: alertButtons, buttonCommands: buttonCommands, onChange: onChange }) }, alertButtonCardId(index)));
                 }) })] }));
 };

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: (alertType?: AlertType) => React.JSX.Element;
+export declare const renderAlertMessageSummary: (alertType: AlertType | undefined, data: AlertDefinition) => React.JSX.Element;
 type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;

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

@@ -9,8 +9,7 @@ import Textarea from '../../../components/Textarea';
 import HelpBlock from '../../../components/HelpBlock';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-export const renderAlertMessageSummary = (alertType) => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertMessageSummary = (alertType, data) => {
     if (alertType === AlertType.Scheduled) {
         return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Message Type: ", _jsx(Tag, { children: data.MessageType })] }), _jsxs(SummaryText, { children: ["Header: ", _jsx(Tag, { children: data.MessageHeader || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Body: ", _jsx(Tag, { children: data.MessageText || 'Not specified' })] })] }));
     }

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

@@ -3,7 +3,7 @@ import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
 import { BoxProps } from '../../../components/Flex';
-export declare const renderAlertNotificationSummary: () => React.JSX.Element;
+export declare const renderAlertNotificationSummary: (data: AlertDefinition, api: AdaptableApi) => React.JSX.Element;
 interface AlertPreviewProps extends BoxProps {
     className?: string;
     style?: React.CSSProperties;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../../lib/utils';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CheckBox } from '../../../components/CheckBox';
 import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
@@ -8,10 +9,8 @@ import { AlertType } from '../Utilities/getAlertType';
 import { isScheduledAlertDefinition, scheduledAlertIncludeSuspendButton, } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/alertFormHelper';
 import { Box, Flex } from '../../../components/Flex';
-import clsx from 'clsx';
 import { Card } from '../../../components/Card';
-export const renderAlertNotificationSummary = () => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+export const renderAlertNotificationSummary = (data, api) => {
     if (!data.AlertProperties?.DisplayNotification) {
         return _jsx(Box, { className: "twa:text-2", children: "No Alert Notification will be displayed" });
     }
@@ -52,7 +51,7 @@ export const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxPro
         };
         return result;
     }, [alertDefinition, api, mapButtons]);
-    return (_jsx(Box, { ...boxProps, className: clsx('ab-AlertPreview', boxProps.className), style: {
+    return (_jsx(Box, { ...boxProps, className: cn('ab-AlertPreview', boxProps.className), style: {
             border: '1px solid var(--ab-color-input-border)',
             ...boxProps.style,
         }, children: _jsx(AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } }) }));
@@ -134,5 +133,5 @@ export const AlertNotificationWizardSection = (props) => {
                                             } }));
                                     })()
                                     : null] })] }) }), data.AlertProperties?.DisplayNotification ? (_jsx(Box, { "data-name": "alert-preview", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Alert Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview how the notification will appear when triggered" })] }), _jsx(Card.Body, { children: !isScheduled &&
-                                typeof data.AlertForm === 'string' ? (_jsx(Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : (_jsx(AlertPreview, { alertDefinition: data, api: api })) })] }) })) : null] }));
+                                typeof data.AlertForm === 'string' ? (_jsx(Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : (_jsx(AlertPreview, { alertDefinition: data, api: api, focusFirstButton: false })) })] }) })) : null] }));
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 export declare const isScheduledAlertTimeValid: (alert: AlertDefinition) => true | string;
-export declare const renderAlertScheduledSummary: () => React.JSX.Element;
+export declare const renderAlertScheduledSummary: (data: AlertDefinition) => React.JSX.Element;
 type AlertScheduledWizardSectionProps = {
     onChange: (alert: AlertDefinition) => void;
 };

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

@@ -12,8 +12,7 @@ export const isScheduledAlertTimeValid = (alert) => {
     }
     return isScheduleValid({ Schedule: alert.Schedule });
 };
-export const renderAlertScheduledSummary = () => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertScheduledSummary = (data) => {
     if (!isScheduledAlertDefinition(data)) {
         return null;
     }

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AlertType } from '../Utilities/getAlertType';
 import { AdaptableApi, AlertDefinition } from '../../../types';
 export declare const isSettingsValid: (data: AlertDefinition, api: AdaptableApi) => true | "Name is required" | "An Alert already exists with that name";
-export declare const renderAlertTypeSummary: (alertType: AlertType) => React.JSX.Element;
+export declare const renderAlertTypeSummary: (alertType: AlertType, data: AlertDefinition) => React.JSX.Element;
 type AlertTypeWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;

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

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AlertType, getAlertTypeText } from '../Utilities/getAlertType';
-import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Tag } from '../../../components/Tag';
-import { Box, Flex } from '../../../components/Flex';
+import { Flex } from '../../../components/Flex';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import Input from '../../../components/Input';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
-import { Card } from '../../../components/Card';
+import { getWizardTypeSelectionGridColumns, WizardNameFieldSection, WizardTypeSelectionCard, WizardTypeSelectionSection, } from '../../Wizard/WizardTypeSelection';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -18,11 +16,37 @@ export const isSettingsValid = (data, api) => {
     }
     return true;
 };
-export const renderAlertTypeSummary = (alertType) => {
-    const { data } = useOnePageAdaptableWizardContext();
+export const renderAlertTypeSummary = (alertType, data) => {
     const text = getAlertTypeText(alertType);
     return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Type ", _jsx(Tag, { children: text })] })] }));
 };
+const ALERT_TYPE_OPTIONS = [
+    {
+        type: AlertType.DataChange,
+        description: "A data change has been made to the Grid's data source",
+    },
+    {
+        type: AlertType.RowChange,
+        description: 'A Row has been added or removed from the data source',
+    },
+    {
+        type: AlertType.Aggregation,
+        description: 'A change has been made to aggregated data (i.e. from multiple Rows)',
+    },
+    {
+        type: AlertType.Observable,
+        description: 'A specified change (or lack of change) over time has been observed in the Grid',
+    },
+    {
+        type: AlertType.Validation,
+        description: "A change made to the Grid's data has broken a validation rule",
+    },
+    {
+        type: AlertType.Scheduled,
+        description: 'A reminder is triggered to display at a specfied date and time',
+    },
+];
+const ALERT_TYPE_COUNT = ALERT_TYPE_OPTIONS.length;
 export const AlertTypeWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const handleNameChange = (event) => {
@@ -31,5 +55,5 @@ export const AlertTypeWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Alert" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "alert-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Alert Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Alert should fire" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: getAlertTypeText(AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === AlertType.DataChange, onClick: () => props.onAlertTypeChange(AlertType.DataChange) }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === AlertType.RowChange, onClick: () => props.onAlertTypeChange(AlertType.RowChange) }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(AlertType.Aggregation), checked: props.alertType === AlertType.Aggregation }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(AlertType.Observable), checked: props.alertType === AlertType.Observable }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === AlertType.Validation, onClick: () => props.onAlertTypeChange(AlertType.Validation) }), _jsx(TypeRadio, { text: getAlertTypeText(AlertType.Scheduled), description: "A reminder fires at a date and time you choose", checked: props.alertType === AlertType.Scheduled, onClick: () => props.onAlertTypeChange(AlertType.Scheduled) })] }) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [_jsx(WizardNameFieldSection, { value: data.Name ?? '', onChange: handleNameChange, inputDataName: "alert-name" }), _jsx(WizardTypeSelectionSection, { headingId: "alert-type-heading", title: "Alert Type", dataName: "alert-type", columns: getWizardTypeSelectionGridColumns(ALERT_TYPE_COUNT), intro: _jsxs(_Fragment, { children: ["Click a card to choose one of ", ALERT_TYPE_COUNT, " alert types for when the Alert should fire"] }), children: ALERT_TYPE_OPTIONS.map((option) => (_jsx(WizardTypeSelectionCard, { label: getAlertTypeText(option.type), description: option.description, selected: props.alertType === option.type, dataName: `alert-type-${option.type}`, onSelect: () => props.onAlertTypeChange(option.type) }, option.type))) })] }));
 };

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

@@ -1,11 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { AlertScopeWizardSection } from './AlertScopeWizardSection';
 import { AlertRulesWizardSection, getRuleStepDescription, renderAlertRulesSummary, } from './AlertRulesWizardSection';
 import { isValidAlertRules } from './isValidAlertRules';
-import { AlertBehaviourWizardSection, renderAlertBehaviourWizardSummary, } from './AlertBehaviourWizardSection';
+import { AlertBehaviourWizardSection, renderAlertBehaviourSummary, } from './AlertBehaviourWizardSection';
 import { ALERT_DEFAULT_MESSAGE_TYPE } from '../../../Utilities/Constants/ObjectDefaultConstants';
 import { AlertMessageWizardSection, renderAlertMessageSummary } from './AlertMessageWizardSection';
 import { isValidAlertMessage } from './isValidAlertMessage';
@@ -77,13 +78,20 @@ export const AlertWizard = (props) => {
         setAlertType(newAlertType);
         doSetAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
     };
-    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const defaultEditSectionName = React.useMemo(() => {
+        if (props.defaultCurrentSectionName || !props.data) {
+            return props.defaultCurrentSectionName;
+        }
+        const type = getAlertType(props.data);
+        return type === AlertType.Scheduled ? 'Schedule' : 'Rule';
+    }, [props.defaultCurrentSectionName, props.data]);
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultEditSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Name & Type',
                 isValid: isSettingsValid,
                 details: (_jsx(_Fragment, { children: "Enter Name and select and select an Alert Type" })),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
-                renderSummary: () => renderAlertTypeSummary(alertType),
+                renderSummary: (data) => renderAlertTypeSummary(alertType, data),
             },
             {
                 title: 'Schedule',
@@ -113,7 +121,7 @@ export const AlertWizard = (props) => {
                 details: "Select the Alert's Message Type and Text",
                 isValid: (data) => isValidAlertMessage(data, alertType),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: () => renderAlertMessageSummary(alertType),
+                renderSummary: (data) => renderAlertMessageSummary(alertType, data),
             },
             {
                 title: 'Notification',
@@ -125,7 +133,7 @@ export const AlertWizard = (props) => {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: renderAlertBehaviourWizardSummary,
+                renderSummary: renderAlertBehaviourSummary,
             },
             {
                 details: 'Select Alert Tags',

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

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export declare const renderScopeSummary: () => React.JSX.Element;
+import { AlertDefinition } from '../../../../types';
+export declare const renderScopeSummary: (data: AlertDefinition) => React.JSX.Element;

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

@@ -1,18 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
-import clsx from 'clsx';
-import { TagList } from '../../../components/Tag/Tag';
-export const renderScopeSummary = () => {
-    const { data, api: { columnScopeApi: scopeApi }, } = useOnePageAdaptableWizardContext();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScopeSummaryTags } from '../../Wizard/scopeSummaryTags';
+export const renderScopeSummary = (data) => {
     if (!('Scope' in data)) {
         return null;
     }
-    const scope = data.Scope;
-    const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(Box, { className: "twa:text-2", children: scopeApi.scopeIsAll(scope)
-                        ? 'Changes to any Column in the row will trigger an Alert'
-                        : null }) }), _jsx(Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: clsx('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0'), children: "Changes in selected columns will trigger an alert" }), columnsInScope.length ? (_jsx(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), _jsx(Box, { children: 'DataTypes' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: "Changes in Columns with these Data Types trigger an Alert" }), _jsx(TagList, { tags: scope.DataTypes.map((dataType) => {
-                                return `DataType: ${dataType}`;
-                            }) })] })) : null })] }));
+    return _jsx(ScopeSummaryTags, { scope: data.Scope });
 };

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -42,7 +42,7 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+        return (_jsxs(PanelWithImage, { bodyProps: { className: 'twa:p-2' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                                         this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                                         this.onApplyClick();
                                     }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpBlock, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [_jsx(Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: _jsx(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), _jsx(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||