@adaptabletools/adaptable 22.0.0-canary.2 → 22.0.0-canary.4

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Input from '../../../components/Input';
-import Radio from '../../../components/Radio';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
@@ -12,12 +11,26 @@ import { Flex } from '../../../components/Flex';
 export const PlusMinusSettingsSummary = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     return (React.createElement(React.Fragment, null,
+        React.createElement(SummaryText, null,
+            "Name ",
+            React.createElement(Tag, null, data.Name || 'Not specified')),
         React.createElement(SummaryText, null,
             "Nudge Value ",
             React.createElement(Tag, null, data.NudgeValue ?? 'Not selected')),
+        React.createElement(SummaryText, null,
+            "Nudge Type ",
+            React.createElement(Tag, null, props.hasCondition ? 'Conditional' : 'Always Apply')),
         props.hasCondition && React.createElement(PlusMinusRuleSummary, null)));
 };
 export const isSettingsValid = (hasCondition) => (data, api, context) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allPlusMinusNudges = api.plusMinusApi.getAllPlusMinus();
+    const isDuplicateName = allPlusMinusNudges.some((nudge) => nudge.Name === data.Name && nudge.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Plus Minus Nudge already exists with that name';
+    }
     if (hasCondition) {
         if (!data?.Rule?.BooleanExpression) {
             return 'No valid Rule is specified';
@@ -37,6 +50,12 @@ export const isSettingsValid = (hasCondition) => (data, api, context) => {
 };
 export const PlusMinusSettingsWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const handleNudgeValueChange = (event) => {
         const newValue = parseFloat(event.target.value);
         props.onChange({
@@ -45,15 +64,19 @@ export const PlusMinusSettingsWizardSection = (props) => {
         });
     };
     return (React.createElement(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
-        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs.Tab, null, "Plus Minus Settings"),
+        React.createElement(Tabs, { className: "twa:p-2" },
+            React.createElement(Tabs.Tab, null, "Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "plus-minus-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' })),
                     React.createElement(FormRow, { label: "Nudge Value" },
-                        React.createElement(Input, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
-                    React.createElement(FormRow, { label: "Nudge Type" },
-                        React.createElement(Flex, null,
-                            React.createElement(Radio, { "data-name": "nudge-type-always", value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
-                            React.createElement(Radio, { "data-name": "nudge-type-condition", className: "twa:ml-3", value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
-        props.hasCondition && (React.createElement(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }))));
+                        React.createElement(Input, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }))))),
+        React.createElement(Tabs, { className: "twa:p-2", selectedIndex: props.hasCondition ? 1 : 0, onSelectedIndexChange: (index) => props.onConditionChange(index === 1) },
+            React.createElement(Tabs.Tab, { "data-name": "nudge-type-always" }, "Always Apply"),
+            React.createElement(Tabs.Tab, { "data-name": "nudge-type-condition" }, "Conditional"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { className: "twa:text-2 twa:py-2" }, "The nudge value is always applied when using Plus/Minus")),
+            React.createElement(Tabs.Content, { className: "twa:p-0" },
+                React.createElement(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange })))));
 };

package/src/View/PlusMinus/Wizard/PlusMinusWizard.js

@@ -9,7 +9,7 @@ import * as PlusMinusRedux from '../../../Redux/ActionsReducers/PlusMinusRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { Box } from '../../../components/Flex';
 export const PlusMinusWizard = (props) => {
-    const [plusMinus, setPlusMinus] = React.useState(() => {
+    const [plusMinus, doSetPlusMinus] = React.useState(() => {
         const newPlusMinus = {
             ...(props.data ? props.data : ObjectFactory.CreateEmptyPlusMinusNudge()),
             Scope: props?.data?.Scope ?? { All: true },
@@ -22,19 +22,24 @@ export const PlusMinusWizard = (props) => {
         }
         return newPlusMinus;
     });
+    const setPlusMinus = React.useCallback((data) => {
+        doSetPlusMinus(data);
+    }, []);
     const [hasCondition, setHasCondition] = React.useState(() => {
         // true if on edit and it has a condition
         return Boolean(props?.data?.Rule);
     });
     React.useEffect(() => {
-        const preparedData = { ...plusMinus };
-        if (hasCondition) {
-            preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
-        }
-        else {
-            delete preparedData.Rule;
-        }
-        setPlusMinus(preparedData);
+        doSetPlusMinus((prev) => {
+            const preparedData = { ...prev };
+            if (hasCondition) {
+                preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
+            }
+            else {
+                delete preparedData.Rule;
+            }
+            return preparedData;
+        });
     }, [hasCondition]);
     const dispatch = useDispatch();
     const handleFinish = () => {
@@ -47,6 +52,12 @@ export const PlusMinusWizard = (props) => {
         props.onFinishWizard(plusMinus);
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: plusMinus, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Settings',
+                isValid: isSettingsValid(hasCondition),
+                renderSummary: () => React.createElement(PlusMinusSettingsSummary, { hasCondition: hasCondition }),
+                render: () => (React.createElement(PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
+            },
             {
                 title: 'Target',
                 isValid: isScopeValid,
@@ -59,12 +70,6 @@ export const PlusMinusWizard = (props) => {
                 render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(PlusMinusScopeWizardSection, { onChange: setPlusMinus }))),
             },
-            {
-                title: 'Settings',
-                isValid: isSettingsValid(hasCondition),
-                renderSummary: () => React.createElement(PlusMinusSettingsSummary, { hasCondition: hasCondition }),
-                render: () => (React.createElement(PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
-            },
             {
                 details: 'Select Plus/Minus Tags',
                 title: 'Tags',

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -35,7 +35,10 @@ const QuickSearchPopupComponent = (props) => {
             React.createElement(Card, null,
                 React.createElement(Card.Title, null, "Behaviour"),
                 React.createElement(Card.Body, { className: "twa:p-1", gap: 2 },
-                    React.createElement(HelpBlock, { className: "twa:text-2 twa:w-fit" }, "Filters the Grid to only show rows with matching cells; use with care as can cause performance issues"),
+                    React.createElement(HelpBlock, { className: "twa:text-2 twa:w-fit" },
+                        "Filter Grid when searching to only show rows with matching cells; ",
+                        React.createElement("b", null, "use with care"),
+                        " as can cause performance issues"),
                     React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))),
             React.createElement(Card.Title, { border: false, className: "twa:pt-3" }, "Cell Matching Style"),
             React.createElement(Card, null,

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsIPushPull.js

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Input from '../../../../components/Input';
 import Radio from '../../../../components/Radio';
 import DropdownButton from '../../../../components/DropdownButton';
 import { FormDescriptionText } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../../components/Flex';
 export const ScheduleSettingsIPushPull = (props) => {
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.iPushPull,
+            Name: event.target.value,
+        });
+    };
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
@@ -45,9 +52,13 @@ export const ScheduleSettingsIPushPull = (props) => {
     });
     return (React.createElement(Box, { "data-name": "schedule-settings-ipushpull" },
         React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Ipushpull Schedule Settings"),
+            React.createElement(Tabs.Tab, null, "Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.iPushPull?.Name ?? '' })),
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(Box, { className: "twa:h-2" })),
                     React.createElement(FormRow, { label: "Select Report" },
                         React.createElement(DropdownButton, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
                     React.createElement(FormRow, { label: "Select Folder" },

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsOpenFin.js

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Input from '../../../../components/Input';
 import DropdownButton from '../../../../components/DropdownButton';
 import { Box } from '../../../../components/Flex';
 export const ScheduleSettingsOpenFin = (props) => {
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.openFin,
+            Name: event.target.value,
+        });
+    };
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
@@ -17,9 +24,13 @@ export const ScheduleSettingsOpenFin = (props) => {
     }));
     return (React.createElement(Box, { "data-name": "schedule-settings-openfin" },
         React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "OpenFin Schedule Settings"),
+            React.createElement(Tabs.Tab, null, "Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.openFin?.Name ?? '' })),
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(Box, { className: "twa:h-2" })),
                     React.createElement(FormRow, { label: "Select Report" },
                         React.createElement(DropdownButton, { "data-name": "select-report", columns: ['label'], className: "twa:w-[300px]", disabled: props.allReports.length == 0, items: reportOptions }, props?.openFin?.OpenFinReport?.ReportName || 'Select Report')))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -17,16 +17,22 @@ export const ScheduleSettingsReminder = (props) => {
             });
         },
     }));
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.reminderSchedule,
+            Name: event.target.value,
+        });
+    };
     const handleHeaderChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
-            Header: event.target?.value,
+            Header: event.target.value,
         });
     };
     const handleMessageChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
-            Message: event.target?.value,
+            Message: event.target.value,
         });
     };
     const handleDisplayNotificationChange = (checked) => {
@@ -41,11 +47,15 @@ export const ScheduleSettingsReminder = (props) => {
             DisplaySystemStatusMessage: checked,
         });
     };
-    return (React.createElement(Box, { "data-name": "schedule-settings-remainder" },
+    return (React.createElement(Box, { "data-name": "schedule-settings-reminder" },
         React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Reminder Schedule Settings"),
+            React.createElement(Tabs.Tab, null, "Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(Box, { className: "twa:h-2" })),
                     React.createElement(FormRow, { label: "Header" },
                         React.createElement(Input, { "data-name": "header", className: "twa:w-[300px]", onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
                     React.createElement(FormRow, { label: "Message" },

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Input from '../../../../components/Input';
 import { Select } from '../../../../components/Select';
 import { Tabs } from '../../../../components/Tabs';
 import { Box } from '../../../../components/Flex';
 export const ScheduleSettingsReport = (props) => {
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.report,
+            Name: event.target.value,
+        });
+    };
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
@@ -30,9 +37,13 @@ export const ScheduleSettingsReport = (props) => {
     }));
     return (React.createElement(Box, { "data-name": "schedule-settings-report" },
         React.createElement(Tabs, { autoFocus: false, className: "twa:mb-3" },
-            React.createElement(Tabs.Tab, null, "Report Settings"),
+            React.createElement(Tabs.Tab, null, "Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.report?.Name ?? '' })),
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(Box, { className: "twa:h-2" })),
                     React.createElement(FormRow, { label: "Export" },
                         React.createElement(Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select, { "data-name": "select-report", options: reportOptions, value: props?.report?.ReportName, placeholder: "Select Export", onChange: (value) => props.onChange({

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/isSettingsValid.d.ts

@@ -1,2 +1,3 @@
+import { AdaptableApi } from '../../../../Api/AdaptableApi';
 import { BaseSchedule } from '../../../../AdaptableState/Common/Schedule';
-export declare const isSettingsValid: (schedule: BaseSchedule) => true | "Message type not selected" | "Reminder header not specified" | "Reminder message not specified" | "Report source not specified" | "Report format not selected" | "Report not selected" | "Report folder not selected" | "Report page not selected";
+export declare const isSettingsValid: (schedule: BaseSchedule, api: AdaptableApi) => true | "Name is required" | "A Schedule with this name already exists" | "Message type not selected" | "Reminder header not specified" | "Reminder message not specified" | "Report source not specified" | "Report format not selected" | "Report not selected" | "Report folder not selected" | "Report page not selected";

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/isSettingsValid.js

@@ -1,6 +1,15 @@
 import { ScheduleType } from '../../../../AdaptableState/Common/Enums';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
-export const isSettingsValid = (schedule) => {
+export const isSettingsValid = (schedule, api) => {
+    // Validate Name - mandatory and unique
+    if (!schedule.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allSchedules = api.scheduleApi.getSchedules();
+    const isDuplicateName = allSchedules.some((s) => s.Name === schedule.Name && s.Uuid !== schedule.Uuid);
+    if (isDuplicateName) {
+        return 'A Schedule with this name already exists';
+    }
     if (schedule.ScheduleType === ScheduleType.Reminder) {
         const reminder = schedule;
         if (!reminder.MessageType) {

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Shortcut } from '../../../AdaptableState/ShortcutState';
-export declare const isSettingsValid: (data: Shortcut) => string | true;
+import { AdaptableApi } from '../../../types';
+export declare const isSettingsValid: (data: Shortcut, api: AdaptableApi) => string | true;
 export declare const ShortcutSettingsSummary: React.FunctionComponent;
 interface ShortcutSettingsWizardProps {
     availableKeys: Array<string>;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -9,7 +9,15 @@ import { Tag } from '../../../components/Tag';
 import HelpBlock from '../../../components/HelpBlock';
 import { Select } from '../../../components/Select';
 import { Box, Flex } from '../../../components/Flex';
-export const isSettingsValid = (data) => {
+export const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allShortcuts = api.shortcutApi.getShortcuts();
+    const isDuplicateName = allShortcuts.some((s) => s.Name === data.Name && s.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Shortcut already exists with that name';
+    }
     const shortcutKey = data.ShortcutKey && typeof data.ShortcutKey === 'string' ? '' : 'Shortcut key is not selected';
     const shortcutValue = typeof data.ShortcutValue === 'number' ? '' : 'Shortcut value is not specified';
     const shortcutOperation = data.ShortcutOperation && typeof data.ShortcutOperation === 'string'
@@ -21,6 +29,9 @@ export const isSettingsValid = (data) => {
 export const ShortcutSettingsSummary = () => {
     const { data: shortcut } = useOnePageAdaptableWizardContext();
     return (React.createElement(React.Fragment, null,
+        React.createElement(SummaryText, null,
+            "Name ",
+            React.createElement(Tag, null, shortcut.Name || 'Not specified')),
         React.createElement(SummaryText, null,
             "Shortcut Key ",
             React.createElement(Tag, null, shortcut.ShortcutKey || 'Not selected')),
@@ -33,6 +44,12 @@ export const ShortcutSettingsSummary = () => {
 };
 export const ShortcutSettingsWizard = (props) => {
     const { data: shortcut } = useOnePageAdaptableWizardContext();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...shortcut,
+            Name: event.target.value,
+        });
+    };
     const handleKeyChange = React.useCallback((ShortcutKey) => {
         props.onChange({
             ...shortcut,
@@ -63,17 +80,21 @@ export const ShortcutSettingsWizard = (props) => {
             React.createElement(Tabs.Tab, null, "Shortcut Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
-                    React.createElement(FormRow, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "shortcut-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' })),
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(Box, { className: "twa:h-2" })),
+                    React.createElement(FormRow, { label: "" },
                         React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Keyboard key that, when pressed, triggers the Shortcut")),
                     React.createElement(FormRow, { label: "Key" },
                         React.createElement(Flex, { flexDirection: "row" },
                             React.createElement(Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
-                    React.createElement(FormRow, null,
+                    React.createElement(FormRow, { label: "" },
                         React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
                     React.createElement(FormRow, { label: "Operation" },
                         React.createElement(Flex, { flexDirection: "row" },
                             React.createElement(Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
-                    React.createElement(FormRow, null,
+                    React.createElement(FormRow, { label: "" },
                         React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
                     React.createElement(FormRow, { label: "Value" },
                         React.createElement(Flex, { flexDirection: "row" },

package/src/View/Shortcut/Wizard/ShortcutWizard.js

@@ -11,8 +11,9 @@ import { shortcutKeys } from '../shortcutKeys';
 import { useAdaptable } from '../../AdaptableContext';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { Box } from '../../../components/Flex';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 export const ShortcutWizard = (props) => {
-    const [shortcut, setShortcut] = React.useState(() => {
+    const [shortcut, doSetShortcut] = React.useState(() => {
         const shortcut = props.data ? cloneObject(props.data) : ObjectFactory.CreateEmptyShortcut();
         shortcut.Scope = shortcut.Scope ?? { All: true };
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
@@ -22,10 +23,13 @@ export const ShortcutWizard = (props) => {
         }
         return shortcut;
     });
+    const setShortcut = React.useCallback((data) => {
+        doSetShortcut(data);
+    }, []);
     const adaptable = useAdaptable();
     const availableKeys = React.useMemo(() => {
         const availableKeys = shortcutKeys.filter((key) => adaptable.api.shortcutApi.getShortcuts().every((shortcut) => shortcut.ShortcutKey !== key));
-        if (shortcut) {
+        if (shortcut && StringExtensions.IsNotNullOrEmptyOrWhiteSpace(shortcut.ShortcutKey)) {
             availableKeys.push(shortcut.ShortcutKey);
         }
         availableKeys.sort();
@@ -42,18 +46,6 @@ export const ShortcutWizard = (props) => {
         props.onFinishWizard(shortcut);
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: shortcut, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
-            {
-                title: 'Target',
-                isValid: isScopeValid,
-                details: 'Specify where Shortcut should be applied',
-                renderSummary: () => renderScopeSummary(shortcut.Scope, {
-                    scopeWholeRow: 'Shortcut is triggered for all numeric cells',
-                    scopeColumns: 'Shortcut is triggered for cells in selected columns',
-                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
-                }),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ShortcutScopeWizardSection, { onChange: setShortcut }))),
-            },
             {
                 title: 'Settings',
                 isValid: isSettingsValid,
@@ -69,6 +61,18 @@ export const ShortcutWizard = (props) => {
                 render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }))),
             },
+            {
+                title: 'Target',
+                isValid: isScopeValid,
+                details: 'Specify where Shortcut should be applied',
+                renderSummary: () => renderScopeSummary(shortcut.Scope, {
+                    scopeWholeRow: 'Shortcut is triggered for all numeric cells',
+                    scopeColumns: 'Shortcut is triggered for cells in selected columns',
+                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
+                }),
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(ShortcutScopeWizardSection, { onChange: setShortcut }))),
+            },
             {
                 details: 'Select Shortcut Tags',
                 title: 'Tags',

package/src/View/UIHelper.d.ts

@@ -38,6 +38,7 @@ export declare function getMessageTypeByStatusColour(statusColour: StatusColour)
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
+export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -75,6 +76,7 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
+    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -202,6 +202,20 @@ export function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
+export function getCSSColorByMessageType(messageType) {
+    switch (messageType) {
+        case 'Error':
+            return 'error';
+        case 'Warning':
+            return 'warn';
+        case 'Success':
+            return 'success';
+        case 'Info':
+            return 'info';
+        default:
+            return '';
+    }
+}
 export function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -449,6 +463,7 @@ export const UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
+    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -257,10 +257,10 @@ export declare class AdaptableAgGrid implements IAdaptable {
         added: IRowNode[];
         updated: IRowNode[];
     }>;
-    applyGridDataTransaction(dataTransaction: {
+    manageGridRows(dataRows: {
         add?: any[];
         update?: any[];
-        remove?: any[];
+        delete?: any[];
     }, config?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];

package/src/agGrid/AdaptableAgGrid.js

@@ -2467,18 +2467,18 @@ You need to define at least one Layout!`);
             });
         }
     }
-    async applyGridDataTransaction(dataTransaction, config = {}) {
+    async manageGridRows(dataRows, config = {}) {
         const result = {
             addedRows: [],
             updatedRows: [],
             removedRows: [],
         };
-        if (!dataTransaction) {
+        if (!dataRows) {
             return result;
         }
-        const addDataRows = dataTransaction.add;
-        const updateDataRows = dataTransaction.update;
-        const removeDataRows = dataTransaction.remove;
+        const addDataRows = dataRows.add;
+        const updateDataRows = dataRows.update;
+        const removeDataRows = dataRows.delete;
         if (this.hasAutogeneratedPrimaryKey) {
             this.addSyntheticPrimaryKeyIfMissing(addDataRows);
         }

package/src/agGrid/AgGridColumnAdapter.js

@@ -302,12 +302,10 @@ export class AgGridColumnAdapter {
                 // see #header_text_align
                 const formatColumnWithTextAlignment = this.getRelevantFormatColumnHeaderStyles(abColumn)
                     // we take the first one only, even if multiple are defined
-                    .find((fc) => fc.CellAlignment != undefined);
+                    .find((fc) => fc.Style?.Alignment != undefined);
                 if (formatColumnWithTextAlignment) {
-                    baseHeaderClass = [
-                        ...baseHeaderClass,
-                        `ab-header__align-${formatColumnWithTextAlignment.CellAlignment.toLowerCase()}`,
-                    ];
+                    const alignment = formatColumnWithTextAlignment.Style.Alignment.toLowerCase();
+                    baseHeaderClass = [...baseHeaderClass, `ab-header__align-${alignment}`];
                 }
                 const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, {
                     target,
@@ -1263,19 +1261,6 @@ export class AgGridColumnAdapter {
             const formatColumnStyle = formatColumn.Style
                 ? convertAdaptableStyleToCSS(formatColumn.Style)
                 : {};
-            if (formatColumn.CellAlignment) {
-                switch (formatColumn.CellAlignment) {
-                    case 'Left':
-                        style.textAlign = 'left';
-                        break;
-                    case 'Right':
-                        style.textAlign = 'right';
-                        break;
-                    case 'Center':
-                        style.textAlign = 'center';
-                        break;
-                }
-            }
             return { ...style, ...formatColumnStyle };
         }, {});
     }

package/src/components/Dashboard/DashboardToolbar.js

@@ -8,5 +8,5 @@ export function DashboardToolbar(props) {
         React.createElement(Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
             React.createElement("span", { className: "twa:text-2" }, props.title),
             props.showConfigure && (React.createElement(SimpleButton, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
-            props.showClose && (React.createElement(SimpleButton, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+            props.showClose && (React.createElement(SimpleButton, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() })))));
 }

package/src/components/ExpressionEditor/EditorInput.js

@@ -3,7 +3,6 @@ import { useMemo } from 'react';
 import { BaseEditorInput } from './BaseEditorInput';
 import { editorButtonsSearch } from './editorButtonsSearch';
 import { useExpressionEditor } from './EditorContext';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { editorButtonsAggregatedScalar } from './editorButtonsAggregatedScalar';
 import { cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
 import { editorButtonsCumulativeAggregatedScalar } from './editorButtonsCumulativeAggregatedScalar';
@@ -49,8 +48,25 @@ function EditorInput(props) {
             };
     }, [props.type]);
     const { setSelectedFunction } = useExpressionEditor();
-    const queryName = `${StringExtensions.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+    let queryName;
+    switch (props.type) {
+        case 'boolean':
+            queryName = 'Create an Expression that returns true / false';
+            break;
+        case 'scalar':
+            queryName = "Create an Expression that returns a single value of any type";
+            break;
+        case 'aggregatedScalar':
+            queryName = "Create an Expression that evaluates multiple rows and returns a value of any type";
+            break;
+        case 'cumulativeAggregatedScalar':
+            queryName = "Create a Cumulative Expression";
+            break;
+        case 'quantileAggregatedScalar':
+            queryName = "Create a Quantile Expression";
+            break;
+    }
+    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
             ? editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar