@adaptabletools/adaptable-cjs 22.0.0-canary.3 → 22.0.0-canary.4

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

@@ -13,10 +13,11 @@ export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinitio
     MessageText?: string;
     AlertProperties?: import("../../../types").AlertProperties;
     AlertForm?: string | import("../../../types").AlertButtonForm;
-    IsSuspended?: boolean;
+    Name: string;
     Source?: "InitialState" | "User";
     AdaptableVersion?: import("../../../types").AdaptableVersion;
     IsReadOnly?: boolean;
     Tags?: import("../../../types").AdaptableObjectTag[];
     Metadata?: any;
+    IsSuspended?: boolean;
 };

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

@@ -1,9 +1,12 @@
 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;
-type AlertBehaviourWizardSectionProps = {
+type AlertTypeWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;
+    onChange: (data: AlertDefinition) => void;
 };
-export declare const AlertTypeWizardSection: (props: AlertBehaviourWizardSectionProps) => React.JSX.Element;
+export declare const AlertTypeWizardSection: (props: AlertTypeWizardSectionProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = void 0;
+exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
@@ -8,21 +8,57 @@ const getAlertType_1 = require("../Utilities/getAlertType");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allAlerts = api.alertApi.getAlertDefinitions();
+    const isDuplicateName = allAlerts.some((a) => a.Name === data.Name && a.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'An Alert already exists with that name';
+    }
+    return true;
+};
+exports.isSettingsValid = isSettingsValid;
 const renderAlertTypeSummary = (alertType) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const text = (0, getAlertType_1.getAlertTypeText)(alertType);
-    return (React.createElement(Flex_1.Box, null,
-        React.createElement(Tag_1.Tag, null, text)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name || 'Not specified')),
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Type ",
+            React.createElement(Tag_1.Tag, null, text))));
 };
 exports.renderAlertTypeSummary = renderAlertTypeSummary;
 const AlertTypeWizardSection = (props) => {
-    return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) })))));
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column" },
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "alert-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }))))),
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) }))))));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

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

@@ -29,7 +29,7 @@ const AlertWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const behaviourSpelling = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    const [alertDefinition, setAlertDefinition] = (0, react_1.useState)(() => {
+    const [alertDefinition, doSetAlertDefinition] = (0, react_1.useState)(() => {
         const alertDefinition = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyAlertDefinition();
@@ -49,6 +49,9 @@ const AlertWizard = (props) => {
         alertDefinition.MessageType = alertDefinition.MessageType ?? ObjectDefaultConstants_1.ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
+    const setAlertDefinition = (0, react_1.useCallback)((data) => {
+        doSetAlertDefinition(data);
+    }, []);
     // Alert type is based initialy on data, but can be changed by the user
     // the default objects do not neccesary have enough information to determine the type
     const [alertType, setAlertType] = (0, react_1.useState)(() => {
@@ -63,22 +66,23 @@ const AlertWizard = (props) => {
         }
         props.onCloseWizard();
     };
-    const updateAlertDefinition = (newAlertDefinition) => {
-        setAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
-    };
+    const updateAlertDefinition = (0, react_1.useCallback)((newAlertDefinition) => {
+        doSetAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
+    }, [api]);
     const handleAlertTypeChange = (newAlertType) => {
         setAlertType(newAlertType);
-        setAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
+        doSetAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Type',
+                title: 'Name & Type',
+                isValid: AlertTypeWizardSection_1.isSettingsValid,
                 details: (React.createElement(React.Fragment, null,
-                    "Select ",
+                    "Enter Name and select ",
                     React.createElement("b", null, "what"),
                     " type of change in AdapTable will cause the Alert to fire")),
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
+                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }))),
                 renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
             },
             {

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -2,8 +2,7 @@ import * as React from 'react';
 import * as Redux from 'redux';
 import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
-import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
-import { SuspendableObject } from '../../../AdaptableState/Common/SuspendableObject';
+import { AdaptableObject, SuspendableObject } from '../../../AdaptableState/Common/AdaptableObject';
 export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
     editClick?: () => void;
     cloneClick?: () => void;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../../AdaptableState/Common/AdaptableObject';
+import { AdaptableObject, SuspendableObject } from '../../../../AdaptableState/Common/AdaptableObject';
 import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
-import { SuspendableObject } from '../../../../AdaptableState/Common/SuspendableObject';
 interface EntityListSuspendButtonProps {
     onSuspend: (adaptableObject: AdaptableObject) => void;
     onUnSuspend: (adaptableObject: AdaptableObject) => void;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.d.ts

@@ -3,7 +3,8 @@ import { CustomSort } from '../../../AdaptableState/CustomSortState';
 export type CustomSortColumnWizardSectionProps = {
     onChange: (data: CustomSort) => void;
     isNew: boolean;
+    allCustomSorts: CustomSort[];
 };
 export declare const renderCustomSortColumn: (data: CustomSort) => React.JSX.Element;
-export declare const isValidCustomSortColumn: (data: CustomSort) => true | string;
+export declare const isValidCustomSortColumn: (data: CustomSort, allCustomSorts: CustomSort[]) => true | string;
 export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => React.JSX.Element;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -8,14 +8,26 @@ const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const renderCustomSortColumn = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
-        "Custom sort column: ",
-        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+        React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Name: ",
+            data.Name),
+        React.createElement(Tag_1.Tag, null,
+            "Column: ",
+            api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };
 exports.renderCustomSortColumn = renderCustomSortColumn;
-const isValidCustomSortColumn = (data) => {
+const isValidCustomSortColumn = (data, allCustomSorts) => {
+    if (!data.Name) {
+        return 'Custom Sort Name cannot be blank';
+    }
+    if (allCustomSorts.some((customSort) => customSort.Name === data.Name && customSort.Uuid !== data.Uuid)) {
+        return 'A Custom Sort already exists with that name';
+    }
     if (!data.ColumnId) {
         return 'You have to select a Column for Custom Sort';
     }
@@ -48,15 +60,29 @@ const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                    props.onChange({
-                        ...data,
-                        SortedValues: [],
-                        ColumnId: ids[0],
-                    });
-                }, allowReorder: false }))));
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs_1.Tabs, { style: { flex: 1, minHeight: 0 } },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                        props.onChange({
+                            ...data,
+                            SortedValues: [],
+                            ColumnId: ids[0],
+                        });
+                    }, allowReorder: false })))));
 };
 exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -41,14 +41,14 @@ const CustomSortWizard = (props) => {
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
-                isValid: CustomSortColumnWizardSection_1.isValidCustomSortColumn,
+                isValid: (data) => (0, CustomSortColumnWizardSection_1.isValidCustomSortColumn)(data, allCustomSorts),
                 renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
-                details: 'Select a Column for Custom Sort',
+                details: 'Enter Name and select a Column for Custom Sort',
                 render: () => {
                     return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
+                        React.createElement(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));
                 },
-                title: 'Column',
+                title: 'Name & Column',
             },
             {
                 title: 'Sort Order',

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -165,6 +165,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGr
                 Revision: Date.now(),
                 FormatColumns: [
                     {
+                        Name: 'Changed At',
                         Scope: {
                             ColumnIds: ['changeInfo.changedAt'],
                         },

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { FlashingCellDefinition } from '../../../types';
+import { AdaptableApi, FlashingCellDefinition } from '../../../types';
 type FlashingAlertDurationWizardSectionProps = {
     readOnly?: boolean;
     flashingCell?: FlashingCellDefinition;
     onChange: (data: FlashingCellDefinition) => void;
 };
+export declare const isSettingsValid: (data: FlashingCellDefinition, api: AdaptableApi) => true | "Name is required" | "A Flashing Cell already exists with that name";
 export declare const renderFlashingAlertSettingsSummary: (flashingAlert: FlashingCellDefinition) => React.JSX.Element;
 export declare const FlashingAlertSettingsWizardSection: (props: FlashingAlertDurationWizardSectionProps) => React.JSX.Element;
 export {};

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -1,20 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = void 0;
+exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allFlashingCells = api.flashingCellApi.getFlashingCellDefinitions();
+    const isDuplicateName = allFlashingCells.some((fc) => fc.Name === data.Name && fc.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Flashing Cell already exists with that name';
+    }
+    return true;
+};
+exports.isSettingsValid = isSettingsValid;
 const renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, flashingAlert.Name || 'Not specified')),
         React.createElement(Flex_1.Box, { className: "twa:text-2" }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
             "Flashing is removed after ",
             React.createElement(CodeBlock_1.CodeBlock, null, flashingAlert.FlashDuration),
@@ -25,6 +41,12 @@ exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
 const FlashingAlertSettingsWizardSection = (props) => {
     let { data: flashingCell } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingCell = flashingCell ?? props.flashingCell;
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...flashingCell,
+            Name: event.target.value,
+        });
+    };
     const setDuration = (FlashDuration) => {
         props.onChange({ ...flashingCell, FlashDuration: FlashDuration });
     };
@@ -63,24 +85,23 @@ const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
-                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", className: "twa:mr-3", checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
-                    React.createElement(FormLayout_1.FormRow, { label: "" },
-                        duration !== 'always' && (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "baseline" },
-                            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mr-2" }, "After"),
-                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, className: "twa:mt-2 twa:mr-1", value: duration, onChange: (event) => {
-                                    const value = event.target.value;
-                                    setDuration(isNaN(Number(value)) ? 500 : Number(value));
-                                } }),
-                            React.createElement(Flex_1.Box, { className: "twa:text-2" }, "milliseconds"))),
-                        duration === 'always' && (React.createElement(Flex_1.Box, { className: "twa:text-3 twa:h-[43px]" }, "Persists the flashing style indeterminately - can be removed manually"))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
                         React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
                                 flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
                         React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
                                 flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
                         React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
+                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")),
+                    React.createElement(FormLayout_1.FormRow, { label: "Duration" },
+                        React.createElement(Flex_1.Flex, { alignItems: "center" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
+                            duration !== 'always' && (React.createElement(React.Fragment, null,
+                                React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
+                                        const value = event.target.value;
+                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
+                                    } }),
+                                React.createElement(Flex_1.Box, { className: "twa:text-2" }, "ms"))))))))));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -21,7 +21,7 @@ const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection"
 const Flex_1 = require("../../../components/Flex");
 const FlashingCellWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const [flashingCell, setFlashingCell] = (0, react_1.useState)(() => {
+    const [flashingCell, doSetFlashingCell] = (0, react_1.useState)(() => {
         let flashingCell = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
@@ -37,9 +37,12 @@ const FlashingCellWizard = (props) => {
         }
         return flashingCell;
     });
+    const setFlashingCell = (0, react_1.useCallback)((data) => {
+        doSetFlashingCell(data);
+    }, []);
     const updateProperty = (propName) => {
         return (value) => {
-            setFlashingCell((flashingCell) => {
+            doSetFlashingCell((flashingCell) => {
                 flashingCell = { ...flashingCell, [propName]: value };
                 return flashingCell;
             });
@@ -61,6 +64,14 @@ const FlashingCellWizard = (props) => {
         props.onFinishWizard(flashingCell);
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                details: 'Set Name, Duration and Target Properties',
+                isValid: FlashingCellSettingsWizardSection_1.isSettingsValid,
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                    React.createElement(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
+                title: 'Settings',
+            },
             {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: NewScopeComponent_1.isScopeValid,
@@ -84,13 +95,6 @@ const FlashingCellWizard = (props) => {
                 renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },
-            {
-                details: 'Set Duration and Target Properties',
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
-                renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
-                title: 'Settings',
-            },
             {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -9,9 +9,13 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const Flex_1 = require("../../../components/Flex");
-const Card_1 = require("../../../components/Card");
+const Tabs_1 = require("../../../components/Tabs");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name)),
         React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Data Rows ",
             React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
@@ -35,6 +39,12 @@ const renderFormatColumnSettingsSummary = (data) => {
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const onExcludeDataRowsChanged = (ExcludeDataRows) => {
         props.onChange({
             ...data,
@@ -71,33 +81,41 @@ const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Card_1.Card, null,
-        React.createElement(Card_1.Card.Title, null, "Settings"),
-        React.createElement(Card_1.Card.Body, null,
-            React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                React.createElement(FormLayout_1.default, null,
-                    data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
-                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
-                        React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
-                                props.onChange({
-                                    ...data,
-                                    ColumnGroupScope: columnGroupScope,
-                                });
-                            } },
-                            React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
-                            React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "Expanded"),
-                            React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "Collapsed"))))))));
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Configuration"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, null,
+                        data.Target === 'cell' && (React.createElement(React.Fragment, null,
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
+                            React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                                React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                    React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
+                            React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                    props.onChange({
+                                        ...data,
+                                        ColumnGroupScope: columnGroupScope,
+                                    });
+                                } },
+                                React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
+                                React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
+                                React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;